Cum ar proiecta Peggy Olson pentru interactiv

În epoca Mad Men, marketerii știau exact cum va fi consumată munca lor. Publicul țintă ar vedea anunțul la televizor, îl va auzi la radio, îl va vedea într-o revistă sau pe un panou publicitar și poate că ar veni în cutia poștală (melc). Dacă ați planificat un anunț tipărit sau o scrisoare de e-mail, știați exact dimensiunea imobilului pentru care proiectați și v-ați optimizat anunțul pentru a se potrivi cu acel spațiu. Consumatorul ar vedea acel conținut exact așa cum l-ați imaginat atunci când l-ați proiectat.

Dacă Peggy Olson ar crea o reclamă astăzi, ar trebui să ia în considerare contextul în care ar fi vizualizat anunțul și cum ar interacționa publicul ei țintă cu acesta. Nu ar exista nicio garanție că munca ei va fi văzută în modul în care și-a imaginat ea, așa că ar trebui să-și optimizeze aspectul și designul, astfel încât să aibă impact, indiferent de modul în care a fost vizualizată. Ar trebui să se asigure că apelul la acțiune (CTA) este clar, concis și descifrabil – chiar și pe un ecran de trei inchi.

Proiectarea paginilor web, a paginilor de destinație și a e-mailurilor astăzi este mult mai complicată decât era pe vremea lui Mad Men. Astăzi aveți dimensiunea adăugată a elementelor interactive și nu știți pe ce dispozitiv va fi vizualizat conținutul. Un aspect care arată perfect pe un ecran de computer de dimensiune completă ar putea fi o mizerie completă atunci când este vizualizat pe o tabletă sau un telefon inteligent. Un CTA care este neclar sau plasat în locul greșit vă poate distruge rata de implicare.

Trei bune practici cheie de design interactiv

Majoritatea consumatorilor de astăzi au capacitatea de atenție a unui muscăr. Aveți la dispoziție aproximativ două secunde pentru a le conecta atunci când accesează conținutul dvs. înainte de a decide dacă să facă sau nu clic pe ceva mai interesant. Este imperativ să înțelegeți aceste trei concepte atunci când proiectați un e-mail, o pagină de destinație sau o pagină web:

1. Cum afectează aspectul implicarea: aflați cum să dispuneți elementele pe o pagină pentru o implicare maximă
2. Cum afectează conținutul implicarea: știi ce mă va obliga să interacționez cu conținutul tău
3. Cât de important este timpul: aveți două secunde pentru a-mi atrage atenția

Sună simplu, nu? Dacă ar fi atât de simplu, nu aș fi scris asta! Nu vă pot spune câte piese de conținut întâlnesc zilnic, care mă frustrează până la punctul de a apăsa butonul Înapoi. Vorbesc de corporații mari cu buzunare adânci, dar fără sens de design.

Deci haideți să fim practici. Citiți mai departe pentru câteva sfaturi foarte simple care vă vor ajuta să vă optimizați aspectul paginii pentru implicare pe orice platformă.

Cum scanează ochiul o pagină

Primul lucru pe care trebuie să-l înțelegeți este modul în care ochiul uman urmărește un conținut. Când studiam publicitatea la facultate, ni s-a spus că ochiul este urmărit pe o pagină sub forma unui Z majuscul, începând din stânga sus. Sunt sigur că această teorie a fost concepută de un studiu care a pus un subiect de testat să se uite la bucăți de conținut în timp ce un tip în haină albă încerca să deseneze modelul mișcărilor ochilor pe o bucată de hârtie. Acest lucru a fost cu mult înainte de tehnologia hărții termice acum disponibilă pe scară largă, care este folosită pentru a vedea cum oamenii urmăresc paginile vizualizate online. Și, rețineți că oamenii scanează imprimarea ușor diferit față de conținutul online.

Consensul în zilele noastre este că ochiul urmărește un model F majuscul atunci când vizionează o bucată de conținut online, începând încă din stânga sus. În mod normal, ochiul tău urmărește orizontal mai întâi bara de sus a F, apoi a doua bară a F și, în final, de sus în jos în jos pe tija verticală a F.

