O dezbatere împotriva designurilor de aplicații drăguțe

Publicat: 2022-03-11

„Păzește-te de acea vanitate care caută un compliment sau se hrănește cu el.” – Chalmers

Navigand pe unele site-uri inspirate de design cu ochii mei critici de raze UX :) Ies adesea cu fum care iese din urechi. Așa cum spune titlul, aceasta este o dezordine, dar nu o lua prea în serios. Încerc să fac un punct.

Da, știu că unele dintre aceste site-uri de prezentare a designului nu sunt menite să fie neapărat pentru produse din lumea reală, dar apoi spun totuși că trebuie să reflecte o abordare atentă a designului, în primul rând punând întrebarea principală „Cui este acesta? ”, „Cum vor folosi oamenii produsul meu” și „Este chiar utilizabil?”.

Designurile de aplicații superficiale care urmează cele mai recente moduri și ignoră în mod flagrant convențiile de bază de utilizare, cele mai bune practici UX și principiile fundamentale ale designului de interacțiune ar eșua cel mai probabil în lumea reală! Din fericire, de obicei nu depășesc țara fanteziei, în general ridicolă, care se auto-defilează pe Dribbble și Behance.

Din păcate, aceste „proiecte conceptuale”, un singur ecran într-o aplicație imaginară, servesc doar la perpetuarea designerilor etichetați ca artiști – ca niște pretenți cărora le pasă doar de furnir, culori frumoase și fonturi. În zilele noastre, orice design de aplicație trebuie să depășească asta.

Vorbesc despre UX.

Dacă oamenii din lumea reală ar încerca să folosească efectiv aceste aplicații, garantez că peste 50% le-ar fi greu să facă acest lucru și, ulterior, ar renunța în confuzie.

aplicație meteo - design prost al aplicației
Cine nu are nevoie de încă o aplicație meteo? Nu există indicii despre cum să-l folosească utilizatorul. (Jona Dinges pe Dribbble)

Designerii de produse digitale care merită să-și pună sarcina și care doresc să-și dezvolte jocul știu că este esențial să-și lase ego-ul la ușă și să se ferească de înfloririle inutile, defilările publice egoiste și seducția publicului fără rost. #UXFail!

design aplicație de călătorie - design de aplicație prost
Nicio animație GIF elegantă nu va rezolva probleme serioase ale experienței utilizatorului cu o aplicație prost proiectată, cum ar fi interacțiunea gestuală ascunsă, pictograme fără sens sau text cu contrast redus. (Aplicația de călătorie de Arunraj pe Dribbble)

Abandonarea utilizabilității pentru lingușire

Experiențe excelente pentru utilizatori sunt o necesitate pentru ca designul de produse digitale să aibă succes pe piață. Desigur, estetica – modelele cu aspect și senzație grozave sunt importante, dar sunt doar atingerea finală care completează un produs utilizabil care este, de asemenea, o plăcere de utilizat. Lupta doar pentru perfecțiunea estetică în timp ce renunțați la uz este, în cele din urmă, un joc de învins.

Așa cum a spus Don Norman, adesea numit „guru al tehnologiei funcționale”, „Marii designeri produc experiențe plăcute”.

Experiențele plăcute sunt cele care creează cea mai mică frecare în timp ce oferă interacțiune fluidă, fără întreruperi și experiențe anticipative (adică, ca lucrurile să apară ca prin magie. Lucrurile potrivite, la momentul potrivit, în modul corect).

Calea de a ajunge acolo cu siguranță nu este ignorarea celor mai bune practici stabilite și convențiile de proiectare și pur și simplu concentrarea asupra fațadei. Este evident, Dribbble stritters: 1) Nu-ți înțelegi utilizatorul și 2) Copiezi moft-uri.

Cele mai bune practici de design UX pentru aplicații mobile
Designurile tale pun aceste întrebări?

Ignora convențiile pe riscul tău

Convențiile de design, fie în designul de produse digitale sau în designul industrial, de exemplu, o mașină sau o bicicletă, sunt înrădăcinate în comportamentul uman, mecanică, fizică, științe și cercetări ample. Ei urmează cele mai bune practici și așteptările umane cu privire la modul în care funcționează lucrurile pentru că ne-am obișnuit cu ele, după ce am urmat acele convenții de eoni. Acestea sunt convenții care au fost elaborate prin încercare și eroare și s-au dovedit a fi foarte eficiente în timp; cam ca evolutia.

