Air Lookout este proiectul secundar care mi-a schimbat pentru totdeauna procesul de proiectare

În februarie 2015, am început să lucrez la o aplicație iOS numită Air Lookout . Scopul aplicației a fost să simplifice și să elimine orice ofuscare a informațiilor despre calitatea aerului. După peste un an de muncă nopți și weekenduri, venitul net total de la lansare în 2016 a fost mai mic de 1.000 USD. Chiar și cu acele cifre, aș retrăi fiecare oră de muncă.

Singurul lucru pe care nu-l pot acorda o valoare monetară este modul în care experiența creării Air Lookout mi-a schimbat complet părerea asupra procesului de proiectare și dezvoltare pentru fiecare proiect la care am lucrat de atunci.

O scurtă notă despre calitatea aerului

Calitatea aerului în întreaga lume este o problemă serioasă. Nu contează dacă locuiți într-o metropolă plină de mașini și autobuze care aruncă gaze de eșapament sau într-un oraș mic în care copacii sunt mai mulți oameni. Calitatea aerului vă va afecta viața. Trăind în Salt Lake City, experimentăm o inversare în timpul iernii. O inversare este un strat de aer cald care captează aerul rece, inclusiv orice poluanți din aer produși. Acest lucru creează un strat de smog în valea Salt Lake. Aceste inversiuni pot dura uneori zile sau săptămâni și, în funcție de vreme, se pot schimba în fiecare zi.

Înainte de a lansa aplicația finalizată, prezentată mai sus, aveam un milion de întrebări pe care trebuia să le înțeleg înainte de a putea chiar să încep să construiesc un design bazat pe soluții și un număr minim de ipoteze.

Sarcina generală de a crea o aplicație pentru calitatea aerului a fost descurajantă. Cu toate acestea, când l-am descompus în bucăți mai mici, nu mi s-a părut la fel de înfiorător. De fapt, primul pas: să creez un design rapid care să mă ajute să înțeleg organizarea informațiilor, a părut destul de simplu. Am executat acest proces inițial de o sută de ori înainte pentru mulți clienți diferiți. Fiecare proiect începe cu un cadru de tablă albă, iar designerul lucrează pentru a crea un design inițial din aceasta. Cel puțin, așa îmi spuneau obiceiurile mele.

Numărul de ipoteze pe care le-am făcut în cadrul de mai sus și în proiectele inițiale pe care le-am dovedit greșite în timpul întregului proces este uimitor.

Falsează până când reușești (la propriu).

Am încărcat câteva modele statice pe care le-am făcut – după ce mi-am creat schița cu cadru fir – în InVision. Cu asta, aș putea deschide aplicația falsă pe tot parcursul zilei. Cum am simțit când am folosit aplicația în timp ce așteptam cina pentru a găti? În timp ce mă urc în mașina mea? Foarte repede am observat că există o mulțime de întrebări recurente pe care le aveam. Ce înseamnă din nou culorile? Portocaliul este mai rău decât galbenul, nu? Dar indicele de calitate a aerului (AQI) merge de la 0 la 500. De ce? Și, mai presus de toate, întrebările pe care le-am avut mereu au fost: Cum îmi afectează asta ziua? Pot să fac exerciții afară?

Pe baza multor întrebări recurente pe care le-am avut cu privire la poluanți și la modul în care aceștia mi-ar putea afecta ziua, am început să adaug ecrane false în Invision care ar putea acționa ca „cheat sheets”. Ceea ce a început ca o definiție simplă a poluanților, a menit doar să-mi amintească în timp ce proiectam și dezvoltam aplicația, a ajuns să fie adăugat la aplicație ca o caracteristică finală. Acum, în aplicația actuală, atingerea unui nume de poluant va aduce un utilizator la o definiție cu o listă de surse de informații și link-uri către mai multe informații (acest flux este afișat mai jos în capturile de ecran actuale ale aplicației). Am descoperit că uneori informațiile care sunt utile designerului sau dezvoltatorului sunt utile și unui utilizator .

Desigur, așa cum se arată în schița wireframe de mai devreme, m-am îndreptat către o interfață de utilizare pentru a adăuga și a gestiona locații prin cod poștal. Dar, după ce am folosit prototipul fals, am găsit că acest proces este anevoios. De ce să vă deranjați ca utilizatorul să treacă prin întregul flux? Ce se întâmplă dacă aș conduce la Park City pentru o zi de schi? Sau Insula Antilope pentru alergare pe traseu? Salt Lake City, stația de calitate a aerului, nu ar mai fi cea mai apropiată.