Deci, ce înseamnă asta? Înseamnă că CTA trebuie să fie undeva în acel model F majuscul, sau trebuie să pui o mustață unui copil. Luați o decizie conștientă de design pentru a vă pune CTA principal într-un loc în care va atrage atenția spectatorului în primele două secunde.

Adevărate dezastre de design

Deci, să aruncăm o privire la un adevărat dezastru de design pe care unul dintre colegii mei de aici de la Act-On m-a ajutat să îl creez. Îmi pare rău să spun că exemplul de mai jos este extras din conținut real pe care l-am întâlnit online. Am folosit o companie fictivă numită Actomatic pentru a demonstra cele mai frecvente greșeli pe care le fac oamenii și cum să le corectez.

Exemplul 1: Nu mă face să defilez pentru a vedea CTA

Cea mai frecventă oportunitate ratată pe care o văd este o bucată de conținut care nu are nicio modalitate de a partaja sau de a partaja butoanele care sunt îngropate în partea de jos a paginii, sub pliul. Pliul este acea linie imaginară din partea de jos a ecranului. (Termenul provine din zilele în care ziarele erau îndoite în jumătate; „deasupra pliului” era o plasare mai bună, cu un număr mai bun de cititori.) Pe un ecran de laptop de dimensiune medie, îndoirea poate fi la 480 de pixeli din partea de sus a ecranului, dar pe un iPhone poate fi la 100 de pixeli de sus. Fiți conștienți de acest lucru atunci când aranjați conținutul paginii.

Dacă vorbim despre un blog sau un articol de mai multe pagini, m-aș aventura să ghicesc că majoritatea oamenilor sunt gata să distribuie după ce citesc titlul (dacă este bun) și primele două propoziții ale unui conținut, pentru că vor să ieși primul pe poartă. Oamenilor le place să distribuie conținut proaspăt, nu conținut pe care l-au văzut deja distribuit de colegii lor de cinci ori.

Vă sugerez să aveți butoane de partajare în partea de sus și de jos a conținutului sau butoane de partajare care plutesc alături de conținut atunci când derulați.

Am lucrat cu o companie foarte cunoscută care a constatat că, atunci când a adăugat butoane de partajare în partea de sus a unui articol, precum și în partea de jos, rata de acțiuni a crescut cu peste 400%.

Exemplul 2: O, ochii mei!

Ați ajuns vreodată la un conținut care era atât de ocupat încât nu știai unde să cauți? Poate avea un videoclip de partajat, un formular de completat, o copie, câteva link-uri ici și colo. Dacă aș ajunge pe pagina de mai jos, nu aș ști de unde să încep, așa că probabil că nu m-aș implica deloc. Acest exemplu nu îmi oferă nicio indicație despre ceea ce este cel mai important pe această pagină. Ai două secunde sau mai puțin să-mi captezi atenția și să mă implici și tocmai m-ai pierdut.

Dacă aveți mai multe CTA-uri, spuneți foarte clar care este ordinea logică a acestor elemente. Scrieți-l cu înștiințări numerotate, dacă trebuie. Dacă aș ajunge pe această pagină, mi-aș pune următoarele întrebări:

Aspectul pare neplanificat și neglijent, cu spații albe aleatorii și fonturi ciudate. CTA-urile sunt cu siguranță sub fold.

Dacă aș da sfaturi lui Actomatic, aș începe prin a-i întreba ce speră să obțină cu această pagină. Care este scopul aici? Presupun că obiectivele principale aici sunt de a determina oamenii să se înscrie pe blog și să vizioneze și să distribuie un scurt videoclip. Dacă este cazul, atunci trebuie să facem câteva modificări.

1. Asigurați-vă că CTA principal este deasupra pliului. Atât butoanele de distribuire, cât și butonul de Abonare sunt sub fold.
2. Spuneți clar că doriți ca vizitatorii să se înscrie pentru blog ȘI să distribuie videoclipul
3. Adăugați câteva informații despre companie

OK, hai să aruncăm o privire acum:

Versiunea nouă și îmbunătățită are un aspect ușor diferit, mai puține fonturi, o scurtă informație despre companie și videoclip și o barieră mai mică pentru a vă abona la blog. Am adăugat, de asemenea, linkuri în partea de jos și un buton de contact. Observați cum am optimizat aspectul pentru a maximiza câte informații ar vedea un cititor în primele două secunde, urmând modul în care ochiul scanează în mod natural pagina. Teoria modelului F spune că aceasta este ordinea în care privitorul va prelua elementele de pe pagină:

