Mikro-inakce: Malé kouzlo, které vytváří skvělý uživatelský zážitek.

Nejen vytvoření krásných webových stránek! Zákazník vstoupil. "Zmatený". Stiskněte tlačítko. „Jak se ticho?

Cítili jste se někdy takto? Máte v úmyslu dobře navrhnout web. Rozložení je perfektní, perfektní, ale když to ostatní zkusí. Místo toho zpětná vazba říká: „Web vypadá stále.“ „Stiskněte toto tlačítko a co se stalo? Nejsem si jistý.“ Nebo horší je, že se uživatel cítí zmatený, nejsem si jistý, zda akce, kterou před chvílí udělal, byla úspěšná nebo selhává.

Tento problém je jako „vlasy pokrývající hory“, které mnoho lidí přehlíží. Jsme oddaní velkému celkovému obrázku. Dokud nezapomeneme, že uživatelská zkušenost uživatele (uživatelská zkušenost) je způsobena malým detailem, který se skládá z rozhovoru, který vyžaduje přikývnutí nebo reagující web, je stejný. Pokud je ticho, neexistuje žádná reakce. Neliší se od rozhovoru se zdí, což způsobuje, že se uživatel cítí nejistý, a může kliknout a okamžitě zavřít váš web!

Výzva pro ilustrace: Srovnávací obrázky. Jedna strana je stále obrazovka webových stránek. Být živý uživatel je zmatený a ukazuje na tlačítko. Druhá strana je stejná obrazovka, ale na tlačítku po stisknutí dochází k malé animaci. Uživatel se šťastně usmál.

Proč je „krásný“ web „nudný“ a „matoucí“?

Hlavním důvodem, proč web vypadá krásně, poskytuje „suchý“ zážitek nebo „matoucí“ z „konverzace“ mezi uživateli a systémy. Máme sklon zaměřit se na „prezentaci dat (prezentace)“, dokud nezapomeneme na „Interakce (interaktivní)“

Představte si:

• Nedostatek odezvy (nedostatek zpětné vazby): Když uživatel klikne na tlačítko „Přidat produkty do koše“, ale nic se nestalo. Žádná potvrzovací zpráva Neexistuje žádná ikona koše, která by se pohybovala nebo zvýšila počet. První otázka v mysli uživatele je „Eh ... stiskl jsem?“ A možná opakovaně stiskněte. Nebo co je horší, myslet si, že se web zlomil a pak zemřel
• Statický design: Web se stává pouze „digitální brožurou“ je krásná, ale ne živá. Přejděte na zobrazení informací, kliknutí nebo akcí, které jsou zmrazeny, chybí kouzlo, díky kterému se uživatelé chtějí zůstat nebo se vrátit znovu
• Nejasné změny stavu: Uživatel neví, co systém v současné době dělá, například při nahrávání souboru. Pokud neexistuje žádný nakládací lišta nebo animace, řekněte pokrok. Uživatel si může myslet, že web je vynikající a poté stiskněte obnovení, což způsobí, že se vše zlomí!

To vše se stalo, protože jsme zapomněli věnovat pozornost detailům nazývaným mikro-inakce, je klíčem ke změně normálního webu na nezapomenutelný a skutečně snadno použitelný zážitek.

Výzva pro ilustrace: Jednoduché infographic obrázky ukazují mozek návrháře One Side Miss pouze rozvržení, barvu, písmo (velký obrázek). Druhá strana, která je opuštěna malými ikonami, jako je ikona načítání, ikona značky, jako je ikona s jiskry. Ale byl vyroben ze slabé šedé, které přehlížejí přehlížené

Nechte „tichý“ web pokračovat ... výsledky jsou děsivější než jen „nudné“

Mít web, který postrádá dobré odpovědi, nejen způsobí, že se uživatel cítí znuděný, ale přímo to neočekávaně ovlivňuje vaše obchodní cíle. Pokud ponecháte dlouhou dobu, tyto problémy začnou jíst váš web:

