8 Reguli de aur de proiectare mobilă

Designul mobil este o considerație relativ nouă, dar vitală. Doar un deceniu în urmă, proiectarea pentru web a însemnat proiectarea unui computer desktop; Acum înseamnă proiectarea pentru dispozitivele mobile. Telefoanele mobile conduc o cantitate tot mai mare de trafic web, iar numerele vor crește doar.

Potrivit Statistica, în octombrie 2018 am avut 3,9 miliarde de utilizatori unici de Internet mobil și mai mult de 50% din întregul trafic din întreaga lume a fost generată prin telefoanele mobile . Un mare design web nu mai este un lux, ci ceva de necesitate.

Crearea unei experiențe web excelente pentru utilizatorii mobili necesită mai mult decât crearea Designul web receptiv (deși un top Builder de site-uri web poate ajuta, ca poate web hosting alegere). În acest articol, puteți descoperi principiile fundamentale de proiectare a site-ului mobil.

01. Construiți experiențe orientate spre țintă

Utilizatorii mobili sunt utilizatori orientați spre obiective. De fiecare dată când vizitează un site web, au o sarcină specifică pe care doresc să o realizeze și se așteaptă să obțină ceea ce au nevoie foarte repede. Deci, cum poți să faci asta?

Imaginați-vă utilizatorii ideali: Similar cu construirea unei case, construirea unui site web începe cu o bază solidă. Iar fundația pentru designul web excelent este cunoașterea pe care o aveți despre utilizatorii dvs. Cercetarea utilizatorilor ar trebui să fie unul dintre primii pași ai proiectării produsului. Trebuie să vă dați seama exact pe cine sunt utilizatorii dvs. și ce vor să realizeze. Odată ce cunoașteți dorințele și nevoile utilizatorilor, puteți crea o călătorie de utilizator pe care o cunoașteți perfect așteptările lor (asigurați-vă că salvați concluziile în siguranță Stocare in cloud ). Apoi, purtând amănunțit Testarea utilizatorului vă veți asigura că ați realizat aceste obiective.

Rafinați experiența în jurul obiectivului dvs. de bază: Ce doriți să realizați cu acest site web? Găsirea răspunsurilor la această întrebare este un alt lucru important de făcut atunci când creați experiență web mobilă. Încercați să conduceți angajamentul, faceți utilizatorii să cumpere produse sau să vă înscrieți pentru un serviciu? Indicați în mod clar obiectivul și gândiți-vă cum puteți reduce numărul de pași pe care un utilizator trebuie să îl ia pentru a ajunge la ea.

02. Adaptați conținutul dvs. pentru a lucra într-un spațiu mai mic

Conținutul este ceea ce oferă valoare pentru majoritatea site-urilor web. Este motivul principal pe care îl vizitează oamenii. Când vine vorba de designul web mobil, este imposibil să faceți o experiență desktop și să o replicați pe mobil; Este important să proiectați site-uri web cu utilizatorii mobili în minte. Asta înseamnă că trebuie să ne adaptăm conținut și caracteristici pentru a găzdui dimensiunea și obiceiurile ecranului utilizatorului. Deci, ce pași puteți lua pentru a obține acest lucru?

Evitați defilarea orizontală: Utilizatorii sunt confortabili cu site-urile derulând vertical, dar nu orizontal. De aceea nu ar trebui să existe pagini în care este necesară defilarea orizontală pentru a vedea conținutul. Elementele cu lățimea fixă ​​reprezintă unul dintre motivele obișnuite care cauzează derularea orizontală, deci verificați dacă nu aveți conținut care afișează numai bine la o anumită lățime de vizualizare.

Scopul pentru un aspect unic de coloană: Layout-urile cu o singură coloană ajută la gestionarea spațiului limitat pe un ecran mic și, de asemenea, permite o scalare ușoară între modul portret și peisaj.

Asigurați-vă că utilizatorii nu trebuie să pună în zoom: Vizitatorii pot fi ușor frustrați atunci când trebuie să se amestece sau să se afle pentru a citi un text sau pentru a vedea o imagine. Proiectați site-ul dvs. mobil, astfel încât utilizatorii să nu mai trebui să schimbe dimensiunea.