Este nesimțit și oarecum arogant să ignori sau să încalci convențiile de design. Ele sunt fundamentale și servesc drept fundație de la care putem apoi să inovăm. Este vorba despre ceea ce se așteaptă. Fără ele, riști să enervezi al naibii de oameni. Imaginați-vă dacă fiecare bicicletă, fiecare mâner de ușă – sau pedalele și volanul din fiecare mașină – ar funcționa diferit, toate pur și simplu în numele „inovației”.

Două cuvinte: haos total.

O interfață cu utilizatorul este ca o glumă. Dacă trebuie să explici, nu funcționează.

Sfaturi și trucuri pentru design UX mobil
Un alt design de aplicație de la Dribbble. (Aaron 1991 pe Dribbble)

Luați în considerare euristica

Aplicațiile bine concepute care se străduiesc să fie produse utilizabile respectă convențiile de design bine stabilite, liniile directoare de bază privind utilizarea și principiile de proiectare a interacțiunii (printre altele) și trec cu brio evaluarea euristică. („Euristică” deoarece sunt reguli generale generale, nu linii directoare specifice de utilizare.)

Pentru ca designurile de aplicații să funcționeze bine în lumea reală, aceștia ar trebui să respecte cele 10 euristici de utilizare pentru proiectarea interfeței cu utilizatorul, așa cum sunt definite de Nielsen Norman Group, o voce lider în domeniul experienței utilizatorului de 20 de ani. Acestea sunt:

  1. Vizibilitatea stării sistemului
  2. Potrivire între sistem și lumea reală
  3. Controlul utilizatorului și libertatea
  4. Consecvență și standarde
  5. Prevenirea erorilor
  6. Recunoaștere mai degrabă decât reamintire
  7. Flexibilitate și eficiență în utilizare
  8. Design estetic si minimalist
  9. Ajutați utilizatorii să recunoască, să diagnosticheze și să recupereze erorile
  10. Disponibilitatea ajutorului (aceasta poate fi „tururi rapide” sau explicații)

Citiți mai detaliat despre aceste 10 principii generale pentru proiectarea interacțiunii aici.

Îndrăgostire în numele inovației

Adesea, ecranele de concept de aplicație sunt proiectate de designeri care caută o mulțime de aprecieri pe site-uri de prezentare din portofoliu, cu scopul de a-și împinge drumul până la secțiunea zilnică de fotografii fierbinți de pe Dribbble. Câteva modele fanteziste, minimaliste de UI nu sunt produsul. Este asemănător cu proiectarea ușii unei mașini fără a oferi nicio idee despre cum arată restul mașinii sau cum funcționează într-un scenariu real.

Cele mai bune practici pentru proiectarea aplicației mobile pentru interfața de utilizare mobilă
Un design de aplicație de tranzacționare de la Dribbble. Are nu unul, ci două meniuri pline cu pictograme misterioase și text cu contrast redus.

Nu mă înțelege greșit! Inovația în design este necesară. Este sănătos și critic ca orice disciplină sau domeniu creativ să înflorească. Dar nu ar trebui să se întâmple în detrimentul unui bun UX. Să facem o distincție aici și să numim experimente de design. Sub conceptul de design curat, minimalist, dorind doar să fie diferit și cool, multe dintre așa-numitele modele inovatoare prezentate pe aceste site-uri sacrifică utilizarea de bază.

Utilizabilitate 101

Utilizabilitatea, o bază a experiențelor excelente pentru utilizatori, este un atribut de calitate care evaluează cât de ușor sunt de utilizat interfețele de utilizator. Cuvântul utilizabilitate se referă, de asemenea, la practicile de îmbunătățire a ușurinței de utilizare în timpul procesului de proiectare.

Dacă o aplicație este utilă este definit în termeni de utilitate, precum și de utilizare. Utilitarul oferă utilizatorilor caracteristicile de care au nevoie; gradul de utilizare este cât de ușor și plăcut sunt acele caracteristici de utilizat. Prin urmare, designurile de aplicații fanteziste care ignoră aceste principii de bază ale utilizabilității ajung să fie inutile prin definiție.

Este de înțeles că designerii caută modalități inovatoare și interesante de a proiecta navigarea aplicației lor. Dar există o linie fină între neașteptat și inutilizabil. Trei lucruri de luat în considerare în proiectarea navigației sunt consistența, așteptările utilizatorilor și indicii contextuale. Nu contează cât de elegant este comerțul dvs. electronic, de exemplu, conceptul de design al aplicației. Dacă utilizatorii nu găsesc produsul, nu îl pot cumpăra.

Design util

După cum spunea Steve Jobs, „Nu este doar cum arată și cum se simte. Designul este modul în care funcționează.”