• Rychlost hranice (zpětná sazba) vyšší: Když uživatel přijde, cítíte se matoucí, zmatení nebo si myslí, že web je obtížné použít. Jsou připraveni okamžitě stisknout tlačítko Zpět. Tento signál bude odeslán společnosti Google, že váš web nemusí být dostatečně kvalitní.
• Míra konverze (cílová sazba) nižší: bude snížena příležitost pro změnu návštěvy zákazníků (například žádosti o členství, objednávku), jen malá nejistota v procesu platby. Může to zákazníkům umožnit snadno opustit koš. Aktualizace UX/UI na WebFlow za účelem zvýšení konverze je proto neobvyklá.
• Spolehlivost značky se snižuje: web, který vypadá tvrdě a nereaguje. Aby vaše značka vypadala neprofesionálně. Nevzdávejte pozornost detailům a vypadá zastaralý v očích spotřebitelů
• Uživatel se nechce znovu vrátit: špatné zkušenosti. Bude si pamatovat lepší než normální zážitek, pokud se uživatel cítí frustrovaný používáním vašeho webu pouze poté, co je příležitost, aby se vrátil znovu, je téměř nula.

Vidíte, „ticho“ webu je hlasité podle vašeho výkonu. Vytváření dobré zkušenosti prostřednictvím malých detailů není jen „krásné věci“, ale je to „investice“.

Výzva pro ilustrace: 2 obrázky grafů ve srovnání s prvním sloupcem s názvem „Silent Web“ s vysokou mírou opuštění, další nízká míra konverze s názvem „Web, který reaguje“, má nízkou míru opuštění, míru konverze, s zamračenou a usmívající se ikonou obličeje.

Řešení: Probuďte web k životu. „Mikro-interpretační“, velké malé kouzlo

Řešením veškerého tohoto problému je jednodušší, než si myslíte, že „přidávání života“ a „vytváření dialogu“ pro váš web prostřednictvím toho, co se nazývá „mikro-mezinárodní“ (mikrointegrace)

Pokud chcete vysvětlit co nejjednodušší mikro-inakce, je malá odpověď. K tomu dochází, když uživatel jedná na webu nebo aplikaci, jsou to podrobnosti, které pomáhají potvrdit akci, vyprávět stav systému a přirozeně procházet uživateli. Dělá použití plynulejší a uspokojivější

Odborníci z Nielsen Norman Group ji definovali jako srdce komunikace s uživateli. Představte si jednoduchý příklad. Že se setkáváme každý den:

• Mobilní vibrace se zvukem "ting", když stiskneme a odešleme zprávu
• Animace ve tvaru srdce, která se šíří, když na sociálních médiích stiskneme „jako“.
• Nakládací lišta, která nám běžela, aby nám řekla: „Načítání, počkejte chvíli!“
• Vibrační projíždějící kanál, když vyplníme nesprávné informace

Nejedná se pouze o krásné animace, ale „zpětná vazba“. Důležitá věc nás nutí cítit, že systém je „poslech“ a „reakce“, což pomáhá snižovat zmatek a budovat obrovskou důvěru. Návrh UX/UI na webu, díky kterému zákazníci kliknou a kupují. Použijte tento princip jako srdce

Výzva pro ilustrace: Krásné infographic ukazuje ikony 4-5 jako příklad mikro-ikon, jako je ikona tlumocí srdce, ikona křížové, promění se ve správnou značku, ikonu s otevřenou uzavření, živou ikonu nakládací lišty.

Příklady ze skutečné věci: mikro-inakce, se kterými se setkáváte každý den (ale nikdy to nevěděli!)

Mnohokrát mikro-mezinárodní je nejlepší, že to funguje hladce, dokud si jen zřídka nevšimneme. Ale jasně to dělá rozdíl, podívejme se na příklad. To je úspěšné při používání malých kouzlů

1. Pull to Refresh: V sociálních médiích, jako je X (Twitter) nebo Facebook, když jsme na horní části krmiva a použijeme prst k vytažení obrazovky dolů, bude ikona načítání. „Načítání nového obsahu“ a vytvoření dobrého pocitu při čekání namísto toho, abyste museli někde kliknout na tlačítko útesu

