Tlačítka v designu – blog společnosti Web-Etalon

Tlačítka jsou nepostradatelným prvkem interakce uživatele; Tlačítko by mělo být rozpoznatelné, znatelné a srozumitelné.

Tlačítko na trello.com je rozpoznatelné, viditelné a srozumitelné

Rozdíl mezi tlačítky ve vzhledu

1. Barevně vyplněné tlačítko, zpravidla vyčnívá oproti ostatním tlačítkům. Označuje nejdůležitější akce na webu
2. Tlačítko s obrysem lze použít k reprezentaci sekundárního i primárního tlačítka
3. Textové tlačítko používá se pro akce s nižší prioritou a pomáhá udržet zaměření na hlavní text bez rozptylování pozornosti
4. Přepínací tlačítko seskupuje sadu akcí, z nichž lze vybrat pouze jednu. Tato tlačítka se používají méně často než ostatní.

Rozdíl mezi tlačítky podle hierarchie

Na webu může být současně více než jedno tlačítko, takže hlavní tlačítko může být doprovázeno dalšími.

1. Hlavní (primární) tlačítko. Toto tlačítko by mělo být silným vizuálním indikátorem, který uživateli pomůže při navigaci na webu. Použijte pro akce jako „jít“, „další“, „zobrazit více“, „objednat“ atd. Hlavní tlačítko „více podrobností“ na webu brandon-visa.ru
2. Sekundární tlačítko používá se pro sekundární akce s nižší prioritou než hlavní tlačítko. Může být doprovodným tlačítkem pro hlavní. Například být vedle tlačítka „odeslat“ a nazývat se „zrušit“. Není nutné, aby toto tlačítko souviselo s primárním, jde o to, že by mělo přitahovat méně pozornosti. Pomocí sekundárních tlačítek vedle primárního na designmodo.com
3. Plovoucí tlačítko používá se k označení akce, na kterou je třeba zaměřit zvláštní pozornost. Obvykle se používá v mobilních aplikacích. Plovoucí tlačítko „více podobných účtů“ v aplikaci Instagram

Několik užitečných tipů

Vzhled:

• vodorovné vycpávky mohou být zarovnány s mřížkou nebo mít stejné vycpávky po stranách. Zarovnání mřížky umožňuje ponechat tlačítko vždy stejnou velikost (v tomto případě omezuje množství textu v tlačítku). Pokud ponecháte stejný okraj po stranách, například 32px, umožní vám to změnit délku tlačítka a vyhnout se omezení délky textu. Ale v tomto případě musíte nastavit minimální šířku tlačítka, například 100px, abyste se vyhnuli příliš malým tlačítkům
• vertikální odsazení by mělo být dostatečné, aby text v tlačítku nebyl „přeplněný“, například při výšce řádku 22px udělejte odsazení 40px
• aby bylo textové tlačítko rozpoznatelné a srozumitelné. Pokud není psán velkými písmeny, jeho barva a styl by se měly lišit od běžného textu.

Na webu equatorcoffees.com je vodorovné odsazení tlačítka zarovnáno s mřížkou a všechna tlačítka mají stejnou velikost

Obsah:

• vyberte styl textu tlačítka a držte se ho
• Určete znění textu v tlačítku a držte se ho. Například sloveso (sledovat), sloveso+podstatné jméno (sledovat video), sloveso+příslovce (koupit nyní)
• nepoužívejte příliš dlouhý text
• nepřesouvejte text na druhý řádek, pokud to není nezbytně nutné
• tlačítko může obsahovat nejen text, ale i ikonu pro rychlejší rozpoznání.

Na webu ekolife.cz má tlačítko v jednom řádku znění sloveso + příslovce a krátký text

Kombinace:

• Pokud používáte několik tlačítek v blízkosti, použijte hlavní tlačítko ke zvýraznění důležitější akce
• neumisťujte vedle sebe dvě hlavní tlačítka, která se budou hádat
• Nepokládejte tlačítka pod sebe, pokud je místo pro jejich umístění vedle sebe.

Hlavní tlačítko na themelooks.com je zvýrazněno a tlačítko s nižší prioritou je vyznačeno

Podmínka:

• Neaktivní tlačítka. Tlačítko může být neaktivní (deaktivováno), pokud uživatel neprovedl potřebné akce. Po dokončení akcí se tlačítko stane aktivním.
• Aktivní tlačítko – jeho vzhled dává uživateli vědět, že na něj lze kliknout
• vedení
• Focus označuje například otevřenou kartu
• Lisování.

Na webu brandon-visa.ru je zaměření na jedno tlačítko, z toho můžete pochopit, že na zbývající tlačítka lze kliknout a když kliknete na jedno z nich, otevře se požadovaná karta

Závěry:

• Tlačítka se liší vzhledem: vyplněné tlačítko, tlačítko obrysu, textové tlačítko, přepínací tlačítko
• Liší se v hierarchii: hlavní (primární), sekundární a plovoucí
• Zachovejte vodorovné a svislé mezery ve vzhledu a zvýrazněte tlačítko textu, abyste jej odlišili od prostého textu
• Sledujte obsah tlačítka: držte se stejného stylu textu, formulace, nedělejte text příliš dlouhý a nepřesouvejte jej na druhý řádek
• Správně kombinujte tlačítka: při použití více tlačítek vedle sebe použijte hlavní tlačítko pro zvýraznění důležitější akce, nepokládejte dvě hlavní tlačítka vedle sebe, neumisťujte tlačítka pod sebe.