În fiecare zi, am constatat că îmi pasă doar de calitatea aerului în locația mea actuală, nu neapărat de locația mea de acasă . Și, din fericire pentru mine, iPhone-urile vin cu un GPS destul de bun pentru consumatori și API pentru servicii de localizare. Prin urmare, am eliminat întreaga locație Creați/Citiți/Actualizați/Ștergeți interfața de utilizare și fluxul din aplicație. Am decis că o prezentare generală a locației actuale ar fi cea mai rapidă și cea mai utilă pentru toți. Singurii utilizatori pe care mi-am putut imagina că acest lucru i-ar frustra erau utilizatorii puternici care verificau mai multe locații. Dar o amintire a obiectivului meu inițial – de a simplifica calitatea aerului – a adăugat încredere deciziei mele.

Pentru a testa acest lucru, am făcut mai multe ecrane false pentru a le testa în InVision. În loc să accesez o interfață de utilizator falsă și să vizualizez fluxul, am setat prototipul să parcurgă pașii automati ai actualizării locației mele GPS false cu tranziții temporizate. Apoi, când mergeam la o cafenea din North Salt Lake sau mergeam cu mașina până la Park City, deschideam aplicația mea falsă și mă uitam la actualizare și îmi arătam date noi pentru locația diferită.

Prima dată când am folosit acest nou prototip, mi-am dat seama că a fost o îmbunătățire enormă. Atunci când un dispozitiv are anumite funcții încorporate, utilizarea acestor funcții poate avea ca rezultat o experiență mai bună pentru utilizator, prin proiectarea unei interfețe mai puține . Mi-ar fi fost greu să ajung la această concluzie dacă nu aș părăsi Photoshop-ul și nu mi-aș fi imaginat că am o aplicație reală pentru calitatea aerului pe telefon.

Începând cu Cod

Pe o mulțime de proiecte clienți am recomandat și supravegheat testarea utilizatorilor. Pentru Air Lookout , aceasta nu a fost o opțiune. Știam deja că va exista o sumă redusă de profit și testarea utilizatorilor a fost cu siguranță în afara bugetului meu. De asemenea, știam că voi avea utilizatori și feedback odată ce lansez aplicația. Orice aș putea face pentru a simplifica aplicația ar accelera acest lucru. În mintea mea, aș prefera să lansez o aplicație mai simplă, bine făcută și să primesc feedback de la utilizatori, în loc să mă chinui mult timp la o aplicație foarte complicată cu presupuneri greșite.

Obiceiurile mele mi-au spus că următorul pas după utilizarea prototipului InVision ar fi trebuit să fie iterația de proiectare. Acesta ar fi fost procesul pentru orice proiect client de această natură. Cu toate acestea, am avut o mulțime de întrebări cu privire la calitatea datelor și îngrijorări dacă sunt capabil să obțin datele în mod fiabil pe iPhone-ul meu folosind UIKit. În loc să mă întorc la Photoshop, am deschis Xcode.

Pentru a-mi îndeplini funcționalitatea dorită, am creat o aplicație iOS cu o singură vizualizare foarte simplă (și în mare parte ruptă), care ar afișa date reale . Inițial, aplicația nici măcar nu s-a reîmprospătat singură. A trebuit să opresc manual aplicația și să o redeschid dacă voiam date noi. Dar, cel puțin avea date actualizate și relevante (inclusiv locația mea!).

… Și înapoi în design

Au fost o mulțime de decizii de design pe care le-am luat în cod în timp ce făceam acest prototip brut care a ajuns să rămână. Cel mai remarcabil este blocul de culoare mare care arată culoarea AQI și textul mare de locație. Nu lucrasem niciodată într-un mod în care procesul de dezvoltare a informat un design vizual ca acesta. Dar, nu sunt sigur că aș fi descoperit asta în timp ce lucram într-un instrument de design tradițional, cum ar fi Photoshop sau Sketch. La urma urmei, am schimbat doar culoarea de fundal pentru că mi-a fost prea lene să creez un alt UIView care să reprezinte culoarea AQI.

De aici înainte, a fost destul de ușor să aduceți o captură de ecran în Photoshop și să o rafinați și mai mult. A fost mult mai rapid să te joci cu spațierea și dimensiunile tipului în Photoshop în loc să aștepți ca aplicația să se recompileze după fiecare modificare (mai ales dacă ținem cont că aceasta a fost din nou în Swift 2 zile).

