Jeden konkurent vypadá na každé obrazovce vyladěně. Druhý působí stísněně a zastarale, přestože oba prodávají podobné služby. Rozdíl obvykle tkví v tom, jak dobře rozumíte UI, a v návycích, které za tím stojí. Všimnete si ho okamžitě, i když ještě neumíte pojmenovat každé pravidlo.
UI design se týká vizuálních a interaktivních ploch, na které uživatelé ťukají a klikají. Tato kapitola jednoduše vysvětluje, co to znamená, proč to ovlivňuje váš web i marketing a jak to uplatnit bez zbytečného žargonu. Uvidíte také, jak do stejného obrazu zapadají principy UI designu. Projděme si to krok za krokem.
Co je UI design
UI design se týká vizuálních a interaktivních ploch, na které uživatelé ťukají a klikají.
V praxi se UI design objevuje v záhlavích webu, na stránkách služeb, v grafice pro sociální sítě i v tištěných materiálech. Když ho správně pojmenujete, zadáte práci designérům rychleji a návrhy posoudíte s jistotou.
Souvisí s ním přímo i další myšlenky, třeba principy UI designu. Mějte je na paměti při čtení zbytku tohoto modulu.
Tlačítka, formuláře, ikony a barevné stavy jsou rozhodnutí v oblasti UI.
Proč na UI designu záleží vaší firmě?
Zákazníci posuzují důvěryhodnost podle rozvržení dřív, než přečtou každé slovo. Jasná vizuální struktura snižuje tření a usnadňuje pochopení nabídky.
Principy UI designu udržují rozhraní jednotné a předvídatelné.
Sjednoťte tvary tlačítek a styly polí formulářů napříč šablonami.
Chcete-li vidět, jak to souvisí se sousedními tématy, přečtěte si dál kapitoly UI a UX a testování použitelnosti.
Praktický kontrolní seznam na dnešek
Sjednoťte tvary tlačítek a styly polí formulářů napříč šablonami.
Když kontrolujete jakoukoli stránku, ptejte se, zda je UI vidět už při prvním posunu na mobilu. Pokud ne, přeskládejte sekce dřív, než začnete ladit detaily.
Ukládejte si snímky obrazovky před změnou a po ní, abyste poznali, co u UI na vašem webu skutečně zabralo.
Sdílejte tento seznam s každým, kdo váš web upravuje, aby principy UI designu zůstaly jednotné i na nových stránkách.
Vyberte si jedno číslo, které budete tento měsíc sledovat, například čas na stránce nebo zahájená vyplnění formuláře. Změny designu pak svážete s výsledky podnikání, a ne jen s vkusem.
Jak toto téma souvisí s celou vaší značkou
Vizuální rozhodnutí málokdy žijí jen na jedné stránce. Principy UI designu udržují rozhraní jednotné a předvídatelné.
Vaše příspěvky na sociálních sítích, e-maily i tištěné materiály by měly opakovat stejnou hierarchii, barvy a pravidla písma jako váš web.
Když se vizuální podoba značky rozchází, zákazníci cítí nenápadný nesoulad, i když nedokážou říct proč.
Podívejte se na principy UI designu a porovnejte si poznatky se související kapitolou tohoto modulu.
Tlačítka, formuláře, ikony a barevné stavy jsou rozhodnutí v oblasti UI.
Časté otázky, které lidé přehlížejí
Související pojmy jako principy UI designu nebo rozdíl mezi UI a UX vám pomohou najít další příklady a porovnat vaši práci s běžnými standardy.
Principy UI designu udržují rozhraní jednotné a předvídatelné.
Zapište si jednu změnu před a po, kterou tento týden otestujete na živé stránce. Malé změřené úpravy porazí vágní plány.
Společná slovní zásoba týmu kolem UI zkracuje kola úprav s designéry a agenturami.
Nástroje, které usnadní vizuální úpravy
K řadě úprav rozvržení a stylu nepotřebujete vlastní kód. Vizuální editor vám umožní upravit mezery, barvy a písmo a přitom si prohlížet náhled pro mobil i počítač.
WEMASY obsahuje Tvůrce webů s vizuálními úpravami, takže změny zveřejníte, aniž byste u každé drobnosti čekali na vývojáře. Až budete chtít využít, co jste se naučili, otevřete Tvůrce webů.
Když zveřejníte úpravy, znovu si projděte UI a UX a testování použitelnosti, aby si modul v hlavě držel pohromadě.
Teď už máte pro UI design funkční pohled. Použijte ho při kontrole webu, schvalování marketingových materiálů nebo zadání pro designéra. Pokračujte kapitolami testování použitelnosti a principy UI designu a udržte v tomto modulu tempo.
Často kladené otázky
Jak dlouho trvá zlepšit UI?
Většina malých firem má přehlednější stránky už po několika soustředěných sezeních, když použije základy z této kapitoly. Začněte úvodní stránkou a stejná pravidla pak přeneste na stránky služeb a kontaktu.
Potřebujete designéra na UI?
Designér pomůže u složitého rebrandingu, ale řadu oprav kolem UI zvládnete sami, jakmile víte, na co se dívat. Souvisejícím tématem jsou UI a UX.
Může WEMASY pomoci s UI designem na vašem webu?
WEMASY má v Tvůrci webů vizuální editor, takže rozvržení, barvy a písmo upravíte bez kódu. Otevřete Tvůrce webů, upravte šablony a prohlédněte si náhled na mobilu.
Jaká je nejčastější chyba u UI?
Lidé se snaží opravit všechno najednou místo jedné stránky po druhé. Vyberte jednu prioritu, třeba čitelnost nebo kontrast, a pak se podívejte na testování použitelnosti, co zlepšit dál.
Jak souvisí UI se SEO?
Jasná vizuální hierarchie a čitelné písmo udrží návštěvníky na stránce déle, což podporuje signály zapojení, které vyhledávače sledují. Opravy designu spojte s promyšlenou strukturou obsahu a výsledek bude nejlepší.
Co se učit dál po UI?
Pokračujte v této knize kapitolami UI a UX a testování použitelnosti a vybudujte kompletní vizuální systém své značky online.