Proiectarea de interfețe focalizate pentru o mai bună implicare a utilizatorilor

Angajarea utilizatorilor este o metrică dificilă care poate fi realizată în moduri diferite pentru diferite proiecte. Cei mai mulți designeri se gândesc la interfață când vorbesc despre interactivitate, dar conținutul paginii poate încuraja și interacțiunea cu utilizatorul. Pentru o mai bună implicare a utilizatorilor, este important să scrie conținutul angajat, și să prezinte acest conținut într-un design atrăgător.

Este mult mai ușor de zis decât de făcut, dar dacă învățați niște fundamente nu veți avea nici o problemă de a crea o cu un conținut excelent pentru proiectele dvs..

În acest post, vă voi arăta cum să creșteți interacțiunea cu utilizatorul și implicarea în conținut pe interfețe bazate pe web. Acestea sunt cele două modalități cele mai comune de a angaja un vizitator și dacă puteți optimizați experiența nu veți avea nici o problemă prin creșterea valorii lucrative a timpului pe pagina de măsură.

Captură de noutate

Conceptul de noutate definește un eveniment sau un lucru care este, în general, nou, adesea foarte nou și unic bazat pe context. Evenimente noi prinde atenția noastră pentru că ei a iesi in evidenta. Acest lucru este valabil și pentru proiectarea interfeței cu noutatea care reprezintă elementele care par să sări de pe pagină.

Recent am găsit un post minunat care discută importanța noutății când vine vorba de angajament. Utilizatorii par să gravitează spre experiențe noi, interfețe și elemente UI pentru că sunt diferiți. Singurul fapt de a fi conceput diferit adesea atrage atenția.

Un exemplu comun este butonul de chemare la acțiune găsit în majoritatea paginilor de destinație. Puteți construi, de asemenea, noutate cu fotografii de fundal, ilustrații sau capturi de ecran ale aplicațiilor, cum ar fi pe pagina de destinație Uber for Business.

Această pagină are un buton de chemare la acțiune, dar atenția mea este imediat se duce la capturile de ecran. Ele animă atunci când sunt încărcate pentru a se combina astfel noutate de design cu mișcare pentru a atrage atenția.

O alternativă ar fi utilizarea GiftRocket ilustrate icoane ca link-uri pentru a vă alătura mai mult în site.

Ambele exemple utilizați noutatea în avantajul lor. Nu puteți atrage întotdeauna oameni mai mult pe site, dar veți vedea rezultate mai bune dacă le veți atrage atenția la un nivel visceral primul.

Designul este primul lucru vizitatorii văd și trebuie să-i atrageți atenția in cateva secunde pentru a încuraja implicarea în continuare.

Tipografie scumabilă

Studiile au constatat că majoritatea utilizatorilor scanați o pagină Web mai degrabă decât să o citiți cu cuvânt. Veți dori probabil să atrageți oameni să citească conținutul dvs., dar puteți face doar atât de mult.

Cea mai bună alternativă este de a crea conținut scump cu titluri, text îndrăzneț și imagini care ilustrează ceea ce încercați să spuneți. Mă gândesc cel puțin trei tehnici puternice de scriere puteți utiliza în conținutul dvs. pentru a crește lizibilitatea:

1. Împărțiți conținutul cu subtitrari clare
2. Întrerupeți paragrafele pentru a le face mai mici
3. Utilizați liste cu marcatori să vă împărțiți mai repede punctele

Scopul este de a vă păstra cititorii deplasarea în jos a paginii prin orice mijloace necesare. Prin păstrarea conținutului mic în bucăți de mâncare veți avea un timp mult mai ușor de a capta atenția și de ai conduce pe oameni în continuare pe site.

Consultați blogul Quick Sprout pentru un exemplu al acestui stil de scriere. Conținutul este scris de Neil Patel și adesea scrie foarte conținut lung, dar el descompune paragrafele în 1-3 fraze fiecare.

Daca ai titluri corecte, si foloseste imagini / marcatori pe tot cuprinsul conținutului îi vei face pe oameni să scape și să citească mai mult. De asemenea, asigurați-vă că măriți spațiul alb între paragrafe. Marginile și garniturile ambele joacă un rol imens în designul lățimii și lizibilitatea.

Proiectați textul astfel încât acesta să fie de fapt distractiv de citit. Plictisitor copie nu va atrage, dar nici o distracție copie care este prea mic sau lipsit de contrast.

Ochi-prinderea imaginilor

Un studiu de caz recent făcut de Backlinko sugerează că paginile cu cel puțin o imagine în general rang superior decât paginile fără imagini. Acest lucru este minunat din perspectiva SEO.

Dar implicarea utilizatorilor? Dacă puteți păstra acea singură imagine deasupra ori sau aproape de partea de sus va atrage, de asemenea, atenția vizitatorilor înainte de a sări. Amintiți-vă că elementele de pagină noi tind să atragă.

Când aveți o imagine (sau mai multe imagini) intercalată în întreaga pagină veți afla descompun monotonia de blocuri de text plictisitoare. Utilizatorii pot faceți o pauză de la citire pentru a aprecia imaginea sau pentru a face o conexiune între imagine și conținutul scris. Dar, la fel ca în cazul majorității tehnicilor de design, calitatea este mai valoroasă decât cantitatea.

Un studiu de caz Moz a constatat că imagini de înaltă calitate tind să păstrează vizitatorii pe pagina pentru mult mai mult timp. Pe de altă parte, imagini de calitate slabă nu funcționează la fel de bine și în unele cazuri au provocat vizitatori sări mai repede decât fără imagini. Ar trebui să încercați să includeți cel puțin o imagine care să fie relevante pentru conținut și asta oferă valoare cititorului.