Vorbea despre design util .

Dacă un designer se încurcă prea mult cu modelul mental al unei persoane despre cum ar trebui să funcționeze lucrurile, aplicația va eșua. Dacă există o nepotrivire uriașă între modelul mental al utilizatorilor și modelul conceptual, aplicația este toast. Modelele mentale, după cum sugerează și numele, sunt modele conceptuale în mintea oamenilor care reprezintă înțelegerea lor asupra modului în care funcționează lucrurile.

Unul dintre cele mai de bază principii ale proiectării interacțiunii este că o interfață de utilizare trebuie să aibă semnificatori pentru a fi utilă. Dacă utilizatorii nu au indicii vizuale în interfața de utilizare care să semnaleze acțiunile disponibile sau interacțiunile cu gesturi disponibile pentru ei – numite semnificatori – designul produsului dvs. este DOA.

Oricât de mult ești îndrăgostit de produsul tău ca designer, utilizatorilor le pasă mult mai mult de utilitate. Nu vor să învețe aplicația dvs. și nu doresc să plece într-o călătorie de descoperire sau experimentare pentru a vedea ce funcționează încercând să gliseze lucrurile în interfața de utilizare. După cum a spus Steve Krug, consultant de utilizare de mai bine de 20 de ani, în cartea sa Don’t Make Me Think , „[Usability] este principiul primordial, departajarea supremă atunci când decideți dacă un design funcționează sau nu.”

Design aplicație mobilă aplicație astrologie
Cum se folosește această aplicație? (Aplicația de astrologie de la Brandon Termini pe Dribbble)

Cu siguranță, așa cum a spus Dieter Rams, un designer german legendar la Braun în anii 70 și o sursă de inspirație pentru toate lucrurile Apple:

Calitatea estetică a unui produs face parte integrantă din utilitatea acestuia, deoarece produsele pe care le folosim în fiecare zi ne afectează persoana și bunăstarea. Dar numai obiectele bine executate pot fi frumoase.

Cu alte cuvinte, designul trebuie să funcționeze la toate nivelurile.

Design minimalist al aplicației mobile
Un radio Braun proiectat de Dieter Rams. Adevărat minimalism funcțional.

Iată cele 10 porunci ale unui design bun conform lui Dieter Rams:

minimalism de design de aplicații mobile

Să ne amintim că designul vizual – estetica – este doar un aspect al designului UX. Este ultimul strat care ar trebui să ridice tot ceea ce a avut loc înaintea lui în procesul de proiectare UX, adică definirea obiectivelor de afaceri, identificarea utilizatorului principal (persoanele), cercetarea utilizatorului, schițe, ideație, wireframing, machete, prototipuri și testare de utilizare. . Este furnirul final care ridică experiența generală a utilizatorului în conformitate cu proiectarea pentru emoții.

Reducerea efortului mental

cele mai bune practici de proiectare a aplicațiilor mobile
Majoritatea oamenilor nu ar avea idee ce înseamnă pictogramele neetichetate, iar lipsa de contrast din antet ar face navigarea invizibilă pentru majoritatea utilizatorilor. (aplicația de comerț electronic Fancy)

Cu un design prost în acțiune, ceea ce fac domnul și doamna Designer este să le ceară oamenilor să descifreze și să interpreteze icoanele și simbolismul vagi, crescându-le astfel încărcătura cognitivă (cantitatea totală de efort mental folosită în memoria de lucru). Pe de altă parte, un design bun al experienței utilizatorului va reduce sarcina cognitivă. Acest tip de design egoist – da, am mers acolo – aruncă blocaje în drumurile oamenilor, crescând frecarea și frustrarea. Chiar acesta este scopul?

design de aplicații mobile modele mentale design UI
Ce înseamnă „ON și OFF”? Ce fac icoanele? Acest design cere utilizatorilor să interpreteze și să învețe prea multe. (Stan Yakusevich pe Behance)

Designerii trebuie să ofere etichetare clară (linkuri și butoane) și indicatoare evidente (navigare clară) pentru a ajuta utilizatorii să formeze o hartă mentală a aplicației și să intuiască unde sunt lucrurile și cum să le folosească. Navigarea trebuie să fie clară, orientată spre sarcini și logică (de exemplu, comenzile de pe ecran sugerează cum să o folosești), iar locația sa ar trebui să fie consecventă (de exemplu, pe o bară de meniu) pe tot parcursul.

