Bottom tab bar, side drawer și Floating Action Button (FAB) sunt cele mai frecvent utilizate modele pentru navigarea mobilă de nivel superior. Dacă doriți să proiectați căi de navigare clare și simple, utilizați unul dintre aceste modele în aplicația dumneavoastră.
Bring in Actual Copy
După ce sunteți mulțumit de ierarhia dvs. vizuală, începeți să înlocuiți placeholders și textul fictiv cu conținut real (copy real sau cel care este relevant pentru utilizator). Există un motiv important pentru care ar trebui să evităm textul fictiv în această etapă – Lorem Ipsum nu comunică modul în care pagina sprijină utilizatorii în atingerea obiectivelor lor. De asemenea, o mulțime de elemente vizuale pe care le creăm se bazează pe conținutul pe care îl avem în produsele noastre. Pe măsură ce începeți să adăugați conținut real, vă veți da seama că unele elemente de interfață utilizator (sau chiar secțiuni de interfață utilizator) nu sunt necesare pentru produsul dumneavoastră.
Uneori, pe măsură ce vă umpleți wireframe-urile cu detalii reale, puteți observa că aspectul pe care îl aveți nu funcționează bine. În acest caz, este important să iterați și să găsiți o modalitate mai bună de a reprezenta informațiile pe care încercați să le comunicați.
După ce umpleți pagina cu texte reale, testați dacă pagina curge pentru utilizator. O parte din conținutul paginii dvs. ar putea să nu fie în ordine. Acesta este momentul perfect pentru a reorganiza conținutul paginii și pentru a îmbunătăți compoziția.
Mai jos este un exemplu de wireframe pentru ecranul nostru de pornire care are date reale. Diferite mărimi de fonturi sunt folosite pentru a prioritiza unele blocuri UI (cum ar fi categoriile de alimente).
Asigură-te că conținutul tău se scalează bine
Dacă designul tău arată foarte bine pe un ecran de telefon de dimensiuni medii, cum ar fi iPhone XS, nu înseamnă că utilizatorii de iPhone 5 și iPhone XS Max vor avea aceeași experiență excelentă. Deși este absolut în regulă să începeți cu un ecran de dimensiuni medii atunci când faceți wireframing, este, de asemenea, esențial să verificați cum arată conținutul pe diferite dimensiuni de ecran (atât pe cele mai mici, cât și pe cele mai mari) și să îl ajustați dacă este necesar.
Conectați paginile între ele pentru a crea un flux
În timp ce este posibil să vă livrați designul ca o colecție de ecrane individuale, este mai bine să creați un flux din ele. Fluxurile UX facilitează înțelegerea de către echipă a detaliilor scenariilor de interacțiune – acestea comunică modul în care oamenii ar trebui să interacționeze cu un produs.
Fluxurile UX vă vor face, de asemenea, să vă gândiți la funcționalitatea aplicației ca întreg. De exemplu, după vizualizarea fluxului UX, s-ar putea să observați că trebuie să introduceți o stare suplimentară între ecranul principal și o pagină cu rezultate de căutare (deoarece backend-ul sistemului dvs. va avea nevoie de câteva secunde pentru a returna rezultatele).
Este, de asemenea, o idee bună să dați fiecărui ecran un număr de referință. Numerele de referință vă vor face viața mult mai ușoară atunci când discutați despre proiect cu alți membri ai echipei sau cu părțile interesate.
Testați-vă deciziile de proiectare
Testarea este ultimul (și unul dintre cei mai importanți) pas din wireframing. Testarea implică interacțiuni cu utilizatorul, de aceea acest termen este adesea folosit în contextul prototipurilor. Dar este posibil să se efectueze teste simple pentru un flux creat din wireframe-uri. Folosind Balsamiq, este posibil să creați prototipuri simple, care pot fi accesate prin clic, prin conectarea wireframe-urilor între ele. Scopul unei astfel de testări este de a vedea dacă ecranele funcționează împreună.
Concluzie
Scopul final al wireframing-ului este de a identifica conturul conținutului și de a crea o bază solidă pentru etapele viitoare ale procesului de proiectare. Wireframele bine concepute fac mult mai ușoară proiectarea vizuală și de interacțiune.
Ca în cazul oricărei activități de proiectare, petreceți suficient timp experimentând cu diferite instrumente și procese și vă veți găsi propriul stil pentru wireframing. Practica face perfecțiunea.
Locuri de Nick Babich
Publicat inițial pe site-ul Balsamiq’s UI Education Site
.