5 pași pentru Wireframing și Paper Prototyping Aplicații mobile

Acest articol se bazează pe articolul nostru precedent despre Procesul de proiectare mobilă, explorând mai adânc în faza de fabricare a prototipurilor de hârtie și de fâșia de sincronizare a aplicațiilor. În final, voi avea o listă cu diferitele instrumente pe care le puteți utiliza pentru a vă crea cadrele și prototipurile.

Designul de interacțiune pentru dispozitive mobile este un subiect obișnuit de conversație între profesioniștii cu experiență în domeniul utilizatorilor (UX), dar cum rămâne cu cei dintre noi care lucrează ocazional numai cu UX? Mulți designeri și dezvoltatori sunt desemnați proiecte care nu au luxul de a păstra un specialist UX, dar sunt, desigur, încă de așteptat să producă interfețe elegante și intuitive.

Lucrări de fasonare și hârtie

Nu a fost o cantitate decentă de discuții în comunitatea de experiență a utilizatorilor în jurul necesității de wireframing în designul de web în aceste zile, și am început să mă întreb "se aplică acest lucru pentru mobil?" Sunt wireframes doar un livrare proiectabile facturabile pentru a permite clientului să știe lucrau"? Nu, cred că este mai mult decât atât. Wireframing și prototipuri de hârtie evoluează cu siguranță ca prozacitatea online a utilizatorilor și gusturile devin mai rafinate, dar această practică este încă o componentă foarte valoroasă în designul mobil.

Prototyping de hârtie vine întâi

Din experiența mea, există o mare diferență în forma și funcția protozoarelor de tip wireframes față de hârtie, chiar dacă termenii pot fi utilizați interschimbabil. În procesul meu de design mobil, primul lucru care se întâmplă după ce ne dăm seama cine folosește aplicația și cum, este prototipurile de hârtie -NOT wireframes.

Există unii care pretind că "hârtia este moartă" și că beneficiază de prototipurile digitale. Alții susțin că creionul și hârtia împiedică designul. Personal, am venit cu mai multe planuri fluide când nu sunt în fața calculatorului meu. Cu toate acestea, suntem cu toții indivizi, cu preferințe și moduri diferite de gândire. Poate că puteți fi la fel de creativ în fața computerului; este ceva ce fiecare designer trebuie să-și dea seama pentru ei înșiși!

Un lucru pe care-l iubesc despre prototipurile de hârtie offline este viteza la care puteți itera designul. Eu folosesc note lipicioase de dimensiuni de ecran care pot fi rapide retrase, reprocesate, rearanjate etc. Odată ce un flux a fost stabilit pentru aplicație, este timpul să cuibărești elementele de pe ecran într-o versiune în format wireframed.

Wireframes veni al doilea și trebuie să fie partajat

Chiar dacă aceasta este o aplicație pentru propriul dvs. "client" intern, fire de rețea reprezintă o altă examinare pentru a vă asigura că aplicația funcționează într-un mod care să servească atât utilizatorul, cât și compania. Ați putea sări peste proces și să vă deplasați direct de la prototipuri de hârtie la Photoshop pentru design GUI. Știu că este tentant, dar nu o faceți! Momentul în care începeți să lucrați într-un balon este același timp când vă dați "blestemul cunoașterii".

În cartea Made to Stick, autorii și frații Chip și Dan Heath vorbesc despre "Blestemul cunoașterii" și impactul său asupra capacității noastre de a crea noi idei "lipicioase". Premisa, deoarece se referă la designul mobil, este odată ce începeți să vă construiți baza de cunoștințe a designului și tehnologiei mobile, cu cât vă distanța mai mult de un utilizator tipic de aplicație. Nu-ți poți imagina cum e să fii audiența ta, chiar dacă îți potrivești perfect profilul. Abilitatea dvs. de a vă pune în pantofii publicului devine neclintită de tot ce știți deja despre aplicație, cum funcționează și ce credeți că vrea publicul.

Odată ce știm ceva, ni se pare greu să ne imaginăm cum era să nu știi asta. Cunoștințele noastre ne-au "blestemat". - Am făcut-o
Toate acestea înseamnă că trebuie să instalați o rețea și să împărțiți aceste rețele cu publicul țintă al aplicației.

Acum, când s-au definit prototipurile de sârmă și hârtie în contextul mobil, aș dori să subliniez primele cinci lucruri pe care ar trebui să le faceți în cadrul sesiunilor dvs. de sincronizare a firului și a hârtiei. Este ușor să plictisiți doar o grămadă de schițe și să o numiți o zi, mai ales dacă sunteți în centrul atenției nu este designul experienței utilizatorului.

Speranța mea este că aceste sfaturi vă vor încuraja să acordați timp pentru a vă gândi la experiența utilizării aplicației dvs., făcându-i un proces ușor, pas cu pas, repetabil și ușor de urmărit!

1. Concentrați-vă pe sarcina primară

Primul lucru pe care trebuie să-l faceți înainte de a vă gândi să puneți stiloul pe hârtie este să vă puneți întrebarea: care este sarcina principală a aplicației dvs.? Notați în mod specific:

(Diferențiatorul tău) (soluția ta) pentru (publicul tău).

Să vedem un exemplu pentru aplicația Evernote:

