Call to Action, vad de är och vad är deras betydelse.

Uppmaningar till handling är inbjudningar att vidta åtgärder. Inom webbdesign och framför allt inom användbarhetsområdet är Calls to Actions just urskiljbara element som uppmanar surfaren att utföra en åtgärd. Uppenbarligen blir dessa element, i webbgränssnitt, bara med tanke på begreppet användbarhet, av enorm betydelse och måste övervägas med extrem precision.

Normalt tar Call To Actions, i webbgränssnitt, formen av aktiva knappar, som, när de har klickats, hänvisar navigatorn att slutföra en exakt åtgärd (en betalning, inmatning av data i ett formulär, en köpprocedur, etc ...)

Med tanke på sakens känslighet finns det precisa regler för att göra Calls To Actions framgångsrika och optimala. Några mycket intressanta förslag ges av webbplatsen SMASHING MAGASIN, vilket ger en ganska stor och detaljerad illustration med verkliga exempel.

Därför är det mycket viktigt för alla webbdesigners, både experter och icke-experter, att utvärdera de aspekter som positivt eller negativt kan påverka en Cll To Action. Och så, låt oss avsluta med att prata om tillgänglighet och användbarhet igen. Termer som faller i glömska på sistone och jag förstår inte varför.

(rätt) copywriting för webbplatser och sociala nätverk

Uppmaningen till handling stannar dock inte bara vid den grafiska aspekten:

eftersom det är en viktig del av övertygande marknadsföring, är det tydligt att den också måste utvärderas i termer av innehåll. Det vill säga vad som ligger bakom en Call to Action och varför navigatorn måste klicka just där och inte någon annanstans.

Uppmaningen till handling är en verklig uppmaning till handling, den handling som du måste framkalla eller som du vill ska göras och faller inom ramen för övertygande kommunikation för när användaren väl har kommit till vår sida får vi inte tillåta honom att lämna, tvärtom måste vi till och med övertyga honom om att göra något som kan bli en fördel för båda, det vill säga för oss och för användaren. Jag är av den åsikten, faktiskt, låt oss inse det, jag vet med säkerhet, att 10.000 99 dagliga besök med en avvisningsfrekvens (avvisningsfrekvens) på 500 % är mindre användbara än 10 med en avvisningsfrekvens på 5 % och en konverteringsfrekvens på 10 eller till och med XNUMX %.

Vi är väl medvetna om att webbplatsens prestanda i termer av antal besökare och avvisningsfrekvens också beror på typen av webbplats, men det är också sant att en företagswebbplats är gjord för "göra affärer" och att inte kamma dockorna och därför är det viktigt att besökaren stannar "hemma hos oss" eller snarare på platsen i mer än 30 sekunder och utför åtgärder som vi har försökt få dem att utföra. Annars, vad pratar vi om?

Till exempel när det gäller företagssajter är det mycket viktigt ta kontakt med besökaren, när det gäller e-handelssajter är det nödvändigt sälja produkter, när det gäller informationssajter är det nödvändigt katalysera uppmärksamhet eventuellt begära en sista kommentar; det finns också möjligheten att bara vilja göra varumärken, och det kan ta mycket kortare tid, men det är en annan historia.

La ringa till handling är en integrerad del av övertygande copywriting: du måste sopa bort alla potentiella kunders tvivel för att driva honom till handling. Jag säger inte att lura honom, märk väl, utan att kunna få honom att förstå det verkliga värdet av produkten (eller tjänsten) du säljer och framför allt det faktiska behovet, ibland outtalat.

Tillgängligheten för uppmaningar är nära kopplad till två aspekter: semantiken för de etiketter som används för att identifiera en åtgärd och det sätt på vilket denna åtgärd utförs.

Semantiken för uppmaningar bör vara självförklarande. En knapp, en länk, ska ha en etikett som exakt identifierar den åtgärd som användaren ska utföra. Jag såg nyligen ändringarna som gjorts av vissa sociala nätverk och CMS i uppmaningen till åtgärder för bilduppladdningar: nu har vi i princip två knappar som läser "Välj bild". Otroligt nog saknar den en knapp som säger "Ladda upp foton". Detta skapar förvirring för användarna, även med tanke på att alla som surfar med en skärmläsare har en vision seriale på sidan, det vill säga den saknar den globala blick som är typisk för användare som navigerar med en visuell webbläsare.

Vaga etiketter bör undvikas, generisk eller otydlig. En etikett som bör undvikas är "Klicka här". Om du bläddrar på en sida som har liknande uppmaningar med en skärmläsare, kommer du att höra en oändlig serie av "(länk) Klicka här" som inte ger dig någon användbar information om vilken typ av åtgärd du ska aktivera.

En annan sak att undvika är attributmissbruk title några länkar. När det används diskret kan det här attributet ge värdefull kontextuell information om åtgärden som ska utföras, men när det överanvänds förvandlar det sidnavigering till en prövning. Faktum är att skärmläsare associerar varje länk med sin egen titel och läser den före elementets innehåll.

Ur en grafisk synvinkel, och med tanke på behoven hos synskadade användare bör de element som påminner om en åtgärd vara tydligt synliga och i relief, med teckensnitt som är tillräckligt stora för att möjliggöra enkel läsning. Det viktigaste är att vissa justeringar på CSS-nivå bör användas för att tillåta sådana element att anpassa sig till ändringar i teckenstorlek som en synskadad användare kan göra på sidan. Sist men inte minst bör de ha en adekvat färgkontrast mellan text och bakgrund, för att undvika problem med de som har färgblindhet.