Utilizați dimensiunea lizibilă a fontului: 11 puncte este dimensiunea minimă absolută pentru text. Această dimensiune permite utilizatorilor să citească textul la o distanță tipică de vizionare fără zoom.

Selectați fonturi care scară bine: Dacă experiența site-ului necesită citire, este mai bine să utilizați Tipforturi Sans-serif, cum ar fi Helvetica sau Roboto.

Utilizați designul prietenos cu degetul: Când proiectați un site mobil, amintiți-vă că vizitatorii își vor folosi degetele în loc de o săgeată cu șoarece, iar vârful degetelor umane sunt mai mari decât un indicator al mouse-ului. Încercați să proiectați o interfață prietenoasă cu degetul în care fiecare element interactiv este dimensionat corespunzător.

Un studiu MIT Touch Lab a constatat că dimensiunea medie a unui deget este de 8-10mm , făcând 10mm x 10mm o dimensiune minimă de atingere minimă.

De asemenea, luați în considerare distanța relativă dintre țintele touch. Dacă elementele interactive sunt amplasate prea aproape unul de celălalt, utilizatorii mobili pot apăsa accidental un buton greșit cu degetul. Pentru a preveni acest lucru, asigurați-vă că ați dimensionat corect butoanele și adăugați suficient spațiu între ele.

Faceți imagini de produs expandabile: Multe studii au demonstrat că oamenii sunt predominant de cursanți vizuali. Majoritatea oamenilor sunt capabili să înțeleagă și să înțeleagă conceptele mult mai bune atunci când sunt livrate în acest fel, motiv pentru care utilizarea imaginilor în designul web este o modalitate excelentă de a rezuma rapid mesajele cheie.

Imaginile joacă un rol vital în site-urile web de comerț electronic - oamenii se bazează pe imagini de produs atunci când iau o decizie. Este esențial să nu furnizați numai active de înaltă calitate, ci și să le facem expandabile, astfel încât utilizatorii să le poată vedea cu ușurință în detaliu. Extindeți întreaga imagine mai degrabă decât o parte din ea.

Fiți atenți la promoții și anunțuri: Promoțiile și anunțurile pot umbri cu ușurință conținutul. În timp ce mesajul anunțului ar putea funcționa pentru unii vizitatori, într-o majoritate de cazuri, utilizatorii o sări peste și treceți la informații mai valoroase. Acest fenomen este cunoscut sub numele de orbire banner.

Facilitează găsirea de informații de contact: Utilizatorii mobili vizitează adesea site-uri web pentru a găsi informații de contact. În funcție de urgență, utilizatorii ar putea dori să apeleze la o companie, să completeze un formular de contact sau să găsească adresa. Pentru site-urile web de comerț electronic, numărul de telefon trebuie să fie disponibil direct pe ecranul inițial.

03. Optimizați conținutul pentru scanare

Este un fapt bine-cunoscut faptul că utilizatorii nu citesc online; scanează. Când un nou vizitator abordează o pagină Web, primul lucru pe care îl încearcă să facă este să scaneze pagina și să împartă conținutul în bucăți digerabile de informații. Este posibil să faceți această sarcină mai ușoară pentru utilizatori, urmând câteva reguli simple.

Minte ordinea în care furnizați conținutul pe o pagină: Oamenii citesc de sus în jos. De aceea este important să păstrați lucrurile importante din partea de sus a unei pagini și să mutați restul în funcție de ierarhie.

Tăiați dezordinea: Prioritizați conținutul asupra elementelor de interfață utilizator - reduceți distragerile prin eliminarea elementelor funcționale și decorative inutile. Străduiți-vă să creați un stil minimalist, deoarece făcând acest lucru, veți face ușor pentru ca utilizatorul să se concentreze asupra sarcinii.

Evitați blocurile lungi de text fără imagini: Este foarte probabil că vreun fel de conținut imens va fi omis. Utilizați titluri, paragrafe sau puncte de bullet pentru a sparge textul.

Puneți mai multă greutate vizuală pe elemente importante: Efectuați elemente importante, cum ar fi punctele focale ale mesajelor cheie, astfel încât vizitatorii să le vadă imediat. Subliniați elementele folosind diferite dimensiuni, spațiu alb sau culori vibrante.