"Evernote pentru iPhone vă permite să creați note, să fotografiați fotografii și să înregistrați note vocale pe care le puteți accesa în orice moment de pe iPhone, pe computer sau pe web".

Copia pe site-ul lor explică în mod clar sarcina principală pentru aplicație:

(Omni-accesibil) (creare și stocare de mai multe tipuri de fișiere) pentru (utilizatorii iPhone ocazionali).

Definiți această declarație pentru aplicația dvs. și atașați-o într-un loc în care veți vedea frecvent în timp ce lucrați la prototipuri. Acesta vă va ajuta să rămâneți concentrat pe un singur lucru pe care APP trebuie să-l facă.

2. Creați scenarii de utilizare a cazurilor

Odată ce ați definit sarcina dvs. principală, probabil că ați pus de asemenea niște gânduri în cine doreste o aplicație care îndeplinește această sarcină! Cazurile de utilizare sunt cel mai bun mod de a începe procesul de fabricare a prototipurilor de hârtie. În acest articol, vorbesc despre modul în care am definit scenariile de utilizare pentru aplicația noastră Doodle Bright. I-am dat "poporului meu" un nume, o adresă, o ocupație și un scenariu specific în care ar putea folosi o aplicație ca Doodle Bright.

Iată un exemplu:

Jane așteaptă la cabinetul medicilor pentru o întâlnire la ora 3 cu fiul său, Chad, de 4 ani. Ea a adus-o iPad doar în cazul în care așteptarea este mai lungă decât se aștepta și, desigur, ei sunt blocați în sala de așteptare pentru o jumătate de oră înainte de a fi chemați. Jane trece timpul trăgând camioane și trenuri cu Ciad în timp ce așteaptă numirea ei.

În acest scenariu, Jane și Ciad joacă împreună cu aplicația, ceea ce înseamnă că mama îi poate solicita să interacționeze cu diferite elemente pe ecran dacă nu este sigur de următorul pas.

Acum, să aruncăm o privire la acest exemplu:

Jane se află în linia de mașini pentru a-și ridica cel mai mare din școală. Chad se află pe bancheta din spate, plictisit după o zi de alergări. Jane îi dă iPad-ul cu aplicația Doodle Bright lansată. Ciad știe ce butoane să împingă pentru că sunt intuitive la o vârstă de 4 ani.

În acest scenariu, controalele trebuie să fie ușor de înțeles pentru un copil nesupravegheat. Modifică acest tip de prototipuri de hârtie pe care le creați pentru această aplicație? Da, da! Acum, în loc să proiectezi pentru mamă și fiu, pentru a avea un apel mai larg, vedem că prototipurile trebuie să fie orientate în primul rând spre copil.

Poate fi evident că o aplicație ca aceasta ar avea nevoie de "gândire ca un copil", dar fără acest scenariu de utilizare pentru a susține această afirmație, puteți intra în modul "adult" implicit de a gândi la design.

3. Identificați modelele mentale

În articolul despre "Secretul de a proiecta o interfață intuitivă", Susan Weinschenk vorbește despre cum să se potrivească design-ul cu ceea ce așteaptă utilizatorul. Cu cât mai bine puteți face acest lucru, cu atât interfața dvs. va fi mai intuitivă.

4. Verificați fluxul

Deseori găsesc că am un flux perfect definit pentru o aplicație, și apoi găsesc ceva pe care l-am lăsat afară. Am fost acolo? Este agravant dar un lucru pe care l-am descoperit că poate face capul de pe o mulțime de "plecare" se gândește în afara scenariului "perfect".

Un exemplu din scenariul Doodle Bright este atunci când Ciad creează o imagine minunată pe care Jane dorește să o salveze și să imprime, dar închide accidental aplicația. Uh oh. Ce acum? Te-ai gândit la o salvare automată în prototipurile de hârtie? așa sper!

5. Găsiți metoda care funcționează pentru dvs.

După cum am menționat mai înainte, toată lumea este unică și creativă în felul lor. Trebuie să găsiți o metodă care să vă stoarce la maximum. Protipocierea hârtiei este unul dintre cele mai creative exerciții în procesul de dezvoltare a aplicației, trebuie să lucrați la acest lucru în orele dumneavoastră "prime", în mediu etc..

Alte resurse

Există o mulțime de articole acolo cu zeci de resurse și instrumente pentru crearea de cadre. Sper că acest articol v-ați convins că este o sarcină pe care o puteți aborda, chiar dacă nu sunteți un expert în experiența utilizatorului. Aruncați o privire la următoarele link-uri și vă rugăm să faceți o notă a celor pe care le-am lăsat în comentariile de mai jos.

Pentru un articol grozav despre wireframing în general, treceți la "Beneficiile Wireframing" pentru a afla principii care se vor aplica atât aplicațiilor web cât și aplicațiilor mobile.

Următoarea comandă de ansamblu a unei prezentări de ansamblu la nivel înalt a procesului de sincronizare care se afla în spatele aplicației iPad de la Washington Post. Personal, mi-ar plăcea să văd mai multe informații despre acest lucru!

Alte referințe ale notei:

Un set de șabloane de tipărire pentru schițe pentru aplicații mobile.

O listă uriașă de unelte de tip wireframing și prototipuri de hârtie.

La fel cum se spune: "resurse excelente de tip wireframing".

Cod