2. Animace stisknutím tlačítka „jako“: jako tlačítko není jen normální tlačítko. Když stisknete tlačítko srdce na Instagramu nebo potlesk v médiu, bude malá animace. Roztomilý a uspokojivý se zdá, že to okamžitě odměnilo pocity uživatelů. A aby emocionální výraz vypadal živější

3. Formulář chyby Zpětná vazba: Namísto červené zprávy „Vyplňte pouze nesprávnou“. Mnoho moderních webových stránek. Například odborníci z Frameru doporučují, aby kanál vyplnil toto „chvějící se“, jako by nám to řekl: „Hej! Podívejte se, co se děje?“ Je to velmi inteligentní a přátelštější způsob.

4. Displej při přidání koše: Přední web s elektronickým obchodem při stisknutí tlačítka „Přidat do košíku“. Tlačítko se může změnit na správnou značku. Nebo máte malou animaci, která je obrázek produktu, který se nachází do ikony koše, spolu s čísly na koši okamžitě aktualizované, jedná se o jasné potvrzení a zajistí, aby uživatelé, že „váš produkt je již v koši.

Uvidí, že to vše je malý detail, který pomáhá změnit normální použití na hladkou a nezapomenutelnou interakci

Výzva pro ilustrace: GIF obrázky nebo 4 krátká videa, zobrazující příklady mikro-international popsaných, například první kanál je stažen pro obnovení, druhá je animace, stiskněte jako, kanál tři je forma, která se třese, když jsou čtyři nesprávné.

Chcete sledovat, jak začít? Jednoduchý kontrolní seznam pro probuzení vašeho webu k životu.

Přečtěte si zde mnoho lidí by to chtělo vyzkoušet. Mikro-inakce, která se používají s vlastním webem, je dobrá zpráva, že nemusíte být programátorem božstva, můžete začít! Zkuste použít tento jednoduchý kontrolní seznam. Prozkoumejte svůj web.

1. Najděte „Identifikovat klíčové dotykové body): Pokuste se uvést, co uživatelé musí na vašem webu dělat.
   • Kliknutím na tlačítko (výzva k -funkci)
   • Plnění a odeslání formuláře
   • Navigace
   • Přidání produktů do koše (přidat do košíku)
   • Čekání na načítání dat (stavy načítání)
2. Zeptejte se sami sebe: „Co chcete vědět?“: V každém dotykovém bodě Co chtějí uživatelé pokračovat v pokračování?
   • Při kliknutí na tlačítko: Chci potvrdit, že „klikněte na“ (například tlačítka pro změnu barvy, stíny nebo malá animace)
   • Při odesílání formuláře: Chci vědět, že „úspěšně odesláno“ nebo „existují chyby“ (jako je zelená potvrzovací zpráva nebo otřesení a vyprávění nesprávného bodu)
   • Při čekání na stažení: Chci vědět, že „systém nefunguje“. (Například načítání spinneru nebo krásného pruhu)
3. Začněte s něčím jednoduchým a startem jednoduchým a jemným: Nemusíte okamžitě vytvářet komplexní animaci. Malá změna může udělat mnoho rozdílů
   • Stav vznášejícího se: Způsobit tlačítko nebo odkaz změní barvu nebo se trochu přesune, když uživatel přehrává myši
   • Zpráva o úspěchu: Zobrazit poděkování jasně poté, co uživatel poslal formulář.
   • Stav zaostření: Vytvořte, že plnicí kanály mají výraznější hranici.
4. Použijte správný nástroj: Platforma WebFlow s interaktivním nástrojem, který vám umožní vytvářet tyto věci, aniž byste museli psát komplexní kód. Nebo pokud pracujete s vývojáři, může jim tyto myšlenky sdělit, aby se to splnilo

Klíčem je, aby akce každého uživatele získaly odpověď „význam“. To může pomoci zlepšit uživatelský zážitek obrovský.

Výzva pro ilustrace: krásné obrázky kontrolního seznamu. Souhrn 4 kroků výše s ikony v každé položce (jako je ikona myši, ikona otazníku, ikona počátečního rakety, ikona, nástroje)

