Pochopenie mikrointerakcií v dizajne mobilných aplikácií

Použiteľnosť je jednou z kľúčových zložiek mobilný používateľský dizajn. Veľká využiteľnosť často zahŕňa microinteractions ktoré sú malé reakcie a správanie z rozhrania diktovať spôsob používania používateľského rozhrania. Tieto mikrointerakcie definujú správanie, podporujú interakciu a pomáhajú používateľom vizualizovať, ako by malo fungovať rozhranie.

Digitálne rozhrania sú sprostredkovateľmi medzi používateľmi a ich požadovanými cieľmi. Návrhári rozhrania vytvárajú skúsenosti, ktoré pomáhajú používateľom vykonať určité úlohy. Napríklad aplikácia zoznamu todo má rozhranie, ktoré pomáha používateľom usporiadať ich úlohy. Rovnako ako aplikácia Facebook dáva používateľom rozhranie, ktoré komunikuje s ich účtom Facebook.

V tejto príručke sa budem podrobnejšie zaoberať mikrointerakcií pre mobilné aplikácie. Malé interakcie sa môžu zdať triviálne, ale môžu mať obrovský vplyv o kvalite skúseností používateľa. Keď sa urobí správne, mikrointerakcia sa považuje za skutočnú súčasť preklenujúceho mobilného užívateľa.

Sila mikrointerakcií

Vo väčšine prípadov je cieľom mikrointerakcie poskytuje spätnú väzbu založené na akcii používateľa. To môže používateľom pomôcť vizualizujte, ako sa rozhranie pohybuje alebo sa správa, aj keď je čisto digitálny na obrazovke.

Mikrointerakcie majú moc, pretože vytvoriť iluzórny zážitok. Zapínacie a vypínacie posúvače sa v skutočnosti nepohybujú ako fyzické prepínače, ale môžu sa javiť pohybovať týmto spôsobom prostredníctvom animácií.

Našiel som neuveriteľný citát v tomto príspevku o diskusii o obrovskej hodnote mikrointerakcií pre mobilné aplikácie:

“Najlepšie produkty robia dve veci dobre: ​​funkcie a detaily. Funkcie sú to, čo ľudí priťahuje k vášmu produktu. Podrobnosti sú to, čo ich tam drží. A detaily sú vlastne to, čo naša aplikácia vyniká našou konkurenciou.”

malé detaily sa môžu z hľadiska vývoja zdajú zanedbateľné, ale z pohľadu používateľského zážitku skutočne urob rozdiel medzi používateľským rozhraním aplikácie OK a mimoriadnym používateľským rozhraním aplikácie.

Veľké mikrointerakcie robia používateľa cítiť odmenený na podanie žaloby. Tieto akcie môžu byť opakovala a vplývajúc na správanie používateľa. Môžu sa naučiť používať aplikáciu na základe týchto menších mikrointerakcií. Keď používateľ vykoná správanie, tieto malé interakcie signalizujú "áno, môžete so mnou komunikovať!"

Pozrite sa na príklady obsiahnuté v špecifikáciách materiálového dizajnu spoločnosti Google. Dokumentácia má vlastne celú časť venovanú materiálnemu pohybu. Priestorové vzťahy sú veľkou súčasťou tejto rovnice, ale pohyb môže diktovať viac než iba priestorové vzťahy.

Tu sú najbežnejšie použitie animácie a pohybu v mobilnom dizajne UI / UX:

• Usmerňovanie používateľov medzi rôznymi stránkami
• Vedenie používateľov prostredníctvom rozhrania na výučbu určitých správaní
• Navrhovanie akcií / správania, ktoré je možné prijať na ľubovoľnej stránke

Mobilné aplikácie majú oveľa menej priestoru na obrazovke ako webové stránky. To môže viesť k určitým ťažkostiam pri výučbe používateľov, ako používať aplikáciu. Ale môže to byť prekvapivo jednoduché, ak viete, ako správne implementovať mikrointerakcie.

Ako funguje mikrointerakcia

Jedna mikrointerakcia sa spustí vždy, keď používateľ zaberá s jednou časťou rozhrania. Väčšina mikrointerakcií je animované odpovede na gesto používateľa. Takže pohyb prstov bude reagovať inak ako klepnutím alebo pohybom.