Faceți evident unde ar trebui să atingă utilizatorii, dacă pot glisa și face țintele suficient de mari pentru a fi atinse cu ușurință. Preveniți erorile. Nu-i face pe oameni să ghicească ce înseamnă ceva. Nu fi leneș. Evitați meniurile cu hamburgeri și kebab (cele trei puncte), deoarece acestea ascund navigarea și fac conținutul mai puțin vizibil. În special, evită hamburgerii care nici măcar nu arată ca meniuri cu hamburgeri! Da, spațiul este limitat, dar s-a dovedit că combinația de file (sus jos) și meniurile de hamburger funcționează mult mai bine decât un singur hamburger.

design de aplicații mobile meniu hamburger
Meniu de tip hamburger în partea de sus. Icoane neetichetate care au nevoie de interpretare. (Aplicația de contabilitate de la xiaoniaojiu pe Dribbble)


cele mai bune modele de aplicații mobile
Chiar și Uber este un mare infractor UX într-o aplicație altfel bine concepută. Poți vedea meniul acela de hamburgeri? Nici cei mai mulți oameni nu ar face-o.


Design prost al aplicației mobile
Turo este un alt infractor mare cu pictogramele sale neetichetate în bara de file. Nu există niciun indiciu cu privire la semnificația lor.


greșeli de proiectare a aplicației mobile
Majoritatea oamenilor din lumea reală ar avea dificultăți reale în a-și da seama cum să folosească această aplicație. (aplicația de bugetare acasă de la Tubik)

Nu este o lume perfectă

Dacă produsul dvs. ar fi ajuns în mâinile utilizatorilor, ar putea aceștia să găsească lucruri și să-l folosească efectiv? Este posibil să nu aibă acces la o configurație super-duper precum cea pe care ați folosit-o pentru a proiecta aceste ecrane. Gândiți-vă din nou la utilizare și accesibilitate (dizabilitate vizuală, dizabilitate fizică, dizabilitate cognitivă). Conform datelor recensământului, în Statele Unite cel puțin 19% dintre oameni au un handicap, iar procentul este probabil mai mare în țările mai puțin dezvoltate. Dacă cineva cu o vedere mai puțin decât perfectă ar prelua aplicația dvs., ar putea să o folosească?

Este designul tău „prietenos cu degetele” sau literalmente dificil de folosit? Cât de mult trebuie să se străduiască oamenii pentru a ajunge la diferite părți ale ecranului aplicației? Vă gândiți la fluxurile de sarcini ale utilizatorului, puneți elemente acționabile sub vârful degetelor oamenilor în loc să îi faceți să sară în jurul celor patru colțuri ale ecranului? Este designul într-adevăr compatibil cu atingerea? Ai luat în calcul zona ascunsă de sub mâna care ține mobilul?

După cum subliniază Luke Wroblewski în Designing for Large Screen Smartphones, v-ați gândit la modul în care modelele dvs. ar funcționa pe ecrane mai mari?

design mai bun al aplicației mobile pentru o UX mai bună
Ecranele mobile mai mari fac ca anumite elemente ale interfeței de utilizare să fie greu accesibile.

Designul dvs. urmează cu adevărat recomandarea Apple iPhone Human Interface Guidelines de o dimensiune minimă țintă de 44 pixeli lățime și 44 pixeli înălțime? Ghidul de proiectare și interacțiune a interfeței de utilizare Windows Phone de la Microsoft sugerează o dimensiune a țintei tactile de 34 px cu o dimensiune minimă a țintei tactile de 26 px.

Nu vă îndrăgostiți de contrastul super minim între text și fundal sau de textul mic ilizibil, deoarece vă face modelele „la modă, curate și minimaliste”.

design UX aplicație mobilă
Aproape indescifrabil din cauza lipsei de contrast dintre elemente. Pictograme în trei locații, unele neetichetate.


design de aplicații mobile design prost
Datorită contrastului scăzut, navigarea este aproape imposibil de citit. (Aplicația de urmărire a vitezei de către Rono pe Dribbble)


UX mai bun

Design aplicație mobilă Spotify
Designul aplicației Spotify este curat și bine etichetat. Principalele sale funcții sunt rapid înțelese. (Dar există acel meniu de kebab plin de rău!)


Design UX al aplicației mobile Starbucks
Designerii de la Starbucks nu devin leneși. Uite, fără meniu de hamburgeri! Designerii chiar au renunțat la pictograme și au optat pentru etichete de text simple.


Design bun al aplicației mobile
Chiar dacă un designer devine creativ cu pictograme, dacă este etichetat clar, nu există nicio presupunere. (Designul aplicației de către designerul Toptal Mohammed Bilal)

Avem nevoie de Mo' Better Design

