10 practici de UX de luat în considerare când dezvoltăm aplicații mobile

În prezent, aplicațiile mobile ocupă o mare parte din online, iar veniturile aduse de acestea au crescut considerabil în ultimii ani și continuă să crească. Se preconizează că până în anul 2020 se va ajunge la un venit de aproximativ 189 miliarde de dolari, la nivel global. Cu siguranță prezentul și viitorul sunt mobile, dar care sunt ingredientele necesare pentru a construi o aplicație mobilă utilă, relevantă și apreciată?

Designul de UX și de UI sunt elementele care fac diferența dintre o aplicație de succes și una cu mai puțin succes sau deloc. Succesul, în acest caz, se definește prin două direcții principale:

  • Să ajutăm utilizatorii să găsească ceea ce au nevoie rapid și simplu
  • Să construim o experiență plăcută pentru utilizatori astfel încât aceștia să revină

Totuși care este diferența dintre UX Design (User Experince Design) și UI Design (User Interface Design)? Pe scurt UX Design, conform wikipedia, este procesul de îmbunătățire a satisfacției clienților și a loialității prin îmbunătățirea modului de utilizare a produsului, iar UI Design se referă la partea vizuală a unui produs.

Următoarele 10 sfaturi de proiectare UX vin să ne ajute în a construi o experiență agreabilă pentru utilizatori.

#1: Profesionalism – lucrăm împreună cu designeri de UX

Cele mai reușite interfețe grafice sunt cele ușor utilizabile, iar o astfel de interfață poate fi realizată cu ajutorul unui specialist de UX. Așadar, înainte să începem să creăm designul, ar fi indicat să lucrăm mai întâi cu un UX designer. Acesta ne va ajuta să construim o experiență plăcută pentru utilizatori, urmând ca abia apoi UI designerul să vină să creeze designul vizual al aplicației și să aducă elemente wow menite să îl surprindă plăcut pe utilizator.

#2: Design simplu – o singură funcționalitate pe ecran

  • Efortul depus de utilizator pentru a interacționa cu aplicația trebuie să fie minim.
  • Fiecare ecran al aplicației este indicat să conțină o singură acțiune de valoare pentru utilizator. Această abordare îl ajută pe utilizator să învețe repede cum trebuie să folosească aplicația.
  • Funcționalitățile neutilizate trebuie eliminate, indiferent cât de mult a durat perioada de dezvoltare a acestora.
  • Tutorial pentru utilizatorii noi. Acesta le va explica funcționaliățile aplicației, dar și cum poate fi utilizată. În acest caz, o abordare interactivă ar avea mai mare impact pentru utilizatori.
  • Oferim ajutor utilizatorilor atunci când aceștia întâmpină dificultăți în a utiliza aplicația. Acest lucru poate fi realizat fie cu ajutorul unei secțiuni speciale, fie având la dispoziție persoane care să îi ajute.

Exemplu: aplicația Calendar este o aplicație care evidențiază acestă abordare. Fiecare ecran are un scop principal.

Sursă imagine: thenextweb.com

#3: Focus pe conținut – păstrăm interfața cât mai invizibilă

  • Este important să ne concentrăm pe ceea ce are nevoie utilizatorul și să eliminăm elementele care nu respectă acest obiectiv.
  • Redirecționăm rapid utilizatorii către conținutul de care aceștia au nevoie și astfel conținutul devine de fapt interfață.
  • Google Maps este un exemplu potrivit pentru acest principiu, pentru că harta este conținutul de interes pentru utilizator.

#4: Spațiere – lăsăm componentele din interfața grafică să respire pentru o mai bună vizibilitate

  • Este recomandat să utilizăm ”spațiu negativ”, adică să avem spații goale între elemente.
  • Mulți designeri consideră că acest spațiu nu aduce valoare interfeței, însă spațiul liber este un element esențial în design.
  • Acesta permite o prioritizare a conținutului care devine și mai lizibil.
  • Spațiul liber atrage atenția asupra conținutului important, așa că nu trebuie să ne temem să îl folosim pentru că va simplifica interfața grafică și va îmbunătăți experiența utilizatorului.