Blink UX urobil skvelý príspevok, ktorý diskutuje o menších detailoch mikrointerakcií. Tieto malé animácie by mali nasledovať predvídateľný proces ktoré sa používateľ môže učiť pre každú interakciu v aplikácii.

Mikrointerakcia sprievodca používateľmi prostredníctvom rozhrania ponúka reakcie na správanie. Akonáhle používateľ vie, že sa posúvač zapína / vypína, vie, že je interaktívny. Na základe odpovede budú tiež vedieť, či bolo nastavenie zapnuté alebo vypnuté. Keď tlačidlo vyzerá, že môže byť kliknuté na používateľa inštinktívne vie môžu s ňou komunikovať.

Podľa UXPin sa každá základná mikrointerakcia môže rozdeliť do štyroch krokov, ale zhrnila som proces tri kroky.

1. akčné - používateľ niečo robí ako napríklad pohybom prstu, posúvaním prstom, klepnutím a podržaním alebo inou interakciou.
2. reakcie - rozhranie reaguje na základe toho, čo sa musí stať. Presunutie obrazovky sa môže v histórii prehliadača vrátiť späť, alebo klepnutím na posuvník ON / OFF sa vypne nastavenie.
3. spätná väzba - to je to, čo používateľ skutočne vidí ako výsledok interakcie. Keď sa používateľ vráti späť do mobilného prehliadača, môže sa pohybovať na predchádzajúcej stránke, aby sa zobrazila "na vrchu" obrazovky. Posúvač zapnutia / vypnutia môže hladko klesať alebo narastať, ak je tlak aplikovaný na obrazovku.

Tieto veľmi malé akcie môžu byť vykonané bez animácie, ale veľké mikrointerakcie ponúkajú a realistický pocit na ploché digitálne rozhranie, ktoré väčšinou prichádza v podobe realistické animačné efekty. Tieto dýchajú život do rozhrania a podporujú viac interakcie používateľa.

Pozrite sa na podrobnosti

Pri pohľade na menšie kúsky dizajnu pochopíte, ako by mala aplikácia reagovať na konkrétne správanie.

Stlačte na obnovenie je dobrým príkladom súčasnej populácie mikrointerakcie. Nebolo to neoddeliteľná súčasť iOS, keď sa prvýkrát spustila, ale veľa aplikácií si túto myšlienku začalo s tým pohybovať. Teraz vytiahnuť obnoviť je dobre známe správanie, ktoré väčšina používateľov práve vedia používať pri prehliadaní používateľského rozhrania kanála. To isté sa dá povedať o mobilných hamburgerových menu, ktoré sa divoko rozrástli v popularite.

Vykonajte každú mikrointerakciu realistické a jednoduché. Nepreháňajte animácie, pretože môžu stávajú únavné ak sú príliš podrobné a často sa používajú. Používateľ nechce, aby sa pri každom kliknutí na ikonu ponuky zobrazovali iskry. Strikejte rovnováhu s skutočnou hodnotou, ktorá komunikuje ako by malo fungovať rozhranie bez prepadnutia.

Pozrime sa na niektoré príklady

Myslím, že najlepší spôsob, ako sa naučiť niečo, je tým, že robíte to, a druhým najlepším spôsobom je štúdium práce iných. Zhromaždil som niekoľko malých UI / UX mikrointerakčné animácie od talentovaných Dribbble užívateľov ukázať vám, ako sa tieto vyzerajú v reálnom mockup.

Každá aplikácia bude iná a bude mať rôzne potreby na základe toho, čo aplikácia robí. Nakoniec väčšina používateľov chce to isté: aplikácia, ktorá je intuitívne a prináša kvalitnú používateľskú skúsenosť s mikrointerakciami vzhľadom na správanie používateľa.

1. používateľské rozhranie aplikácie Animated Event

Prvým príkladom je šikovná animácia, ktorú vytvoril Ivan Martynenko. Všimnete si to niekoľko mikrointerakcií v tomto dizajne, najmä pri prechádzaní kartami a pri pohybe cez detaily.

Pri klepnutí na kartu rastie veľkosť. A keď klepnete na tlačidlo Prihlásiť, profilová fotografia používateľa sa presunie do zoznamu účastníkov. Všetko je pre rozhranie veľmi intuitívne a úplne prirodzené.

