Share
Astăzi chatem cu doi designeri de interfață cu utilizatorii mobili despre modul în care proiectează interfețe mobile de succes și soluții de navigare intuitivă. Vom afla cum funcționează Sacha Greif cu spațiul limitat al iPad-ului, utilizând elemente UI Elemente de economisire a spațiului. Eryk Pastwa discută cum să proiecteze pentru mai multe dimensiuni mobile și cum să testeze în mod corespunzător modelele pentru utilizarea maximă în lumea reală. Luați o privire la fluxurile lor de lucru și cele mai bune practici pe care le-au pus în aplicare în proiectele lor.
Această postare este Ziua 3 a Sesiunii noastre de Design Interfață. Sesiuni de creație "Ziua 2a sesiunii de sesiune"Navigarea este deosebit de importantă pentru interfețele mobile din cauza spațiului limitat și a interacțiunilor constrânse. Oamenii nu vă pot deschide aplicația în mai multe file, puteți utiliza comenzile rapide de la tastatură sau puteți crea macrocomenzi, deci este vital ca fiecare parte a aplicației să fie ușor accesibilă.
Schițele (prezentate aici pentru aplicația LePost iPhone) vă permit să repetați rapid ideile diferite.
Pentru aplicația ziarului Le Monde, navigația era una dintre cele mai mari preocupări. Cum păstrezi structura liniară a unui ziar, dar oferă acces rapid la o singură pagină sau articol? Și cum profitați de aspectul frumos al unui ziar, oferind totodată o lizibilitate maximă pe o suprafață fizică mai mică?
Unelte precum Omnigraffle vă pot ajuta să planificați arhitectura generală a aplicației.
În primul rând, am știut că am vrut să oferim două moduri de navigare: un mod "fizic" care vă permite să navigați în aspectul real al ziarului și un mod "text" care conține doar conținutul articolului. Provocarea a facilitat comutarea între moduri.
Soluția noastră a fost să creăm o relație spațială între fiecare mod.
Soluția noastră a fost să creăm o relație spațială între fiecare mod. De exemplu, în aplicația iPhone fiecare mod există pe piese paralele de sus și de jos, iar trecerea de la unul la celălalt declanșează o animație verticală alunecoasă. Acest lucru asigură că modelul mental al utilizatorului se potrivește cu arhitectura aplicației. Dacă doar părăsiți secțiunile aplicației dvs. ca o serie de ecrane disjuncte, devine mult mai greu pentru utilizatori să înțeleagă unde este. Acesta este motivul pentru care tranzițiile orizontale ale diapozitivelor sunt atât de răspândite pe iPhone.
Un mare avantaj al ziarelor fizice și al cărților asupra omologilor lor digitali este că le puteți deschide la orice pagină doriți. Puteți începe din prima pagină, dar dacă preferați să citiți mai întâi secțiunea sportivă, nu vă oprește nimic. Am vrut să recreăm aceeași libertate cu o interfață mobilă, așa că am explorat mai multe opțiuni. Mai întâi, am adăugat un cuprins care poate fi accesat în orice moment al aplicației. Este o modalitate foarte rapidă de a sari la un anumit articol sau o secțiune din ziar, dar am știut că nu este suficient. Nu am vrut să reducem întregul ziar la o listă uscată de articole.
Scufundatorul de spalare
Deci, pentru aplicația iPad, am folosit și noul element UI pop-over al Apple împreună cu un scruber pentru a afișa o previzualizare a paginii atunci când "scrimiți" paginile ziarelor. Și pentru a ne asigura că ziarul fizic nu a fost niciodată prea departe, am adăugat un navigator pop-over în modul text. Acest pop-up conține o versiune miniaturală a fiecărei pagini, care vă permite să accesați un articol pentru al accesa fără a părăsi niciodată modul curent.
Vederea împărțită
Cheia aici este scoaterea din uz a tuturor acestor caracteristici, atât timp cât acestea sunt încă descoperite.
În sfârșit, am profitat și de o altă inovație a Apple UI, viziunea împărțită. Când vă aflați în modul peisaj, puteți utiliza panoul din stânga pentru a naviga prin cuprinsul conținutului în timp ce citiți în panoul din partea dreaptă. Cu atât de multe moduri de navigare diferite, există riscul ca aplicația dvs. să se umfle și să nu poată fi utilizată. Cheia aici este scoaterea din uz a tuturor acestor caracteristici, atât timp cât acestea sunt încă descoperite. O bună tehnică pentru a realiza acest lucru este supraîncărcarea elementelor existente.
De exemplu, în playere video, cum ar fi Youtube, cronologia indică poziția dvs., dar de asemenea acționează ca un scruber care vă permite să o controlați. Contrastați acest lucru cu butoanele derulare înapoi și înainte, care vă permit să vă deplasați în videoclip, dar nu vă oferă nicio informație despre poziția dvs. Dacă aplicați acest principiu, atunci când utilizatorul este gata, acesta va descoperi în mod firesc caracteristica care se ascundea în mod obișnuit, iar tranziția între noul utilizator și utilizatorul de energie se va întâmpla fără probleme.
Sacha este un designer de web și de interfață cu utilizatorii de 25 de ani din Franța, care a trăit, de asemenea, în China, Elveția și Statele Unite ale Americii. Vizualizați portofoliul, blogul lui Sacha sau urmați @SachaGreif pe Twitter.
Mobile este în prezent una dintre industriile cu cea mai rapidă creștere. Toată lumea vede cât de mult sa schimbat în mediul nostru de zi cu zi după ce primul iPhone a fost lansat în 2007. A fost cineva postat ceva pe web prin intermediul dispozitivelor mobile înainte? Acestea sunt, evident, clișeuri, dar arată cât de rapid se schimbă lucrurile.
Să ne întoarcem la anul 2010. Prima jumătate a anului a adus iPad-ul, noul iPhone cu iOS 4, platforma destul de nouă a lui Samsung: Bada, o nouă versiune a sistemului Android și o grămadă de dispozitive noi pe o perioadă de șase luni. Acesta arată punctul cheie al tuturor design-urilor mobile conectate: diversitatea coplesitoare. De aceea iubim atât de mult mobilul.
Deci, fiecare proiect trebuie să înceapă cu această întrebare foarte fundamentală: pentru ce dispozitiv proiectăm?
În general, pe piață există aproximativ șase sisteme principale, pe care funcționează diferite dispozitive și pentru care în prezent proiectăm și dezvoltăm. Fiecare dintre ele poate lucra cu metode de intrare foarte diferite și poate urma și alte instrucțiuni privind interfața cu utilizatorul. Deci, fiecare proiect trebuie să înceapă cu această întrebare foarte fundamentală: pentru ce dispozitiv proiectăm?
Este primul punct care determină întreaga odihnă, stabilește gama de posibilități și tehnologii pe care le putem alege mai târziu și ne arată limitele noastre. La prima vedere, pare simplu și simplu, dar poate deveni cu ușurință foarte greu atunci când trebuie să proiectați o aplicație destinată mai multor dispozitive diferite. Ce este important atunci? Pentru a oferi utilizatorilor cea mai asemănătoare experiență indiferent de sistem sau, dimpotrivă, pentru a profita de dispozitivele mai avansate și tehnologiile lor?
Următorul lucru pe care îl luăm în considerare la început este numărul de rezoluții pe care aplicația trebuie să le sprijine. Întrebarea despre rezoluția sună recent puțin cam depășită atunci când majoritatea consideră că "numai" despre iPhone. Dar totul revine la standardele mobile - acum gândiți-vă la iOS trebuie să vă gândiți la rezoluțiile de 320x480, 640x960 și 1024x768. Nu este o afacere mare atunci când se compară cu JAVA ME - în cazul în care cererea dvs. trebuie să lucreze acolo, ar trebui să sprijine cel puțin douăzeci rezoluții diferite de afișare și chiar mai multe dimensiuni fizice!
Cererea pentru Allegro urma să fie distribuită prin dispozitive bluetooth (bluAir) în cadrul evenimentului anual al companiei. A trebuit să ajungem la majoritatea dispozitivelor prezente pe piața poloneză în acel moment. Am ales, de asemenea, JAVA ME ca cadru cross-platform, dar, în același timp, a trebuit să sprijinim douăzeci și una rezoluții diferite de afișare.
În opinia mea, încercarea de a gândi din punctul de vedere al utilizatorului este o regulă de bază, valabilă pentru fiecare proces de proiectare a UI și, în general, pentru fiecare design comercial, deoarece scopul este simplu: utilizatorii trebuie să aprecieze designul. Trebuie să definiți care este grupul dvs. țintă, cine va folosi aplicația dvs., ce conține conținutul pe care îl difuzați? Răspunsurile la aceste întrebări vă pot ajuta să stabiliți cum puteți îmbunătăți conceptul inițial și ce să faceți pentru a ajuta utilizatorii să găsească cu ușurință conținutul dorit sau să îndeplinească sarcinile exacte.
Schema de culori a aplicației Allegro.
Aplicația Allegro a fost o agendă destul de extinsă. Acesta conținea o mulțime de informații grupate în mai multe categorii care îi călăuzeau pe utilizatori printr-un eveniment.
Cunoașterea utilizatorilor dvs. ajută de asemenea la determinarea limitărilor. Este foarte clar că, de exemplu, utilizatorii mai tineri învață mai repede și sunt mai deschiși la știri curioase. Cu această piață puteți lua în considerare sisteme de navigație mai puțin obișnuite sau destul de inovatoare. Dar pentru aplicațiile bancare aș fi mai degrabă conservator și ar încerca să mă gândesc la utilizatorii de vârstă mijlocie cu probleme de vedere, deoarece aceste defecte sunt foarte frecvente în populațiile moderne ale acelei grupe de vârstă.
Devine clar că arhitectura informațiilor din domeniul mobil contează mai mult decât modul în care arată lucrurile.
După ce se stabilesc cerințele și limitările, vom face primele machete. Am setat fluxul aplicației și lucrăm la aspectul elementelor de navigație. Deci, în principiu, vom crea un schelet, pe care o vom pielea mai târziu. Este faza, cand aplicatia poate deveni utilizabila si intuitiva sau nu. Regula de bază aici este să păstrăm întreaga interfață cât mai simplă posibil. GUI-ul mobil trebuie să fie foarte simplu.
Ne testați ideile desenate pe foi de hârtie și / sau simple wireframes pe dispozitive și încercați să vă imaginați "contextul lor mobil". Când aplicația este destul de complexă, creăm prototipuri simple HTML, care ne dau experiența care poate fi foarte asemănătoare cu produsele finale.
De asemenea, începem să ne gândim la estetica vizuală atunci, dar, pentru a fi sinceră, cred că chiar și cea mai apreciată aplicație va eșua dacă navigația nu este simplă. Desigur, designul vizual poate schimba impresia generală a unei aplicații, dar mai ales într-un caz de aplicații de utilitate, utilizatorii se scufundă mai adânc în ele foarte repede. Devine clar că arhitectura informațiilor din domeniul mobil contează mai mult decât modul în care arată lucrurile.
Navigare aplicație Allegro.
Aplicația Allegro a fost navigată cu tastele directe sau stânga / dreapta. Deoarece avea navigație ierarhică, am decis să folosim pesmetul care arăta locația curentă într-o formă de icoane simple.
Designul grafic este cu siguranță partea noastră favorită a întregului proces de dezvoltare. Desigur, designul vizual vă ajută să construiți o primă impresie bună, dar ne bucurăm mai ales pentru că ne place foarte mult când produsele noastre arată grozav. Grafica grafică mobilă este o disciplină foarte tânără, așa că, în realitate, încă explorăm posibilitățile sale. Dacă lucrați cu o echipă de dezvoltatori cu experiență, aproape nimic nu este imposibil, chiar și pe platforme mai neprietenoase pentru dezvoltare.
Am ales fonturi Pixel, pentru că au fost lizibile pe afișaje mici și mari.
Cea mai importantă regulă este să testați modelele pe dispozitive reale. Există o mare diferență între ecranul desktop și ecranul mobil, iar aceste diferențe continuă să crească. Nu este vorba numai de diferențele de densitate ale pixelilor, dar și de schimbările de culoare. Chiar și unele dintre smartphone-urile moderne încă nu suportă 16M de culori, așa că atunci când proiectăm pentru astfel de dispozitive, suntem mereu conștienți de nuanțele albastre.
Lucrul cu dimensiunea afișajului.
Luăm telefoanele și încercăm să ne uităm la design-urile noastre acasă, la pub-ul din apropiere și pe stradă în orice condiții meteorologice, mai ales când este foarte însorit sau înnorat. Acestea sunt locurile în care sunt utilizate aplicațiile mobile. Apoi ne dăm seama unde să ajustăm contrastul, să schimbăm dimensiunea fontului sau să facem butoanele mai mari. Această regulă este valabilă indiferent dacă proiectați o aplicație de utilitate sau doar un joc simplu. Întotdeauna testăm în acest stadiu, deoarece mai târziu în timpul codării este uneori foarte dificil să rearanjăm lucrurile. Deci, continuați și testați-o!
Eryk este un designer foarte experimentat din Polonia. Lucrarea sa se concentrează pe designul pentru servicii web și pentru telefoane mobile. El dezvoltă interfețe utilizator intuitive și clare atât pentru aplicațiile mici, cât și pentru cele mari. Vizitați portofoliul Eryk, aruncați o privire la lucrarea mare de Mobo Studio și urmați @mobostudio pe Twitter.
Accentsconagua