Deci, ce este un design bun? Această discuție ar putea umple o carte, dar, în general, „design bun” este atunci când totul se reunește pentru utilizatorul acelui design.

Aceasta înseamnă că, pentru ca un design să fie „bun” și util pentru utilizatori, trebuie să ia în considerare mai multe niveluri și factori pe care trebuie să se livreze pentru a avea succes.

Tendințele de design vin și pleacă. Tendința medie de design rămâne doar un an sau doi; buna utilizare, baza designului UX, este aici pentru a rămâne.

Produsele care au fost proiectate în conformitate cu cei șapte factori ai UX excelent vor rezista oricărei tendințe de design, garantat. Designerii care acordă atenție — utilizării excelente, bunelor practici UX, convențiilor de proiectare a interacțiunii și factorilor care influențează experiența utilizatorului — vor avea un impact mai mare decât cei care nu o fac. La sfârșitul zilei, ei vor fi recompensați, iar produsele lor digitale vor fi mai larg acceptate și de succes pe piață.

design de interacțiune cu aplicații mobile
Cei șapte factori care influențează experiența utilizatorului. (de la Fundația Interaction Design)

Dacă, în calitate de designer, doriți să deveniți mai bun la UX - pentru a crea aplicații mobile și desktop utile, nu doar frumoase - investiți puțin timp învățând cel puțin elementele de bază ale UX. Începeți prin a urmări blogurile UX și abonați-vă la buletine informative și publicații online, cum ar fi Toptal Design Blog, UX Magazine, UX Matters, UserTesting, uxdesign.cc, UX Design Weekly sau Interaction Design Foundation.

Citiți studiile utilizatorilor efectuate cu participanți vii, care respira, oameni reali. După cum se spune, cifrele nu mint; orice altceva este ipoteză și presupunere.

Urmărește liderii de gândire UX pe Twitter. Citiți articolele UX și documentele albe, creme de la creme fiind The Nielsen Norman Group și Adaptive Path.

Medium este una dintre destinațiile mele preferate pentru a citi articole de design UX/UI online. Designerii din întreaga lume îl folosesc pentru a citi despre design, experiența utilizatorului, utilizare și alte subiecte legate de crearea și construirea de produse digitale grozave. Iată designeri de urmărit pe Medium.

Citiți câteva dintre cărțile fundamentale, clasice pe care fiecare UXer pe care îl cunosc le are pe raftul lor și tratați-le ca pe o Scriptură.

  1. Cartea fundamentală a lui Don Norman despre design The Design of Everyday Things
  2. Designul emoțional al lui Don Norman: de ce iubim (sau urâm) lucrurile de zi cu zi
  3. Nu mă face să gândesc de la Steve Krug
  4. Lean UX al lui Jeff Gothelf: Aplicarea principiilor Lean pentru a îmbunătăți experiența utilizatorului
  5. Ingineria de utilizare a lui Jakob Nielsen
  6. Cele 100 de lucruri pe care fiecare designer trebuie să le știe despre oameni ale lui Susan Weinschenk

Citiți resurse online informative despre ghidurile de utilizare, principiile de proiectare a interacțiunii și cele mai bune practici UX: studii, documente albe, articole etc.

  1. Primele principii ale proiectării interacțiunii
  2. Set complet de 2.397 de reguli de utilizare (în mai multe rapoarte) de la NNGroup
  3. 10 Euristici de utilizare pentru proiectarea interfeței cu utilizatorul de la NNGroup
  4. Articole ale Institutului Baymard: Baymard studiază comportamentul pe site-urile de comerț electronic
  5. Articole UX Mastery: Toate lucrurile UX

Și, în sfârșit, adăugați aceste cinci podcasturi UX în biblioteca dvs. iTunes:

  1. UX Pod: Discuții cu designeri UX și despre utilizare în general
  2. Inside Intercom: Interviuri cu designeri de top de la companii de top
  3. Podcast UX pentru oameni pasionați de echilibrarea afacerilor, tehnologiei și utilizatorilor
  4. Podcast UIE: Perspective de la User Interface Engineering despre lumea designului
  5. Nordul adevărat: descoperirea poveștilor de design care evidențiază testarea și cercetarea designului

• • •

Citiri suplimentare pe Blogul Toptal Design:

  • Cele mai bune practici de design UI și greșeli comune
  • State goale – Cel mai neglijat aspect al UX
  • Simplitatea este cheia – Explorarea designului web minimal
  • Principii euristice pentru interfețele mobile
  • Proiectare pentru lizibilitate – Un ghid pentru tipografia web