Pochopení Microinteractions v Mobile App Design

Použitelnost je jednou z klíčových složek mobilní UI design. Často se jedná o velkou použitelnost mikrointerakce což jsou malé odezvy a chování z rozhraní diktování, jak má být uživatelské rozhraní použito. Tyto mikrointerakce definují chování, podporují zapojení a pomáhají uživatelům vizualizovat, jak by mělo rozhraní fungovat.

Digitální rozhraní jsou prostředníky mezi uživateli a jejich požadovanými cíli. Návrháři rozhraní vytvářejí zkušenosti, které pomáhají uživatelům vykonávat určité úkoly. Aplikace todo list má například rozhraní, které pomáhá uživatelům organizovat jejich úkoly. Stejně jako aplikace Facebook poskytuje uživatelům rozhraní pro interakci s jejich účtem na Facebooku.

V této příručce se budu dále zabývat mikrointerakce pro mobilní aplikace. Malé interakce se mohou zdát triviální, ale mohou mít obrovský dopad o zkušenostech uživatele. Po správném provedení se mikrointerakce jeví jako skutečná součást nadstandardního mobilního uživatelského prostředí.

Síla mikrointerakcí

Ve většině případů je cílem mikrointerakce poskytnout zpětnou vazbu na základě akce uživatele. To může pomoci uživatelům vizualizovat, jak se rozhraní pohybuje nebo se chová, i když je čistě digitální na ploché obrazovce.

Mikrointerakce mají moc, protože oni vytvořit iluzorní zážitek. On / off posuvníky se ve skutečnosti nepohybují jako fyzické přepínače, ale mohou vypadat, že se tímto způsobem pohybují animacemi.

Našel jsem neuvěřitelnou citaci v tomto příspěvku, která se zabývá obrovskou hodnotou mikrointerakcí pro mobilní aplikace:

“Nejlepší produkty dobře dělají dvě věci: funkce a detaily. Funkce jsou to, co přitahují lidi k vašemu produktu. Podrobnosti jsou to, co je tam drží. A podrobnosti jsou to, co vlastně dělá naši aplikaci vyniknout z naší konkurence.”

malé detaily z pohledu vývoje se mohou zdát bezvýznamné, ale z hlediska uživatelského zážitku skutečně dělat rozdíl mezi uživatelským rozhraním aplikace OK a mimořádným uživatelským rozhraním aplikace.

Velké mikrointerakce činí uživatele cítí se odměněn opatření. Tyto akce mohou být opakovat a do chování uživatele. Naučí se používat aplikaci založenou na těchto menších mikrointerakcích. Když uživatel provádí chování, tyto malé interakce signalizují "ano, můžete se mnou komunikovat!"

Podívejte se na příklady uvedené ve specifikaci materiálu společnosti Google. Dokumentace má vlastně celou sekci věnovanou pohybu materiálu. Prostorové vztahy jsou velkou částí této rovnice, ale pohyb může diktovat více než jen prostorové vztahy.

Tady jsou nejběžnější použití animace a pohybu v mobilním UI / UX designu:

• Vedení uživatelů mezi různými stránkami
• Vedení uživatelů prostřednictvím rozhraní pro výuku určitých chování
• Navrhování akcí / chování, které lze provést na dané stránce

Mobilní aplikace mají mnohem méně místa na obrazovce než webové stránky. To může vést k určitým potížím s výukou uživatelů, jak používat aplikaci. Ale může to být překvapivě jednoduché, pokud víte, jak správně implementovat mikrointerakce.

Jak fungují mikrointerakce

Jediná mikrointerakce se spouští vždy, když se uživatel spojí s jednou částí rozhraní. Většina mikrointerakcí je animované reakce na gesto uživatele. Pohyb bude tedy reagovat odlišně než klepnutí nebo pohyb.

Blink UX dělal skvělý příspěvek diskutovat o drobných detailech microinteractions. Tyto malé animace by měly následovat předvídatelný proces které se uživatel může naučit pro každou interakci v aplikaci.

Mikrointerakce vedou uživatele prostřednictvím rozhraní nabízí odpovědi na chování. Jakmile uživatel ví, že posuvník zapnuto / vypnuto se může pohybovat, vědí, že je interaktivní. Na základě odpovědi budou také vědět, zda bylo nastavení zapnuto nebo vypnuto. Když tlačítko vypadá, že na něj může uživatel kliknout instinktivně ví mohou s ním spolupracovat.

Podle UXPinu se může každá základní mikrointerakce rozdělit do čtyř kroků, ale tento proces jsem shrnula do tři kroky.

1. Akce - uživatel něco udělá jako pohyb, přejetím, klepnutím a podržením nebo jinou interakcí.
2. Reakce - rozhraní reaguje založené na tom, co se musí stát. Přetažení obrazovky se může v historii prohlížeče vrátit zpět nebo klepnutím na posuvník ZAP / VYP může nastavení vypnout.
3. Zpětná vazba - toto je to, co uživatel skutečně vidí jako výsledek interakce. Když uživatel přejde zpět do mobilního prohlížeče, může se pohybovat na předchozí stránce, aby se zobrazil nahoře na obrazovce. Posuvník zapnuto / vypnuto může hladce klouzat nebo zvětšovat se, když je na obrazovku aplikován tlak.

Tyto velmi malé akce lze dosáhnout bez animace, ale velké mikrointerakce nabízejí realistický pocit k plochému digitálnímu rozhraní, které většinou přichází ve formě realistické efekty animace. Ty vdechují život rozhraní a podporují větší interakci s uživatelem.

Podívejte se na podrobnosti

Když se podíváte na menší části návrhu, pochopíte, jak by aplikace měla reagovat na konkrétní chování.

