Klepnete na tlačítko a nic se nestane. Najedete na položku menu a rozbalovací nabídka se objeví s půlsekundovým zpožděním. Přerolujete formulář a nepoznáte, která pole jsou povinná. Každý malý bod tření se sčítá, až odejdete.
Design interakce na webu je praxe plánování toho, jak návštěvníci pracují s prvky na vašem webu. Každé kliknutí, najetí myší, rolování a odeslání formuláře je interakce. Když jsou tyto interakce plynulé a předvídatelné, lidé zůstávají déle a více se zapojují. Tady je, co design interakce na webu pokrývá a proč je důležitý.
Co je interakce na webu?
Interakce na webu je jakákoli akce, kterou návštěvník na vašem webu provede a která vyvolá odezvu. Kliknutí na tlačítko, otevření menu, vyplnění formuláře, rozbalení harmoniky nebo tažení posuvníku jsou všechno interakce. Design těchto okamžiků určuje, zda je zážitek snadný, nebo frustrující.
Design interakce na webu je plánování za těmito okamžiky. Zahrnuje umístění tlačítek, stavy při najetí myší, ověřování formulářů, načasování animací a zpětnou vazbu ve zprávách. Dobrý design interakce způsobí, že web působí citlivě a intuitivně.
Proč design interakce ovlivňuje zapojení?
Zapojení závisí na plynulosti. Když interakce fungují, jak se čeká, návštěvníci se webem pohybují přirozeně. Čtou, klikají, prozkoumávají a jednají, aniž by se zastavovali a zjišťovali, jak něco funguje.
Když interakce selžou, plynulost se přeruší. Tlačítko, které vypadá klikatelně, ale nic nedělá, vyvolává zmatek. Formulář, který po jedné chybě vymaže všechna pole, vyvolává frustraci. Okno, které zakrývá obsah bez viditelného tlačítka pro zavření, vyvolává vztek. Každá rozbitá interakce návštěvu zkracuje.
Běžné příklady designu interakce
Příklady designu interakce se objevují na téměř každé stránce. Navigační menu, která se rozbalují při najetí nebo kliknutí. Tlačítka, která při najetí změní barvu, aby ukázala, že jsou aktivní. Formuláře, které zvýrazní chyby u konkrétního pole místo obecné zprávy nahoře.
Animace spouštěné rolováním, které odhalují obsah, jak návštěvník postupuje stránkou. Harmoniky, které se rozbalují a sbalují plynulým přechodem. Indikátory načítání, které ukazují postup, zatímco se obsah načítá. Každé z nich je navržená interakce, která utváří zážitek návštěvníka.
Zásady dobrého designu interakce na webu
Interaktivní prvky by měly vypadat interaktivně. Tlačítka by měla vypadat jako tlačítka. Odkazy by se měly vizuálně lišit od textu. Pokud lze na něco kliknout, mělo by to vypadat klikatelně dřív, než to návštěvník zkusí.
Dávejte okamžitou zpětnou vazbu. Když někdo odešle formulář, ukažte hned potvrzení nebo chybu. Když se stránka načítá, ukažte indikátor postupu. Ticho po akci nutí lidi se ptát, zda se vůbec něco stalo.
Interakce držte napříč stránkami konzistentní. Pokud je vaše hlavní tlačítko na jedné stránce modré a na jiné zelené, návštěvníci ztrácejí jistotu, na co kliknout. Konzistentní vzorce snižují kognitivní zátěž a udržují lidi v pohybu vpřed.
Design interakce souvisí s nástroji zapojení popsanými jinde v tomto modulu. Vyskakovací okna, připnuté lišty, odpočítávací časovače a spouštěče rolováním jsou všechno interakce, které potřebují promyšlený design. Konkrétní příklady najdete v částech o vyskakovacích oknech na webu, připnutých lištách a interaktivním obsahu.
Často kladené otázky
Je design interakce na webu totéž co webdesign?
Webdesign pokrývá vizuální vzhled vašeho webu. Design interakce se zaměřuje na to, jak se prvky chovají, když je návštěvníci používají. Vyskakovací okna, formuláře a připnuté lišty jsou všechno rozhodnutí designu interakce.
Potřebuji pro dobrý design interakce designéra?
Profesionální designér pomůže, ale mnoho zásad interakce lze uplatnit pomocí šablon a vizuálních nástrojů. Začněte s jasnými tlačítky, zřetelnými odkazy, jednoduchými formuláři a konzistentními vzorci napříč stránkami.
Jaké chyby v interakci zapojení škodí nejvíc?
Nejčastějšími problémy jsou skrytá navigace, nepopsaná pole formuláře, tlačítka, která na kliknutí nereagují, a vyskakovací okna bez jasné možnosti zavření. Než na web přidáte překryvy, projděte si osvědčené postupy pro vyskakovací okna.
Jak efekty při najetí myší ovlivňují mobilní návštěvníky?
Mobilní zařízení nemají stavy při najetí. Navrhujte interakce, které fungují s klepnutím místo najetí. Rozbalovací menu, která se otevírají jen při najetí, na telefonech selžou, pokud nereagují i na klepnutí.
Může animace design interakce zlepšit?
Jemné animace mohou vést pozornost a potvrzovat akce, například tlačítko, které po kliknutí krátce změní barvu. Těžké animace, které zpomalují načítání stránky nebo odvádějí pozornost od obsahu, škodí víc, než pomáhají. Pohyb držte účelný a rychlý.
Podporuje WEMASY dobrý design interakce hned po instalaci?
Tvůrce webů WEMASY obsahuje responzivní šablony s konzistentními tlačítky, formuláři a vzorci navigace. Interakce můžete upravovat vizuálně bez psaní kódu a bez správy samostatných návrhových souborů.