1. Logo-ul companiei
2. Titlurile
3. Butoanele de distribuire și abonare
4. Secțiunea Explorați din partea de jos

Dă-mi un motiv să interacționez

Acum că ați rezolvat totul, trebuie să îmi oferiți un motiv pentru a interacționa cu conținutul dvs. Dacă doriți să completez un formular sau să vă distribui conținutul, trebuie să existe un motiv convingător pentru a face acest lucru. Așa că lasă-mă să te întreb, ce este în asta pentru mine?

Dacă nu știi răspunsul la această întrebare, nu ți-ai făcut temele.

Principalul motiv pentru care oamenii interacționează cu conținutul este pentru că obțin un fel de satisfacție din el din punct de vedere emoțional sau material. Dacă conținutul tău este bun, îl voi împărtăși pentru că mă face să par bine informat în fața colegilor mei. Primesc o creștere a ego-ului dacă sunt primul care află despre un widget nou pe care tocmai l-ai lansat, așa că, desigur, voi împărtăși faptul că am ajuns să-l văd mai întâi.

Poate că ești o organizație non-profit și conținutul tău este o poveste de bine despre cineva care a făcut ceva extraordinar, voi împărtăși acel conținut pentru că mă face să mă simt bine și caritabil. Oferă-mi șansa de a câștiga un iPad dacă completez un formular și este mult mai probabil să-ți dau informațiile mele personale.

Trucul este să știi ce vă obligă publicul să se implice. Este o recompensă emoțională, o recompensă materială sau ambele? Pune-te în pielea lor și creează o strategie de implicare orientată către publicul tău.

Nu te complica

Am vorbit recent la o conferință în care am prezentat un studiu de caz al unei campanii de marketing social de succes. Am purtat un tricou cu acest imprimat pe față: #KeepItSimple. Încerc să exersez ceea ce predic.

Am lucrat cu clienți care au creat conținut interactiv extrem de complicat și cu alții care l-au păstrat incredibil de simplu, iar simplul câștigă aproape de fiecare dată. Iată cum să fie simplu:

• Alegeți fonturi precum Trebuchet, care sunt ușor de citit online.
• Nu amestecați prea multe fețe și dimensiuni de font pe o pagină. O dimensiune pentru titluri, o dimensiune pentru textul corpului.
• Păstrați-l la un CTA clar, dacă este posibil.
• Păstrați lucrurile importante deasupra pliului.
• Faceți bariera de intrare cât mai scăzută posibil (nu cereți primul copil al cuiva dacă tot ce aveți nevoie este adresa lui de e-mail)

Tema ta pentru acasă

Stai puțin, nu ai spus niciodată că vor fi teme la sfârșitul acestui articol! Dacă ți-aș fi spus că vor fi teme ai fi citit până aici? Uh huh. Aș dori să aruncați o privire la una dintre paginile dvs. de destinație cu un ochi critic și să vă întrebați dacă există loc de îmbunătățire.

• Vizualizați una dintre paginile dvs. de destinație pe un laptop și pe un dispozitiv mobil. Trebuie să derulați pentru a ajunge la CTA? Se afișează bine pe un dispozitiv mobil?
• Cereți unui prieten care nu știe nimic despre compania dvs. să vadă una dintre paginile dvs. de destinație și cereți-i să ofere feedback sincer în timp ce o vizionează. Cereți-i să vă spună ce observă mai întâi, ce face compania dvs. și care este CTA principală pe pagină.
• Vedeți dacă toate elementele importante se află în modelul F.
• Testează-ți paginile în cât mai multe browsere posibile pe cât mai multe platforme posibile. Safari nu redă elemente precum Chrome. Firefox nu redă elemente precum Internet Explorer (IE). Și diferite versiuni de IE pot afișa conținut complet diferit.

Nu trebuie să aveți o diplomă în aspect și design publicitar pentru a realiza acest lucru. Dar trebuie să fii dispus să te uiți la conținutul tău actual cu un ochi critic.

Merită efortul.