#5: Accesibilitate – navigarea în aplicație trebuie să fie evidentă

Atunci când construim o aplicație, o etapă prioritară este reprezentată de navigare iar modul în care interacționăm cu ecranele și tranzițiile dintre ele trebuie să fie cât mai simplu și cât mai vizibil pentru utilizator. Pentru a obține o astfel de navigare trebuie să respectăm câteva principii:

  • Navigarea trebuie să fie coerentă: adică trebuie să utilizăm simboluri cât mai pe înțelesul utilizatorului.
  • Navigarea trebuie să fie consistentă: dacă am decis să folosim tab-uri pentru a naviga în aplicație, atunci acestea trebuie să fie prezente în toate ecranele. Sau și mai important, să nu le schimbăm în anumite ecrane cu o altă componentă de navigare.
  • Navigarea trebuie să comunice utilizatorului locația curentă: este util să știm unde ne aflăm în cadrul aplicației la un moment dat pentru că altfel interacțiunea devine confuză.

Exemplu: Apple Photos

#6: Consistență – creăm experiențe asemănătoare indiferent de platformă

  • Atunci când începem să planificăm realizarea unei aplicații mobile, nu trebuie să gândim acest proces separat de website.
  • Utilizatorul trebuie să știe să se descurce la fel de bine și în cadrul unui website, dar și în aplicația mobilă. Secțiunile trebuie să fie aceleași, la fel și modul de navigare, și foarte important, informațiile trebuie să fie sincronizate între device-uri.

Exemplu: Apple Music

#7: Responsivitate – adaptăm designul la dimensiunea ecranului

Platformele mobile sunt fragmentate, adică există o multitudine de smartphone-uri și tablete și acestea la rândul lor au rezoluții, dimensiuni și configurații diferite. Din această cauză, trebuie să ne asigurăm că aplicația noastră va funcționa corect pe toate device-urile pe care ne propunem să o dezvoltăm.

Un studiu de cercetare realizat de Steven Hoober atestă faptul că 49% dintre oamenii care utilizează un smartphone, o fac folosind degetul mare. Mai jos găsim o imagine care aproximează zonele care pot fi accesate cu degetul mare:

  • Verde – zonă ușor de accesat.
  • Galben – zonă care poate fi accesată dacă utilizatorul întinde mai mult degetul.
  • Roșu – zonă care poate fi accesată doar dacă utilizatorul schimbă poziția degetului, dar și modul în care ține telefonul în mână.
  • Așadar în zona verde este indicat să plasăm controalele cele mai des utilizate, iar în zona roșie acțiunile negative precum ștergere sau anulare.

#8: Rapiditate – minimizăm necesitatea de a tasta

Tastarea pe telefoanele mobile este un proces lent și generator de greșeli de scriere, de aceea este recomandat să minimizăm pe cât posibil această acțiune. Câteva practici care ne ajută să realizăm acest lucru sunt următoarele:

  • Eliminarea din formulare a câmpurilor care nu sunt necesare.
  • Utilizarea unor câmpuri cu funcție de auto completare, caz în care utilizatorul trebuie să scrie doar câteva litere pentru a obține valoarea dorită.
  • Propunerea unor variante de răspuns folosind controale pentru selecție simplă sau selecție multiplă.
  • Mutarea automată a cursorului la următorul câmp care trebuie completat.
  • Pre-completarea unor câmpuri ale căror valori le avem deja (adresă de email, număr de telefon, adresă, etc.).

#9: Detalii care fac diferența

Fonturile și mărimea lor

  • Textul este cel care crează conexiunea dintre aplicație și utilizator, așadar fontul și mărimea acestuia joacă un rol important în cadrul acestei interacțiuni.
  • Textul trebuie să fie suficient de mare încât să fie citibil cu ușurință, iar spațiul dintre linii să fie suficient de mare încât textul să nu pară înghesuit.
  • O bună metrică în acest sens ar fi să folosim maxim 30-40 de caractere pe linie, ceea ce reprezintă aproximativ jumătate din limita recomandată pentru desktop.

Exemplu: Medium