2. Interaktívna cvičná obrazovka

Táto tvorivá mobilná animácia cvičení pochádza od dizajnéra Vitaly Rubtsova. Ukážka ukladá používateľovi svoje tréningy pre jednu sadu drep.

Všimnite si, že každá animácia je rovnaká elastický efekt odrazu keď sa menu otvoria a zatvoria. Platí to aj vtedy, keď je aktivita začiarknutá ako "Hotovo". konzistencia je kľúčom s mikrointerakciami, pretože by mali cítiť všetci pripojené k rovnakému rozhraniu.

3. Vyhľadávanie aplikácií mikrointerakcií

Krátka, sladká a do bodu. Myslím, že to najlepšie popisuje tieto mikrointerakcie vyhľadávacích aplikácií, ktoré navrhol Lukáš Horák. Každá animácia je rýchle, ale stále viditeľné.

Takto by ste mali navrhovať mikrointerakcie vyhnúť sa nadmernej zložitosti. Ak by sa rozhranie načítavalo rýchlejšie bez animácie, tak prečo ho obťažovať? Rýchle animácie nechajte používateľa prechádzať bez toho, aby ste zažili zážitok.

4. Mikrointerakcia cieľa fitness

Myslím, že Jakub Antalá? A ??????????????????????????????????????????????????????? Všetky obrazovky majú tento pocit jiggly jell-o, pretože tvary sa pohybujú tak plynulo.

Napriek tomu sa aj rozhranie cíti pevný a použiteľný. Zdá sa, že mikrointerakcie vytvorené na účel môžu byť aj zábavné a zábavné, ale aj funkčné a pragmatické.

5. Potiahnite na aktualizáciu animácie

Tu je jedna z mojich absolútnych obľúbených pull-to-refresh animácií vytvorených tímom v Ramotion. Nielen to napodobňuje tekutinu s ťahovou akciou, ale animáciou odozvy hladko sa spája od rozstreku kvapaliny do ložného kruhu.

toto pozornosť na detail je to, čo prináša skutočnú krásu v mobilných aplikáciách mikrointerakcií.

6. Tab Microinteraction

Záložky miniatúr sú bežné pre mobilné aplikácie kvôli menším obrazovkám. Mám naozaj rád túto mikrointerakciu, ktorú vytvoril John Noussis, aj keď si myslím, že by to bolo efektívnejšie rýchlejšie, ale samotná animácia je slávna a dobre premyslená.

Šikmá šípka kĺbu sa posúva doprava, rovnako ako nový obsah sa odrazí z pravej strany. To dáva ilúziu celá obrazovka sa fyzicky pohybuje doprava. Animácia je vynikajúca, ale keďže je to tak pomalé, myslím, že väčšina používateľov by sa po niekoľkých dňoch rozhnevala.

7. Preloading Animation

Nepovedal som o tom veľa nakladacie tyče v tomto príspevku, ale sú rovnako cenné pre celkovú skúsenosť. Väčšina používateľov nechce čakať na načítanie dát, ale určite nechcú vidieť prázdnu obrazovku počas načítania.

Bret Kurtz urobil túto úžasnú preloading obrazovku, ktorá je zábavná aj informatívna. Používateľ môže byť skutočne pobaviť sledovať túto malú opakovanie animácie. Môžu byť tiež upokojil že žiadosť je stále načítavajú svoje údaje a nehrozilo.

Zbaliť

Všetky tieto príklady vynikajúco dokazujú hodnotu mikrointerakcií. Mobilné aplikácie majú oveľa viac hodnoty od mikrointerakcií, pretože používatelia fyzicky dotýkajte obrazoviek s prstami. Používatelia nedokážu poklepávať na monitory na pracovnej ploche ani na obrazovky prenosných počítačov, ale všetci zmáčajú svoje smartphony, pretože sú to predvolený stav interaktivity.

Je to oveľa viac osobnej skúsenosti, čo je dôvodom, prečo dizajn mobilnej aplikácie môže byť taký odtieňový proces. Ak sa to urobí správne, pridanie veľkých mobilných mikrointerakcií môže stavať silný iluzórny zážitok používateľov z ničoho okrem pixelov a pohybu.