Obnovte aktualizaci je dobrým příkladem nyní populární mikrointerakce. Nebyla to nedílná součást systému iOS, když byla poprvé spuštěna, ale mnoho aplikací tuto myšlenku převzalo a začalo se s ní pohybovat. Tahat na aktualizaci je dobře známé chování, které většina uživatelů používá při procházení uživatelského rozhraní zdroje. Totéž lze říci o mobilních nabídkách hamburgerů, které rostly divoce v popularitě.

Proveďte každou mikrointerakci realistické a jednoduché. Nepřehánějte animace, protože mohou nudné pokud jsou příliš podrobné a používají se často. Uživatel nechce, aby se jiskry objevovaly při každém klepnutí na ikonu nabídky. Strike rovnováhu se skutečnou hodnotou, která komunikuje jak by mělo rozhraní fungovat bez překonání.

Při pohledu na některé příklady

Myslím, že nejlepší způsob, jak se něco naučit, je tím, že to dělám, a druhým nejlepším způsobem je studium práce druhých. Nasbíral jsem malou hrstku UI / UX mikrointerakční animace od talentovaných uživatelů Dribbble, aby vám ukázali, jak vypadají v reálném modelu.

Každá aplikace bude odlišná a bude mít různé potřeby založené na tom, co aplikace dělá. Nakonec většina uživatelů chce totéž: aplikaci, která je intuitivní a poskytuje kvalitní uživatelský zážitek s mikrointerakcemi vzhledem k chování uživatelů.

1. Animované události App UI

Prvním příkladem je šikovná animace karet vytvořená Ivanem Martynenkem. Všimnete si to hrst mikrointerakcí v tomto designu, zejména karty bít a pohybující se přes detaily.

Při poklepání na kartu roste velikost. Při klepnutí na tlačítko Přihlásit se fotografie profilu uživatele sklouzne do seznamu účastníků. Vše se na rozhraní cítí velmi intuitivně a zcela přirozeně.

2. Interaktivní obrazovka cvičení

Tato kreativní pohybová animace pochází od designéra Vitalyho Rubtsova. Dema uživatele ukládá svůj trénink pro jednu sadu dřepů.

Všimněte si, že každá animace je stejná elastický odrazový efekt otevřete a zavřete menu. To platí i v případě, že je aktivita označena jako "Hotovo". Konzistence je klíčem k mikrointerakcím, protože by měli všichni cítit rozhraní.

3. Vyhledejte Microinteractions aplikace

Krátká, sladká a do té míry. Myslím, že to nejlépe popisuje tyto mikrointerakce vyhledávací aplikace navržené Lukášem Horákem. Každá animace je rychlé, ale stále patrné.

To je, jak byste měli navrhovat mikrointerakce vyhnout se přílišné složitosti. Pokud by se rozhraní načítalo rychleji bez animace, proč by se obtěžoval přidávat? Rychlé animace udržet uživatele v pohybu bez toho, aby zapadl do zkušenosti.

4. Fitness Mikrointerakce

Myslím, že Jakub Antalà  ?? Â'-k opravdu zasáhl tohle z parku s jeho mikrointerakce fitness cíle. Obrazovky mají tento pocit chvějícího se žertu, protože tvary se pohybují tak plynule.

Rozhraní také cítí pevné a použitelné. Ukazuje se, že mikrointerakce vytvořené s určitým účelem mohou být zábavné a zábavné, ale také funkční a pragmatické.

5. Vytáhněte animaci

Zde je jedna z mých nejoblíbenějších animací vytvořených týmem v Ramotionu. Nejen to napodobuje tekutinu s tahovou akcí, ale animací odezvy plynule spojuje od stříkající kapaliny do zatěžovacího kruhu.

Tento věnovat velkou pozornost detailu je to, co přináší skutečnou krásu v mikrointerakcích mobilních aplikací.

6. Tab Microinteraction

Widgety s kartami jsou pro mobilní aplikace poměrně běžné, protože mají menší obrazovky. Opravdu se mi líbí tato mikrointerakce vytvořená Johnem Noussisem, i když si myslím, že by byla efektivnější při vyšší rychlosti, ale animace sama o sobě je skvělá a promyšlená.

Šipka s kotevní západkou klouže doprava, jakmile se nový obsah odrazí zprava. Dává iluzi celá obrazovka se fyzicky pohybuje doprava. Animace je vynikající, ale protože je to tak pomalé, myslím, že většina uživatelů by se po několika dnech otrávila.

7. Preloading Animation

O tom jsem moc neřekl nosné tyče v tomto příspěvku, ale jsou stejně cenné pro celkový zážitek. Většina uživatelů nechce čekat na načtení dat, ale rozhodně se nechce dívat na prázdnou obrazovku, když se načítá.

Bret Kurtz udělal tuto úžasnou obrazovku, která je zábavná i informativní. Uživatel může vlastně být bavil sledoval tuto malou animaci opakovat. Mohou být také uklidnil aplikace stále načítá svá data a nehavaroval.

Balení

Všechny tyto příklady brilantně demonstrují hodnotu mikrointerakcí. Mobilní aplikace získávají mnohem větší hodnotu z mikrointerakcí, protože uživatelé fyzicky se dotkněte obrazovek prsty. Uživatelé nemají k dispozici své monitory stolních počítačů nebo jejich obrazovky pro přenosné počítače, ale všichni používají své smartphony, protože je to výchozí stav interaktivity.

To je mnohem více osobní zkušenosti, což je důvod, proč mobilní aplikace design může být takový proces. Když se to provede správně, přidáním velkých mobilních mikrointerakcí lze vytvořit a výkonná iluzorní uživatelská zkušenost z ničeho jen pixelů a pohybu.