Call to Action, kung ano sila at kung ano ang kanilang kahalagahan.

Ang mga call to action ay mga imbitasyon para kumilos. Sa disenyo ng Web at higit sa lahat, sa larangan ng kakayahang magamit, ang Mga Tawag sa Pagkilos ay tiyak na nakikilalang mga elemento na humihiling sa surfer na magsagawa ng isang aksyon. Malinaw, ang mga elementong ito, sa mga web interface, na iniisip lamang ang tungkol sa konsepto ng kakayahang magamit, ay nagiging napakalaking kahalagahan at dapat isaalang-alang nang may matinding katumpakan.

Karaniwan, ang Call To Actions, sa mga web interface, ay nasa anyo ng mga aktibong button, na, sa sandaling na-click, sumangguni sa navigator upang tapusin ang isang tumpak na aksyon (isang pagbabayad, pagpasok ng data sa isang form, isang pamamaraan ng pagbili, atbp ...)

Dahil sa kaselanan ng isyu, may mga tumpak na panuntunan para sa paggawa ng mga Calls To Action na matagumpay at pinakamainam. Ang ilang mga napaka-kagiliw-giliw na mga mungkahi ay ibinigay ng site MAGAZINE NA MABUTI, na nagbibigay ng medyo malaki at detalyadong paglalarawan na may mga tunay na halimbawa.

Samakatuwid, para sa lahat ng web designer, parehong mga eksperto at hindi mga eksperto, napakahalagang suriin ang mga aspeto na maaaring positibo o negatibong makaimpluwensya sa isang Cll To Action. At kaya, tapusin natin muli ang tungkol sa pagiging naa-access at kakayahang magamit. Mga katagang nahuhulog sa limot kamakailan at hindi ko maintindihan kung bakit.

Ang (kanan) copywriting para sa mga website at social network

Ang Call To Action, gayunpaman, ay hindi humihinto lamang sa graphic na aspeto:

bilang isang mahalagang elemento ng mapanghikayat na pagmemerkado, malinaw na kakailanganin din itong suriin sa mga tuntunin ng nilalaman. Iyon ay, kung ano ang nasa likod ng isang Call to Action at kung bakit dapat mag-click ang navigator doon mismo at hindi sa ibang lugar.

Ang Call To Action ay isang tunay na tawag sa pagkilos, ang pagkilos na kailangan mong himukin o gusto mong gawin at nasa saklaw ng mapanghikayat na komunikasyon dahil kapag nakarating na ang user sa aming site, hindi namin siya dapat payagan na umalis, sa kabaligtaran, kailangan pa nga namin siyang kumbinsihin na gumawa ng isang bagay na maaaring maging bentahe para sa dalawa, iyon ay para sa amin at para sa gumagamit. Sa palagay ko, sa katunayan, aminin natin, alam kong sigurado, na ang 10.000 araw-araw na pagbisita na may bounce rate (bounce rate) na 99% ay hindi gaanong kapaki-pakinabang kaysa sa 500 na may bounce rate na 10% at isang rate ng conversion na 5 o kahit 10%.

Alam namin na ang pagganap ng site sa mga tuntunin ng bilang ng mga bisita at bounce rate ay nakasalalay din sa uri ng site ngunit totoo rin na ang isang corporate website ay ginawa para sa "nagnenegosyo" at hindi upang magsuklay ng mga manika at samakatuwid ito ay mahalaga na ang bisita ay mananatiling "sa aming bahay" o sa halip sa site para sa higit sa 30 segundo, nagsasagawa ng mga aksyon na sinubukan naming hikayatin silang gumanap. Kung hindi, ano ang pinag-uusapan natin?

Halimbawa, sa kaso ng mga corporate site ito ay napakahalaga makipag-ugnayan kasama ang bisita, sa kaso ng mga site ng eCommerce ito ay kinakailangan magbenta ng mga produkto, sa kaso ng mga site ng impormasyon ito ay kinakailangan catalyze pansin posibleng humiling ng huling komento; nariyan din ang kahahantungan ng gusto lang gumawa ng mga tatak, at maaaring tumagal ng mas kaunting oras, ngunit isa pang kuwento iyon.

La gisingin ay isang mahalagang bahagi ng mapanghikayat na copywriting: kailangan mong walisin ang lahat ng mga pagdududa ng potensyal na customer para itulak siya sa pagkilos. Hindi ko sinasabing dayain mo siya, isip mo, kundi para maipaunawa sa kanya ang tunay na halaga ng produkto (o serbisyo) na ibinebenta mo at higit sa lahat ang aktwal na pangangailangan, minsan hindi naipahayag.

Ang pagiging naa-access ng mga call to action ay malapit na nauugnay sa dalawang aspeto: ang mga semantika ng mga label na ginamit upang tukuyin ang isang aksyon at ang paraan kung saan isinasagawa ang pagkilos na ito.

