Timp estimat: 1-2 ore. Vă recomand să faceți acest exercițiu cu părțile interesate cheie.
Să pornim de la premisa că ați fost însărcinat să creați o aplicație mobilă. Primul lucru pe care ar trebui să-l întrebați este: „Ce problemă rezolv și pentru cine o rezolv?”. Răspunsurile la această întrebare compusă vor pune bazele proiectării dumneavoastră, deoarece vor oferi informații care ar putea conduce caracteristicile și funcțiile proiectelor dumneavoastră. De asemenea, aceste răspunsuri vă vor ajuta cu siguranță să decideți care va fi MVP (minimum viable product) pentru designul dumneavoastră.
De exemplu, este posibil să aveți o mulțime de caracteristici pe foaia de parcurs a produsului, dar trebuie să vă concentrați doar pe caracteristicile esențiale pentru a lansa cu succes prima versiune a aplicației. Puteți începe prin a vă întreba „Ce caracteristici și funcții trebuie să creăm pentru ca grupul nostru demografic țintă să își poată îndeplini obiectivul/task-ul?”
Pentru a răspunde la această întrebare, puteți crea un flux de utilizator bazat pe „calea fericită” a utilizatorului principal (vă puteți concentra asupra tuturor cazurilor limită mai târziu). Vă recomand o tablă albă pe care să scrieți mai întâi toți pașii cheie ai utilizatorului. Odată ce ați scris acești pași cheie, puteți începe să creați schițe de nivel înalt ale acestor pași. Acest lucru vă ajută să determinați de ce affordances are nevoie utilizatorul la fiecare pas și ține la distanță scope creep.
Nota: Încercați să vă împiedicați să faceți schițe fără să scrieți mai întâi fluxul utilizatorului. Mintea noastră poate deveni foarte creativă și se poate abate de la traseu dacă ne aruncăm direct în schițe.
Iată cum poate arăta acest exercițiu după ce ați scris fluxul utilizatorului și ați creat schițe aproximative sub acesta. Țineți minte, nu trebuie să fie drăguț, dar ar trebui să transmită ideile dvs. suficient de mult pentru a trece la pasul următor, wireframes digitale.
- Exemplu 1
- Exemplu 2
- Exemplul 3
- Etapa a doua: Wireframes digitale de fidelitate redusă
- Etapa a treia: Wireframes digitale de înaltă fidelitate
- Câteva principii directoare pentru crearea unor aplicații mobile mai bune
- Atunci cum creați designuri omniprezente și fiți agnostici față de dispozitive? Iată cum o fac eu:
Exemplu 1
Exemplu 2
Exemplul 3
Etapa a doua: Wireframes digitale de fidelitate redusă
Timp estimat: 2-3 zile, în funcție de domeniul de aplicare al MVP.
După ce v-ați dat seama de wireflows-ul MVP, următorul pas este crearea unor wireframes ușor mai detaliate. Ați putea crea un prototip pe hârtie sau puteți trece direct la wireframes digitale (dacă viteza este esențială, de obicei sar la wireframes digitale).
Nota: Dacă lucrați cu un brand stabilit, ar putea fi posibil să folosiți componente dintr-un sistem de design existent și ați putea să treceți direct la fidelitatea înaltă, Pasul 3, de mai jos.
Vă recomand să creați artboards pentru ecranele cheie pe care le-ați descoperit în exercițiul de schițe. Numărul de ecrane de care aveți nevoie va crește pe măsură ce treceți prin procesul de wireframing de la schițe, wireframes de fidelitate redusă, la wireframes de fidelitate ridicată.
Pentru wireframele digitale de fidelitate redusă, utilizați instrumentul de proiectare ales de dvs. pentru a crea forme simple și folosiți fonturi de bază pentru a vă crea wireframele. Există, de asemenea, multe kituri UI care pot accelera acest proces și pot crea proiecte de fidelitate redusă care sunt puțin mai atractive din punct de vedere vizual. De asemenea, vă recomand să folosiți o dimensiune mediană a artboard-ului care ar putea funcționa pe majoritatea dimensiunilor ecranului de telefon. Dacă aveți date despre grupul demografic țintă și ce dimensiune a telefonului este predominant folosită de acesta, atunci mergeți cu acea dimensiune a ecranului.
Utilizez o dimensiune de artboard de 875 x 667px atunci când folosesc Adobe XD (sau orice instrument de proiectare, deoarece majoritatea au dimensiuni prestabilite încorporate), deoarece este „calea de mijloc” a dimensiunilor de ecran (în special pentru iPhone). Am constatat că această dimensiune funcționează bine pentru iPhone 8 și iPhone X și am constatat că funcționează bine și pentru Android.
Iată un exemplu de ecrane de fidelitate redusă în acțiune:
După ce ați creat ecranele de fidelitate redusă, v-ați testat modelele cu utilizatorii și ați primit acordul părților interesate, sunteți acum gata să creați ecranele de înaltă fidelitate.
Etapa a treia: Wireframes digitale de înaltă fidelitate
Timp estimat: 1+ săptămâni. Acest lucru va depinde de faptul dacă aveți un sistem de proiectare în vigoare sau dacă îl creați de la zero pe parcurs. Această etapă durează, de asemenea, mai mult, deoarece probabil vor fi adăugate mai multe ecrane decât în faza de fidelitate redusă.
Această etapă este cea în care desenele dvs. capătă viață! Este, de asemenea, faza în care desenele dvs. încep să semene cu adevărat cu o aplicație mobilă funcțională pe care o puteți prototipui, testa, itera, obține aprobarea și apoi, în cele din urmă, o puteți preda echipei de dezvoltare.
Considerații:
- Dacă produsul la care lucrați are deja un brand stabilit, cel mai probabil veți extrage culorile, pictogramele și fonturile din liniile directoare ale brandului.
- Dacă produsul la care lucrați nu are un aspect de marcă pe deplin stabilit, puteți folosi să găsiți și să folosiți un kit UI pentru a accelera procesul de proiectare.
Următorul considerent este cu ce ecrane începeți? Puteți începe cu:
- Ecrane cheie pentru fiecare secțiune a navigației principale, sau;
- Fluxuri cheie pentru utilizator, sau;
- Prioritizați ecranele pe care le proiectați pe baza ordinii programului de dezvoltare (de obicei, aici încep eu, astfel încât să pot lucra într-o metodă agilă, asigurându-mă că am ecrane pregătite pentru predare pe măsură ce echipa de dezvoltare are nevoie de ele).
În acest exemplu, voi arăta procesul de utilizare a unui kit UI stabilit în Adobe XD. Și voi începe cu autentificarea/înscrierea utilizatorului și crearea profilului, deoarece echipele de dezvoltare cu care am lucrat încep de obicei cu gestionarea utilizatorilor în procesul de dezvoltare a aplicațiilor.
Kit-ul de interfață utilizator pe care l-am ales are deja o paletă de culori stabilită, stiluri de caractere și elemente comune de interfață utilizator (aka componente) care pot fi copiate și lipite în toate wireframe-urile.
Nota: Încă de la început, vă recomand să transformați orice elemente pe care intenționați să le reutilizați în componente (sau simboluri). În acest fel, dacă aveți nevoie să schimbați săgeata de întoarcere dintr-o săgeată ” ← ” într-un morcov „<„, o puteți modifica prin intermediul componentei principale și o puteți actualiza în toate wireframe-urile, în loc să trebuiască să copiați și să lipiți modificarea pe fiecare ecran care trebuie actualizat.
Exemplu de culori, stiluri de caractere și componente:
Pentru a începe procesul, aș începe să construiesc ecranele de primire, de conectare și de profil al utilizatorului:
În continuare, aș începe să construiesc elementele de navigare globală:
După aceasta, aș începe să creez fire de înaltă fidelitate pentru toate fluxurile de utilizatori pentru aplicație, începând cu fluxurile prioritizate pe baza livrării către dezvoltare (sau pentru orice elemente care încă mai au nevoie de testarea utilizatorilor).
Vă recomand să creați fișiere de proiectare separate pentru fiecare dintre fluxurile de utilizator cheie, astfel încât să puteți crea cu ușurință prototipuri și să le puteți partaja cu dezvoltarea atunci când lucrați într-o metodă agilă (de exemplu, un fișier pentru înregistrarea utilizatorului și crearea contului, un fișier pentru mesagerie, un fișier pentru experiența de căutare etc.).
Pe măsură ce proiectele sunt aprobate și predate dezvoltării, vă recomand să creați un fișier principal cu toate ecranele și componentele principale. Atunci când se lucrează în echipe, recomand, de obicei, ca o singură persoană să se ocupe de fișierul master pentru a reduce confuzia. În acest fel, fiecare membru al echipei știe că trage din fișierul master aprobat, master file, atunci când lucrează la crearea de noi caracteristici și fluxuri pentru aplicație.
De exemplu, iată o vedere de ansamblu a unui fișier master pentru unul dintre proiectele mele. Observați că am grupat și ordonat ecranele în funcție de fluxul utilizatorului și de prioritatea de dezvoltare. Voi continua să adaug la acest fișier principal pe măsură ce construiesc următoarea secvență de fluxuri de utilizatori.
Câteva principii directoare pentru crearea unor aplicații mobile mai bune
Acum că știți cum să începeți să faceți wireframing-ul experiențelor dvs. digitale, este timpul să vă ridicați nivelul abordării de proiectare. Dacă creați o experiență pentru dispozitive mobile, pe sisteme de operare precum iOS și Android, există câteva considerente cheie de care trebuie să țineți cont. Iată câteva sfaturi generale (și câteva opinii personale) despre proiectarea aplicațiilor mobile și despre cum să petreceți mai puțin timp cu proiectarea pentru fiecare tip de dispozitiv de pe piață. Dacă sunteți în căutare de mai multă inspirație, puteți verifica, de asemenea, aceste exemple de wireframe pentru site-uri web și aplicații mobile.
Am o convingere puternică că un design ar trebui să fie cât mai omniprezent posibil. Așa că, ori de câte ori este posibil, încurajez un design agnostic sistemului de operare. Iată de ce:
- Dacă un utilizator trece de la un telefon Android la un iPhone, acesta nu ar trebui să fie nevoit să învețe două moduri diferite de a utiliza o aplicație care rezolvă aceeași nevoie. Soluția ar trebui să fie în continuare aceeași. Acum, știu că pot exista diferențe de gesturi și de affordances specifice dispozitivelor, dar cred că o aplicație ar trebui să ofere aceeași interfață și același flux de utilizare indiferent de sistemul de operare. Iar funcțiile importante nu ar trebui să fie ascunse prea adânc în meniurile contextuale; acesta este doar un UX prost.
- Este costisitor să proiectezi, să dezvolți și să întreții două (sau mai multe) experiențe total diferite (mai ales când experiența ar putea fi aceeași indiferent de platformă).
- În timpul proiectării și întreținerii experiențelor diferite, experiențele pot începe să devină foarte diferite. Acest lucru poate dăuna brandului și poate îngreuna urmărirea și implementarea feedback-ului și a caracteristicilor.
Atunci cum creați designuri omniprezente și fiți agnostici față de dispozitive? Iată cum o fac eu:
- Tratați-mi proiectele mobile ca și cum aș proiecta pentru web mobil. Proiectele mele sunt responsive pentru că există o infinitate de dimensiuni de ecran și densități de pixeli (acestea se schimbă la fel de repede cum companiile le pot proiecta). În calitate de designeri, nu avem timp să proiectăm pentru fiecare densitate de pixeli și, oricum, nu cred că clienții mei vor să plătească pentru acest timp. Așadar, folosesc o lățime a artboard-ului de 375, care funcționează pentru majoritatea modelelor moderne de iPhone și Android.
- Fac față formei ciudate a ecranului de pe iPhone X și iPhone 11 spunându-i echipei de dezvoltare să extindă doar culoarea de fundal a antetului în partea de sus.
- Sunt norocos să am la îndemână mai multe tipuri de telefoane diferite, astfel încât să pot apoi să îmi testez proiectele prin intermediul aplicației mobile XD folosind un USB. Acest lucru este util deoarece pot testa dimensiunile fonturilor, punctele de atingere ale UI și vizibilitatea conținutului ecranului atunci când tastatura este ridicată. Pot, de asemenea, să testez linia de „pliere” și să mă asigur că conținutul important, cum ar fi CTA-urile și conținutul important, rămâne vizibil și nu dispare din partea de jos a ecranului.
- Încerc să folosesc numai gesturi care sunt universale, de exemplu, atingeți, glisați, apăsați și țineți apăsat. Cred că ar trebui să ne putem concentra pe cea mai bună experiență a utilizatorului, indiferent de sistemul de operare.
- Utilizez SVG-uri pentru toate pictogramele și logo-urile, astfel încât acestea să arate foarte bine pe orice rezoluție a ecranului.
- Utilizez structuri de navigare și de meniu care sunt universale și nu prea specifice sistemului de operare.
Singurul moment în care trebuie să proiectez wireframe-uri care sunt specifice unui dispozitiv este atunci când realizez prototipuri și apelez la o funcție nativă a dispozitivului, cum ar fi aparatul foto. Chiar și aceasta poate varia de la un telefon la altul și de la un sistem de operare la altul.
Majoritatea clienților mei încep cu iOS. Testăm și validăm designul și, odată ce este pe drumul cel bun, apoi dezvoltăm pentru Android. Și știți ce? Încercăm să nu schimbăm deloc interfața de utilizare sau fluxurile utilizatorilor. În schimb, ne concentrăm pe branding, aspect, caracteristici și funcții și fluxuri de utilizatori. Totul se întoarce la cel mai important lucru: experiența de bază a utilizatorului.
.
