Share
Cu tot mai mulți oameni care încep să utilizeze aplicațiile mobile zilnic, este mai important ca oricând companiile din întreaga lume să acorde o atenție deosebită dezvoltării propriilor aplicații mobile, indiferent dacă acestea sunt pentru iPhone, Android sau BlackBerry. Având o aplicație mobilă nu este totuși cea mai ușoară sarcină. Există o mulțime de aplicații acolo care funcționează perfect bine, dar nu arata tot ce minunat. Acest lucru este important deoarece o interfață atrăgătoare și ușor de utilizat este o metodă principală pentru atragerea și păstrarea utilizatorilor.
Din nefericire, un mare număr de aplicații pentru iPhone suferă de un design mai mic decât stelar. Acest articol se va uita la cosmetice de design dintr-o aplicație populară de cumpărături, Amazon UK. Ne vom uita la ce lipseste designul si cum ar putea fi imbunatatit cu exemple din alte aplicatii. Sfaturi și trucuri în tot articolul vor arăta cum să punem aceste recomandări în practică, cu legături către alte surse importante pentru a vă ajuta să aflați mai multe.
Dacă găsiți acest articol util, atunci vă rugăm să ne anunțați în comentariile de mai jos și cu siguranță vom face mai mult ca acesta în viitor!
În primul rând, să începem cu o mică prezentare a aplicației Amazon UK. Așa cum probabil vă așteptați, este o aplicație care permite rezidenților din Marea Britanie să caute și să cumpere produse listate pe Amazon UK direct de la aplicația iPhone, fără a fi nevoiți să utilizeze browserul web. După cum este descris în magazinul de aplicații:
Aplicația Amazon Mobile permite proprietarilor de iPhone și iPod touch să caute foarte repede, să cumpere, să compare prețurile, să citească recenzii și să facă cumpărături pe Amazon.co.uk folosind o interfață simplă, dar elegantă.
Folosesc aplicația Amazon UK din când în când. Nu sunt un utilizator frecvent, dar o folosesc. Aplicațiile funcționează, face ceea ce se presupune a face, dar interfața ar putea fi făcută mult mai bine. Structura uneori se simte îngrozită, nu există posibilitatea de a naviga în magazin și totul pare să fi fost amestecat estetic și însoțit de o lipsă generală de consistență vizuală între ecrane.
Să începem, nu? Am realizat o serie de capturi de ecran în cadrul uneia dintre paginile de aplicații diferite, cu pagina de pornire, pagina de căutare, pagina de conectare, pagina de recomandări, pagina cu lista de solicitări, pagina cu setările contului, pagina de ajutor, pagina cu informații juridice, pagina de produs, imaginile pagina și în final paginile de recenzii și descrierea articolelor.
Ecranul de bun venit / ecranul principal este primul ecran pe care îl veți vedea când deschideți aplicația. Suntem prezentați sigla Amazonului, un simplu antet care spune "bun venit" și niște butoane care ne dirijează la Lista dvs. de dorințe și amintirile Amazon, produse care sunt populare chiar acum pe Amazon UK și o opțiune de conectare la contul dvs. dacă sunteți un client existent.
Principalul mod de a naviga în jurul aplicației este prin utilizarea barei din partea de jos a ecranului, permițându-vă să accesați diferite zone ale aplicației, cum ar fi ecranul de acasă, căutare, coș și memorie. Există, de asemenea, un buton pentru "mai mult", care vă permite să urmăriți pachetele, să vizualizați comenzile și să modificați setările contului dvs. (puteți vedea această captură de ecran de mai jos).
de mai sus: Amazon UK welcome / home screen
După cum am menționat anterior, aplicația funcționează bine. Ecranul de pornire este relativ ușor de utilizat, dar cred că ar putea fi mult mai ușor. Iată câteva puncte de luat în considerare, fiecare punct individual urmat de câteva note care ar putea îmbunătăți interfața de utilizare.
Aplicația are nevoie într-adevăr să înlocuiască bara de navigare cu sigla Amazon.co.uk? Acesta nu este cazul niciunuia dintre celelalte ecrane și, prin urmare, o face să se simtă ca o aplicație complet diferită.
În schimb, logo-ul ar putea fi înlocuit cu o simplă bară de navigare "standard", cu un buton de conectare, sau chiar cu câteva opțiuni pentru a vizualiza produse populare, lista de dorințe sau un link către amintirile Amazon. Acest lucru ar elibera o mulțime de spațiu pe prima pagină, lăsând loc pentru a afișa produse noi sau chiar detalii cu privire la comenzile dvs. recente. Ar fi mai mult decât suficient spațiu pentru a pune logo-ul Amazon pe ecranul de start dacă se folosește o bară de navigare.
Bara de tab-uri se leagă de patru ecrane principale: acasă, căutare, coș și amintesc. Îmi amintesc că este un serviciu care, din câte știu, nu este folosit atât de mult. Merită într-adevăr un loc în bara principală, precum și un link pe prima pagină?
Această legătură ar putea fi ușor introdusă în fila "mai mult" și înlocuită cu ceva pe care utilizatorii sunt mult mai probabil să o folosească, cum ar fi o caracteristică de navigare, permițând utilizatorilor să navigheze diferite categorii pe site-ul Amazon, mai degrabă decât de a căuta ceea ce doresc, o caracteristică care nu ar face decât să crească vânzările și să facă aplicația pe care oamenii o vor folosi într-o ocazie mult mai regulată.
Cea mai mare defecțiune a interfeței de utilizator din față trebuie să fie bara de căutare. Fiind un utilizator care a folosit o mulțime de aplicații pentru iPhone, primul lucru pe care v-ați aștepta să faceți clic pe câmpul de căutare Amazon.co.uk este ca o tastatură să apară în fereastra pop-up ... tastați căutarea dvs. și apăsați pe butonul "go". În acest caz, exact ceea ce nu se întâmplă. În schimb, vă conectează direct la ecranul de căutare. Este cu adevărat necesar?
Răspunsul simplu la acest lucru este un mare număr de grăsimi. Nu există într-adevăr nevoie de două linkuri de căutare pe aceeași pagină, mai ales atunci când cel din bara tab este atât de ușor de găsit. Dacă bara de căutare de pe prima pagină a funcționat, ar fi o chestiune diferită, dar întrucât este practic o imagine cu un link atașat, este inutil! Eliminarea acestui lucru ar lăsa mult mai mult spațiu pentru sigla Amazonului din partea superioară a ecranului de început și o bară de navigare în partea de sus!
Produsele "populare" prezentate pe prima pagină a aplicației par foarte înghesuite. Ca un exemplu, aruncați o privire la partea dreaptă a Playstation 3 Slim și partea stângă a albumului Muse, acolo distanța dintre cele două imagini este foarte strânsă și doar în general face ca aplicația să arate puțin tare.
Unele imagini mai mici, cu puțin spațiu suplimentar, ar funcționa perfect pentru acest lucru, permițând fiecărei imagini să respire. Cu toate acestea, cu bara de căutare și link-urile către lista de dorințe și Amazon aminteste plecat, o mulțime de spațiu va fi lăsat, eventual lăsând opțiunea de a prezenta produsele într-un mod mult mai rece și mai elegant, cum ar fi miniaturi featured special concepute pentru prima pagină, mai degrabă decât doar imaginile produsului în sine. Știm cu toții că imaginile vorbesc mai mult decât cuvintele, astfel încât imaginile să poată fi cât mai bine, chiar dacă înseamnă ceva mai multă muncă.
Punerea în practică a acestor puncte ar face aplicația mult mai ușor de utilizat. Mai jos este o imagine adnotată a magazinului oficial de aplicații pentru iPhone:
de mai sus: Magazin de aplicații Apple
Aici puteți vedea filele din partea de sus și de jos a fiecărei pagini, permițând accesul mult mai ușor la fiecare ecran, lucru care ar funcționa perfect cu aplicația Amazon UK, precum și facilitarea utilizării de către utilizator a unui anumit produs sau pentru a naviga în general în magazin.
Nu există absolut nimic în neregulă cu funcția de căutare din această aplicație. Există o bară de căutare, recomandări de căutare pe măsură ce tastați în bara de căutare și o listă de produse la sfârșitul acesteia, așa cum s-ar aștepta.
Există o opțiune pentru a rafina căutarea dvs. după ce faceți căutarea originală, deși nu puteți să-i rafinați atât de mult - numai în ce categorie doriți să căutați, ceea ce într-adevăr nu este suficient pentru un magazin care vinde sute și mii de produse diferite pe zi.
deasupra: ecranul de căutare Amazon UK
Această caracteristică de căutare este într-adevăr suficient de avansată pentru unul dintre cele mai cunoscute magazine de cumpărături online din lume?
Din căutarea pe site, mi sa părut relativ enervant că nu vă puteți perfecționa opțiunile până la exact ceea ce doriți. Căutarea ar putea fi făcută mult mai ușor! Ar trebui să avem opțiunea de a perfecționa căutarea după categorie, subcategorie, preț, condiție a articolului (nouă sau utilizată) inainte de apăsând butonul "go", precum și opțiunea de afișare a rezultatelor în diferite ordine, cum ar fi prețul sau data eliberării. Există lucruri simple pe care 99% dintre magazinele online le au, deci de ce nu pe o aplicație pentru iPhone?
Este totuși un remediu ușor. Trebuie doar să aruncați o privire la ecranul de căutare al eBay pentru a vedea ce vreau să spun (vă rugăm să rețineți că aceasta este inainte de faci căutarea inițială și nu după cum ar fi în aplicația Amazon UK!):
de mai sus: aplicația eBay din Marea Britanie
Ecranul de conectare se află în imediata apropiere a utilizării, vă puteți conecta, spuneți Amazon că ați uitat parola și ați creat un cont nou.
de mai sus: ecranul de înscriere Amazon UK
Stilul pare însă puțin ciudat. Aruncați o privire mai atentă asupra razei colțurilor pe câmpurile de adresă de e-mail și parolă și apoi uitați-vă la raza colțurilor de pe butonul de semnare. Puteți observa în mod clar că acestea nu sunt la fel.
Schimbarea acestui lucru pentru a face raza butonului la fel ar ajuta foarte mult la modul în care arată UI. Ajustarea lățimii butonului la aceeași lățime cu câmpurile de text ar ajuta, de asemenea, lucrurile, în timp ce centrarea textului în buton pentru a face lucrurile să pară cât mai netede posibil. Lucrurile de genul ăsta fac ca desenele tale să fie pop!
Vorbind despre butoanele de conectare, este cu adevărat nevoie de unul singur? Minimalismul este o tendință imensă de design chiar acum datorită câtorva motive foarte simple: arată foarte bine și este foarte ușor de utilizat.
Butonul poate fi complet eliminat, cu un buton de semnalizare amplasat în bara de navigare deasupra ecranului. Un alt link poate fi plasat pe pagina pentru alte opțiuni de conectare, cum ar fi linkuri către pagini unde puteți solicita o parolă nouă sau puteți crea un nou cont. O aplicație superbă care face acest lucru bine este aplicația oficială Twitter (anterior Tweetie), după cum se poate vedea mai jos:
de mai sus: Twitter pentru iPhone app
Ecranul cu recomandări este o caracteristică importantă pentru Amazon, deoarece permite utilizatorilor să găsească produse noi pe care probabil că nu le-au cunoscut anterior pe baza căutărilor, achizițiilor și articolelor anterioare din lista lor de dorințe.
Ecranul afișează o listă de produse în exact același fel în care acestea vor fi afișate în rezultatele căutării dvs..
de mai sus: pagina de recomandări Amazon UK
În ciuda faptului că acest lucru funcționează perfect, uneori poate părea puțin înghesuit, mai ales când sunt implicate titluri lungi sau sunt listate mai multe nume de autor sau director.
Aceste liste de produse ar putea fi editate foarte mult utilizând miniaturi și miniaturi numai. Dacă un produs pare a fi interesant, utilizatorul poate da clic pe acesta pentru a dezvălui mai multe informații despre produs, cum ar fi titlul, prețul și ratingul.
Un exemplu excelent al modului în care ar putea funcționa este noua structură de directoare prezentată în iOS4, care vă permite să împingeți totul departe de a dezvălui ceea ce se află în dosar. Mai jos este un exemplu de structură a dosarelor.
deasupra: structura folderului iOS4
Acesta este cel mai rău ecran al aplicației Amazon UK. Dacă v-am spus că lângă nimeni nu vedeți acest ecran, probabil aș avea dreptate, ci doar pentru că este un ecran care nu este privit atât de mult, nu înseamnă că acesta ar trebui să sufere în calitatea designului. Ecranul se leagă de alte două pagini: "Condiții de utilizare și vânzare" și "Notificare privind confidențialitatea".
de mai sus: pagina de informații juridice Amazon UK
Nu pot să subliniez cât de important este păstrarea aceluiași stil pe întreaga aplicație. Același lucru este valabil și pentru site-uri web, reviste, ziare, broșuri ... de fapt, orice lucru este de la companie ar trebui să aibă o asemănare unul cu celălalt - este doar un brand bun. Dacă vrei să fii recunoscut, trebuie să o faci.
Acest ecran cu informații juridice utilizează doar legătura de bază pentru alte surse, chiar dacă alte ecrane utilizează butoanele implicite pentru iPhone (așa cum se vede în meniul de setări al iPhone-ului dvs..
Aceasta este o soluție de design foarte simplă și ecranul ar putea fi îmbunătățit foarte mult pentru a se potrivi cu restul aplicației!
Ecranul paginii produsului este în principiu o pagină plină de rezumate scurte, permițând utilizatorului să decidă dacă acesta este produsul pentru ei sau nu. Dacă da, au opțiunea de a selecta orice secțiune cu o săgeată și de a vedea mai multe fotografii, de a citi mai multe despre produs, de a vizualiza mai multe oferte și de a citi recenzii clienților.
de mai sus: pagina de produs Amazon UK
Pagina de produs, în general, funcționează perfect, dar nu este acolo când este vorba de aspect. Pagina pare a fi înghesuită și răsturnată împreună și, în general, nu a acordat multă atenție detaliilor mici, care sunt foarte importante!
Pe o mulțime de alte ecrane de aplicații Amazon UK, am văzut colțuri rotunjite, cum ar fi pe ecranul de start. Acest lucru utilizează un pic mai mult spațiu, dar face UI să arate atât de mult mai curat și, în general, mai prietenos de folosit. Utilizarea aceleiași tehnici pentru ecranul paginii produsului i-ar îmbunătăți imediat.
Un lucru care a lipsit pe tot parcursul aplicației, dar ar funcționa foarte bine pe această pagină, este lipsa umbrelor subtile / loviturilor. Interfața iPhone le folosește în mod regulat - trebuie doar să te uiți la titlul din bara de navigare din partea de sus a imaginii de mai sus pentru a realiza că a aplicat o umbră interioară textului.
Adăugarea de umbre interioare sau chiar de lovituri de 1px aplicate în partea de jos a textului ar adăuga o diferență uriașă aspectului general al paginii de produs, dar întreaga aplicație, creând un aspect mult mai mare de adâncime, mai atrăgătoare.
de mai sus: pagina de imagini Amazon UK - este într-adevăr necesară? Nu…
Cerul este limita cu aplicațiile iPhone, iar această pagină doar nu atinge nicăieri lângă această limită. Uitați-vă la alte aplicații și observați unele efecte pe care le folosesc atunci când permiteți utilizatorilor să navigheze prin imagini. Este nevoie de un ecran complet separat pentru a putea vizualiza mai multe imagini?
Din nou, este altceva nu. Aruncați o privire la cele două exemple despre modul în care alte aplicații de cumpărături și-au afișat imaginile de mai jos, ambele folosind o tehnică simplă de mișcare, astfel încât utilizatorul să poată glisa imagini de la stânga la dreapta (sau de la dreapta la stânga!), Asemănător unui conținut / imagine glisorul pe care îl vedeți pe web.
deasupra: aplicația Topshop iphone - derularea imaginilor
deasupra: următoarea aplicație pentru iPhone - derularea imaginilor
După cum probabil ați realizat, acordând atenție detaliilor mici și făcând tot ce este în puterea dvs. pentru a face o aplicație iPhone ușor de folosit este bine meritat. Amazon este una dintre cele mai mari branduri online din lume, iar cu toți dezvoltatorii lor și cu banii pe care trebuie să-i externalizeze, aplicația este departe de a fi perfectă - funcționează excelent, dar are mult spațiu de îmbunătățire în ceea ce privește interfața cu utilizatorul.
Sperăm că ați luat câteva sfaturi bune din acest articol și că vă va reaminti să vă petreceți cât mai mult timp posibil pe designul aplicației, asigurându-vă că acordați atenție lucrurilor pe care le-ar dori utilizatorii dvs. Întrebați-vă: "Dacă aș folosi această aplicație (și nu era a mea), ce aș vrea să facă?" Creați-vă ideile, apoi puneți-le în practică. Mult noroc!
Păstrați-vă un ochi pentru un viitor tutorial cu privire la modul de a proiecta foarte propria aplicație de cumpărături iPhone pe rețeaua Tuts +!
Accentsconagua