04. Creați navigație previzibilă

Ajutând utilizatorii să navigheze ar trebui să fie o prioritate de top pentru fiecare site web. La urma urmei, conținutul cel mai convingător este inutil dacă oamenii nu o găsesc. De aceea este important să investești în proiectarea unui sistem de navigație solidă, folosind unele dintre următorii pași.

Utilizați modele familiare de navigare: Când vine vorba de crearea unui mecanism de navigație pentru site-ul dvs., merită să vă amintiți o regulă simplă: nu reinventați roata - se străduiește să creați o experiență familiară. Este întotdeauna mai bine să vă bazați pe modele de navigare pe care majoritatea utilizatorilor îl cunosc (cum ar fi bara de navigare de top sau meniul Hamburger), mai degrabă decât să creeze propriul sistem unic de navigare (de exemplu, sistemul de navigație bazat pe gest). Când creați navigație familiară, ajută utilizatorii să se bazeze pe experiența lor anterioară atunci când interacționează cu produsul dvs.

Puneți o limită a numărului total de opțiuni de navigare: Nu puneți prea multe opțiuni în meniuri. Un meniu extins ar putea funcționa bine pentru site-urile desktop, dar nu se potrivesc designului mobil. Deoarece nu toate opțiunile de navigare vor fi disponibile într-o zonă vizibilă a ecranului, veți forța utilizatorii mobili pentru a derula o listă de opțiuni. Gândiți-vă cum puteți prezenta cele mai puține elemente de meniu posibile. În mod ideal, meniul pe care îl proiectați ar trebui să aibă mai mult de șapte categorii distincte .

Prioritizați opțiunile de navigare : Organizați navigația pe baza modului în care utilizatorii lucrează cu funcționalitate. Cele mai populare opțiuni de navigare dintr-un meniu global ar trebui să meargă în partea de sus și acțiunile primare ar trebui să fie disponibile într-o zonă vizibilă a ecranului.

Scrierea etichetelor clare: Fiecare opțiune de navigare ar trebui să aibă o etichetă clară și concisă. Evitați jargonul - Navigarea pe care o proiectați nu ar trebui să conțină termenii că vizitatorii dvs. nu vor înțelege. Etichetele clare vor oferi vizitatorilor capacitatea de a prezice rezultatul acțiunilor lor.

Asigurați-vă că elementele interactive arată ca elemente interactive : Când proiectați butoanele și legăturile, gândiți-vă cum comunică designul. Cum înțeleg utilizatorii elementul ca obiect interactiv? Modul în care arată un obiect îi spune utilizatorilor cum să o folosească. Elemente vizuale care arată ca legături sau butoane, dar nu sunt interactive (cum ar fi cuvintele subliniate care nu sunt link-uri sau cutii dreptunghiulare cu cuvinte care nu sunt butoane) pot confunda cu ușurință utilizatorii.

Comunicați locația curentă: "Unde sunt?" este o întrebare fundamentală la care utilizatorii au nevoie de un răspuns pentru a naviga în mod eficient. Indicați clar locația curentă.

Furnizați o caracteristică de căutare: Dacă proiectați un site complex cu o mulțime de conținut sau caracteristici, trebuie să vă asigurați că furnizați o bară de căutare pentru o navigare ușoară. Prin implementarea funcționalității de căutare, furnizați o cale rapidă către informații / caracteristici pentru utilizatorii mobili care vin la site cu o întrebare specifică în minte.

Nu ascundeți opțiunea de căutare din meniu. Ar trebui să fie unul dintre primele lucruri vizitatorii văd pe paginile dvs.

Facilitează ca utilizatorii să se întoarcă la pagina de pornire: Vizitatorii se așteaptă ca atunci când ating logo-ul în partea de sus a unei pagini, ei se vor întoarce înapoi la pagina de pornire și vor deveni frustrați dacă nu funcționează.

Păstrați utilizatorul într-o singură fereastră: Evitați apelurile la acțiune care trimit un utilizator către ferestre noi. Unii utilizatori vor avea probleme cu trecerea între Windows într-un browser mobil și ar putea să nu poată găsi pagina anterioară.

05. Evitați crearea blocurilor de drumuri

