Tendinte in designul mobil 2016

Ati creat o aplicatie care arata uimitor. Are o poveste incredibila si un design visual impresionant. Dar asta nu este de ajuns – are nevoie de mai mult, ceva care se conecteaza cu utilizatorii si prinde viata. Iar aici intervin micro-interactiunile. Acestea sunt ingredientul secret atunci cand vine vorba de crearea unei aplicatii virale. Aceste momente ale proiectarii mentin utilizatorii implicati, creaza incantare neasteptata si sunt aproape invizibile pentru oricine in afara de designer.

Ati venit in contact nu micro-interactiuni de sute de ori pe zi. De fiecare data cand inchideti o alarma, consultati un mesaj flash de tip text aparut pe ecran, vi se reaminteste ca este randul vostru intr-un joc, sariti pentru o melodie intr-un music player sau chiar atunci cand schimbati directia si cursul in functie de alertele din trafic. Fiecare dintre aceste momente mici formeaza un set de micro-interactiuni. Si este posibil sa nu va ganditi la nici una dintre ele, dar fiecare contribuie la motivul pentru care utilizati in mod continuu anumite aplicatii, zi de zi.

Ce sunt micro-interactiunile?

Micro-interactiunile sunt misiuni care ajuta la indeplinirea unor functii specifice, precum:

  • Comunicarea rapida sau feedback-ul
  • Vizualizarea rezultatului unei actiuni
  • Sau sa ajute untilizatorul sa manipuleze ceva pe ecran.

royalkDe exemplu, Slack, este o aplicatie grozava care indeplineste toate cele 3 conditii de mai sus. Aplicatia permite utilizatorilor sa comunice intr-un chat de tip closed-loop, sa ataseze documnete sau sa aplice tag-uri unul altuia. In acelasi timp, aplicatia ofera actualizari in timp real (ca marcarea mesajelor ca citite) si ajuta utilizatorii sa navigheze si sa comunice cu usurinta. De asemenea, utilizeaza notificari si alte actiuni mai mici pentru a mentine utilizatorii in sincronizare cu ceea ce este comunicat in timp real.

Micro-interactiunile se pot regasi intr-o aplicatie intr-o varietate de forme:

  • Pot inchide sau deschide lucruri
  • Comentarii in orice mediu digital
  • Modificari ale unei setari sau a unui proces
  • Verificarea unui mesaj sau a unei notificari
  • Actualizare de continut
  • Notificari sonore in timp real
  • Conectarea mai multor dispozitive sau aplicatii
  • Partajare de continut media

Simplu spus, o micro-interactiune este actiunea din partea utilizatorului, care declanseaza o alta actiune din partea dispozitivului, iar fiecare dintre aceste interactiuni se bazeaza pe un concept de design centrat pe om.

Ce fac micro-interactiunile cu adevarat?

Dupa cum se poate vedea din lista de mai sus o micro-interactiune poate servi mai multe roluri, dar aceastatrebuie sa creeze intotdeauna un angajament.

Atunci cand va ganditi cum sa se proiectati o micro-interactiune, ganditi-va nu numai la actiunea specifica dar, de asemenea, la ceea ce ar trebui sa faca aceasta ca parte a experientei de ansamblu a utilizatorului. In esenta, o micro-interactiune ar trebui sa-l determine pe utilizator sa faca ceva fizic:

  • sa atinga ecranul
  • sa zambeasca
  • sa invete sau sa inteleaga ceva
  • sa se conecteze cu un alt utilizator

Sunt patru elemente ale unei micro-interactiuni despre care putem vorbi.

