5 sfaturi Mobile Ux pe care fiecare designer ar trebui să le urmeze

În acest moment, se concentrează mult pe remedierea problemelor mobile, inclusiv a problemelor de performanță mobilă, deoarece utilizatorii continuă să rămână lipiți de dispozitivele lor mai mici.

De obicei, aceste probleme sunt abordate după lansarea unui site, când erorile încep să apară în rapoartele Google Search Console privind gradul de utilizare pe dispozitive mobile. În timp ce echipele de dezvoltare pot rezolva adesea astfel de erori, este mult mai eficient pentru designeri să înțeleagă și să implementeze cele mai bune practici de UX mobil de la început.

Viteza mobilă este, de asemenea, un factor important pentru optimizarea motoarelor de căutare, așa că designerii și dezvoltatorii trebuie să ia în considerare modul în care totul, de la animație la imagini, va afecta aceste valori.

Concentrați-vă pe distanțarea elementelor de design

Spațierea elementelor de design nu înseamnă doar crearea unui flux vizual plăcut; este vorba de a vă face site-ul ușor de utilizat pentru toți vizitatorii, inclusiv pentru cei de pe dispozitive mobile.

O eroare comună de utilizare mobilă în Google Search Console este aceea că „elementele pe care se poate face clic sunt prea apropiate unul de altul”.

Acest lucru creează o experiență frustrantă pentru vizitatorii de pe dispozitive mai mici, unde aceștia dau clic din neatenție pe elemente în timp ce încearcă să navigheze pe site.

Din punct de vedere al designului UX mobil, butoanele și elementele interactive sau pe care se poate face clic trebuie să fie suficient de mari și amplasate suficient de departe în design.

Pe un desktop, vizitatorii navighează cu un mouse, care este un instrument foarte precis, în timp ce pe mobil, majoritatea utilizatorilor își folosesc degetele mari. Degetele mari sunt de obicei mai mari decât micul cursor al mouse-ului și pot fi puțin mai stângace, mai ales dacă încerci să navighezi pe un site în timp ce mergi pe jos sau faci multitasking.

Prin urmare, trebuie să proiectați suficient spațiu între butoane și elemente, astfel încât vizitatorul să nu aibă o experiență mobilă frustrantă.

De asemenea, trebuie să luați în considerare accesibilitatea și modul în care vizitatorii pot ține dispozitivul mai mic. Unii pot ține telefonul sau tableta cu mâna stângă, alții cu mâna dreaptă sau unii cu ambele mâini. Designul site-ului trebuie să fie ușor de navigat, indiferent de asta.

În cele din urmă, vizitatorii își folosesc și degetul mare pentru a derula pe dispozitiv și a parcurge pagina web, așa că va trebui să vă asigurați că nu există elemente mari pe care se poate face clic pe care să le atingă din neatenție în timpul derulării.

Asigurați lizibilitatea textului și a fontului

Pe lângă spațiere, o altă eroare comună de utilizare mobilă în rapoartele Google Search Console este „textul este prea mic pentru a fi citit”. În timp ce un dezvoltator poate ajusta unele aspecte ale dimensionării fontului, există câteva bune practici UX pe care echipele de proiectare le pot implementa de la început în ceea ce privește lizibilitatea.

Selectarea unui tip de caractere care este ușor de citit este primul loc de început. Amintiți-vă că utilizatorii merg adesea pe jos sau fac mai multe sarcini sau în afara pe dispozitivele lor mai mici și s-ar putea să se afle în scenarii neideale în timp ce încearcă să navigheze pe site-ul dvs.

Crearea unei ierarhii vizuale în ceea ce privește dimensiunea fontului este o altă modalitate de a ajuta acești utilizatori de telefonie mobilă să scaneze și să înțeleagă rapid conținutul paginii. De asemenea, ajută pe dispozitivele mobile sau tablete, unde textele din titlu se pot încheia la rândul următor. Utilizarea aceluiași font și dimensiuni pe întreaga pagină poate provoca confuzie în jurul sensului paginii.

În modelele dvs., puteți, de asemenea, să creșteți înălțimea liniei dintre liniile de text pentru a îmbunătăți lizibilitatea unei pagini.

Odată ce v-ați decis asupra fontului și mărimii, trebuie să luați în considerare și rapoartele de contrast de culoare.

Deoarece vizitatorii pot fi în interior sau în aer liber sau cu iluminare slabă, este important să respectați standardele pentru contrastul dintre culorile de fundal și de prim-plan.

Acest lucru joacă, de asemenea, un rol în accesibilitate și crearea unui site web conform ADA. Conform standardelor WCAG 2.1, se recomandă un raport de contrast de cel puțin 4,5:1 pentru textul normal și 3:1 pentru textul mare.

Asigurați-vă că trecerea cursorului și animația urmează cele mai bune practici

Cele mai multe design-uri web de astăzi încorporează câteva micro-animații și componente interactive; este o solicitare comună din partea clienților într-un proces de reproiectare.

Adăugarea de mișcare pe un site este adesea o colaborare între designeri și dezvoltatori, deoarece animația poate afecta timpul de încărcare a paginii și poate provoca QC fără sfârșit dacă nu este bine codificată. Atunci când selectați animații în procesul de proiectare, trebuie, de asemenea, să planificați dacă respectivele interacțiuni vor avea loc pe dispozitivele mobile.

Din cauza problemelor de performanță, este obișnuit să dezactivați animațiile complexe și fundalurile video pe mobil, deoarece acestea pot încetini timpul de încărcare a site-ului, în special pentru vizitatorii dintr-o rețea mobilă. Acest tip de modificare a fost din ce în ce mai frecventă din 2018, când viteza paginii mobile a devenit unul dintre factorii de clasare ai Google.

