Înțelegerea microinterațiilor în designul aplicațiilor mobile

Utilizabilitatea este una din componentele cheie ale proiectare interfață mobilă. Utilizabilitatea mare implică adesea microinteractions care sunt răspunsuri mici și comportamente de la o interfață dictând cum trebuie folosit UI. Aceste microinterații definesc comportamentele, încurajează implicarea și îi ajută pe utilizatori să vizualizeze modul în care ar trebui să funcționeze o interfață.

Interfețe digitale sunt intermediari între utilizatori și obiectivele dorite. Designerii interfeței creează experiențe care ajută utilizatorii îndeplini anumite sarcini. De exemplu, o aplicație listă todo are o interfață care îi ajută pe utilizatori să-și organizeze sarcinile. La fel ca o aplicație Facebook, le oferă utilizatorilor o interfață care să interacționeze cu contul lor Facebook.

În acest ghid, voi intra mai departe microinterații pentru aplicații mobile. Interacțiunile mici pot părea triviale, dar pot avea un impact imens cu privire la calitatea experienței unui utilizator. Când se face bine, microinterațiile se simt ca o parte autentică a experienței utilizatorilor mobili.

Puterea microinterațiilor

În cele mai multe cazuri, obiectivul unei microinterații este de a oferi feedback pe baza acțiunii utilizatorului. Acest lucru poate ajuta utilizatorii vizualizați modul în care interfața se mișcă sau se comportă, chiar dacă este pur digital pe un ecran plat.

Microintegrațiile au putere deoarece acestea creați o experiență iluzorie. Dispozitivele de pornire / oprire nu se mișcă într-adevăr ca niște comutatoare fizice, dar se pot mișca în acest fel prin animații.

Am găsit un citat incredibil în acest articol, discutând despre valoarea imensă a microinterațiilor pentru aplicațiile mobile:

“Cele mai bune produse au două lucruri bune: caracteristici și detalii. Caracteristicile sunt ceea ce atrage oamenii la produsul dvs. Detaliile sunt ceea ce îi ține acolo. Și detaliile sunt ceea ce face ca aplicația noastră să iasă în evidență de competiția noastră.”

detalii mici pot părea nesemnificativ din punct de vedere al dezvoltării, dar din punctul de vedere al experienței utilizatorului, ele sunt cu adevărat Fă diferența între un UI de aplicație OK și un UI extraordinar de aplicație.

Microprocesoarele mari fac utilizatorul simțiți recompensați pentru a lua o acțiune. Aceste acțiuni pot fi repetate și înglobat în comportamentul utilizatorului. Ei pot învăța cum să utilizeze o aplicație bazată pe aceste microinterații mai mici. Când utilizatorul efectuează un comportament, aceste interacțiuni mici semnalează "da, puteți interacționa cu mine!"

Aruncați o privire la exemplele găsite în specificațiile de design material Google. Documentația are de fapt o întreagă secțiune dedicată mișcării materiale. Relații spațiale sunt o mare parte din această ecuație, dar mișcarea poate dicta mai mult decât relații spațiale.

Aici sunt cele mai frecvente utilizări ale animației și mișcării în design UI / UX mobil:

• Ghidarea utilizatorilor între diferite pagini
• Ghidarea utilizatorilor prin intermediul interfeței pentru a preda anumite comportamente
• Sugerând acțiuni / comportamente care pot fi luate pe o anumită pagină

Aplicațiile mobile au mult mai puțin spațiu pe ecran decât site-urile web. Acest lucru poate duce la unele dificultăți în a învăța utilizatorii cum să folosească o aplicație. Dar poate fi surprinzător de simplu dacă știți cum să implementați corect microinterațiile.

Cum funcționează microinterațiile

O singură microinterație se declanșează ori de câte ori utilizatorul se angajează cu o parte a interfeței. Cele mai multe microinterații sunt răspunsuri animate la gestul utilizatorului. Deci o mișcare de mișcare va răspunde diferit decât o atingere sau o mișcare.