Otázky, které lidé mají tendenci přemýšlet (a odpověď je jasná!)

Když mluvíme o přidávání prvků pohybu na webu, vždycky mám otázky a obavy, shromáždil jsem populární otázku o mikro-inakcích, abych zmizel, abych zde zmizel.

Q1: Zadejte mikro-inakce. Zpomalí tyto webové stránky web?
A: Ne vždy. Pokud je to provedeno správně, mikro-inakce jsou většina z nich vytvářena s animacemi CSS nebo SVG, což je velmi lehké a téměř neovlivňuje rychlost zatížení vůbec. Problém je pouze v případě, že používáme velké soubory GIF, těžké video soubory. Nebo skript, který je složitější, než je nutné, je tedy srdce vybrat správnou technologii.

Q2: Je nutné napsat dobrý kód. Můžeš to udělat?
A: Není to vždy nutné! Jak jsem řekl, platforma bez kódu/nízkých kódů, jako je WebFlow, má výkonný a snadno použitelný interakční nástroj. Můžete vytvořit efekty vznášející se, posouvat animace spuštěné nebo kliknout na animace, aniž byste se museli dotýkat kódu. Ale pokud chcete něco velmi komplikovaného, konzultace s odborníkem na UX/UI je dobrá volba.

Q3: Jak se liší od „animace“ na webu?
Odpověď: Rozdíl je v tom, že „cíle“. Obecná animace může být jen dekorativní (dekorativní), jako jsou pozadí, které se pohybují tam a zpět, ale mikro-international bude vždy „funkční“ animací (funkční). Nastane se to v reakci na „spouštěcí“ (akce uživatele) a poskytnutí „zpětné vazby“ (reakce) s významem zpět.

Q4: Nošení hodně, tím lepší, že?
A: Ne! Používání mikro-international příliš nebo více velkolepého, stává se otravným a narušuje koncentraci uživatelů. Stejně jako lidé, kteří zasáhnou do každého slova, jsou pravidla „jemnost je klíčová“ nebo „slabost je klíčová“. Měl by to pomoci zlepšit zážitek. Nekonkurovat o scénu. Návrh tmavého režimu , který je dobrý pro UX, také používá stejné principy měkkého rozlišení.

Výzva pro ilustrace: mluví 2 kreslené znaky. První z nich klade otázky. (Mít značku? Nad hlavou) Druhá odpověď s důvěrou. (K dispozici je ikona jasnější lampy). Pozadí je symbolem kódových a návrhových nástrojů.

Shrnutí: Je čas probudit váš web!

Cestovali jsme po světě mikro-inakcí, které již mají dost, je vidět, že se nejedná jen o „triky“ nebo „dekorace“, ale je to „duch“ dobrého uživatelského zážitku. Je to malý detail. To dělá rozdíl mezi webovou stránkou, která „jen používejte“ s webovou stránkou, která „pěkná a nezapomenutelná“

Věnovat pozornost mikro-international je ukázat uživateli, že se „staráte“ v každém detailu, který pomáhá budovat důvěru. Hladce navigujte uživatele a transformujte vyprahlé interakce na živou konverzaci, aby vaše značka vypadala profesionálně a moderně.

Takže nečekejte! Vraťme se a prozkoumáme váš web. Dnes najděte malý bod, kde můžete přidat život. Možná, že je to jen vaše tlačítko „Zpráva“, aby byla po kliknutí mírně živé. To stačí k vytvoření úsměvu a dojmu pro uživatele.

Je čas změnit svůj web z „tiché brožury“ a stát se „asistentem, který je připraven chatovat“? Udělejme to!

Výzva pro ilustrace: Posledním obrázkem, který jej inspiroval, je rukou uživatele. Klikněte na tlačítko na obrazovce. A z tohoto tlačítka vychází řada krásného světla vycházejícího skvělý zážitek, který vychází z jediného kliknutí. S krátkou zprávou „každé záležitosti kliknutí“.

‍