Tipy pro návrh tlačítek: Jednoduché, malé a vitálně důležité
O detailech mluvíme hodně v designu. Je to z dobrého důvodu. Věnovat pozornost i těm nejmenším detailům může vytvořit nebo rozbít design.
Dnes se ponoříme hlouběji do jednoho z těchto detailů a podíváme se na způsoby, jak navrhnout tlačítka, na která uživatelé chtějí kliknout (nebo klepnout). Přestože tlačítka mohou být jedním z nejmenších prvků ve vašem designu, jsou jedním z nejdůležitějších. Jak jinak byste uživatele sdělil o akcích? Jak jinak by poskytovali informace v této zpětné vazbě?
Na chvilku si vzpomeňte na jednu z velkých stížností na plochý design v počátečních fázích: Uživatelé nevěděli, co bylo a co v designu nebylo interaktivní. Proto je důležitý design skvělých tlačítek.
Prozkoumejte zdroje návrhu
To by mělo vypadat dotykové
Uživatelé by měli vidět v designu tlačítko a myslet si, že musí - um, chtějí - oslovit a dotknout se ho. Zatímco na obrazovku lze kliknout téměř na každé tlačítko velikosti, velikost a výplň kolem tlačítka na dotykovém zařízení je zásadní.
Průměrný uživatel má velikost prstu, která je mezi 8 a 10 milimetry napříč. S ohledem na to je cíl 10 x 10 milimetrů skvělou počáteční cílovou velikostí tlačítek na dotykových zařízeních. (To je o něco menší než standardní klávesy na klávesnici.)
Existuje několik konstrukčních věcí, které můžete udělat, aby prvek vypadal i na dotek.
- Jemný stín může „zvednout“ prvek z pozadí, aby se cítil trochu blíže k uživateli.
- Zvýšené čalounění kolem tlačítek jim usnadňuje klikání a pomáhá uživatele k prvku.
- Barevné akce se vznášením nebo přepnutím mohou uživatelům ukázat, co dělají v reálném čase, a znamenat akci.
Barevné záležitosti
Barva tlačítka musí být v celém designu webových stránek speciální. Toto je dobré místo pro použití určité akcentové barvy a použití pouze pro tlačítka.
Barva tlačítka by měla být jasná a poutavá. Existuje důvod, že tolik vzorů obsahuje žluté, modré nebo zelené knoflíky. Jsou snadno vidět a vynikají od zbytku designu. Pro tlačítko, které opravdu vyniká, vyberte barvu, která je doplňkem k hlavní barvě v designu (protiklady na barevném kolečku).
Dalším problémem s barvou je značka. Chcete vybrat barvu tlačítka, která pracuje s vaší paletou barev a identitou značky. Bez ohledu na to, jak moc chcete, aby barva tlačítka v designu vynikla, měla by fungovat s vaším primárním barevným schématem - nikoli proti.
Velikost záleží ještě více
Ať je velký!
Knoflíky potřebují určitou nadmořskou výšku, aby k nim byli uživatelé okamžitě přitahováni na obrazovce. Trend duchů - obrysy bez výrazné barvy tlačítek - se zaměřil na velká tlačítka z hlediska počtu pixelů, ale postrádal vizuální váhu. Z hlediska velikosti musí být tlačítko v obou ohledech velké. (To je jeden z důvodů, proč trend klesl z módy.)
Existuje však složité místo, když tlačítko přechází z dokonale velké velikosti na trapně nadrozměrné. Přesně, když se to stane, záleží na rozsahu dalších konstrukčních prvků, ale budete vědět jistě, kdy se to stane. Pokud je tlačítko vše, co vidíte v designu, je pravděpodobné, že je příliš velké.
Umístění je klíč
Kam v designu by mělo tlačítko jít? Existuje místo, které pomůže generovat kliknutí více než ostatní?
Ve většině případů by tlačítka měla sledovat obsah, který mají doplnit.
- Na konci formuláře
- Vpravo od výzvy k akci
- Ve spodní části stránky nebo obrazovky
- Střed pod zprávou
Proč tato umístění? Protože sleduje přirozenou cestu akce a způsob, jakým uživatelé čtou webové stránky a pracují s nimi.
Zaměřte se na kontrast
U všech konstrukčních prvků je kontrast důležitým faktorem. To platí o technikách použitých v samotném prvku, ale také o vztahu mezi prvkem a jeho umístěním v designu a okolím.
Nezapomeňte přemýšlet o následujících technikách v tomto duálním prostředí:
- Barva
- Zadejte hmotnost a velikost
- Velikost prvků
- Tvar, protože se vztahuje k pozadí
- Průhlednost nebo animace
- Stíny nebo graidenti
- Mezery a výplně
Použijte standardní tvary
Pokud jde o tlačítka, měli byste zvážit pouze dva tvary:
- Kruhy. Kruhové tlačítko se stalo populárním díky konceptům Material Design a Material Lite. S jakoukoli podobnou estetikou pracuje kulaté tlačítko s designem a odpovídá vzoru uživatele.
- Obdélníky. Tento výchozí tvar by měl být vaším cílem pro všechna tlačítka, pokud v výše uvedené instanci nepoužíváte kruh. To uživatelé vědí a jsou na ně zvyklí. Většina obdélníků tlačítka má tendenci být nejméně dvakrát tak široká než vysoká (někdy až třikrát nebo čtyřikrát širší). Uživatelé vidí tento tvar a okamžitě vědí, co mají dělat. Zatímco někteří mohou argumentovat o výhodách zaoblených rohů versus 90 stupňů, jeden je stejně vhodný na základě vašeho stylu designu.
Řekněte uživatelům, co mají dělat
Každé tlačítko by mělo obsahovat textovou instrukci, která uživatelům přesně řekne, co bude tlačítko dělat. Chcete zachovat krátký a jednoduchý jazyk a měl by odpovídat tónu zbytku designu webových stránek.
Pak splňte tento slib. Další věc, která se objeví, by měla informovat uživatele, že dorazili do očekávaného cíle. Ať už se jedná o odeslání formuláře, nákup nebo přechod na další odkaz, uživatel by měl získat požadovaný výsledek z interakce s tlačítkem. (Pokud ne, ujistěte se, že ve smyčce zpětné vazby je uvedena chyba, abyste věděli, jaké opravy je třeba v návrhu webových stránek provést.)
Příklady zasílání zpráv tlačítkem:
- Klikněte zde
- Vytvořte si účet hned teď
- Vyzkoušejte to zdarma
- Přidat do košíku
- Přečtěte si více
Poskytněte tlačítkům vysoký vizuální význam
Většina návrhů je plná malých prvků uživatelského rozhraní. Jednou pastí, která se stane, je návrh těchto prvků, který bude tlačen, dokud nebude projekt téměř dokončen. A pak si vyberete jeden design pro všechny prvky uživatelského rozhraní, s několika malými rozdíly.
Nenechte se zaseknout v této nebezpečné situaci.
V designu by tlačítka měla vypadat pouze jako tlačítka! Nic jiného v designu by nemělo mít stejný tvar, barvu a vizuální hmotnost jako tlačítko. Musí být jiné. Přemýšlejte o vytvoření stylu pro tlačítka, která jsou větší než jakýkoli jiný podobný prvek v návrhu, nebo použijte zvýrazňující barvu, která je pouze pro tlačítka. Tyto techniky mohou pomoci vytvořit speciální vzhled tlačítka a zdůraznit jeho použití.
Závěr
Začínáte přehodnocovat některé z vašich možností designu tlačítek? Myslíte si, že můžete vytvořit něco, co lépe podpoří kliknutí?
Vyzkoušejte některé z těchto tipů a přitom sledujte analytiku svých webových stránek, abyste přesně zjistili, na jaké změny designu vaše uživatelská základna reaguje. Tyto informace vám pomohou vytvořit ještě více klikatelných tlačítek pro budoucí projekty.
