Îmbunătățiți resursele de utilizare și îmbunătățiți. Butonul de navigare „Înapoi la început”. Împărțiți sarcinile mari și complexe în operațiuni mai mici
Astăzi, mulți designeri consideră animația ca ceva care face un design mai frumos și mai vibrant și o folosesc rareori pentru a îmbunătăți gradul de utilizare. Pentru a îmbunătăți gradul de utilizare a paginii de destinație, animația ar trebui să fie element funcţional, și nu doar decor. Dacă vrei să înveți cum să folosești animația pentru a face un design atât atractiv, cât și convenabil, atunci acest articol este pentru tine.
1. Creați un concept
Fiecare designer este un povestitor. Când creează un site web, le spune o poveste vizitatorilor săi. Folosind animația, putem face această poveste și mai interesantă.
Animația dă viață conținutului, făcându-l mai atractiv și mai memorabil. Un bun exemplu de astfel de animație poate fi găsit pe site-ul Ikonet. Animația captivează utilizatorul din prima secundă de a fi pe pagină.
Animația poate acționa și ca un ghid, explicând utilizatorului cum să interacționeze cu interfața sau site-ul. Atrăgând astfel atenția utilizatorului asupra lucrurilor importante. De exemplu, dacă trebuie să subliniați anumite informații sau acțiuni, faceți-o să scape de undeva și să fie destul de vizibilă. Aruncă o privire la exemplul lui Preston Zeller de mai jos. Elementele apar pe rând pe pagini, atrăgând astfel atenția utilizatorilor asupra anumitor zone ale paginii.
2. Oferiți feedback
Interacțiunea om-calculator se bazează pe două principii principale: introducerea utilizatorului și intrarea sistemului. Părere. Toate obiecte interactive trebuie să răspundă la intrarea utilizatorului cu vizual sau semnal sonor. Oferind astfel feedback.
Mai jos este un efect de casetă de selectare personalizat creat folosind cadrul Slides. Animația subtilă de sărituri pe care utilizatorul o vede când folosește comutatorul îmbunătățește sentimentul de interactivitate.
Cu diapozitive, puteți crea animații dulci care se activează la hover, încurajând astfel utilizatorii să interacționeze cu obiectele. Aruncă o privire la Berry Visual. Când treceți cu mouse-ul peste „Trimiteți mesaj” sau pe meniul din dreapta colțul de sus, apare un efect animat frumos. Acest lucru creează un sentiment de interactivitate între elemente.
Buf Antwerp este un alt exemplu grozav al modului în care feedback-ul animat se poate îmbunătăți experiența utilizatorului. Când vizitatorii trec cu mouse-ul peste o placă, apare o suprapunere semi-transparentă cu text care oferă Informații suplimentare despre obiect.
3. Faceți o conexiune
Un loc minunat pentru a adăuga animație la pagina de destinație este în punctele de tranziție. Adesea, tranzițiile par abrupte, cum ar fi atunci când utilizatorii fac clic pe un link și apare o fereastră nouă. Astfel de modificări duc de obicei la o pierdere de context, creierul trebuie să scaneze noua pagină pentru a înțelege cum se raportează la cea anterioară, astfel încât utilizatorii pot găsi astfel de tranziții dificil de perceput.
Să ne uităm la un exemplu de tranziție bruscă:
Comparați acest lucru cu următorul exemplu, în care o tranziție animată lină direcționează utilizatorul către diverse părți ecran:
A doua tranziție este mai blândă. Demonstrează clar procesul de tranziție între secțiuni, ajutând utilizatorii să înțeleagă ce se întâmplă și să vadă conexiunile dintre ele.
Se folosește și la crearea tranzițiilor între etape. Tranzițiile line între diapozitive din exemplul de mai jos creează un sentiment de consistență, astfel încât informațiile să nu pară coezive.
4. Faceți sarcinile plictisitoare interesante
Poate fi dificil să-ți imaginezi cum poți adăuga elemente jucăușe la rutina ta zilnică. Dar adăugând o mică surpriză animației, putem transforma o interacțiune familiară în ceva distractiv și memorabil.
Dacă deschideți site-ul web al expoziției Tympanus’ 3D Room, la prima vedere va părea că nu este diferit de alte galerii web. Dar impresia ta se va schimba imediat după interacțiunea cu pagina. Dacă mutați cursorul, veți vedea pagina mișcându-se, iar acest efect va crea o senzație de spațiu 3D. Acest sentiment se intensifică pe măsură ce treceți de la o pagină la alta. Este ca și cum ai călători dintr-o cameră în alta într-un spațiu tridimensional.
Acum să vorbim despre ceva mai familiar decât efectele 3D - despre forme. Cui îi place să completeze formulare? Probabil nimeni. Cu toate acestea, completarea formularelor este una dintre cele mai frecvente sarcini de pe Internet. Cum poți face această activitate distractivă?
Priviți imaginea de mai jos, yeti-ul închide ochii când utilizatorul începe să-și introducă parola. Acest efect animat este surprinzător și înălțător, mai ales dacă îl vedeți pentru prima dată.
Nu în ultimul rând, puteți face derularea nu numai interesantă din punct de vedere vizual, ci și utilă pentru cititori. Mai jos este , o călătorie interactivă în care traseul de pe hartă este animat în funcție de conținutul paginii. Coerența ideii efecte vizuale iar locația permite utilizatorilor să citească informații și să vadă mișcările lor pe hartă.
Determinarea locului de pe pagină în care animația va fi cea mai utilă este doar jumătate din poveste. Implementarea animației este, de asemenea, de mare importanță. În această secțiune veți învăța cum să animați corect obiectele la nivel profesional.
1. Nu animați mai multe obiecte deodată
Când mai multe obiecte se mișcă în același timp, este dificil pentru utilizator să se concentreze. Pentru că ochii unei persoane se vor muta de la un obiect la altul, iar creierul va avea nevoie Timp suplimentar pentru a înțelege ce se întâmplă (mai ales dacă mișcarea are loc foarte repede). Prin urmare, este foarte important să implementați corect animația.
Este esențial să înțelegeți conceptul de coregrafie de tranziție, care este o secvență de mișcări care mențin concentrarea pe măsură ce interfața se schimbă. Minimizați numărul de elemente care se mișcă simultan. Utilizați nu mai mult de două sau trei părți mobile simultan. Dacă doriți să puneți în mișcare mai mult de trei obiecte, grupați-le și animați-le ca un întreg, mai degrabă decât elemente individuale.
Slide-urile sunt extrem de utile în web design, deoarece vă permit să utilizați mai puțină mișcare. Fiecare efect animat prezent în diapozitive a fost proiectat cu atenție pentru a prezenta în mod eficient conținutul.
2. Animația nu trebuie să intre în conflict cu caracteristicile individuale ale paginii de destinație
De fiecare dată când adăugați animație unui design, îl faceți mai expresiv. Aspectul său va depinde în mare măsură de efectul animat pe care îl alegeți.
Când oamenii interacționează cu un produs, au anumite așteptări. Imaginați-vă că, atunci când creați o pagină de destinație pentru un serviciu bancar, decideți să utilizați o animație de respingere pentru formularul de colectare a datelor. Mulți utilizatori se vor teme să-și ofere detaliile deoarece formularul nu pare suficient de serios.
Cadrul Slides oferă 10 stiluri animate, cum ar fi Stack, Zen, Film, Cards și Zoom. Experimentează cu diferite efecte și alege-l pe cel care se potrivește cel mai bine tuturor criteriilor tale.
3. Setați-vă sincronizarea
Când vine vorba de crearea animației, sincronizarea este totul. El decide literalmente soarta animației. Când lucrați la animație, de obicei petreceți o treime din timp găsind efectele animate potrivite, iar restul timpului alegeți momentul pentru a face animația să arate grațioasă.
Viteza optimă a animației UI este între 200 și 500 de milisecunde. O animație care durează mai puțin de 1 secundă este considerată instantanee, în timp ce o animație care durează mai mult de 5 secunde se poate simți întinsă.
Când vine vorba de crearea unui efect animat, sincronizarea are un impact direct asupra modului în care este percepută animația. Ajută designerii să facă animația mai naturală și mai naturală.
4. Nu uita de accesibilitate
Animația este o sabie cu două tăișuri. Poate îmbunătăți gradul de utilizare pentru un grup de utilizatori în timp ce creează probleme pentru un alt grup. Eliberare Apple iOS 7 a devenit un exemplu de ceea ce nu trebuie făcut. La scurt timp după eliberare sistem de operare, utilizatorii de iPhone a raportat că tranzițiile animate au cauzat amețeli și oboseală oculară.
Trebuie să țintiți masele și să țineți cont de dizabilități precum problemele de vedere și așa mai departe. Verificați întotdeauna dacă designul dvs. respectă liniile directoare WCAG. Urmăriți solicitările și comentariile utilizatorilor.
O caracteristică media CSS specială, „preferă mișcare redusă”, ajută la urmărirea situațiilor în care utilizatorul solicită să minimizeze numărul de animații.
În plus, ar trebui să efectuați teste de utilizare pentru a verifica că toți utilizatorii, inclusiv cei cu deficiențe de vedere, nu vor avea nicio problemă în a interacționa cu designul dvs.
5. Testați-vă soluțiile de proiectare
Iată câteva sfaturi de care trebuie să țineți cont atunci când testați:
- Testare pe diferite echipamente.
Multe specificații hardware, cum ar fi dimensiunea ecranului, densitatea ecranului, performanța GPUși așa mai departe, poate afecta semnificativ performanța animației. Drept urmare, proprietarul este mai mult ecran de calitate va vedea o imagine diferită de cea a proprietarului unui dispozitiv mai vechi. Luați în considerare acești factori și optimizați-vă animația, astfel încât să arate grozav pe toate dispozitivele.
- Testează pe un telefon mobil.
Majoritatea site-urilor web sunt create și testate pe un computer. Lipsa de testare pt dispozitive mobile poate crea o mulțime de probleme pentru utilizatori, deoarece unele tehnici animate funcționează excelent pe computer, dar nu și pe dispozitive mobile. Pentru a împiedica utilizatorii să aibă o experiență negativă, asigurați-vă că designul dvs. funcționează excelent atât pe desktop, cât și pe dispozitive mobile.
- Urmărește animația cu viteză mică
Este greu de observat defecte atunci când animația (în special cele complexe) rulează viteza maxima. Dar atunci când încetiniți animația (să zicem, cu o zecime din viteza), astfel de imperfecțiuni devin evidente. Puteți, de asemenea, să faceți un videoclip slow-mo și să îl arătați prietenilor dvs. pentru a le obține părerea.
6. Animația ar trebui dezvoltată la început
Mulți designeri iau în considerare animația funcție inutilă, deoarece supraîncarcă interfața cu utilizatorul și o complică. În cele mai multe cazuri, acest lucru se întâmplă, dar numai pentru că designerii adaugă animație la sfârșitul procesului de proiectare. Mișcarea aleatorie fără niciun scop nu va aduce beneficii vizitatorilor și cel mai probabil va fi distragătoare și enervantă.
Pentru a face animația utilă și practică, petreceți timp pe ea la începutul designului dvs. Este foarte important să stabiliți unde va părea logic și natural animația.
Concluzie
Animația bine concepută și de înaltă calitate face pagina de destinație nu numai mai atractivă, ci și mai ușor de utilizat. Când este făcută corect, animația poate transforma interacțiunea cu pagina de destinație într-o experiență memorabilă și captivantă.
- Traducere
- Tutorial
Ești întâmpinat de hainele tale și însoțit de mintea ta. Această veche zicală vorbește, printre altele, despre importanța primelor impresii. Acest lucru este valabil nu numai pentru oameni, ci și pentru produse software- site-uri web și aplicatii mobile. Unul dintre cele mai importante momente formarea atractivitatii proiect de rețea este ușurința de utilizare - ușurința de utilizare. Și când o persoană se familiarizează pentru prima dată cu un site sau o aplicație, primele sale impresii determină adesea dacă se va întoarce la acest produs din nou și din nou. Cu alte cuvinte, utilizabilitatea este una dintre proprietățile cheie ale unui site web care creează (sau distruge) o audiență. Să ne uităm la câteva scenarii comune și adesea trecute cu vederea de comportament al utilizatorilor și modalități de îmbunătățire a gradului de utilizare în cele mai importante etape ale experienței tale pe site-ul sau aplicația mobilă.
Comunicare clară și informată
1. Alegeți dimensiunile fontului
Oamenii navighează din ce în ce mai mult pe web folosind dispozitive mobile și pentru unele site-uri versiune mobila a devenit principala. Și acest lucru dictează cerințele sale pentru dimensiunea fontului, deoarece ecranele smartphone-urilor și tabletelor sunt mult mai mici decât monitoare regulate si laptopuri. Răspândirea design adaptiv a jucat un rol important în atragerea atenției asupra problemei fonturilor.Adesea, creatorii de site-uri web se concentrează pe ușurința de utilizare a butoanelor, pictogramelor, filelor și a altor obiecte pe care se poate face clic. Dar puțini își amintesc confortul de a face clic pe hyperlinkuri text. Prin urmare, efectuați întotdeauna teste „în direct” pentru confortul de a face clic pe hyperlinkuri cu degetele.
2. Scrieți mesaje informative de eroare
Mulți oameni neglijează selectarea textului pentru mesajele de eroare, considerându-le ceva secundar. De obicei, dezvoltatorii știu cum să evite comportamentul incorect în produsele lor și, prin urmare, întâlnesc rar astfel de mesaje.Dar utilizatorii reali nu se pot lăuda cu asta.
Dacă utilizatorul nu înțelege bine ce să facă după ce apare un mesaj de eroare, atunci el poate abandona produsul dvs. Prin urmare, textul mesajului poate fi jucăuș, dar cel puțin ar trebui să ajute utilizatorii să descopere rapid motivul și să evite eșecurile în viitor.
Încercați să evitați termenii specializați, scrieți mesaje în termeni generali, într-un limbaj clar. Nu este nevoie să aruncați informații despre utilizator pe care nu le poate folosi. Dacă se dorește, chiar și erorile de validare pot fi reformulate pentru a le face să sune mai prietenos. Comparați două versiuni ale aceluiași ecran din același sistem de operare popular:
Comoditatea formularelor de intrare
3. Simplificați-vă cerințele privind parola
Astăzi se obișnuiește să se solicite utilizatorilor să creeze parole complexe. Dar acest lucru trebuie făcut pozitiv, cu încurajare, și nu ca o condiție dură de netrecut. Multe forme de intrare arată foarte bine, dar sunt complet incomode. Deși comoditatea acestui element de interfață poate avea un impact decisiv asupra succesului întregului produs. Decizii proaste poate înstrăina utilizatorii deja în etapa de introducere a numelui de utilizator și a parolei sau în timpul plății. Prin urmare, este necesar să acordați o atenție deosebită ușurinței de utilizare a formularelor.
De exemplu, din punct de vedere istoric, casetele de selectare au fost dificil de stilat. În cele mai multe cazuri, dezvoltatorii încearcă să ascundă obiectele standard și să le cloneze ca elemente DOM mai potrivite. În acest caz, datele din „clone” sunt transferate la intrarea elementelor originale.
Trebuie să petreceți mult timp doar pentru a putea controla designul unui meniu derulant obișnuit. Dar merită jocul lumânarea? Nu trebuie să uităm asta utilizatorii de telefonie mobilă obisnuieste-te foarte repede aspectși caracteristici comportamentale elemente standard interfață utilizată în sistemele lor de operare.
De exemplu, utilizatorii Windows Mobile Ei se așteaptă ca atunci când selectați un meniu derulant, lista de opțiuni să se deschidă pe ecran complet, separat de câmpul în sine. In timp ce utilizatorii de Android astepta sa vezi fereastra modală. Și dacă, de dragul ideilor dvs. de design, nu îndepliniți astfel de așteptări, atunci este posibil ca utilizatorii să nu vă aprecieze deloc soluțiile. Probabil că le va fi mai greu să folosească produsul dvs., ceea ce le va afecta negativ experiența. Cu alte cuvinte, schimbând designul elementelor standard pe care le veți crea mai multe probleme decât decizi tu.
4. Utilizați formularele de introducere corecte
Mulți oameni recomandă utilizarea formatării datelor în câmpurile de intrare. De exemplu, dacă adăugați input, input , atunci aspectul se schimbă automat pe măsură ce introduceți text. Cu toate acestea, acest lucru pare ciudat și nu ajută deloc, dar interferează cu completarea formularului.Dacă aveți mai multe câmpuri de intrare, este mai bine să le atribuiți un singur tip de date. Este mult mai ușor pentru utilizator când se folosește același aspect la introducere, iar săritul de la litere la cifre și înapoi adaugă doar confuzie suplimentară.
Utilizare tipuri diferite introducerea în HTML 5 este recomandabilă numai atunci când există cât mai puține câmpuri pe ecran. Un bun exemplu este cel cu doi factori Autentificare Google: Există un singur câmp în care puteți introduce doar numere. Va fi foarte potrivit aici comutare automată la un aspect digital.
Dar mai mult forme complexe O astfel de „utilitate” și „inițiativă” a tastaturii pot fi enervante, deoarece forțează utilizatorul să comute mental și crește sarcina cognitivă. Mai ales când treceți de la litere la cifre și invers:
5. Creați o experiență vie și memorabilă pentru prima dată
Dacă un nou venit este dezamăgit de site-ul sau de aplicația dvs. din primele secunde, atunci aceasta este asemănătoare cu grosolănia proprietarului atunci când se întâlnește cu oaspeții. Indiferent cât de delicioase sunt deliciile, întâlnirea va fi ruinată fără speranță.Un dezvoltator poate pierde cu ușurință din vedere unele scenarii pentru utilizarea principală a produsului său. De exemplu, este greu să numiți intuitiv un ecran plin de pictograme sau secțiuni. Puteți ameliora prima experiență de utilizare, de exemplu, cu sugestii utile și mesaje de avertizare, care pot fi dezactivate cu ușurință.
6. Diavolul este în detalii
Tot felul de lucruri mărunte pot ajuta în mare măsură să vă facă produsul mai ușor de învățat. De exemplu, cursorul standard familiar din primul câmp de introducere vă va permite să vă scufundați rapid și fără durere în interfață. În mod ideal, utilizatorul ar trebui să navigheze pe site sau aplicație pe pilot automat.Lipsa de experiență a noilor utilizatori cu produsul dvs. înseamnă că unele funcții pot cauza dificultăți serioase. Amintiți-vă Paperclip de la Microsoft Office, care a ieșit brusc și i-a oferit ajutorul, ceea ce a fost mai enervant.
Dirijarea unei prime experiențe de succes a utilizatorului este ca și cum ai merge pe o frânghie - este foarte dificil să faci totul corect, dar dacă reușești, este mai mult decât răsplătit cu recunoașterea utilizatorului. De exemplu, proiectul Stumbleupon are mare succes în a le preda începătorilor capacitățile sale de bază.
O soluție bună poate fi integrarea procesului de instruire în procedura normală de utilizare a produsului. De exemplu, atunci când arhivați scrisorile în aplicație de e-mail puteți afișa mesajul „Știați că puteți începe arhivarea folosind Ctrl + K?” Această abordare permite o experiență de antrenament mult mai blândă în comparație cu lecțiile tradiționale de tip „vizualizare generală a aplicației”.
7. Microcopiarea nu trebuie folosită ca o idee ulterioară.
„Microcopiere” se referă la toate micile instrucțiuni și confirmări utilizate în aplicații.- „Nu vă faceți griji, nu vom lăsa să se scurgă adresa dvs. poștală”
- „Nu aveți nevoie de un card bancar pentru plată”
De exemplu, legarea card bancar sau furnizarea de e-mail este destul de controversată pentru mulți utilizatori. Și dacă nu reprezentați o marcă de renume testată în timp, oamenii vor fi întotdeauna atenți să vă ofere astfel de informații. Microcopiile pot ajuta la rezolvarea îndoielilor utilizatorilor
8. Oferiți întotdeauna context
Utilizatorii urăsc lipsa contextului. Având în vedere fluxul de informații cu care trebuie să facă față în mod constant, oamenii încearcă să facă abstracție de la tot ce nu este necesar pe ecran și să se concentreze pe lucruri specifice. Când defilarea infinită a intrat în modă, multe site-uri s-au confruntat cu o singură problemă: de îndată ce utilizatorul a făcut clic pe undeva din greșeală, poziția curentă a fost resetată. Acest lucru este mai ales neplăcut în cazurile în care o persoană a derulat foarte mult în jos conținutul site-ului. După doar cinci ecrane de defilare, un clic accidental poate deveni o sursă de iritare.Majoritatea site-urilor de astăzi rezolvă această problemă folosind modale și alte scheme tipice aplicațiilor cu o singură pagină. De exemplu, pe Pinterest, când dați clic pe o țiglă, aceasta nu se deschide pagina noua, și modal. Acest lucru vă permite să examinați detaliile unei anumite postări fără a vă pierde poziția actuală sau a aștepta încărcarea unei noi pagini.
Pe mobil aplicația Facebook Este folosită aceeași abordare: dacă dați clic pe o fotografie din album, aceasta se va încărca într-un mod pe tot ecranul. Arata ca aproape de parcă s-ar fi deschis o pagină nouă, dar când apăsați butonul înapoi sunteți ușor readus în context.
Utilizatorilor, în special utilizatorilor de telefonie mobilă, nu le place când conținutul ecranului se schimbă în mod neașteptat. Acest lucru ar trebui făcut numai ca răspuns la acțiunile explicite ale utilizatorului. De exemplu, fluxuri de știri pe Twitter și Facebook sunt actualizate forțat. Altfel, ai avea o situație neplăcută atunci când citești un mesaj și, în același timp proces de fundal reîmprospătează feedul și te aruncă cu o grămadă de mesaje noi care îngroapă ceea ce ai citit înainte. Este ca o rafală de vânt care ți-ar smulge un ziar din mâini.
Din fericire, Twitter informează cu delicatețe utilizatorul când apar mesaje noi și așteaptă ca utilizatorul să dea comanda de descărcare. Adică, o persoană are control complet asupra modificării conținutului ecranului și nu este confuză.
15. Împărțiți sarcinile mari și complexe în operațiuni mai mici
Nimănui nu-i place să completeze un formular de pagină completă. Prin urmare, nu vor beneficia decât de tot felul de secțiuni de setări, formulare de înregistrare și profiluri separare logicăîn blocuri mai mici. Folosiți carduri, secțiuni, file, panouri laterale. Va fi mai ușor pentru o persoană să perceapă nevoia de numeroase umpluturi, chiar dacă există mai multe blocuri logice pe o singură pagină.Împărțirea în blocuri logice simplifică subiectiv sarcina de a configura și completa numeroase câmpuri și previne senzația de muncă neplăcută. Acest lucru este important în special pentru aplicațiile mobile și versiunile site-urilor web.
De exemplu, Facebook a petrecut câțiva ani perfecționându-și gruparea setărilor de confidențialitate pentru a le face mai ușor de configurat. Dar a fost odată ca niciodată sarcină non-trivială că mulți pur și simplu nu au atins aceste setări. Împărțindu-le în secțiuni, a crescut procentul de utilizatori care interacționează cu aceste pagini în loc să le evite.
O alta bun exempluîmpărțirea unei sarcini mari în blocuri logice - procesul de comandă. Pentru multe aplicații web, această procedură devine un punct critic, un indicator al succesului proiectului. Când plasarea unei comenzi este împărțită în etape, apoi, pe măsură ce le parcurg, utilizatorii au un sentiment de progres, de progres, chiar dacă nu totul decurge bine.
De asemenea, împărțirea în blocuri logice facilitează detectarea și rezolvarea problemelor emergente. La urma urmei, nimeni nu vrea să se ocupe de un mesaj de genul „Ați putea vă rog să corectați următoarele patru puncte?”
Dacă forțați utilizatorul să completeze toate câmpurile sau să configureze setările pe o singură pagină, organizată complex, atunci vă puneți ouăle într-un singur coș. Orice eroare va împiedica trimiterea tuturor celorlalte date.
Același lucru se poate spune despre formele de donație, în special în proiecte mobile. Probabil doriți ca utilizatorul să se gândească: „Uau, ce simplu este” în loc de „Da, asta necesită timp”. Îmbunătățirea gradului de utilizare a formularelor afectează direct profitabilitatea proiectului.
Cele mai multe dintre punctele de mai sus sunt destul de simple atunci când sunt luate în considerare individual. Dar dacă lucrezi cu asta în fiecare zi, ochii tăi devin adesea încețoșați. Prin urmare, este important să puteți face un pas înapoi, să abstrageți și să vă priviți creația prin ochii unui „nou utilizator”.
Etichete: Adăugați etichete
O zi buna, dragi prieteni! Astăzi vă vom vorbi despre un lucru atât de important ca Usiguranța (utilizabilitatea) site-ului, cu privire la modul de îmbunătățire a acestui factor, cunoscându-i principiile și regulile de bază. Ei bine, în concluzie, vom învăța cum să facem un audit (analiză) independent și gratuit al proiectului dumneavoastră pentru a determina atractivitatea acestuia pentru publicul său. Deci, să începem, poate, cu definiția concepte de utilizare(utilizabilitate).
Ce este Utilizabilitatea și care sunt principiile ei?
Utilizabilitate - din traducere înseamnă o măsură a confortului, calității, ușurinței de utilizare a ceva. În cazul nostru, ne referim la site-ul în sine, deoarece interacționează direct cu utilizatorii de internet. Nivelul de utilizare al unui anumit proiect va determina direct CTR (procentul) din vânzări, poziția în motoare de căutareși, firește, cantitatea de trafic (vizitatori). Dacă reușiți să îmbunătățiți acest factor, atunci veți ucide mai multe păsări dintr-o singură lovitură, ceea ce vă poate crește câștigurile de 2-3 ori! Aceasta este ceea ce primești în caz că nivel inalt utilizare:
— Creșterea unui lucru atât de important ca conversia site-ului (procentul vânzărilor) și, prin urmare, a profitului proprietarului site-ului.
— Creșterea poziției șantierului, ceea ce va duce în cele din urmă la o creștere potențiali clienți sau, după cum am menționat anterior, pentru a crește profiturile.
— Reducerea bugetului (cheltuielilor) pentru publicitate contextuală și de altă natură pentru a atrage vizitatori. De ce să plătești pentru ei dacă te găsesc deja bine prin căutare?
— Atragerea unei baze de clienți de bază. Dacă unui vizitator îi place foarte mult site-ul tău și produsul pe care îl vinzi, atunci asigură-te că în viitor, atunci când dorește să facă din nou o achiziție, cu siguranță se va uita mai întâi la tine, iar apoi la concurenții săi.
— Reducerea numărului de angajați care trebuie plătiți. După cum știți, fiecare serviciu care se respectă ar trebui să aibă suport online clientii. Așadar, dacă vizitatorul tău poate găsi răspunsuri la întrebările sale singur, fără niciun ajutor, atunci este puțin probabil să-ți deranjeze consultantul.
După cum puteți vedea, vă puteți crește foarte inteligent, dar pentru a face acest lucru trebuie să vă asigurați că vizitatorii sau clienții dvs. se îndrăgostesc literalmente de site-ul dvs. Când intră în el, nu ar trebui să se simtă stânjeniți, încordați sau să simtă vreun truc din partea ta, că sunt pe cale să fie înșelați. Aceste sentimente neplăcute sunt cauzate cel mai adesea de prețuri excesiv de umflate, de navigare neclară și de întregul site în ansamblu. Utilizator simplu S-ar putea chiar să fie jignit dacă nu îi vorbiți limba!
Mulți, în căutarea clienților, încearcă să iasă în evidență printre mulțimea concurenților, arătându-și „coolitatea” și bogăția, ca să spunem așa. Cel mai adesea, acest lucru poate fi văzut în textele care folosesc termeni complexi pentru percepție, care pot fi înțeleși doar de un strat foarte îngust al societății. Dar să nu ne înșelăm, pentru că de cele mai multe ori clienții noștri sunt bunici obișnuiți și chiar uneori școlari care, ca să zic așa, nu pot „obține”, ce fel de lucru este acesta și de ce să-l cumpăr de aici, dacă nici măcar nu o fac ai o descriere a ei? pot sa inteleg?
Și aceasta este doar o mică picătură din ceea ce trebuie luat în considerare la dezvoltarea unui site web, astfel încât să fie cât mai atractiv pentru utilizator. Atunci când îți creezi proiectul, trebuie să-ți pui inițial întrebări precise despre utilizare și să răspunzi la ele cât mai precis posibil, fără niciun „cred, cred, etc.”, pentru ca mai târziu să nu fii surprins de ce există o mulțime de vizitatori, dar fără vânzări.
Deci, iată o serie de întrebări care trebuie luate în considerare atunci când proiectați un site web:
— Cât de convenabil este site-ul, poate utilizatorul să găsească ceea ce dorește folosindu-l (aici ne referim la cât de clară și ușoară este structura și navigarea lui).
— Cât de util și de ușor de citit este conținutul (articole, videoclipuri) pentru percepție? grupuri diferite oameni în funcție de vârstă și caracteristici culturale.
— Cât de ușor își poate aminti și găsi utilizatorul site-ul dvs. (aceasta înseamnă un design unic frumos, o adresă scurtă și clară a site-ului, numele, numărul de telefon etc.).
— Vizitatorul va fi mulțumit după achiziție? Ce se întâmplă dacă livrarea întârzie sau mărfurile sosesc stricate, dar ești ca toți ceilalți? bani gheata nu se intorc.
— Și în sfârșit, cât de complet este proiectul tău în toate sensurile? Știi, acesta este probabil cel mai rău lucru care se poate întâmpla atunci când un client, vizitând site-ul tău, găsește o eroare în site-ul în sine sau în altă parte. Din această cauză, vei pierde încrederea în tine, ceea ce va reduce în cele din urmă vânzările.
Deci, odată ce răspunzi la câteva dintre aceste întrebări, poți fi sigur că ești în continuare competitiv și că poți realiza vânzări de succes. Dar dacă încă nu aveți suficiente argumente pentru aceasta, atunci vă recomand să vă familiarizați cu lista mea de mai jos pentru a îmbunătăți gradul de utilizare a site-ului.
Reguli de bază pentru îmbunătățirea gradului de utilizare a conținutului site-ului (articole).
1 ) Împărțiți articolele în paragrafe mici, fiecare constând din aproximativ 5-7 propoziții. În zilele noastre, utilizatorii nu mai citesc postări de pe site-uri web precum un fel de carte, ci pur și simplu le scanează și stabilesc dacă merită să o citească integral sau nu. Așadar, dacă scrieți articole lungi, ca mine, atunci utilizatorul s-ar putea pur și simplu să se sperie când vede un text uriaș fără sfârșit la vedere. Cred că și tu cu greu ai fi citit acest articol dacă nu ar fi fost împărțit în paragrafe.
3 ) În prima propoziție a articolului dvs., evidențiați întotdeauna cuvintele cheie pe care utilizatorii le caută cu caractere aldine. Această operațiune va anunța utilizatorul că a găsit ceea ce căuta, deoarece, așa cum am scris mai sus, utilizatorii nu citesc nici măcar jumătate din text, pur și simplu îl scanează pentru relevanța acestuia (măsura în care articolul răspunde la întrebare).
Cu alte cuvinte, dacă cuvintele cheie necesare lipsesc chiar la începutul articolului, atunci este posibil ca utilizatorul să plece imediat. Această tehnică este, de asemenea, una dintre elementele de bază ale optimizării articolelor pentru motoarele de căutare. În orice caz, Google încă îi place când tastele sunt evidențiate text îngroșat, pentru Yandex acest lucru nu mai contează.
4 ) Explicați termeni neclari, pentru că nu toată lumea este la fel de avansată ca unii. După cum probabil ați observat deja, în acest articol sunt destul de multe definiții neclare, pe care le explic întotdeauna între paranteze, ceea ce vă recomand să faceți și dumneavoastră.
5 ) Introduceți în publicații imagini de înaltă calitate sau . Acest lucru ajută la îmbunătățirea gradului de utilizare a articolului, deoarece nimeni nu vrea să citească un text plictisitor. Acest lucru, apropo, a devenit foarte relevant în timpul nostru, când din ce în ce mai mulți oameni au început să cumpere benzi desenate mici decât o dată cărți de kilograme.
6 ) Dacă descrieți instrucțiuni, împărțiți-le în pași mici și numerotați-le, astfel încât utilizatorul să nu se încurce și să poată înțelege întotdeauna succesiunea acțiunilor care trebuie efectuate.
7 ) Vorbiți-le vizitatorilor în limba lor. Dacă publicul tău potențial este tânăr sau, dimpotrivă, persoane în vârstă, atunci trebuie să folosești acest tip vorbire colocvială ceea ce le este caracteristic.
Cum să îmbunătățiți gradul de utilizare a site-ului în sine?
8
)
Înainte de a crea un site web, trebuie să analizați piața, publicul dvs., ceea ce le este familiar și ce este străin și să înțelegeți trenul lor de gândire. Cel mai adesea, în 90% din cazuri, munca de utilizare a site-ului începe atunci când acesta a fost deja creat, ceea ce în cele din urmă îl deznădăjduiește pe proprietarul site-ului, deoarece începe să realizeze că va trebui să petreacă atât de mult timp rând mare inovații, că cel mai ușor ar fi să demolați complet întregul site și să faceți totul din nou.
În restul de 10% din cazuri, utilizabilitatea site-ului este cel mai adesea gestionată de designeri sau programatori care nu înțeleg nimic despre el. Ei, de regulă, se bazează pe propria intuiție, experiență, opinie, care nu are nimic în comun cu opinia vizitatorilor.
9 ) Nu faceți un site web extraterestru în care numai dvs. puteți naviga bine. Ideea mea este că, indiferent cât de mult ai vrea să ieși în evidență față de concurenții tăi, interfața și navigarea proiectului tău ar trebui să fie similare cu cele mai multe site-uri, astfel încât utilizatorul să poată naviga cu ușurință prin el.
10 ) Faceți o pagină. Desigur, ați putea fi surprins: cum poate afecta vânzările? Așa. Cu mult timp în urmă, o companie a făcut un lucru furtiv în care a scris un mesaj pe pagina sa 404 că pur și simplu nu au putut procesa articolul și le-a cerut să repete procesul de cumpărare din nou. În acest fel și-au crescut profiturile cu 380 de dolari pe lună.
11 ) Fă-o pe site. Dacă publicațiile sau descrierile produselor tale sunt suficient de mari, utilizatorul s-ar putea să obosească pur și simplu să deruleze în sus mult timp după ce a citit.
12 ) Nu faceți multe subcategorii, indiferent cât de mare este site-ul dvs. (două sunt suficiente). Un numar mare de subcategorii vă pot deruta cu ușurință cititorul și, în majoritatea cazurilor, nu îi vor permite deloc să găsească produsul sau materialul potrivit.
13 ) Asigurați-vă că îl adăugați pe site informații de contact(telefon, e-mail) sau cel puțin . Tot pe site ar trebui să existe o pagină despre organizarea sau autorul acestei creații. Amintiți-vă, absența oricăreia dintre aceste date subminează foarte mult credibilitatea dvs. și a site-ului în ansamblu.
14 ) Faceți ca titlul și descrierea site-ului dvs. să fie citite de om, astfel încât utilizatorul să înțeleagă la prima vedere ce este site-ul și care este scopul acestuia. Mulți, după părerea mea, fac aceeași greșeală grosolană: inserarea unui nume de companie (mai ales în engleză) în descrierea site-ului lor, din care utilizatorul nu poate înțelege nimic. De exemplu, tocmai am introdus interogarea de căutare „cumpără o rochie” și am dat clic pe prima publicitate la site și ce văd în titlu? Mondigo.ru. Da sunt de acord bun venit astfel încât utilizatorul să-și amintească site-ul, dar este puțin probabil să-l folosească.
15 ) Atașați o căutare pe site-ul dvs., de preferință într-un loc familiar tuturor - în colțul din dreapta sus. Dacă aveți mai puțin de 100 de pagini, atunci nu trebuie să vă faceți griji pentru acest lucru pentru moment, deoarece vă puteți descurca cu una simplă, dar pe măsură ce obțineți mai multe pagini, asigurați-vă că adăugați o căutare. Acest lucru, apropo, se aplică și pentru Program de afiliere. Recent am căutat un magazin online care să aibă un program de afiliere pentru produsul de care aveam nevoie.
Am găsit unul, m-am înregistrat și am petrecut o oră întrebându-mă cum l-aș putea găsi. link de afiliat special pentru acest produs, și nu pentru site-ul ca întreg. Ideea era că magazinul avea câteva mii de produse, dar nu a fost căutat, așa că a trebuit să scriu la asistența site-ului.
16 ) Deoarece noi, după cultura noastră, citim postările de la stânga la dreapta, site-ul în sine ar trebui proiectat astfel încât tot textul să înceapă din stânga și nu din centru, de exemplu, unde site-ul are două coloane pe ambele laturi. De asemenea, fundalul trebuie să fie alb, iar textul trebuie să fie negru, cel puțin 12px.
Va fi foarte dificil pentru utilizator să citească materiale în care, de exemplu, fundalul este negru și textul este alb și, de asemenea, este atât de mic încât va trebui să fie examinat cu o lupă. În plus, nu vă recomand să folosiți mai mult de patru nuanțe de culori pe site-ul dvs., deoarece multe culori nu se combină între ele și sperie utilizatorul (sau mai bine zis, ochii lui).
17 ) Faceți-o pe site dacă aveți doar un site informativ. Dacă aveți un magazin online, atunci este mai bine să îl eliminați, astfel încât utilizatorul să nu se piardă pe site-ul dvs. și să ajungă acolo unde trebuie să mergeți, crescând astfel conversia.
18 ) Eliminați formularul de abonare pop-up care, pe lângă faptul că este foarte enervant, încetinește și site-ul de 10 ori. De asemenea, multă vreme pe multe site-uri am văzut un farmec atât de groaznic, când când ai dat clic pe crucea site-ului, a apărut un formular de abonare groaznic cu o întrebare stupidă: ești sigur că vrei să părăsești acest site? Recomand refuzul aceasta metoda colectarea adreselor de e-mail, pentru că acest lucru nu va face decât să le agraveze pe ale tale.
19 ) Cunoaște-ți limitele atunci când generați bani pe site-ul dvs. Prea multe reclame te pot speria sau te pot împiedica deloc să le găsești materialul necesar către cititor.
20 ) Eliminați sau faceți posibilă conectarea la dvs. prin diverse social media. De asemenea, dacă aveți un magazin online, eliminați câmpurile care nu sunt necesare de completat. Crede-mă, nimeni nu vrea să scrie o biografie întreagă despre ei înșiși în astfel de puncte precum: cum ne-ai găsit, hobby-urile tale etc.
21 ) Dacă este posibil, nu utilizați scripturi java și animații flash în meniul site-ului, deoarece vizitatorul dvs. poate pur și simplu să le dezactiveze în setările browserului. Ca urmare, utilizatorul nu va putea folosi meniul și, prin urmare, va putea plasa o comandă.
22 ) Asigurați-vă că site-ul dvs. se afișează corect pe dispozitivele mobile. Pentru a face acest lucru, trebuie să verificați și să curățați codul site-ului dacă sunt găsite erori.
23) Utilizați o navigare clară. Utilizatorul trebuie să găsească ceea ce are nevoie în trei clicuri. Pentru a face acest lucru, puteți face sau atașa navigare din .
24 ) Scoateți playerul de pe site-ul dvs., vizitatorul a venit să găsească materialul de care avea nevoie și nu să asculte clasice sau rock and roll. De asemenea, recomand să eliminați totul elemente inutile pe site precum: calendar, comentatori de top etc.
25 ) Și, în sfârșit, fii prietenos și pozitiv față de publicul tău, pentru că toată lumea are deja destulă negativitate în viața lor.
Cum se face gratuit un audit (analiză) de înaltă calitate a unui site web?
Pentru început, instalează orice contor de prezență, prin care poți afla ce fel de persoane te vizitează: vârsta lor, sexul, de unde provin (țările) etc. Recomand să instalați un contor de la Yandex, deoarece are o funcție atât de grozavă ca un „webvisor” prin care puteți vedea cum s-a comportat fiecare utilizator pe site-ul dvs. În această etapă, puteți găsi o mulțime de erori (erori), precum și diverse deficiențe în designul site-ului. De asemenea, veți putea vedea pe o hartă termică unde utilizatorii dvs. fac clic cel mai des, ceea ce poate fi de mare ajutor atunci când plasați anunțuri.
În plus, pentru a evalua gradul de utilizare al site-ului dvs., va fi suficient să vă sunați toate rudele și prietenii unde, fiecare îl va evalua individual. Apropo, aici este mai bine să spuneți în avans că site-ul nu este al dvs., deoarece în acest fel nu veți primi o evaluare adecvată, pentru că vă vor simpatiza în avans. Înainte de testare, trebuie să instalați o cameră în fața monitorului pentru a vedea nu numai modul în care o persoană se comportă pe site, ci și pentru a vedea expresiile faciale și emoțiile sale, ceea ce este, de asemenea, foarte important. La sfârșit, cereți-le să scrie pe o foaie de hârtie ce le-a plăcut și ce nu le-a plăcut la site și unde au întâmpinat dificultăți.
De asemenea, puteți pur și simplu să faceți un sondaj sau să votați pe site, unde utilizatorii înșiși vă vor oferi toate informațiile gratuit. Ei bine, asta încheie articolul meu despre îmbunătățirea uzabilității unui site web, sper că v-a fost de folos. Dacă, totuși, acest lucru nu a fost suficient pentru tine și vrei să devii, ca să spunem așa, un mare expert în acest domeniu, atunci poți citi câteva cărți pe această temă, deoarece în viitor, odată cu creșterea internetului , această specializare poate deveni foarte populară.
Astăzi vă aducem în atenție un set de sfaturi de optimizare, a căror eficacitate este susținută de cazuri reale și foarte fiabile.
Probabil că sunteți deja familiarizați cu rezultatele unor studii, dar vom încerca să le privim dintr-un unghi ușor diferit.
1. Uitați de „regula celor trei clicuri”
În cartea lui Duceți-vă talentul pe web(2001) Jeffrey Zeldman, o figură cunoscută în lumea designului web, a prezentat ideea că „regula celor trei clicuri ajută la crearea de site-uri web care au o structură ierarhică intuitivă și logică”. Adică, dacă un utilizator trebuie să facă mai mult de trei clicuri pentru a accesa piesa de conținut pe care o caută, încep să experimenteze frustrare deoarece necesită mult efort și este perceput ca o pierdere de timp.
Cu toate acestea, în realitate, majoritatea utilizatorilor care sunt cu adevărat motivați să finalizeze o acțiune vizată nu se vor gândi să se oprească doar pentru că au făcut deja trei clicuri fără a-și atinge obiectivul. Dacă te uiți la principalele motive pentru frustrarea utilizatorilor, vei descoperi că clicurile excesive nu joacă un rol important.
Și atunci apare întrebarea: regula celor trei clicuri are vreo bază științifică sau empirică? Cu alte cuvinte, există studii care indică faptul că utilizatorii devin frustrați după trei clicuri?
Potrivit unui studiu realizat de designerul web britanic Joshua Porter, utilizatorii care nu găsesc conținutul pe care îl caută după trei clicuri sunt mai puțin probabil să înceteze căutarea. Mai mult, pe parcursul studiului, unii subiecți au făcut până la 25 de clicuri.
Relația dintre numărul de clicuri și procentul de sarcini finalizate în cazuri de succes (albastru) și eșec (roșu)
În cele din urmă, rolul principal nu este numărul de clicuri, ci confortul interfeței. Dacă este simplu și clar, o persoană va fi încântată să îl folosească, chiar dacă este nevoie de 15 clicuri pentru a atinge obiectivul. Și dacă un site web urmează regula celor trei clicuri, dar este prost proiectat și implementat, o persoană poate să nu vrea să-l folosească deloc.
2. Amintiți-vă de modelul F
Jakob Nielsen a efectuat un studiu în care urmărirea ochilor (oculografie) a fost efectuată pe mai mult de 230 de utilizatori de internet în timp ce vizualizau diferite pagini web. Ca rezultat, s-a dovedit că, în timpul unei vizionări superficiale, privirea utilizatorilor se mișcă de-a lungul unei căi în formă de F.
Harta termică a vizualizărilor paginilor site-ului de Jakob Nielsen
Eyetools, împreună cu două companii de marketing, Did-It și Enquiro, au efectuat un studiu similar. La ea au participat 50 de subiecți, cărora fiecare a fost rugat să se familiarizeze cu rezultatele cautare Google. Drept urmare, privirea tuturor celor 50 de subiecți a fost mai des concentrată în colțul din stânga sus și harta termografica avea o formă de F.
Pagina cu rezultate Google vizualizați harta termică
Designerii și redactorii ar trebui să țină cont de aceste date atunci când creează și amenajează conținut. Deci, conținutul cheie al paginii web ar trebui să fie plasat mai aproape de partea stângă a aspectului. Dacă ești atent, vei vedea că pe cele mai populare resurse, în urma titlului există o listă de puncte sau un set de scurte paragrafe care au aceeași formă de F. Acest lucru face cu siguranță textul mai ușor de citit atunci când treceți rapid.
3. Viteza de încărcare contează
Nimănui nu-i place să aștepte. Utilizatorii de internet, adică noi toți, suntem oameni extrem de nerăbdători, așa că nu ar trebui să-i faci să aștepte inutil. Când lucrați pe site-ul dvs. web sau pe pagina de destinație, acordați atenție vitezei de încărcare a paginii și nu veți regreta.
Deci, acum câțiva ani experți Microsoft a efectuat un studiu folosindu-le Motorul de căutare Bing. Scopul studiului a fost să identifice relația, dacă există, între viteza de încărcare a paginii și o serie de valori, cum ar fi satisfacția utilizatorilor, venitul mediu per vizitator și datele privind clicurile.
Studiul a găsit următoarea corelație: o creștere de 2 secunde a latenței de încărcare a paginii a dus la o scădere cu 3,8% a satisfacției utilizatorilor și o scădere cu aproximativ 4,3% a veniturilor. În același timp, numărul total de clicuri efectuate de utilizatori a scăzut cu 4,4%. O scădere de 4,3% a profitului poate părea o mică pierdere, dar când despre care vorbim despre corporații de mai multe și mai multe miliarde de dolari, fiecare procent are ca rezultat sume uriașe pe care nimeni nu vrea să le piardă.
Relația dintre întârzierea încărcării unei pagini în ms și modificările următorilor indicatori (de la stânga la dreapta): 1) numărul de solicitări unice per 1 utilizator (%); 2) numărul de modificări de interogare (%); 3) profit pe 1 utilizator (%); 4) numărul total de clicuri (%); 5) satisfacția utilizatorilor (%); 6) timpul pentru a finaliza un clic (ms).
Acest exemplu demonstrează că utilizatorii sunt cu adevărat nerăbdători și dispuși să abandoneze o resursă care îi face să aștepte prea mult. De asemenea, ar trebui să vă îngrijorați viteza de încărcare a site-ului dvs., deoarece Google a luat recent în considerare acest factor la clasarea rezultatelor căutării.
Din fericire, există multe instrumente disponibile pentru a ajuta la îmbunătățirea vitezei de încărcare a paginii și a performanței, cum ar fi Viteza paginii de la Google sau YSlow de la Yahoo.
4. Faceți textul mai lizibil
Cunoscutul specialist în uzabilitate Jakob Nielsen a efectuat un studiu în care a studiat particularitățile percepției textului de către vizitatorii site-ului său și s-a dovedit că oamenii citesc rareori conținutul online care se află în fața lor. Vizitatorii unei pagini web medii (aprox. 593 de cuvinte) citesc 20-28% din text. Odată cu o creștere suplimentară a volumului de text, această cifră scade treptat până la 10%.
Relația dintre numărul de cuvinte dintr-o pagină și procentul maxim din acel număr pe care un utilizator îl poate citi (la o viteză de citire de 250 de cuvinte pe minut)
Există o serie de tehnici care vă pot ajuta să atrageți mai multă atenția utilizatorilor asupra conținutului site-ului dvs. Ele se rezumă la creșterea lizibilității textului. Aceasta este, în special, selecția Cuvinte cheie, folosind liste și subtitluri frecvente și împărțirea textului în paragrafe simple și scurte.
5. Nu vă concentrați pe „linia de pliere”
