08. 12. 2022
Pohybem uživatele „nenásilně“ navedete k cíli, předvedete funkčnost použitých prvků, upoutáte pozornost na správná místa i poskytnete okamžitou zpětnou vazbu. Rozhodně není náhoda, že statické pojetí se z našeho světa pomalu vytrácí. Budoucnost jednoznačně patří pohybu. Z toho důvodu pro vás Modrý duch nachystal 5 ukázek, jak pomocí motion designu zlepšíte uživatelskou zkušenost.
Často stačí jedno kliknutí a uživatelé se ztratí: „Boha, kde to zase jsem.“ Přestože se vám může zdát struktura internetových stránek i aplikace naprosto přehledná, uživatelé se obvykle cítí v novém prostředí trochu dezorientovaně.
Co s tím? Naučte se pracovat s pohybem podobně jako Qixxit.
Qixxit má v horní části místo, odkud chcete vyrazit. Dole se vám zobrazí cílová destinace. A mezi tím se nachází filtr pro nastavení dopravních prostředků, kterými si přejete cestovat. Po kliknutí na ikonu vás animace doslova vtáhne do nastavení. Díky tomu přesně víte, co se stalo. A co musíte udělat, abyste se dostali zpátky.
Z pohledu uživatele se jedná o nesmírně jednoduché, praktické a intuitivní řešení.
Po klepnutí na dotykovou obrazovku očekáváte reakci. Co to znamená, když se (zdánlivě) nic nestane? Rozbil se vám mobil? Máte ťuknout znova? Načítá se něco? Není asi žádným překvapením, že nedostatečná zpětná vazba dokáže uživatele pěkně naštvat. Potom dochází ke komickým situacím, kdy člověk zběsile ťuká do mobilu a nadává.
Přesně z toho důvodu se v e-shopech, ale i na mnoha dalších místech, rozhodně vyplatí používat interaktivní štítky.
Jedná se o snadnou pomůcku, která však uživatelům podstatně ulehčí život. (De)aktivováním štítku se změní barva, takže nikdo nezůstane na pochybách. A když uživatel ťukne na možnost, kterou není možné změnit, štítek s ikonou zámečku se zatřese.
Tip: Chcete zlepšit funkčnost vašeho webu na mobilech? Přečtěte si, jak na to.
„A co teď s tím mám jako dělat?“ Pokud se uživatel zasekne a položí si podobnou otázku, máte průšvih. Správně má každý vámi použitý prvek uživatelům naznačit, jakou má funkci, a co od něho může člověk očekávat.
Ke splnění tohoto náročného úkolu se opět skvěle hodí pohyb.
Když se přesunete z přehledu kapitol do hlavního textu, okamžitě se vám ukáže intuitivní panel na spodní straně obrazovky. Díky tomu můžete snadno sledovat, v jaké části textu se zrovna nacházíte. A když podržíte kurzor na „kolečku“, zobrazí se vám název kapitoly. Potom stačí zmáčknout a věci se dají do pohybu. Doslova.
Chcete mít smysluplný web či aplikaci? Obraťte se na Modrého ducha.
Je na místě si přiznat, že uživatelé jsou s trochou nadsázky jako malé děti. Když je chvilku nevedete za ručičku, ztratí se. A to se obvykle negativně propíše i do vašich tržeb.
Naštěstí existuje řešení. Popostrčte uživatele nenápadně k dalšímu kroku pomocí jednoduché animace.
V ukázce si zákazník vybere konkrétní velikost oblečení. Zmáčkne tlačítko „Přidat do košíku“ a v ten okamžik se produkt názorně přesune do nákupního košíku.
Díky animaci se zákazník během 1 sekundy dozví 2 zásadní věci:
Podobnou animací pomůžete vašim zákazníkům i v dalších situacích. Lidé zaručeně ocení, když je navedete správným směrem.
Tip: Poslechněte si, jak správný UX design může pomoci i při sázení stromů.
Zapomínat se nesmí ani na drobné radosti, které uživatelům vykouzlí úsměv na tváři. Krátká animace totiž dokáže během mrknutí oka odvyprávět miniaturní příběh, který v lidech probudí pozitivní emoce. A přesně takový detail může rozhodnout o oblíbenosti vaší značky.
Jak na to? Inspiraci si vemte z videa, kde uvidíte, jak animace výborně poslouží při odstranění zboží ze seznamu oblíbených produktů.
Podobně užitečná může být animace i na chybových stránkách 404. Pro inspiraci se koukněte na:
Pokud uživatelům nachystáte podobně kreativní (a pohyblivé) chybové stránky, určitě vám tento problém odpustí. Místo naštvání si odnesou hezkou vzpomínku na vaši značku. A možná dokonce pošlou odkaz i přátelům, aby se také trochu pobavili.
Tip: Nabízí se možnost jít na to i opačně a doslova provokovat uživatele k akci.
Praktický
Inspirující
Zábavný
Nic moc