TechCrunch face acest lucru cu imaginile prezentate în articolele pe care le veți găsi adesea fotografii de mai sus.

WordPress adaugă ușor imaginile recomandate cu funcția de miniatură postare. Puteți seta o fotografie distinctă pentru fiecare post pe care îl scrieți și le obligați să apară în partea de sus a paginii. Aceasta este o modalitate perfectă de a oferi vizitatorilor o privire despre ce contează conținutul, și să crească CTR pentru widget-urile postate care conțin și miniatură postare.

Contrastează elementele paginii

Dacă aveți nevoie să aduceți atenție unei anumite zone dintr-o pagină atunci asimetrie este prietenul tău cel mai bun. Contrast conduce o pană puternică între anumite zone ale unui design sau anumite blocuri de conținut.

Vizitatorul este în mod natural ravitate spre contrast pentru că este diferit. Juxtapoziții mari de culoare, dimensiune sau spațiu alb trage ochiul pentru că rupe mucegaiul tuturor celorlalte în aspect.

Exemplul meu preferat pentru elemente de pagină contrastante este probabil pagina de pornire a Sketch-ului. Există mult contrast găsit între cele două butoane de chemare la acțiune, unul pentru descărcarea unui proces Sketch, iar celălalt pentru a cumpăra o copie.

Butonul de achiziție utilizează o culoare de fundal plină mult mai strălucitoare decât alte culori din antet. Textul butonului este, de asemenea, mai strălucitor în comparație cu butonul de încercare gratuită. Aceasta conduce vizitatorii către butonul Cumpărați acum numai din stimuli vizuali.

Veți observa a tehnică similară pe pagina de pornire a lui Optin Monster. Acest antet are doar un buton numit Get OptinMonster Now. Este un buton verde stralucitor pe fundal albastru, fără alte elemente verzi.

Culoarea, mărimea și forma vă atrag atenția pentru că contrastează cu orice altceva în antet. Imediat lângă buton este un mic link text pentru o previzualizare video. Este probabil un film minunat și merită atenție, dar nu la fel de mult ca butonul CTA de încercare / înscriere.

Pentru un blog, este posibil să aveți calificări diferite pentru implicarea utilizatorilor. O alegere comună este a formularul de înscriere pentru newsletter cum ar fi exemplul Aeolidia.

Dacă parcurgeți în jos până la partea de jos a conținutului veți observa o cutie de însemnare fantezie concepute doar pentru formularul de newsletter. Se remarcă din restul paginii cu o culoare de fundal unică, o tipografie distractivă și o icoană drăguță a regelui Triton.

Cea mai bună modalitate de a proiecta cu contrast este de a studia exemple și de a experimenta doar. Vedeți ce funcționează și ce nu metrici de urmărire cu testarea A / B. Dacă sunteți în căutarea pentru mai multe exemple a verifica această scriere Codrops plin de sfaturi și ecrane de site-uri live asimetrice.

Încurajați interacțiunea cu utilizatorul

Există atât de multe modalități de a păstra vizitatorii interesați de un site, dar cel mai des întâlnit este face-i să facă lucruri. Acest lucru este valabil atât pentru blogurile statice, cât și pentru site-urile dinamice sociale. Nu există trucuri pentru acest lucru. Puteți face orice lucru pentru a le face pe utilizatori se simt logodiți cu pagina.

În a static site, ați putea adăuga o mulțime de conexiuni pentru a citi mai mult sau pentru a include prezentări de imagini. Poti de asemenea adăugați formulare pentru comentarii utilizator sau un buletin informativ de e-mail.

Cand vine vorba de interfețe dinamice, scopul site-ului este, de obicei, de a încuraja implicarea utilizatorului. Cel mai mare obstacol este învățarea utilizatorilor cum funcționează site-ul și cum să se angajeze în mod corespunzător cu interfața.

Verificați acest post de către KissMetrics vorbind despre tehnicile de implicare a utilizatorilor. Una dintre cele mai bune strategii pe care le-am găsit este proiectați un tur cu ghid care duce vizitatorii prin fiecare dintre caracteristicile principale.

Gândește-te la cât de confuză ar putea fi perspectiva Twitter pentru un utilizator nou. Dacă nu urmăresc pe nimeni și nu au nici un urmaș, de ce ar fi făcut tweet-ul?

“Urmați sugestiile” în timpul înscrierii îi ajută pe utilizatorii noi familiarizați-vă cu modul în care funcționează Twitter. Această caracteristică primește noi utilizatori începeți angajarea cu platforma, și la experimentați cu caracteristici cum ar fi următoarele, tweet-uri și mesaje private.

În afară de un tur cu ghid, veți dori, de asemenea face interfața directă. Principalele caracteristici ar trebui să fie 1-2 clicuri distanță din tabloul de bord al utilizatorului sau din pagina principală. Interfețe intuitive nevoie de explicații, și simplitate captează atenția mult mai repede.

Prin înțelegerea tuturor acestor tehnici, veți avea o interfață de construcție mai ușoară rezolva problemele utilizatorilor, și încuraja noi utilizatori să se alăture. Dacă căutați mai multe Sugestii de implicare în designul UX consultați aceste postări corelate:

• O tactică de îmbarcare a utilizatorilor pentru a crește angajamentul (Thinkapps.com)
• O lecție în angajarea treptată (Uxbooth.com)
• Nu presupuneți că utilizatorii noi vor să învețe cum să utilizați produsul (Uxdesign.cc)