Umění designu tlačítka UI na webu: 10 trendů a tipů
Skvělý design tlačítek je něco, o čem většina uživatelů webových stránek nikdy nepřemýšlí ... protože když to funguje dobře, je to téměř neviditelné. Nejlepší tlačítka lze snadno kliknout nebo klepnout, mají zřejmou funkci a pomáhají uživatelům interagovat s designem bez přemýšlení.
Je to docela jednoduchý vzorec, ale může být obtížné navrhnout, pokud jej necháte jako následek.
Dnes se díváme na trendy v designu knoflíků a několik tipů, které vám pomohou navrhnout tlačítko uživatelského rozhraní, na které lidé kliknou znovu a znovu. Díky těmto tipům, trendům a nápadům můžete inspirovat design knoflíku.
Prozkoumejte zdroje návrhu
1. Keep It Simple
Všechno se vrací k této klasické fráze v teorii designu: Keep It Simple, Stupid (nebo Silly, pokud dáváte přednost).
Návrh tlačítka na webu se neliší. Design tlačítka nemusí být příliš složitý. Mělo by to být zřejmé a funkční. Někdy tomu mohou bránit i jiné designérské trendy, které mohou ovlivnit konverze na vašem webu.
Takže pokud jde o design knoflíků, přemýšlejte takto - a nepřemýšlejte o tom. Tlačítko by mělo vypadat jako tlačítko. Je to tak jednoduché.
2. Zajistěte dostatek kontrastu
Téměř stejně důležité, jako mít identifikovatelné tlačítko, je zajistit, aby bylo snadno vidět.
Důvody stylů tlačítek duchů na horních obrázcích trendovaly a rychle mizely, protože tlačítka neměla dostatečný kontrast, aby byla snadno rozpoznatelná. Uživatelé je nemohli hned najít.
Nezakrývejte tlačítka se špatným kontrastem. Nechte je vyniknout a křičte velkým množstvím barev a prostorového kontrastu, aby se oddělili od ostatních prvků na obrazovce. Nechte kolem knoflíků dostatek vycpávky, aby mohli dýchat.
To uživatelům usnadňuje vyhledání a identifikaci tlačítek jako prvků, na které lze kliknout, a také fyzicky snadnější kliknutí, aniž by omylem dostali nesprávný prvek.
3. Použijte barvu
Všimli jste si někdy, kolik tlačítek je červené nebo oranžové? Je to proto, že jasné barvy přitahují pozornost k těmto prvkům a podporují akci.
Používání barev je také docela trendy technika designu. Od jasných barev po tlačítka s jednoduchými přechody může být barva jedním z nejjednodušších způsobů, jak lidem pomoci s designem.
4. Napište mikroskopii, která vytváří očekávání
Nerobte tuto chybu: Tlačítko se slovy „Klikněte sem“. (Jak je to spam?)
Mikroskopie v designu tlačítka by měla vytvořit jasné očekávání toho, co se stane s kliknutím. Řekněte uživatelům, co budou dál. Zadávání údajů může být stejně snadné jako „Odeslat“ nebo kliknutím na odkaz „Další informace“ nebo sledování videa. Bez ohledu na to, co se děje, řekněte uživatelům mikroskopii.
Tyto informace mohou pomoci budovat důvěru s uživateli a zvyšovat počet konverzí pomocí akcí / interakcí, které uživatelé považují za žádoucí.
5. Zapojte se do jemné animace
V designu tlačítek existuje trend, kdy webové stránky používají dvě tlačítka vedle sebe. Jeden je plný, druhý duch. Oba zahrnují animaci vznášení, která dále zdůrazňuje dvě možnosti, na které lze kliknout.
Animace může pomoci upozornit na tlačítka a dokonce povzbudit kliknutí. Stává se běžně přijímaným uživatelským vzorem, který na tlačítky obsahuje animaci vznášení a poskytuje uživatelům jednoduchou narážku, že by se měli zapojit.
Prostě nechodte přes palubu. Spirálová, rotující a blikající tlačítka jsou nepříjemnější než užitečná.
6. Udělejte to velkým klepnutím
Tlačítka by měla obsahovat klikatelnou (sklopnou) oblast, která má průměr nejméně 10 milimetrů a větší je vždy v pořádku. Tato rada vychází ze studie MIT Touch Lab, která se zaměřila na velikosti podložky na prstech ve vztahu k dotykovým zařízením.
Pojďme to do perspektivy. Typická klávesa na klávesnici fyzického počítače je 15 milimetrů až 15 milimetrů. To je dobrý cíl. (Jen nezapomeňte započítat různé velikosti obrazovky, aby se vaše tlačítko neztratilo na malých obrazovkách.)
Pokud potřebujete použít menší tlačítka, zvažte přidání širokého poloměru kliknutí. Tímto způsobem, pokud uživatel vynechá tlačítka samotná, je kolem něj dostatek prostoru, aby se požadovaná akce stále dělala. (Návštěvníci vašeho webu vám děkují.)
7. Použijte známý styl
Existuje několik obecných stylů tlačítek, se kterými je každý obeznámen. Použijte jeden z nich.
- Obdélníkové vyplněné tlačítko se čtvercovými okraji a textem uvnitř
- Obdélníkové tlačítko se zaoblenými okraji a textem uvnitř
- Obdélníkové tlačítko s viditelným vrženým stínem (nahoře)
- Tlačítko obdélníkového ducha
- Jednoduchá kruhová tlačítka, která se nejčastěji používají v pravém dolním rohu k označení podpory, nápovědy nebo chatu
8. Umístěte očekávané umístění
Tlačítka se musí objevit a fungovat nejen očekávaným způsobem, ale také musí být umístěna na místě, které uživatelé budou hledat.
- U domovských stránek to zahrnuje umístění tlačítek pod hlavní nadpis nebo blok textu. Tlačítka jsou obvykle ponechána zarovnána s textem nebo ve středu obrazovky.
- U formulářů se tlačítka zobrazí po vstupu. Některé jednotlivé vstupní formuláře zarovná tlačítko ve stejném řádku napravo od vstupu.
- Obecná tlačítka CTA se zobrazují přímo pod obsahem, na který odkazují.
- Tlačítka pro přehrávání nebo spuštění videa nebo hry jsou často uprostřed obrazovky s náhledem.
- Tlačítka nákupního košíku nebo elektronického obchodu jsou obvykle v pravém horním rohu.
9. Nezapomeňte na zpětnou vazbu
Odpovídá tlačítko na interakci? Ujistěte se, že v návrhu rozhraní tlačítka je zřejmá smyčka zpětné vazby.
Poskytněte vizuální nebo instrukční narážku, že tlačítko vykonalo svou práci. Některá tlačítka vyžadují více práce než jiná. Například tlačítka, která odkazují na jinou stránku nebo web, poskytují zpětnou vazbu, že tlačítko fungovalo, pokud se nová stránka načte. Tlačítko odeslání formuláře může na obrazovce poskytnout zprávu „děkuji“, pokud jsou informace odeslány správně.
10. Záměrně použijte tlačítka
Příliš mnoho tlačítek vytváří chaos.
Použijte tlačítka tam, kde to dává smysl. Nezatěžujte design tlačítky všude. Uživatelé nebudou mít jasnou představu o tom, kde a na co je nejdůležitější kliknout.
Uložit tlačítka pro použití s cíli webových stránek. Měli by návštěvníky přivést k prvkům, které jsou pro váš celkový design nejdůležitější.
Závěr
Tlačítko webové stránky je prvek, který převádí vaši výzvu k akci na výsledek. Udělejte si čas na přemýšlení o tomto designu, od barvy po funkci až po mikroskopii. Vyzkoušejte návrhy tlačítek, abyste se ujistili, že máte ve svém rozhraní nejfunkčnější verzi.
Pokud máte funkční tlačítko, nespadejte do pasti trendů a neměňte design. Pokud jde o tlačítka, funkce by měla být nejvyšší prioritou.