Blink UX a făcut un post minunat care discută detaliile minore ale microinterațiilor. Aceste animații mici ar trebui să urmeze a procesul previzibil pe care utilizatorul le poate învăța pentru fiecare interacțiune din aplicație.

Microinterațiile ghidează utilizatorii printr-o interfață prin oferind răspunsuri la comportamente. Odată ce utilizatorul știe că un cursor pornit / oprit se poate mișca, ei știu că este interactiv. Pe baza răspunsului, vor ști, de asemenea, dacă o setare a fost activată sau dezactivată. Atunci când un buton arată că poate fi făcut clic pe utilizator știe instinctiv ei pot interacționa cu el.

Potrivit UXPin, fiecare microinterație de bază poate descompune în patru pași, dar am rezumat procesul trei pași.

1. Acțiune - utilizatorul face ceva cum ar fi lovitura, glisați, atingeți și mențineți apăsată sau alte interacțiuni.
2. Reacţie - interfața răspunde pe baza a ceea ce trebuie să se întâmple. Deplasarea unui ecran ar putea să revină în istoricul browserului sau să atingeți un cursor ON / OFF ar putea să oprească o setare.
3. Parere - aceasta este ceea ce utilizatorul de fapt vede ca urmare a interacțiunii. Atunci când utilizatorul revine într-un browser mobil, s-ar putea să plutească pagina anterioară pentru a apărea "în partea de sus" a ecranului. Glisorul de pornire / oprire se poate aluneca ușor sau se poate mări atunci când se aplică presiune pe ecran.

Aceste acțiuni foarte mici pot fi realizate fără animație, dar microinterațiile minunate oferă o realistă la interfața digitală plană, care se găsește în cea mai mare parte sub formă de efecte realiste de animație. Acestea dau viață interfeței și încurajează mai multă interacțiune cu utilizatorul.

Căutați detaliile

Privind la piesele mai mici ale unui design, veți înțelege modul în care o aplicație ar trebui să răspundă la un anumit comportament.

Trageți pentru a reîmprospăta este un bun exemplu de microinterație populară acum. Nu a fost o parte integrantă a iOS când a fost lansată prima dată, dar multe aplicații au luat această idee și au început să se miște cu ea. Acum trageți pentru a reîmprospăta este un comportament bine cunoscut, pe care majoritatea utilizatorilor tocmai știu să îl utilizeze atunci când navighează într-un interfață de utilizator pentru feed. Același lucru se poate spune despre meniurile mobile de hamburger care au crescut în popularitate.

Faceți orice microinterație realist și simplu. Nu exagerati animatiile pentru ca pot să devină plictisitor dacă sunt prea detaliate și se folosesc frecvent. Utilizatorul nu dorește să apară scantei de fiecare dată când atinge o pictogramă de meniu. Strike un echilibru cu o valoare autentică care comunică cum ar trebui să funcționeze interfața fără a trece peste bord.

Privind câteva exemple

Cred că cel mai bun mod de a învăța ceva este prin a face acest lucru, iar cea de-a doua cale este să studiezi munca altora. Am colectat o mână mică de UI / UX animații de microinterație de la utilizatorii talentați Dribbble pentru a vă arăta cum arată acestea într-un mockup real.

Fiecare aplicație va fi diferită și va avea nevoi diferite în funcție de ceea ce face aplicația. În cele din urmă, majoritatea utilizatorilor doresc același lucru: o aplicație care este intuitiv și oferă o experiență de calitate a utilizatorului cu microinterații în raport cu comportamentul utilizatorilor.

1. Interfața UI cu aplicații animate

Primul exemplu este o caracteristică de animație plăcută creată de Ivan Martynenko. Veți observa o mână de microinterații în acest design, în special prin împingerea cărților și deplasarea prin detalii.

Când atingi pe card crește dimensiunea. Și când atingeți butonul Abonare, fotografia de profil a utilizatorului se aliniază în lista abonaților. Totul se simte foarte intuitiv și destul de natural pentru interfață.

2. Ecran interactiv de exerciții