nginx: en ny webbserver

JavaScript och dess korrekta användning

När det gäller hur dessa åtgärder utlöses måste vi tänka på JavaScript.

Låt oss komma ihåg att JavaScript och tillgänglighet inte är inkompatibla, så länge du respekterar några enkla bästa praxis. En av dessa gäller länkar och hur man håller dem tillgängliga även om JavaScript är inaktiverat eller inte stöds. I denna mening är det nödvändigt att skilja mellan effektiva länkar (som leder användaren till en ny sida eller som i alla fall länkar till resurser) och utlösande länkar, det vill säga länkar utan egentligt innehåll men som tjänar till att "utlösa" JavaScript-åtgärder.

En praxis som bör undvikas är länkar utan värde för attributet href, Som <a href="" id="trigger" >...</a>. I webbläsare utan JavaScript-stöd som Lynx, kommer en sådan länk att göra att sidan laddas om helt. Naturligtvis kan vi helt och hållet generera utlösaren med JavaScript, men då kommer länken inte att vara tillgänglig om JavaScript inte stöds eller inaktiveras. Många statiska webbplatser använder också denna teknik för att generera permanenta länkar, eftersom webbläsaren kommer att betrakta den aktuella sidan som det saknade attributvärdet href.

Därför är det nödvändigt att ge ett värde till detta attribut, även med tanke på det faktum att för XHTML-specifikationerna attributet href Det får inte vara tomt. Men vilken? Många har valt att använda hash-tecknet (#) som fyllning. Men även denna lösning har begränsningar, eftersom med JavaScript inaktiverat eller inte stöds kommer vi att få effekten av att skapa en referens till ett icke-existerande ankare, vilket kan desorientera de som surfar på webben med icke-visuell hjälpteknik.

Lösningen ligger förstås någonstans mittemellan: vi kan faktiskt skapa ett ankare som pekar på faktiskt innehåll på sidan. När det gäller innehåll som genereras via JavaScript kan vi använda ett tillvägagångssätt som detta:

Hjälp E-postmeddelandet måste vara i formatet användarnamn@domän.tillägg

Låt oss styla vår div, som vi gömmer med JavaScript. Om JavaScript inte stöds eller inaktiveras kommer vår div helt enkelt att vara synlig. För att dölja det, låt oss använda en CSS-klass att länka till när dokumentet laddas:

.hidden { position: absolut; topp: -1000em; }

Både jQuery och Prototype har metoder för att dölja ett element, men kom ihåg att de använder sig av deklarationen display: none. Denna deklaration tolkas tyvärr av skärmläsare, som har delvis stöd för JavaScript, vilket hindrar dem från att läsa innehållet i ett element. Vid det här laget, om vi använder jQuery, kan vi skriva:

$('#trigger').click(function() { $('#email-help').removeClass('hidden'); });

Jag har medvetet undvikit att infoga deklarationen return false; eftersom vissa skärmläsare kan tolka en händelse click, likställer det med en tangentbordshändelse i vissa fall. Om jag hade infogat en sådan deklaration hade sådana program inte följt länkens destination och skulle därför inte ha kunnat läsa innehållet i vår div. Den enda obehagliga effekten för vanliga webbläsare är att se ankaret läggs till URL:en för den aktuella sidan, men detta påverkar inte dess tillgänglighet och användbarhet på något sätt.

Med lämpliga modifieringar gäller samma observationer även för knappar, uppenbarligen med tanke på skillnaderna i kasuistiken av tillgängliga JavaScript-händelser.

Den första användbarhetsprincipen som gäller för uppmaningar äridentifierbarhet. En uppmaning till handling ska alltid vara omedelbart igenkännbar av användaren och dess funktion lätt att förstå. Det finns två aspekter inblandade:

• layouten för uppmaningen
• märkning av uppmaningen

Varje aspekt är oupplösligt kopplad till den andra. Utformningen av en uppmaning bör aldrig påverka dess erkännande. En knapp på ett formulär, oavsett om det är modifierat med CSS, ska alltid få användaren att tänka "Nu klickar jag här". Enligt Steve Krug ska användaren faktiskt klicka utan att tänka på om det han ser är en knapp eller inte. Åtgärden bör vara omedelbar (inom 300 millisekunder eller så, exakt som fastställts av nyare forskning om användarupplevelse).

Den andra aspekten är istället relaterad till hur en uppmaning till handling definieras ordagrant. Etiketter ska vara enkla, tydliga, självförklarande. Ett exempel är översättningen av "Spara"-objektet i snabbmenyn för Mac OS X-program: på italienska har detta objekt renderats som "Record", vilket verkligen inte är det bästa ur tydlighetssynpunkt. Så om en knapp ska starta en sökmotor bör etiketten läsa "Sök" och så vidare. I det här fallet borde fantasin ge vika för sunt förnuft: konventionerna i det här fallet är mycket användbara.

Det är klart att det fortfarande skulle finnas så mycket att skriva om ämnet men syftet med denna långa artikel är mer än något annat att få folk att tänka till, att bli medvetna om vad som görs och framför allt att förstå att en enkel knapp som ska leda till att man kontaktar dig eller skickar ett mejl eller en förfrågan inte är en så trivial sak.

Design för företag, Sketchin: "Börja alltid från förändring..."