În general, animația și interacțiunea ar trebui folosite în moduri subtile pentru a sprijini experiența utilizatorului și nu ar trebui să distragă atenția vizitatorului. Nici nu ar trebui să fie un ingredient esențial pentru a ajuta un vizitator să finalizeze o acțiune.

Hover overs sunt un alt element comun de design care poate arăta diferit pe mobil. Pe desktop, trecerea cu mouse-ul peste se referă la un obiect sau o imagine care modifică sau dezvăluie text atunci când vizitatorul trece mouse-ul peste el. Deși acest lucru funcționează bine pe dispozitive mari, rețineți că pe dispozitive mobile, vizitatorii nu folosesc mouse-ul, ceea ce înseamnă că vizitatorul va trebui să atingă pentru a vedea trecerea cursorului.

Prin urmare, dacă aveți o casetă sau o imagine care dezvăluie text la trecerea cursorului, ar trebui să vă asigurați că mesajele nu sunt esențiale pentru pașii vizitatorilor.

Când discutați despre animație, dvs. și echipa dvs. de dezvoltare puteți, de asemenea, să examinați cele mai bune practici Google pentru ghidurile de animație web, pentru a evita orice eroare referitoare la tehnologia flash sau învechită.

Planificați plasarea ferestrelor pop-up și a elementelor terțelor părți

Întotdeauna a existat o mulțime de dezbateri cu privire la utilizarea formularelor pop-up pe site-uri web și la implementarea lor pe dispozitivele mobile.

Un argument pentru evitarea formularelor pop-up pe mobil este că poate fi mai greu pentru un vizitator să închidă formularul sau mesajul. Din ianuarie 2017, Google a avertizat împotriva utilizării interstițialelor intruzive care blochează tot conținutul unei pagini să fie vizibil pentru un vizitator, deoarece acestea sunt deosebit de problematice pe mobil.

Puteți cântări toate aceste elemente în discuțiile cu clienții despre formularele pop-up și puteți decide despre cea mai bună experiență de utilizare pentru designul formularelor.

Atunci când adoptați o abordare a designului mobil, este util să luați în considerare modul în care elementele vor fi plasate pe dispozitivele mai mici. De exemplu, un buton lipicios din partea dreaptă a ecranului care rămâne în timp ce un vizitator derulează poate funcționa bine pe desktop, dar aceste tipuri de elemente lipicioase pot face spațiul de vizualizare și mai mic pe un dispozitiv mobil.

În timp ce unele elemente precum chatul live și widget-urile de accesibilitate pot fi adăugate în ultimul moment, planificarea acestora mai devreme în procesul de proiectare web poate ajuta la evitarea unei interfețe haotice pentru vizitatori.

Chatul live a devenit un instrument extrem de popular, iar widget-urile de chat se găsesc adesea în colțul din dreapta sau din stânga jos al designului. Oferirea de recomandări cu privire la amplasarea acestor elemente prin includerea lor în machetele de design vă va ajuta să prevedeți orice problemă cu elementele suprapuse.

Reconsiderați designul și plasarea formularului

Completarea și trimiterea unui formular pe un dispozitiv mobil sau o tabletă mai mică poate fi o sarcină enervantă pentru vizitatori. De aceea, este esențial să luați în considerare opțiuni alternative la formulare în designul site-ului.

Când creați navigarea prin meniul mobil, luați în considerare includerea unui număr de telefon „da clic pentru a apela” în antet, astfel încât vizitatorii să poată ajunge cu ușurință la companie.

Când proiectați toate formularele de pe site, este cea mai bună practică atât pentru desktop, cât și pentru mobil să reduceți cât mai mult posibil numărul de câmpuri de formular – și să indicați clar care este un câmp obligatoriu.

Un sfat pentru experiența mobilă a unui formular este să proiectați etichete de formular și nu doar să utilizați textul substituent pentru câmpurile formularului. Un vizitator de pe un dispozitiv mobil poate fi întrerupt cu ușurință de alte notificări și interacțiuni, astfel încât acesta poate fi întrerupt în procesul de completare a formularului și poate uita ce a indicat textul substituent. Furnizarea de etichete de formulare clare și mesaje de eroare este importantă și pentru conformitatea cu ADA.

În cele din urmă, plasarea formularului pe pagină și modul în care acesta poate fi ajustat cu aspectul receptiv este esențial, deoarece plasarea formularului poate afecta conversiile.

Concluzie

Având în vedere accentul sporit pus pe performanța mobilă, punerea în practică a unora dintre ideile de mai sus pe măsură ce vă proiectați proiectele vă va economisi timp și frustrare pe măsură ce aceste proiecte sunt lansate. Există sfaturi suplimentare pentru UX mobil care v-au ajutat să curgă designul? Lasă un comentariu mai jos!

Următorul: Dezvoltați-vă setul de abilități de design web cu cursuri online utile!

Designul UX mobil este doar unul dintre multele lucruri pe care trebuie să le rămâi în frunte ca designer web profesionist. Deși nu există întotdeauna mult timp disponibil pentru a-ți perfecționa abilitățile, participarea la un curs online este o modalitate excelentă de a te asigura că îți continui educația.

Acest articol oferă o listă cuprinzătoare a câtorva dintre cele mai bune cursuri online pentru web designeri (+cât costă), astfel încât să nu fii nevoit să petreci și mai mult timp căutând prin toate opțiunile disponibile!