Această animație animată de creație mobilă vine de la designerul Vitaly Rubtsov. Acesta demonstrează un utilizator salvat antrenamentul lor pentru un set de squats.

Observați că fiecare animație are același lucru elastic efect de bounce când meniurile se deschid și se închid. Acest lucru este valabil și atunci când activitatea este verificată ca "Efectuată". consecvență este cheia cu microinterațiile, deoarece ar trebui să se simtă toți conectat la aceeași interfață.

3. Aplicații de căutare Microinterații

Scurt, dulce și până la punct. Cred că acest lucru descrie cel mai bine aceste microinterații de căutare concepute de Lukas Horak. Fiecare animație este rapid, dar încă vizibil.

Acesta este modul în care trebuie să proiectați microinterațiile evitați supra-complexitatea. Dacă interfața se va încărca mai rapid fără animație, atunci de ce deranjează adăugarea acesteia? Animații rapide țineți utilizatorul în mișcare fără să vă împovărați experiența.

4. Microinterația obiectivului de fitness

Cred ca Jakub Antalà ¢ â, ¬ â "¢ à¢ à ¢ â € šÂ¬Ã,Â-k lovit cu adevarat aceasta din parc cu scopul de fitness microinteraction. Ecranele au toate acest sentiment de jiggly jell-o pentru că formele se mișcă atât de fluid.

Cu toate acestea, interfața se simte și ea solid și ușor de utilizat. Merge pentru a arăta că microinterațiile create cu un scop pot fi în continuare distractive și distractive, dar și funcționale și pragmatice.

5. Trageți pentru a actualiza animația

Iată una dintre animațiile mele preferate, drag-up-refresh, create de echipa de la Ramotion. Acest lucru nu numai imita un fluid cu acțiunea de tragere, dar cu animația de răspuns se conectează fără probleme de la o stropire de lichid într-un cerc de încărcare.

Acest multă atenție la detalii este ceea ce aduce frumusețea adevărată în microinterațiile aplicațiilor mobile.

6. Microintegrarea tab-urilor

Tabele widget-uri sunt destul de frecvente pentru aplicațiile mobile din cauza ecranelor mai mici. Îmi place foarte mult această microinterație creată de John Noussis, deși cred că ar fi mai eficientă la o viteză mai mare, dar animația însăși este glorioasă și bine gândită.

Săgeata de ancoră a tab-ului se aliniază spre dreapta, la fel cum apare din nou conținutul nou. Aceasta dă iluzia întregul ecran se mișcă fizic la dreapta. Animatia este rafinata, dar din moment ce este atat de lent, cred ca majoritatea utilizatorilor s-ar deranja dupa cateva zile.

7. Preîncărcarea animației

Nu am spus prea multe bare de încărcare în acest post, dar sunt la fel de valoroase pentru experiența de ansamblu. Majoritatea utilizatorilor nu vor să aștepte încărcarea datelor, dar cu siguranță nu vor să se uite la un ecran gol în timp ce se încarcă.

Bret Kurtz a făcut acest ecran uimitor de preîncărcare, care este amuzant și informativ. Utilizatorul poate fi de fapt distrați vizionând această mică animație repetată. Ele pot fi, de asemenea asigurat că cererea este încă își încarcă datele și nu sa prăbușit.

Înfășurarea în sus

Toate aceste exemple ilustrează în mod strălucit valoarea microinterațiilor. Aplicațiile mobile obțin o valoare mult mai mare din partea microinterațiilor, deoarece utilizatorii atingeți fizic ecranele cu degetele. Utilizatorii nu ating pe monitorii de birou sau pe ecranele laptop-urilor, dar toată lumea își închide telefoanele smartphone-uri pentru că este vorba despre starea implicită de interactivitate.

E o mult mai multă experiență personală, motiv pentru care designul aplicației mobile poate fi unul de acest fel nuanțat proces. Când se face în mod corespunzător, adăugarea unor microinterații mobile foarte bune poate construi o puternică experiență iluzorie a utilizatorului în afara pixelilor și a mișcării.