Road-urile creează frecare și frecare este cel mai rău dușman al convertirii. Din fericire, există lucruri simple pe care le puteți face pentru a le împiedica.

Nu întrerupeți vizitatorii: Pop-up-urile mari sunt unul dintre cele mai tipice tipuri de întrerupere a experienței web. De mult timp, astfel de bannere au fost dedicate mesajelor promoționale, dar, recent, multe site-uri au început să folosească pop-up-urile distractive pentru a obține permisiunea de a utiliza cookie-urile (GDPR). Indiferent de informațiile pe care doriți să le arătați vizitatorilor dvs., asigurați-vă că nu vă distrage atenția de la experiența generală.

Nu faceți utilizatorii să părăsească site-ul dvs. web: Identificați locațiile din călătoriile cu utilizatorul care ar putea determina un utilizator să se uite în afara site-ului dvs. și apoi să furnizeze conținut / caracteristici pentru a le menține pe site-ul dvs. Un câmp de cod promoțional pe site-urile web de comerț electronic este probabil cel mai frecvent exemplu care face ca vizitatorii să părăsească un site în încercarea de a găsi cuponul. Este mult mai bine să oferiți câteva cupoane chiar pe site pentru a preveni un astfel de comportament.

Nu forțați utilizatorii să se înscrie: Utilizatorii exigenți înregistrează înainte de a putea vedea informații sau pot utiliza un serviciu online are un cost de înaltă interacțiune - forțarea înregistrării prea devreme Pentru ca utilizatorii să abandoneze site-ul . Înainte de a furniza informații personale, vizitatorii doresc să aibă un sentiment de ceea ce le oferă un site.

Pentru a crea un flux de utilizator cu cele mai mici bariere în calea conversiei, site-urile mobile ar trebui să permită vizitatorilor să exploreze conținutul fără a fi nevoie să se înscrie. Pentru site-urile web de comerț electronic, este esențial să lași utilizatorii să cumpere ca oaspete.

Facilitează trecerea la un alt dispozitiv pentru a continua călătoria: Nu considerați mobile ca experiențe autonome. Un utilizator tipic are mai multe dispozitive, cum ar fi un desktop, telefon mobil și comprimat și se așteaptă să aibă o experiență fără probleme la toate aceste dispozitive atunci când se utilizează produsul dvs. De exemplu, mulți oameni folosesc dispozitive mobile numai pentru căutarea de produse și apoi treceți la desktop pentru a converti. Utilizatorii se așteaptă să continue călătoria de unde s-au oprit pe mobil.

Iată câteva lucruri pe care le puteți face pentru a sincroniza progresul actual al unui utilizator:

• Sincronizați lista de dorințe, favorite și coș pentru un cont de utilizator.
• Oferiți o modalitate ușoară de a salva sau de a partaja informații între dispozitive pentru utilizatorii neînregistrați (cum ar fi o opțiune de a trimite link-ul la e-mail).

06. Formulare eficiente de proiectare

Introducerea formei este una dintre cele mai frecvente sarcini de pe web. Este greu să vă imaginați orice experiență care nu necesită utilizatori să completeze un fel de formă. Deoarece este o practică atât de omniprezentă, capacitatea de a completa o formă fără durere este esențială pentru păstrarea unui utilizator angajat. Iată câteva sfaturi care vă pot ajuta să păstrați frecarea la un minim:

Minimizați inputurile în forme: În general, cu atât mai puține date trebuie să ofere un utilizator, cu atât mai mult să vă bucurați de experiența dvs. web. Aceste indicatori vă vor ajuta să reduceți apăsările de taste și utilizatorii de intrări trebuie să facă:

• Minimalizați numărul total de câmpuri. Întotdeauna păstrați formularele cât mai scurte și simple posibil prin eliminarea oricăror câmpuri inutile. Cereți doar ceea ce aveți cu adevărat nevoie să știți.
• Utilizați auto-corectă, auto-capitalizare și auto-completare pentru a reduce șansa de eroare de utilizator.
• Evitați câmpurile derulante. Dropdown-urile ascund opțiunile și acest lucru creează costuri suplimentare de interacțiune - utilizatorii trebuie să atingă de două ori pentru a selecta opțiunea corectă. Dacă utilizați un câmp derulant pentru o selecție de opțiuni, luați în considerare înlocuirea acestuia cu butoanele radio.
• Mutați automat în câmpul următor când un utilizator presează revenirea.
• Minimizați erorile din formular cu validare în timp real.
• Utilizați informațiile existente pentru a maximiza confortul. De exemplu, puteți pre-umple unele câmpuri, cum ar fi adresa de expediere sau informațiile de facturare pentru utilizatorii dvs. înregistrați.
• Gândiți-vă la oferirea unor mecanisme de intrare alternative. Luați în considerare ce capabilități ale dispozitivului pot fi utilizate pentru a oferi o experiență mai bună a utilizatorului. De exemplu, în loc de a cere utilizatorilor să introducă detaliile cărții de credit, să furnizați opțiunea de a utiliza camera dispozitivului pentru a scana cardul și a integra sistemele precum plata Apple și Google Pay pentru a activa plata într-o singură atingere.

Furnizați tastatura potrivită: Utilizatorii mobili apreciază site-urile care oferă o tastatură adecvată pentru domeniu. Această caracteristică le împiedică să trebuiască să efectueze orice acțiuni suplimentare. De exemplu, când utilizatorii trebuie să introducă un număr de telefon, site-ul dvs. ar trebui să afișeze tastatura numerică 0 la 9.

Setați tipurile de introducere HTML pentru a afișa tastatura corectă. Iată șapte tipuri de intrare relevante pentru a forma designul:

• Tipul de intrare = "Text" Afișează tastatura normală a dispozitivului mobil.
• Introduceți tipul = "Email" Afișează tastatura normală și "@" și ".com".
• Tipul de intrare = "tel" Afișează tastatura numerică 0 la 9.
• Tipul de intrare = "Număr" Afișează o tastatură cu numere și simboluri.
• Tipul de intrare = "Data" Afișează selectorul de date al dispozitivului mobil.
• Tipul de intrare = "DateTime" Afișează selectorul dispozitivului mobil al dispozitivului mobil.
• Tipul de intrare = "Luna" Afișează selectorul de luni și an al dispozitivului mobil.

Permite utilizatorilor să modifice câmpul de locație: Multe site-uri web detectează locația utilizatorului și utilizează aceste informații pentru a oferi apoi conținut relevant. Este esențial să permiteți utilizatorilor să modifice locația deoarece, în unele cazuri, utilizatorii ar putea dori să vadă rezultate pentru un alt loc.

07. Străduiți să creați o experiență consistentă

Consistența este una dintre pilonii cheie ai experienței utilizatorului. Designul consistent este un design ușor de utilizat - concentrându-se pe crearea unui design consistent, creați un design mai intuitiv. Întotdeauna se străduiește să faci site-ul atât intern cât și în exterior consecvent.

Consistenta interna: Creați o bibliotecă consistentă de active de proiectare și utilizați-o pentru toate paginile site-ului dvs. web. Fonturi, butoane, link-uri, pictograme și toate celelalte elemente UI trebuie să fie consecvente pe site pentru a păstra consistența vizuală.

Consistența externă: Asigurați-vă că site-ul pe care îl proiectați arată ca o parte a unei familii mai mari de produse. De exemplu, dacă aveți o aplicație mobilă, site-ul dvs. mobil ar trebui să transmită un sentiment de familiaritate pentru utilizatorii care îl folosesc.

08. Construiți-vă cel mai bun site mobil

Toate punctele menționate aici pot fi considerate cele mai bune practici din industrie. Dar doar pentru că ceva se numește "cele mai bune practici" nu înseamnă că este soluția optimă pentru site-ul dvs. web. De aceea este întotdeauna important să vă testați deciziile de proiectare. Asigurați-vă să testați o parte obligatorie a procesului de proiectare și să îmbunătățim experiența în mod regulat.

Acest articol a fost publicat inițial în numărul 317 din net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpăra problema 317. sau Abonați-vă la Net. .

Articole similare:

• 6 tendințe care schimbă fața designului UI mobil
• 10 sfaturi pentru un design de UX mai bun
• Cum se proiectează interfețe mobile ușor de utilizat