Schemă de culori simplă

  • Culorile sunt cele care ”dau viață” designului, dar și cele care îl pot ruina. De aceea, este recomandat să folosim o gamă de culori cât mai simplificată pentru a îmbunătăți experiența utilizatorilor.
  • Modificând saturația și luminozitatea unei nuanțe putem să obținem o combinație de culori fericită și pentru ochii utilizatorului.

Sursă imagine: pinterest.

Exemplu: schemă de culori pentru nuanța mov

O altă tehnică pe care putem să o utilizăm ar fi să alegem o culoare de accent acompaniată de o paletă de culori neutre. Un bun exemplu ar fi culorile utilizate în material design (Material Design este un limbaj vizual, ce sintetizează principiile clasice ale design-ului de calitate cu inovația, tehnologia și știința).

Gesturi

  • Apariția gesturilor a schimbat dramatic modul de interacțiune cu aplicațiile.
  • Swipe, tap și zoom sunt cele mai frecvent utilizate gesturi.
  • Cu cât o aplicație se concentrează pe utilizarea gesturilor, cu atât avem mai puține butoane, mai mult spațiu pentru conținut, dar și o experiență confuză pentru utilizator, care nu o să știe cum să interacționeze cu aplicația.

Exemplu: gesturi ascunse

Sursă imagine: idownloadblog.com

Animații

Animațiile sunt cele care facilitează și înfrumusețează interacțiunile utilizatorului cu elementele de interfață grafică prin:

  • Feedback vizual
  • Tranziții între ecrane sau elemente
  • Atragerea atenției asupra unor schimbări de status sau conținut

Sursă imagine: flipboard.com

Trebuie însă să avem grijă atunci când utilizăm animații deoarece nu trebuie să o facem doar de dragul de a anima, ci având în minte cât de utilă și practică este acea animație pentru utilizator.

#10: Testare – implicăm utilizatori reali pentru a evalua modul de utilizare al aplicației noastre

  • Atunci când oferim spre testare aplicația noastră, este foarte util să urmărim cum interacționează utilizatorii reali cu aceasta și astfel putem să ne dăm seama cât de bine este realizată partea de user experience și ce îmbunătățiri putem să aducem.
  • Înainte să îi cerem unui utilizator să se autentifice în aplicație, este important să îi oferim valoare și conținut pentru ca acesta să se lămurească asupra scopului aplicației.
  • Feedback-ul negativ trebuie să ne bucure, pentru că doar așa putem progresa și putem îmbunătăți experiența utilizatorilor în cadrul aplicației noastre.
  • O aplicație trebuie să se conecteze cu oamenii și la nivel emoțional, așadar este util să avem un brand în jurul acesteia. Pentru a obține acest lucru, trebuie să descoperim ce avem în plus față de competiție, să avem o identitate vizuală și un mesaj pe care să îl promovăm. Toate acestea aduc loialitate din partea utilizatorului, o mai mare retenție, mai multe recomandări și implicit o mai mare creștere a impactului aplicației.
  • Ne tratăm aplicația ca pe o entitate ce se îmbunătățește permanent și pentru a realiza acest lucru este util să folosim datele din piață, datele din analize și feedback-ul primit de la utilizatori.

Concluzie

Așadar, atunci când ne decidem că dorim să dezvoltăm o aplicație mobilă, trebuie să ne asigurăm ca aceasta este utilă și intuitivă. Ideile enumerate anterior pot fi combinate și cu propriile idei, însă un lucru trebuie să reținem: designul și experiența generată de o aplicație nu sunt doar pentru designeri, sunt și pentru utilizatori, iar ei sunt publicul nostru țintă.

 

 

 

Împarte pe social media

Magda Miu

Magda Miu are o experiență de peste 7 ani în programare, iar în prezent este Senior Mobile Developer. A pus bazele departamentului de mobile din cadrul Roweb și este certificată ca Scrum Master și Product Owner. Magda este și mentor și trainer de Android și susține comunitățile de programatori, fiind co-organizator GDG Pitești și lider al comunității Women Techmakers România.

Comentarii. Intră în dezbatere

Alătură-te comunității noastre. Scrie bine și argumentat și poți fi unul dintre editorialiștii platformei noastre.