Ikona je označení pro malý grafický symbol, piktogram nebo obrázek, který svým obsahem vizuálně asociuje určitou funkci, typ nebo stav, a tím pomáhá uživatelům zrychlit ovládání nebo zdůraznit obsah. Používání ikon v UI designu má několik pravidel, která je vhodné dodržovat. V opačném případě může dojít k rozptýlení uživatele a k jeho zmatení. Pojďme se nyní společně podívat na několik nejdůležitějších zásad.

 

1. Nastavte jednotný styl ikon

Nastavení jednotného grafického stylu a barevnosti ikon pomáhá uživatelům určit tón a emoce daného obsahu. Styl ikon by měl být v daném produktu jednotný.

2. Nezabíhejte do detailu

Obsah ikon by vždy měl být symbolický a minimalistický. Snaha o velký detail kresby nebo hledání složitých grafických významů ve znázornění vede jen ke zmatení uživatele. Detaily ikon musí být úměrné požadované velikosti jejich zobrazení.

3. Buďte konzistentní

Ikon na internetu naleznete celou řadu z různých zdrojů, ale v celém projektu byste měli používat pouze ikony stejného stylu, tloušťky čar, barevnosti a míry detailu.

4. Méně je více

U ikon platí dvojnásob, že méně znamená více. Není potřeba, aby uživatel hned na první pohled pochopil, co přesně daná ikona znázorňuje. Uživatelé mají symbolické významy piktogramů intuitivně zažité a jejich „zkrášlením“ znesnadňujete jejich interpretaci a tvorbu asociací.

5. Na velikosti záleží

Ověřte srozumitelnost ikon v případě všech velikostí, v jakých budou používány. I když jsou ikony vektorové, a tedy flexibilní co do velikosti a kvality vykreslení, tak některé velikosti jim nemusí svědčit, a dokonce mohou být symboly rázem nesrozumitelné. Pro různě velké implementace však v projektu můžeme používat různě velkou míru detailů a mít tak i několik sad ikon.

6. Výjimky potvrzují pravidla

Pravidla jsou od toho, aby se porušovala. Když to budete dělat systémově a s logikou, bude to sloužit k udržení jednotné komunikace i zvýšení přehlednosti.

7. Testujte

Pokud máte pochybnosti o dostatečné srozumitelnosti použité ikony, není nic jednoduššího než udělat rychlý test vhodně mířenou otázkou ve svém okolí. Uživatelé mají zažité ikony z jim známých aplikací (smartphony, zařízení běžné denní potřeby, dopravní značky atd.) Otázky je nutné nepokládat sugestivně, ale ponechat možnost otevřené odpovědi, která nesestává jen z ANO/NE. Například „Co ti tato značka připomíná?“, „Co si představíš pod touto ikonou v aplikaci?“ atp. Také je nutné číst v odpovědích mezi řádky. Pokud odpověď trvá dlouho nebo se uživatel sklání blíže k monitoru, je něco špatně. Zároveň je třeba mít na paměti, že i různé odpovědi mohou znamenat splnění asociace uživatele s danou ikonou.

 

Zdroje v tomto článku jsou sestaveny za pomoci Instagram kanálu https://www.instagram.com/ui_gradient/ a některé použité ikony pocházejí ze serveru www.flaticon.com.

 

Ikony patří k uživatelskému komfortu a některé produkty, jako například televizní ovladač či pračka, si bez nich už ani neumíme představit. Posláním ikon je v duchu přístupu human centred design zpříjemnit uživateli ovládání i zážitek s naším produktem a zanechat pozitivní emoce. Myslete na to, až se příště pustíte do vlastního projektu!