Ang semantika ng mga call to action ay dapat na maliwanag. Ang isang button, isang link, ay dapat may label na eksaktong tumutukoy sa aksyon na gagawin ng user. Nakita ko kamakailan ang mga pagbabagong ginawa ng ilang mga social network at CMS sa tawag sa mga aksyon ng mga pag-upload ng imahe: karaniwang mayroon kaming dalawang mga pindutan na nagbabasa ng "Pumili ng imahe". Hindi kapani-paniwala, wala itong button na nagsasabing "Mag-upload ng Mga Larawan". Lumilikha ito ng pagkalito para sa mga user, na iniisip din na ang sinumang nagsu-surf gamit ang isang screen reader ay may pananaw Serye sa TV ng page, ibig sabihin, wala itong pandaigdigang sulyap na karaniwan sa mga user na nagna-navigate gamit ang isang visual na browser.

Ang mga hindi malinaw na label ay dapat na iwasan, generic o hindi malinaw. Ang isang label na dapat iwasan ay "Mag-click dito". Kung nagba-browse ka sa isang page na may parehong label na call to action gamit ang isang screen reader, makakarinig ka ng walang katapusang serye ng "(link) Mag-click dito" na hindi magbibigay sa iyo ng anumang kapaki-pakinabang na impormasyon tungkol sa uri ng pagkilos na iyong ia-activate.

Ang isa pang dapat iwasan ay ang pag-abuso sa katangian title ilang link. Kapag ginamit nang maingat, ang katangiang ito ay maaaring magbigay ng mahalagang impormasyon sa konteksto tungkol sa pagkilos na isasagawa, ngunit kapag nagamit nang sobra, ginagawa nitong isang pagsubok ang pag-navigate sa pahina. Sa katunayan, iniuugnay ng mga screen reader ang bawat link sa sarili nitong pamagat at binabasa ito bago ang nilalaman ng elemento.

Mula sa isang graphic na pananaw, at isinasaisip ang mga pangangailangan ng mga user na may kapansanan sa paningin, ang mga elementong iyon na nagpapaalala sa isang aksyon ay dapat na malinaw na nakikita at nakaluwag, na may mga font na may sapat na laki upang payagan ang madaling pagbabasa. Pinakamahalaga, ang ilang mga pag-aayos sa antas ng CSS ay dapat gamitin upang payagan ang mga naturang elemento na umangkop sa mga pagbabago sa laki ng font na maaaring gawin ng isang user na may kapansanan sa paningin sa pahina. Panghuli ngunit hindi bababa sa, dapat silang magkaroon ng sapat na kaibahan ng kulay sa pagitan ng teksto at background, upang maiwasan ang mga problema sa mga may color blindness.

nginx: isang bagong web server

JavaScript at ang tamang paggamit nito

Tungkol sa kung paano na-trigger ang mga pagkilos na ito, kailangan nating isipin ang tungkol sa JavaScript.

Tandaan natin na ang JavaScript at pagiging naa-access ay hindi magkatugma, hangga't iginagalang mo ang ilang simpleng pinakamahusay na kagawian. Isa sa mga alalahaning ito ay mga link at kung paano panatilihing naa-access ang mga ito kahit na hindi pinagana o hindi suportado ang JavaScript. Sa ganitong kahulugan, kinakailangan na makilala ang pagitan ng mga epektibong link (na humahantong sa user sa isang bagong pahina o kung saan ay nagli-link sa mga mapagkukunan) at mag-trigger ng mga link, ibig sabihin, mga link na walang aktwal na nilalaman ngunit nagsisilbing "mag-trigger" ng mga pagkilos sa JavaScript.

Isang pagsasanay na dapat iwasan ay iyon ng mga link na walang halaga para sa katangian href, Bilang <a href="" id="trigger" >...</a>. Sa mga browser na walang suporta sa JavaScript gaya ng Lynx, ang naturang link ay magiging sanhi ng ganap na pag-reload ng pahina. Siyempre maaari naming ganap na mabuo ang trigger gamit ang JavaScript, ngunit pagkatapos ay hindi magiging available ang link kung hindi sinusuportahan o hindi pinagana ang JavaScript. Ginagamit din ng maraming static na site ang diskarteng ito upang makabuo ng mga permanenteng link, dahil ituturing ng browser ang kasalukuyang page bilang ang nawawalang value ng attribute href.

