Cum să proiectați pentru UX mobil excelent
Publicat: 2018-08-06Modul de proiectare pentru un UX mobil excelent trebuie să fie în fruntea a tot ceea ce face afacerea dvs. pe web. Cu excepția cazului în care proiectați ținând cont de mobil în primul rând, afacerea dvs. nu va avea atât de mult succes pe cât ar putea și ar trebui să aibă. Motivul este simplu: mobilul a depășit de mult desktop-ul ca metoda numărul unu de acces la internet. Cu alte cuvinte, nu reușiți să proiectați pentru mobil... nu reușiți să obțineți cât mai mulți vizitatori ai site-ului, clienți potențiali și clienți.
Să ne uităm la statistici.
Potrivit Smart Insights, am depășit punctul în care numărul de utilizatori de telefonie mobilă a depășit numărul de utilizatori de desktop. Acest punct de cotitură a avut loc în 2014. De atunci, numărul utilizatorilor de telefonie mobilă globală a continuat să crească agresiv, în timp ce numărul utilizatorilor de desktop a crescut mai puțin rapid.
Concluzia: mai mulți clienți potențiali, vizitatori și clienți vor ajunge pe site-ul dvs. pe telefoanele lor mobile, nu pe desktopurile lor.
Dacă doriți să vă maximizați conversiile, atunci site-ul dvs. trebuie mai întâi optimizat pentru mobil. Astăzi, UX mobil excelent este, de asemenea, marketing mobil de succes.
Hai să aruncăm o privire.
Cum să proiectați pentru UX mobil excelent: ce spun statisticile
Ori de câte ori doriți să stabiliți un caz de utilizare solid pentru justificarea cheltuielilor în afacerea dvs., să zicem, de exemplu, pentru designul pe mobil, trebuie doar să vedeți statisticile despre cum și unde cumpără oamenii în aceste zile. Du-te unde te duc dovezile.
Compania globală de tehnologie Criteo, care este specializată în marketing comercial, a publicat un comunicat de presă care a dezvăluit că vânzările de telefoane mobile doar în SUA reprezintă acum 52% din toate tranzacțiile de comerț electronic. În mod clar, dacă doriți să vindeți eficient și cu succes... aveți nevoie de o prezență mobilă foarte eficientă, cu un UX excelent.
Iată o altă statistică foarte interesantă care dezvăluie de fapt mai mult decât ceea ce pare, la prima vedere.
Potrivit raportului Adobe Mobile Retail, conversiile sunt de 2,8 ori mai mari pe desktop decât pe mobil. Dacă credeți că acest lucru înseamnă că nu este important să optimizați pentru mobil, gândiți-vă din nou. Acesta este, de fapt, un motiv cu atât mai mult pentru a vă angaja într-o strategie care să axeze pe mobil, mai ales că mobilul încă reprezintă mai mult trafic decât desktopul.
Motivul pentru care conversiile sunt mai mari pe desktop se datorează probabil faptului că experiențele mobile nu sunt atât de optimizate pe cât ar trebui să fie - nu pentru că oamenii nu preferă să facă cumpărături și să convertească de pe mobil, unde este mai convenabil pentru ei în primul rând !
Imaginează-ți un scenariu în care site-ul tău mobil este perfect optimizat, primește mai mult trafic decât site-ul tău desktop și înregistrează mai multe conversii decât desktop, totul pentru că ai implementat UX mobil excelent.
E la îndemâna ta. Iată ce să faci.
Design pentru degetele mari... dar nu în primul rând pentru degetele mari
Utilizabilitatea mobilă ar trebui să se bazeze pe toate modurile diferite în care oamenii sunt cunoscuți că interacționează cu smartphone-urile lor. Modul de proiectare pentru un UX mobil excelent este atât de bun simț, cât se bazează pe dovezi.
Este tentant să presupun că, dacă îmi folosesc smartphone-ul pentru a naviga și a face cumpărături pe un site mobil, este mai convenabil pentru mine să fac acest lucru ținând telefonul într-o mână și folosind degetul mare de pe aceeași mână pentru a-mi realiza utilizatorul. obiective. Este la fel de tentant să presupun că mi-ar fi mai puțin convenabil să folosesc ambele mâini (telefonul într-o mână și folosind degetul arătător de la cealaltă mână pentru a-mi îndeplini obiectivele de utilizator).
Cu toate acestea, această înțelepciune convențională este de fapt greșită, deoarece presupune că oamenii folosesc doar sau în principal o mână pentru a-și opera telefoanele.
Cercetările arată că există de fapt șase moduri distincte în care oamenii își țin telefoanele și interacționează cu ele. Orice site mobil care nu reușește să proiecteze pentru toate cele șase moduri va eșua și va experimenta rate de conversie mai scăzute, deoarece UX-ul va avea de suferit.
Cele șase moduri sunt:
- Legănat (o mână susține telefonul în timp ce cealaltă mână atinge degetul mare)
- Țineți și atingeți (o mână susține telefonul în timp ce degetul arătător al celeilalte mâini atinge)
- Două mâini pentru orientare peisaj (gândiți-vă la cum ați ține un dispozitiv de joc portabil precum Nintendo 2DS XL)
- O mână – prima comandă (o mână ține telefonul în timp ce degetul mare de pe aceeași mână atinge)
- O mână – a doua comandă (o mână ține telefonul în timp ce degetul mare de pe aceeași mână atinge, dar dintr-o poziție de pornire mai înaltă)
- Două mâini pentru orientarea portret (gândiți-vă la cum ați ține un dispozitiv de joc portabil, de data aceasta, ca vechiul Nintendo Gameboy)
Acum, și aici lucrurile devin cu adevărat relevante, iată diferitele cazuri de utilizare pentru diferitele moduri în care puteți ține un telefon:
- Atingerea legăturilor – Majoritatea țin apăsat și ating sau se sprijină
- Casete de bifare – Cele mai multe se bazează sau țin apăsat și ating
- Tastarea – Majoritatea folosesc două degete sau degetele mari simultan sau țin apăsat și ating
- Derulare scurtă – Majoritatea țin apăsat și ating sau se sprijină
- Derulare mai lungă – Cele mai multe se sprijină sau țin apăsat și atinge
Concluzie: proiectați-vă site-ul mobil pentru a se adapta la gama acestor moduri diferite în care oamenii își țin telefoanele.
Butoanele mai mari sunt mai bune
Dacă vă gândiți la cum să proiectați pentru o UX mobilă excelentă, unul dintre cele mai importante aspecte pe care trebuie să vă ocupați este dimensiunea butoanelor. Ca și în cazul tuturor lucrurilor mobile, dimensiunea ecranului dvs. este mult mai mică decât tableta sau desktopul, compromițând astfel capacitatea de utilizare a site-ului dvs. mobil dacă butoanele sunt prea mici. Butoanele de dimensiuni necorespunzătoare duc la erori UX precum:
- Dificultate de a atinge corect butoanele
- Probleme cu vizualizarea butoanelor în primul rând
- Îți este greu să înțeleagă că un buton poate fi apăsat sau interacționat în alt mod
Err pe partea de mai mare este mai bine.
Butoanele mai mari asigură o UX mai fluidă pentru cumpărători, clienți, vizitatori etc.
Asta ridică întrebarea, cât de mare, mai exact?
Conform ghidurilor Google Material Design Touch Target Size, butoanele mobile ar trebui să atingă o dimensiune a ecranului tactil între 7 și 10 milimetri. Cu alte cuvinte, butoanele ar trebui să aibă o dimensiune fizică de aproximativ 1 centimetru, indiferent de ecranul pe care apar. Acest lucru asigură un echilibru excelent între:
- Densitatea informației
- „Tirebilitatea” elementelor interfeței cu utilizatorul
Când utilizatorii dvs. pot vedea mai ușor butoanele, pot înțelege relația lor spațială cu alte elemente de pe ecran și le pot atinge pentru a îndeplini cu succes obiectivele paginii, atunci le oferiți UX uimitor.
Prioritizează conținutul cel mai important
Răspunsul la întrebarea, Cum să proiectați pentru un UX mobil excelent? uneori se află în ceea ce scazi în loc să adaugi. În cazul conținutului de pe ecran, această regulă se aplică 100%.
Binecuvântarea smartphone-urilor este dimensiunea lor mică și portabilă, în ciuda tendinței recente de a crește dimensiunea ecranului mobil. Această comoditate are un dezavantaj, și anume că utilizatorii sunt supuși unui cost de interacțiune mai mare. Acesta este efortul fizic și mental pe care trebuie să-l depună pentru a-și atinge obiectivele site-ului mobil.
De exemplu, dacă navigați pe un site de știri de pe desktop, probabil că veți putea vedea pe pagina de pornire scorurile sportive și prognoza meteo în barele laterale de deasupra paginii, astfel încât să nu vă deranjați să derulați în jos. Pe mobil, totuși, același conținut ar necesita probabil o derulare serioasă pentru a ajunge, deoarece spațiul este foarte important pe mobil.
Prin urmare, singura soluție este să prioritizați conținutul cel mai vital deasupra foldului pe mobil. Cu alte cuvinte, gândiți-vă bine ce conținut să le afișați utilizatorilor și vizitatorilor deasupra paginii dvs. mobile. La urma urmei, pentru fiecare element de conținut pe care îl includeți deasupra foldului, un alt element trebuie împins în jos și chiar sacrificat sub fold.
O abordare pentru a vă ajuta să maximizați conținutul mobil de deasupra pliului este de a minimiza așa-numitul chrome. Nu vorbim despre browserul Google în acest caz. Chrome este o colecție de elemente de design vizual care îi ajută pe utilizatori să interacționeze sau să ofere informații suplimentare despre conținutul unei interfețe, dar nu face parte din conținut. Chrome provine din sistemul de operare al telefonului mobil.
Un exemplu de chrome ar fi toate imaginile asociate cu conturile persoanelor atunci când vizualizați e-mailuri în căsuța de e-mail a aplicației Gmail. În acest exemplu, aceste imagini vă ajută să vă identificați în plus expeditorii, dar nu sunt absolut esențiale în identificarea lor (linia De la din e-mailul în sine ar fi suficientă).
Prin reducerea acestor elemente cromate, economisiți mult spațiul pe ecranul mobil și, prin urmare, aveți o șansă mai mare de a pune cele mai importante informații deasupra zonei mici de pliere.
Concentrați-vă pe utilizatorul final
Secretul modului de proiectare pentru un UX mobil excelent se rezumă întotdeauna la utilizatorul final. Țineți cont de acest lucru atunci când vă proiectați site-urile mobile și veți crea un site ușor de utilizat. Este atât de simplu.
Pentru a ajunge acolo, asigurați-vă că proiectați bazat pe date reale și nu pe presupuneri. Un loc minunat pentru a începe este modul în care utilizatorii dvs. își țin telefoanele în primul rând. Dacă proiectați pentru un mod în care mulți oameni nici măcar nu își țin telefonul în mână, atunci toate pariurile sunt oprite.
De asemenea, este esențial să ne amintim că, datorită ecranelor mobile mici, conținutul trebuie văzut ușor și rapid, așa că măriți elementele și asigurați-vă că conținutul cel mai important se află deasupra foldului.