Procesul de iterare a designului pentru multe dintre vizualizările ulterioare a ajuns să urmeze un model foarte asemănător cu acesta. Aș crea un prototip brut de lucru - făcând improvizații rapide de design în cod - l-aș folosi timp de câteva zile sau săptămâni și apoi aș recrea și modifica vizualizarea în Photoshop. Deoarece am folosit deja un prototip înainte de orice proiectare statică, eram un expert în ceea ce avea nevoie sau nu de vizualizare și unde ar trebui să fie prioritățile și ierarhia.

Una dintre cele mai mari surprize pentru mine, din acest proces, a fost nevoia de a construi un prototip de lucru care să afișeze corect datele și citirile. Am ajuns să înțeleg datele chiar înainte de a începe faza de proiectare statică. În calitate de designer, cum aș putea chiar să încep să mă comport ca un expert în explicarea complexității calității aerului dacă eu însumi nu înțeleg pe deplin cum funcționează? Crearea și utilizarea acestor prototipuri brute mi-a oferit acea experiență și expertiză într-un timp scurt.

…Pentru totdeauna

De multe nopți, aș merge înainte și înapoi între Photoshop și Xcode de multe ori. În cele din urmă, m-am simțit confortabil să folosesc orice instrument simțit cel mai rapid pentru orice problemă la care lucram. Uneori, acesta a fost cod și uneori a fost un instrument tradițional de design precum Photoshop. Destul de interesant, Photoshop nu a fost întotdeauna cel mai rapid instrument pentru găsirea de soluții de design vizual, mai ales dacă se ocupa de date dinamice.

Post-mortem

După lansarea Air Lookout , este greu de spus dacă deciziile mele au fost corecte. Am primit câteva e-mailuri de la utilizatori care se plâng că lipsește modul tradițional de căutare și adăugare a locațiilor. Mă bucur, totuși, că am optat pentru această abordare mai simplă. Căutarea locației este întotdeauna o funcție pe care o pot adăuga în aplicație mai târziu, dacă o solicită suficient feedback de la utilizatori. Sunt încrezător că concluzia mea – extrasă din utilizarea în mod regulat a prototipului meu fals – a fost decizia corectă.

În mod similar, au fost o mulțime de decizii de proiectare pe care am ajuns să le iau în cod care au ajuns în aplicația finală. Fără blocurile de culoare (și multe alte decizii ca aceasta), există șanse mari ca aplicația mea să arate ca orice altă aplicație de calitate a aerului disponibilă.

Dacă ar fi să repet acest proces, ar merita să construiesc un prototip interactiv wireframe cu componente UIKit stoc. În esență, săriți peste prototipul InVision și începeți cu un prototip de cod. De acolo, ar fi mult mai ușor să încep proiectarea statică știind unde merită componentele UIKit sau lipsite de strălucire și având o înțelegere cuprinzătoare a datelor și a relațiilor de date cu care trebuie să lucrez. Apoi, în loc să ating un prototip fals InVision, aș putea avea o experiență de aplicație mai realistă cu date reale mai devreme.

Realitate și aplicație

În trecut, mai ales când lucram la o agenție, aș fi recomandat o explorare și o iterare aprofundată a designului înainte de a pierde timpul deja limitat al unui dezvoltator construind ceva bazat pe ipoteze timpurii (în special orice lucru care ar trebui să fie schimbat sau îmbunătățit mai târziu). ). Cu toate acestea, acum, sunt mai intrigat de posibilitatea ca designerii și dezvoltatorii să lucreze împreună pentru a crea un prototip de aplicație wireframe tapable realizat cu componente native pentru a testa și valida orice presupuneri sau idei timpurii.

Poate că o echipă ar putea fi construită din indivizi capabili atât de proiectare, cât și de dezvoltare pentru a facilita această parte a procesului (și pentru a elimina în continuare bariera semantică dintre cele două roluri). Sunt convins că acesta este un proces mai eficient de proiectare și dezvoltare, care va oferi fundamentelor de proiectare ale oricărui proiect interactiv o bază mult mai puternică.

Acum, provocarea pentru mine este să îmi dau seama cum să vând clienți prin acest proces neconvențional.

Notă : Air Lookout a fost lansat în 2016 și poate fi descărcat din App Store.