Samakatuwid ito ay kinakailangan upang bigyan ng halaga ang katangiang ito, isinasaalang-alang din ang katotohanan na para sa mga detalye ng XHTML ang katangian href Hindi ito maaaring walang laman. Ngunit alin? Marami ang piniling gamitin ang hash character (#) bilang kanilang punan. Gayunpaman, kahit na ang solusyon na ito ay may mga limitasyon, tulad ng JavaScript na hindi pinagana o hindi suportado ay makukuha namin ang epekto ng paglikha ng isang sanggunian sa isang hindi umiiral na anchor, na maaaring disorient sa mga nagsu-surf sa Web gamit ang non-visual na pantulong na teknolohiya.

Ang solusyon, siyempre, ay nasa pagitan: maaari tayong gumawa ng anchor na tumuturo sa aktwal na nilalaman sa pahina. Sa kaso ng nilalamang nabuo sa pamamagitan ng JavaScript, maaari kaming gumamit ng diskarteng tulad nito:

Tulong Ang email ay dapat nasa username@domain.extension na format

I-istilo natin ang ating div, na itatago natin sa JavaScript. Kung ang JavaScript ay hindi suportado o hindi pinagana, ang aming div ay mananatiling nakikita. Para itago ito, gumamit tayo ng CSS class para mai-link kapag na-load ang dokumento:

.hidden { position: absolute; itaas: -1000em; }

Ang parehong jQuery at Prototype ay may mga pamamaraan para sa pagtatago ng isang elemento, ngunit tandaan na ginagamit nila ang deklarasyon display: none. Ang deklarasyon na ito sa kasamaang-palad ay binibigyang-kahulugan ng mga screen reader, na may bahagyang suporta para sa JavaScript, na pumipigil sa kanila na basahin ang nilalaman ng isang elemento. Sa puntong ito, kung gagamit tayo ng jQuery, maaari tayong sumulat:

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

Sinadya kong iwasang ipasok ang deklarasyon return false; dahil nagagawa ng ilang screen reader na bigyang-kahulugan ang isang kaganapan click, itinutumbas ito sa isang kaganapan sa keyboard sa ilang mga kaso. Kung ako ay naglagay ng ganoong deklarasyon, ang mga naturang programa ay hindi sumunod sa patutunguhan ng link at samakatuwid ay hindi mababasa ang mga nilalaman ng aming div. Ang tanging hindi kasiya-siyang epekto para sa mga normal na browser ay ang makitang idinagdag ang anchor sa URL ng kasalukuyang pahina, ngunit hindi ito sa anumang paraan makakaapekto sa pagiging naa-access at kakayahang magamit nito.

Sa naaangkop na mga pagbabago, ang parehong mga obserbasyon ay nalalapat din sa mga pindutan, na malinaw na isinasaisip ang mga pagkakaiba sa casuistry ng mga kaganapan sa JavaScript na magagamit.

Ang unang prinsipyo ng kakayahang magamit na nalalapat sa mga call to action ay angpagkakakilanlan. Ang isang call to action ay dapat palaging agad na makikilala ng user at ang function nito ay madaling maunawaan. Mayroong dalawang aspeto na kasangkot:

• layout ng call to action
• pag-label ng call to action

Ang bawat aspeto ay inextricably naka-link sa isa. Ang layout ng isang call to action ay hindi dapat makaapekto sa pagkilala nito. Ang isang pindutan sa isang form, gayunpaman binago gamit ang CSS, ay dapat palaging mag-isip sa gumagamit na "Ngayon ay nag-click ako dito". Sa katunayan, ayon kay Steve Krug, ang gumagamit ay dapat mag-click nang hindi iniisip kung ang nakikita niya ay isang pindutan o hindi. Ang pagkilos ay dapat na agaran (sa loob ng 300 millisecond o higit pa, eksakto tulad ng itinatag ng kamakailang pananaliksik sa karanasan ng user).

Sa halip, ang pangalawang aspeto ay nauugnay sa kung paano tinukoy ang isang call to action sa verbatim. Ang mga label ay dapat na simple, malinaw, maliwanag. Ang isang halimbawa ay ang pagsasalin ng item na "I-save" sa menu ng konteksto ng mga application ng Mac OS X: sa Italyano, ang item na ito ay nai-render bilang "Record", na tiyak na hindi ang pinakamahusay sa mga tuntunin ng kalinawan. Kaya kung ang isang pindutan ay upang ilunsad ang isang search engine, ang label ay dapat na basahin ang "Search" at iba pa. Sa kasong ito ang imahinasyon ay dapat magbigay daan sa sentido komun: ang mga kombensiyon sa kasong ito ay lubhang kapaki-pakinabang.

Malinaw na marami pa ring maisusulat tungkol sa paksa ngunit ang layunin ng mahabang artikulong ito ay higit pa sa anupaman upang makapag-isip ang mga tao, upang magkaroon ng kamalayan sa kung ano ang ginagawa at higit sa lahat upang maunawaan na ang isang simpleng pindutan na dapat humantong sa pakikipag-ugnay sa iyo o pagpapadala ng isang email o isang kahilingan, ay hindi isang maliit na bagay.

Disenyo para sa mga kumpanya, Sketchin: “Palaging magsimula sa pagbabago…”