In prim plan, atunci cand vorbim despre micro-intaractiuni numele lui Dan Saffer este primul care aparea in orice cautare legata de acest subiect. Ea a scris, literalmente, o carte intreaga pe acest subiect. In cartea sa, Staffer se concentreaza pe o stuctura formata din partu parti ale unei micro-interactiuni:

  1. Trigger – initierea unei micro-interactiuni. De exemplu, momentul in care faceti click pe o pictograma pentru a adauga o pagina/imagine/melodie la preferate.
  2. Reguli – modul in care se comporta interactiunea. Utilizatorul nu poate vedea regulile, dar le poate intelege prin feebdack (umatoarea etapa). Continuand acelasi exemplu, atunci cand ati facut click pe pictograma de favorite aceasta a adaugat continutul la pagina de feed a utilizatorului.
  3. Feedback – sau modul in care comunica microinteractiunea cu utilizatorul. Pictograma inima se umple de culoare si este insotita de un mesaj ce informeza utilizatorul despre ceea ce s-a intamplat (ex. „Saved to favorites”).
  4. Loops si module – modul in care este determinata lungimea interactiunii sau modul in care se repeta in timp. De exemplu, micro-interactiunea descrisa mai sus urmeaza sa de furnizeze continut de pe pagina favorita.

Fiecare dintre aceste parti este prezenta in fiecare interactiune pentru a crea un ciclu pentru modul in care functioneaza lucrurile si, asa cum sustine Saffer, cei mai multi utilizatori nu observa aceste micro-interactiuni cu exceptia cazului in care le descompun.

Feedback-ul este cea mai importanta parte a ciclului unei parcurs de o micro-interactiune. Aceasta este etapa in care utilizatorul si interfata sunt conectare. Feedback-ul determina exact modul in care va functiona o micro-interactiune. De exemplu: trebuie sa va treziti la ora 7 si setati o alarma pe telefon. Ce se intampla atunci cand alarma porneste? Va ridicati si o opriti sau apasati snooze? Aceasta actiune simpla este cea care spune aplicatiei ce micro-interactiune urmeaza – se reseteaza alarma pentru ciclul urmator sau va suna din nou peste un scurt interval de timp. Bucla de feedback dintre utilizator si aplicatie este acum completa. Fara interactiunea (feedback-ul) utilizatorului, sunetul alarmei nu se opreste si nu se reseteaza, ciclul ramanand deschis.

Fără a feedback-ul inițial de către utilizator, sunetul alarmei nu se oprește niciodată. Ea nu se resetează. Ciclul deschis îi permite să lucreze din nou peste si peste.

Elemente de design pentru micro-interactiuni

Modul in care micro-interactiunile sunt proiectate si designul acestora sunt elementele care vor face diferenta. Interactiunile trebuie sa includa cateva elemente de design ce nu pot fi ignorate.

  • Micro-interactiunile trebuie sa supravietuiasca la utilizarea repetata – trebuie sa aiba longevitate, deoarece acestea nu trebuie sa devina enervante atunci cand sunt utilizate pe termen lung.
  • Simplitatea este cheia in designul unei micro-interactiuni – tipografie clara, culori vibrante, design structurat.
  • Micro-interactiunile trebuie sa se simta umane – textul ar trebui citit in modul in care persoanele comunica, sa fie plin de emotie.
  • Creati elemente distractive cu ajutorul animatiilor, fara a abuza de utilizarea acestora. Ganditi-va la modul in care pictogramele din OSX „sar” atunci cand se deschid programe noi. Animatia va informeaza ca programul raspunde, dar aceasta nu povara actiunile tale actuale. Incercati sa utilizati animatii similare, deoarece acestea sunt mult mai mult decat incantare vizual.
  • Cautati armonia. Contrastul este prietenul vostru dar trebuie folosit cu atentie. De exemplu, daca aplicatia utilizeaza o shema de culoare verde, asigurati-va ca celelalte culori de incadreaza perfect cu aceasta.
  • Ganditi-va la modul in care interactiunile evolueaza. Se comporta la fel de fiecare data sau evolueaza in timp? De exemplu, ganditi-va cum o alarma incepe sa sune mai tare pana cand luati o actiune sa o opriti sau amanati.

Nu trebuie sa va stresati prea mult. Prea multe elemente sau detalii pot omori micro-interactiunea. Dupa ce ati comunicat mesajul intr-un mod simplu si rapid, trebuie sa se iasa simplu din aplicatie si sa se reia fluxul normal al sarcinilor.

Micro-interactiunile sunt o componenta cheie in designul unei aplicatii pentru ca ele sunt cele care ajuta la crearea unui angajament si contribuie la functionarea eficienta a acesteia, facand din aplicatie o parte vitala a vietii de zi cu zi.