Potvrzovací akce (buttony) napříč platformami a softwary

Rešerše Potvrzovací akce (buttony) napříč platformami a softwary Autor: Jaroslav Bereza

Obsah 1. Úvod a poděkování...2 2. Konzistence...2 2.1 Přílišná míra konzistence...3 3. Flat design vs. skeuomorfismus...4 4. Afordance...6 4.1 Zdroje světla...7 4.2 Seznam některých vlastností podporující afordanci...8 4.3 Změna kurzoru...11 5. Snadné a intuitivní používání...12 5.1 Dialogy...12 5.1.1 Pozice v operačních systémech...12 5.1.2 Argumenty pro umístění primární akce vpravo...13 5.1.3 Přizpůsobení se operačnímu systému...14 5.1.4 Texty poblíž tlačítek...15 5.1.5 Texty na tlačítkách...16 5.1.6 Focus a chytré výchozí hodnoty...19 5.1.7 Alt-zkratka...20 5.1.8 Možnost zpět místo výzvy k potvrzení...20 5.2 Ikony...22 5.3 Barevné konvence a psychologie...23 5.4 Kulturní závislost a barvy...25 5.5 Skrývání neaktivních tlačítek...26 6. Způsoby zvýraznění tlačítka...29 6.1 Odlišná barva...29 6.2 Prázdný prostor okolo...30 6.3 Velké tlačítko...31 6.4 Jiný prvek směřující pozornost k tlačítku...31 7. Specifika pro použití na webu...32 7.1 Rozdíl velikost tlačítka a velikost klikací plochy...32 7.2 Hover efekt u seznamů...32 8. Specifika pro dotyková zařízení...33 8.1 Malá tlačítka...33 8.2 Sjednocování verzí...34 9. Přístupnost...34 9.1 Kontrast...36 9.2 Barvoslepost...37 1

1. Úvod a poděkování Tuto rešerši s názvem Potvrzovací akce (buttony) napříč platformami a softwary tvořím pro Královéhradeckou pobočku firmy GMC Software Technology. Děkuji Janu Tomášovi a Ondřeji Havlíčkovi za odborné konzultace a mnoho námětů na vylepšení této práce. Dále bych chtěl poděkovat Univerzitě Hradec Králové, za předmět praktický projekt, v jehož rámci mám možnost spolupracovat s firmou GMC. V rešerši jsou častěji zmíněny věci z webového prostředí, což je způsobeno tím, že se věnuji tvorbě webdesignu a jsem tímto ovlivněn. Některé z uvedených věcí vám mohou přidat samozřejmé, nicméně myslím, že není na škodu je pro pořádek také uvést. 2. Konzistence Konzistentní prostředí snižuje množství toho co se uživatel musí naučit. Uživatel, který přijde do styku s novou věcí si jí díky konzistenci spojí s věcí, kterou dříve používal nebo zná její význam. Díky tomu má očekávání, ohledně významu nebo chování věci, kterou vidí poprvé. Toto očekávání lze nazvat mentálním modelem Např. v tomto dokumentu mají všechny nadpisy první úrovně stejnou barvu, font a velikost. Prostředí odpovídající mentálním modelů uživatele zlepšuje míru intuitivního používání. Pokud chceme zjistit jaké řešení je intuitivní, můžeme zadat uživatelům nějaký úkol a zjistit, jaký způsob řešení je jako první napadne nejčastěji. Co může být (ne)konzistentní: barva instrukce chování objektu pozice velikost tvar popis jazyk používání stále stejných slov pro stejnou akci napříč celým systémem. U jazyka může být matoucí používání stejných nebo podobných slov pro různé věci viz následující ukázka. Z programu LibreOffice. 2

Obr. 1: Příklad použití podobných slov pro jinou věc Vlevo na obrázku český překlad používá velmi podobné názvy pro různé věci. Anglická verze vpravo používá sice významově podobná slova, ale ve psané i mluvené podobě jsou od sebe lépe rozlišitelná. 2.1 Přílišná míra konzistence Pokud něco vyniká z konzistence, pak to upoutá pozornost. Ale jen v případě že tam je konzistence, ze které to může vynikat. Obr. 2: Ukázka striktního dodržování barevné konzistence Na všechny skladové stavy je použita oranžová barva textu, která je v kombinaci s bílou a černou použita napříč celým webem. Uživatel pozná co je skladem, teprve po přečtení textu a nemůže to určit letmým pohledem např. podle zelené barvy.1 1 http://www.huramobil.cz/ 3

3. Flat design vs. skeuomorfismus Flat design (plochý design) je minimalistický design, který odebírá všechny nadbytečné grafické efekty s ohledem na použitelnost. Naproti tomu skeuomorfismus se snaží věrně napodobovat věci z reálného světa pomocí grafického zpracování.2 Který přístup zvolit? Nalezl jsem článek, který to demonstruje na ikoně. Příliš konkrétní a specifický objekt uživatel je pro uživatele matoucí, protože očekává výstižný ideogram, na který je zvyklý. Obr. 3: Grafická reprezentace domu a jeho abstrakce První obrázek domu vlevo nahoře resp. fotku si prakticky nikdo nespojí s ideogramem. Druhý obrázek nahoře zleva je ikona vytvořená v duchu skeuomorfismu. Poslední obrázek domečku vpravo připomíná spíše šipku. Obr. 4: Přibližný graf znázorňující míru detailů a míru rozpoznání3 Objekt, ať už ikona či tlačítko, by měl být dostatečně abstraktní, aby ho bylo možné ho identifikovat jako obecně používaný symbol (vlevo na vodorovné ose). Současně by měl být dostatečně konkrétní, aby byla zřejmá jeho symbolika a afordance. Detaily nad rámec tohoto mohou mást (červená oblast vpravo na vodorovné ose).3 2 3 http://www.creativebloq.com/graphic-design/what-flat-design-3132112 http://uxmag.com/articles/realism-in-ui-design 4

V některých případech skeuomorfismus vypadá nekonzistentně nebo divně pokud je v kombinaci s flat designem.4 Boom flat designu přišel s Windows 8. Microsoft k tomu zřejmě má praktické důvody, protože zařízení pro která jsou Windows 8 určená nejsou tolik výkonná. Mají různá rozlišení a DPI. Flat design je více škálovatelný, přizpůsobitelný, variabilní a dá se lépe realizovat vektorovou grafikou.5 Obr. 5: Prostředí Metro z Windows 8 bez nadbytečných efektů Spolu s flat designem se často používají jednobarevné ikony bez zbytečný okrasných detailů, díky čemuž se zvyšuje univerzálnost jejich použití. Výhoda jednobarevnosti je třeba, že ikony můžeme vložit do webového fontu. Tím u webů snížíme počet požadavků na server. Navíc jsou ikony tvořeny křivkami a lze snadněji měnit jejich velikost.6 4 5 6 http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant http://venturebeat.com/2013/09/11/ios-7-windows-8-and-flat-design-in-defense-of-skeuomorphism http://css-tricks.com/examples/iconfont/ 5

4. Afordance Afordance je kvalita objektu nebo prostředí, která vybízí k provedení určité akce. Například ucho hrnku jeho tvarem vybízí k tomu, abychom hrnek chytli právě za to ucho. Lidé se rozhlédnou kolem sebe, aby našli objekty a nástroje, které jim pomůžou v tom co chtějí udělat. Pokud mají všechny objekty jasně viditelnou afordanci, tak se uživatel může snadno rozhodnout pro správný nástroj/objekt a bude ho umět správně použít.7 Níže uvedené obrázky ukazují test na webu, jehož účelem je zjistit, jestli k afordanci vybízí více prostorové tlačítko nebo tlačítko s flat designem.8 Obr. 6: Test atraktivity tlačítka s efekty a bez efektů Obr. 7: Vysvětlení testu atraktivity tlačítek a jeho výsledky 7 8 Weinschenk S.: 100 věcí, které by měl každý designér vědět o lidech str. 21, (2012) http://www.zebraa.nl/buttonforahero/ 6

Z tohoto malého testu vyplývá, že tlačítko vpravo má větší afordanci a více vybízí uživatele ke kliknutí. Pozn.: pozice tlačítek se náhodně mění. V dalších kapitolách uvádím seznam s čím vším se dá u tvorby afordance tlačítek pracovat. 4.1 Zdroje světla V reálném světě vidíme nejčastěji objekty osvětlené seshora. Proto se tato pozice zdroje světla uplatnila i v uživatelském rozhraní. Často se zdroj umisťuje vlevo nahoru. Zdroj světla určuje vlastnosti dalších efektů a také to jaký prostorový dojem budou objekty vyvolávat. Obr. 8: Zdroj světla vlevo nahoře Obr. 9: Zdroj světla vpravo dole Pokud otočíme obrázek o 180, tak vystouplé objekty vypadají propadle a naopak. Obr. 10: Méně zřejmý zdroj světla Z tlačítek na obrázku výše není na první pohled zřejmá pozice světla a rozdíl po otočení není tak zřetelný jako v předchozím případě. 7

4.2 Seznam některých vlastností podporující afordanci Pokud chceme některému tlačítku přiřadit větší afordanci, můžeme přidat navíc jednu vlastnost, kterou se odliší od ostatních. Například barvu nebo obtažení. Obr. 11: Vlastnosti podporující afordanci 8

Obr. 12:Některé další vlastnosti podporující afordanci Narazil jsem na domněnku, že oblé rohy podvědomý vyhodnotí jako přátelštější pro kontakt a interakci. Hlavně u dotykových zařízeních, kde se dotýkáme prsty tlačítek, to může hrát větší roli a také je pro mozek snadnější identifikovat oblé tvary než ostré a hranaté.9 10 Dle mého názoru, pokud tlačítko nemá další efekty, je důležité odlišit ho od obyčejného jednobarevného obdélníku, alespoň tvarem. Např. zaoblené rohy. 9 http://barlab.mgh.harvard.edu/papers/curved2006.pdf 10 http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/ 9

V návaznosti na flat design vzniká trend s dlouhým stínem.11 12 13 Obr. 14: Vliv textu tlačítka na konverzní poměr 15 Obr. 13: Ukázka flat designu s dlouhým stínem Text na tlačítku může lidi více nebo méně vybízet ke kliknutí. 14 15 11 12 13 14 15 http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/ http://www.hongkiat.com/blog/long-shadow-design/ http://www.cssauthor.com/modern-flat-style-icon-set/ http://www.marketingsherpa.com/article/how-to/simple-word-change-in-email http://blog.kvasnickajan.cz/moje-prednaska-na-affiliate-konferenci-zvysovani-konverznich-pomeru-v-praxi 10

4.3 Změna kurzoru Na webu je zvyklostí, že po najetí na odkaz a tlačítko se změní kurzor z šipky na ručku. Občas to bývá jediný způsob, jak rozlišit odkaz od běžného textu. Tato vlastnost je bývá na webu nekonzistentní. Některé tlačítka jsou vytvořená pomocí tagu <A>, u kterého se defaultně mění kurzor na pointer a jiná tlačítka pomocí tagu <INPUT>, který defaultně u type="submit" a type="button" ukazuje defaultní kurzor, obvykle šipku. Následující obrázky ukazují, že pro tlačítka se stejnou funkcí na dvou různých stránkách se po najetí myší ukazuje jiný kurzor. Obě tlačítka jsou řešená tagem <INPUT>. Jedno tlačítko má pomocí CSS přirazeno cursor: pointer; druhé nikoliv. Obr. 15: Tlačítko přihlášení do E-mailu na Seznam.cz. Samostatná stránka pro přihlášení. Obr. 16: Přihlašovací formulář na hlavní stránce Seznam.cz 11

5. Snadné a intuitivní používání 5.1 Dialogy 5.1.1 Pozice v operačních systémech Windows: primární (pozitivní) akce vlevo, sekundární(negativní) vpravo Např. OK, Cancel, Apply, Help, další. Mac: primární akce vpravo sekundární vlevo. Linux: pozitivní akce vpravo, negativní akce vlevo. Obr. 17: Windows 7 primární akce vlevo na tlačítku OK s defaultním focusem Obr. 18: Linux Mint primární akce je vpravo Místo nápisu OK je použit nápis Format.... Defaultní focus je na volbě vlastnosti formátování. Za pozornost stojí trojtečka, která oznamuje, že bude následovat další dialog. 12

5.1.2 Argumenty pro umístění primární akce vpravo Primární akce vpravo sníží vizuální zatížení. Uživatelé prý nekliknou na primární, akci okamžitě a budou se chtít podívat na seznam všech možností. Obr. 19: Předpokládaná trasa pohybu očí u primární akce vlevo Tento způsob by měl více zatěžovat oči Obr. 20: Předpokládaný pohyb očí u primární akce vpravo Obr. 21: Korespondence pozice tlačítek s postupem vpřed a vzad Primární akce vpravo více koresponduje s mentálním modelem, že vlevo je zpět a vpravo je dále. 13

Každopádně se doporučuje nechat tlačítka u sebe a vpravo, aby byly hezky pohromadě na místě, kde nejspíše nakonec skončí pohled uživatele.16 Obr. 22: Dialog vložení do košíku na e-shopu Při uživatelském testování e-shopu (obr. 22) vnímala paní tlačítko pokračovat v nákupu umístěné vlevo, jako tlačítko zpět, ve smyslu odebrání produktu z košíku. Tento dialog se zobrazí při přidání položky do košíku.17 5.1.3 Přizpůsobení se operačnímu systému Photoshop od Adobe respektuje konvence operačního systému. Obr. 23: Pozice tlačítek programu Photoshop pod Windows XP 16 http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/ 17 http://blog.kvasnickajan.cz/prezentace-na-jsmemarketing-na-tema-ergonomie-webu-a-eshopu-v-praxi/ 14

Obr. 24: Stejný dialog v Mac OS Program pro 3D modelování Cinema 4D CE 6 (z roku 2003) má možnost nastavit, jestli se mají dodržovat konvence Macintosh nebo Windows a kam vodorovně zarovnávat tlačítka. Obr. 25: Možnost vlastního nastavení dialogových tlačítek 5.1.4 Texty poblíž tlačítek Texty poblíž hlášek by měli být srozumitelné pro cílovou skupinu. Tento nedostatek se projevuje velmi často u chybových hlášek, proto se budu věnovat hlavně jim. Texty chybových hlášek by měli informovat co se děje, proč se to děje a jak to lze napravit. Pokud je na dialogu více tlačítek, tak správně napsaná chybová hláška pomůže k vybrání správného tlačítka. Microsoft radí, že popisek u tlačítek by měl obsahovat vše nutné k porozumění a uživatel by neměl hledat něco jinde. Rovněž píše, že uživatelé budou pravděpodobněji číst text na tlačítkách než popisek.18 18 http://msdn.microsoft.com/en-us/library/windows/desktop/aa511331.aspx 15

Obr. 26: Uživatelsky nepřívětivý popis chyby Obr. 27: Přívětivější chybová hláška. V dialogu výše je sice jenom jedno tlačítko, ale hláška obsahuje vysvětlení proč něco nefunguje a jak to napravit 5.1.5 Texty na tlačítkách Tlačítka potvrzovacích dialogů se omezují většinou pouze na OK / Storno Problém je v tom, že dokud si uživatel nepřečte popisek k tlačítku tak neví co které tlačítko dělá. Lidé spěchají a nechtějí číst dlouhé popisy k tlačítkům. Existuje konvence, že takové dialogy se nás obvykle ptají, jestli to myslíme vážně a chceme pokračovat. Pokud si lidé zvykli na tuto konvenci a v programu funguje, pak mohou klikat na OK bez toho aniž by si četli hlášku. Tento přístup se už začíná objevovat např. v dialozích pro uložení. Obr. 28: Starší Windows XP bez vlastních popisků tlačítek 16

Obr. 29: Windows 7 s nápisem Uložit místo Ano Obr. 30: Dialog pro uložení Linux Mint 16 LibreOffice 4.1.2.3 Obr. 31: Dialog programu Adobe Photoshop CS5.1 17

Další náměty pro popisy tlačítek u dialogů:19 Vypnout / Storno Nenávratně smazat / Storno Tisknout / Storno Microsoft doporučuje, aby se na dialozích tlačítko Storno nepřejmenovávalo a spolu s ním byl přítomen křížek pro zavření dialogu, pokud je to možné. Lidé si zvykli, že kdykoliv mohou kliknout na storno resp. zrušit, daná akce se neprovede a nic tím nezkazí. Snižuje to míru stresu. Navíc pokud se uživatel rozhodl okamžitě akci zrušit, nebude nucen číst všechny tlačítka. Microsoft doporučuje přejmenovat tlačítko Storno, pokud je nejednoznačné co se jím ruší. 20 Tlačítka tu jsou obvykle pro nějakou akci. Akce nejlépe vystihují slovesa. Malá pomůcka jak napsat výstižný text na tlačítko. Zeptejte se sami sebe co byste chtěli udělat. Např. Chtěl bych stáhnout soubor? Já bych chtěl stáhnout soubor.21 Problematické může být používat slova moje, svého a vaše. V běžném životě je obvykle jasné, že vedeme dialog s konkrétním živým člověkem. U strojů to není tak jednoznačné. Hlášku můžeme napsat několika způsoby: Chcete zformátovat svůj disk? nebo Chcete zformátovat váš disk? anebo se tomu úplně vyhnout a napsat třeba Klepnutím na tlačítko OK naformátujete disk. Někdy však nápisy na tlačítkách vyjadřují stavy a fungují v podstatě jako checkboxy. Uvádím ukázku z Facebooku. Obr. 32: Tlačítko s nápisem To se mi líbí fungující jako přepínač dvou stavů Na rozdíl od sousedních tlačítek nedodržuje výše uvedené pravidlo Obr. 33: Takto vypadá neaktivní stav tlačítka To se mi líbí Tlačítko se liší pouze ikonou. Tlačítko Sledovat znázorňuje také stav. V tomto případě je nedostupné 19 Námět převzat z komentářů k článku: http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-workbest-on-the-right/ 20 http://msdn.microsoft.com/en-us/library/windows/desktop/aa511331.aspx 21 http://www.uxbooth.com/articles/the-grammar-of-interactivity/ 18

Obr. 34: Tlačítko Sleduji znázorňuje stav, ve kterém se nacházím. Obr. 35: Nejednoznačné popisy tlačítek služby Pinterest Pinterest vytvořil překlady do dalších jazyků. Český překlad působí zmatečně. Má se uživatel přihlásit se anebo přihlásit"? Jaký v tom je rozdíl? Pravděpodobně se jedná o špatný překlad. Obr. 36: Zdařilejší slovenský překlad 5.1.6 Focus a chytré výchozí hodnoty Tlačítka v dialozích mají přiřazena vizuální váhu pomocí focusu, a tak na sebe přitahuje více pozornosti. Tlačítko s focusem provede akci při stisknutí klávesy enter. O to více je důležité rozhodnutí, které tlačítko bude mít focus. Primární akce, která dokončí požadovanou úlohu má obvykle nastavený focus. Nicméně v případech nenávratných operací se doporučuje nastavit focus na tlačítko, které působí méně škody v případě nepozornosti.22 22 http://uxmovement.com/buttons/the-visual-weight-of-primary-and-secondary-action-buttons/ 19

Obr. 37: Focus je na tlačítku, které ponechá soubory a nezpůsobí nenávratnou akci Obr. 38: Focus tlačítka OS Android 4.3 v emulátoru VirtualBox Focus se nezobrazuje. Protože emuluji pomocí VirtualBoxu, mohl jsem poslat klávesu enter a focus se zobrazil na tlačítku Cancel druhé stisknutí enteru zavřelo dialog. Funguje i přepínání klávesou Tab a šipkami. 5.1.7 Alt-zkratka Některá uživatelská rozhraní umožňují aktivaci objektu stisknutím levé klávesy Alt v kombinaci s písmenem, které je vyznačeno podtržením. Používá se to hodně v nabídkách. Je to vhodné pro lidi, kteří často opakují stále stejné úkony a také je jednodušší vytvořit makro, které pracuje odesíláním stisků kláves. 5.1.8 Možnost zpět místo výzvy k potvrzení Pokud lidé kliknou na nějaké tlačítko, tak ve většině případů tu akci doopravdy chtěli provést. Lidé obvykle chtějí provést co možná nejmenší nutný počet kroků k dosažení jejich cíle. Je nepříjemné se pokaždé znovu ptát, jestli to mysleli vážně. Pokud je to operace, kterou lze vrátit, může být lepší zobrazit zobrazit takovou informaci.23 Vlastní postřeh: např. Grafický program se mě neptá pokaždé, když nakreslím novou čáru, jestli ji vážně chci nakreslit. Vím totiž, že se mohu vrátit třeba i o 100 kroků zpět. 23 http://www.goodui.org/#8 20

Obr. 39: Tip č. 8 z webu goodui.org Obr. 40: MindMup.com pro tvorbu myšlenkových map Obr. 41: Google Disk 1 dokument byl přesunut do koše 21

Obr. 42: Nový vzhled e-mailu od Seznam.cz Zpráva byla přesunuta do koše 5.2 Ikony Ikony s jasnou symbolikou nám pomáhají rychleji skenovat stránku a lépe se v ní zorientovat. Ikony, které dodržují tvarovou jednotnost jsou si vzájemně více podobné a proto se na první pohled hůře rozlišují. Uživatelův zrak nejdříve spočine na vnějším okraji ikony, který nemá velkou informační hodnotu. Obr. 43: Porovnání ikon s jednotným a unikátním tvarem 24 Různé půdorysy dodávají ikonám jedinečnost a zbavují je vizuálního šumu. Tím se zjednodušuje jejich rozpoznatelnost.24 Na druhou jednotností půdorysů lze zajistit stejné rozměry všech ikon, lépe se zarovnávají např. do mřížky, dělají se rozestupy mezi nimi.25 Současným trendem jsou jednobarevné ikony. Při nejasné symbolice je lepší ikony nepoužívat, protože pak nemají žádnou přidanou hodnotu. 24 http://uxmovement.com/buttons/why-distinct-icon-outlines-help-users-scan-faster/ 25 http://www.linuxexpres.cz/rozhovor/jakub-steiner-ikona-by-mela-nest-svuj-vyznam 22

Z zamyšlení stojí jestli používat zastaralé ikony s vyšší mírou srozumitelnosti nebo použít soudobé ikony s menší mírou srozumitelnosti. Například ikonu diskety pro uložení souboru, protože diskety už se několik let nepoužívají. 5.3 Barevné konvence a psychologie Červená symbolizuje: negaci, zápor, chybu 26 Zelená symbolizuje: klad a úspěch 26 Červená tlačítka a odkazy mohou vyjadřovat nevratné akce např. mazání dat. Červená barva má v takovém případě výstražnou funkci, která mu vzbudit pocit závažnosti akce. Nicméně na webu může červené tlačítko zvýšit konverzní poměr i o 21% a červená barva lidi nemusí odrazovat od klikání.27 Červená se zelenou se používají často pro validaci formulářů. Obr. 44: Registrace na Twitteru Obr. 45: Úprava článku ve Wordpressu 26 http://spyrestudios.com/the-user-experience-and-psychology-of-colour/ 27 http://blog.hubspot.com/blog/tabid/6307/bid/20566/the-button-color-a-b-test-red-beats-green.aspx 23

Odkaz na smazání má červenou barvu. Za povšimnutí stojí, že se jedná o sekundární akci a na rozdíl od "Update" je realizováno odkazem, který nepoutá tolik pozornosti.28 Obr. 46: 76 % lidi přiřazuje zelenou k úspěchu Obr. 47: 71 % lidí odpovědělo, že červená barva je nejvýraznější Obr. 48: Naprostá většina lidí si červenou barvu spojuje s chybou 28 http://uxmovement.com/buttons/the-visual-weight-of-primary-and-secondary-action-buttons/ 24

Pro hover efekt existuje jedno malé doporučení. V případě najetí myší nad prvek na něj zaměřujeme svoji pozornost. Tlačítko při najetí může pomoci naší pozornost tím, že zvýší svůj kontrast a bude výraznější. V případě tmavého textu a světlého pozadí se pozadí zesvětlí a text ztmaví. A naopak u světlého textu a tmavého pozadí se text zesvětlí a pozadí ztmavý. Jinak pro hover efekt neexistují žádné zvláštní konvence. Důležitá je změna po najetí, která vybízí ke kliknutí.29 5.4 Kulturní závislost a barvy V různých kulturách mohou mít stejné barvy různý význam. A jednomu jevu se mohou přiřazovat zcela rozdílné barvy. Například smrti je v západních zemích přiřazena černá barva, stejně jako v Japonsku a u původních obyvatel Ameriky. Indové(hinduisté) přiřazují smrti bílou barvu, stejně jako Číňané. Pro muslimy je to stříbrná a pro jihoameričany zelená barva.30 Obr. 49: Infografika znázorňující význam barev v různých kulturách V plné velikosti zde: http://www.informationisbeautiful.net/visualizations/colours-in-cultures 29 http://ux.stackexchange.com/questions/12929/should-a-button-become-lighter-or-darker-on-hover 30 http://www.informationisbeautiful.net/visualizations/colours-in-cultures/ 25

5.5 Skrývání neaktivních tlačítek Jednou z možností jak zpřehlednit uživatelské prostředí, je možnost skrýt tlačítka, která v dané situaci nemůžeme využít. Na rozdíl od možnosti zobrazit tlačítka v neaktivním stavu. Obr. 50: Ve výchozím stavu jsou tlačítka pro práci se souborem skryta Obr. 51: Při vybraném souboru se tlačítka zobrazí Další systémy pro práci se soubory Google Drive a Pydio používají stejný přístup. Oba přístupy mají svoje pro a proti. V různých situacích může být jeden přístup lepší než druhý. Argumenty pro skrytí neaktivních tlačítek. Snížení vizuálního šumu a zpřehlednění uživatelského prostředí Tlačítka jsou dostupná až v okamžiku, kdy je uživatel může použít a provedl předchozí akci, která nasvědčuje tomu, že je chce použít. Obr. 52: Případ, kdy horní checkbox dokáže vysvětlit nedostupnost dolních prvků. Tlačítka v neaktivním stavu sama o sobě nedokáží vyjádřit, proč jsou neaktivní a uživatel z toho může být zmatený. 26

Zobrazení tlačítek jako následek předchozího kroku ukazuje/učí, co je třeba udělat, aby tlačítka bylo možné použít Argumenty pro zobrazení neaktivních tlačítek.31 Pokud nebudeme zobrazovat tlačítko Přihlásit např. u přihlašovacího formuláře dokud uživatel nevyplní všechny údaje, může uživatel pochybovat jestli je vůbec možné se přihlásit, může ho to odradit a odejde. Může se stát, že uživatel bude hledat nějaké skryté tlačítko a neuvědomí si nebo nemusí vědět, že před tím musí provést akci. Tím pádem bude hledat déle než, kdyby viděl, že tlačítko je neaktivní a nelze ho použít. To pravděpodobně povede k frustraci. Kompromis přepínáním módů Toto se třeba uplatňuje při nastavování programů, kdy se nejprve zobrazí základní nastavení a poté se lze přepnout do pokročilého nastavení. Nový vzhled Email.cz od Seznam.cz to řeší následovně. Obr. 53: Možnosti úprav zpráv se zobrazí po kliknutí na Upravit zprávy Obr. 54: Po kliknutí se zobrazí tlačítka pro editaci e-mailů Tlačítka jsou zašedlá v neaktivním stavu, protože není vybrána žádná zpráva. 31 http://www.uxbooth.com/articles/interaction-design/who-killed-the-inactive-button-state/ 27

Obr. 55: Dostupná tlačítka pro editaci e-mailů Po dokončení úprav uživatel klikne na tlačítko Hotovo, kterým se přepne zpět. Za povšimnutí stojí také to, že méně používané akce jsou schovány pod tlačítkem Další akce 28

6. Způsoby zvýraznění tlačítka Uvedu několik způsobů jak zvýraznit tlačítka.32 6.1 Odlišná barva Obr. 56: Google.com Dřívější verze přihlašovacího tlačítka Obr. 57 Google.com Současná podoba pravého horního rohu a tlačítka přihlásit Google se zbavil černé lišty a položky menu schoval pod ikonku. Na této stránce je přihlašovací tlačítko druhý nejvýraznější prvek hned po logu. 32 http://boagworld.com/design/10-techniques-for-an-effective-call-to-action/ 29

6.2 Prázdný prostor okolo Obr. 58: Prázdný prostor mezi nadpisem a tlačítky zvýrazňuje tlačítka Mezi hlavním nadpisem a tlačítky je prázdný prostor, který působí trochu nepřirozeně. 30

6.3 Velké tlačítko Obr. 59: Ukázka velkého tlačítka ke stažení na webu Firefoxu Díky několika řádkům a velké ikoně nevypadá tato velikost nepřiměřeně. Za pozornost stojí afordance: přechod, text stáhnout zdarma, kulaté rohy, stín a symbol downloadu v podobě šipky směřující dolů. 6.4 Jiný prvek směřující pozornost k tlačítku Totu metodu můžeme použít u tlačítek, kde nemůžeme ovlivnit samotná tlačítka, ale jejich okolí ovlivnit můžeme. Obr. 60: Blesk.cz výrazná červená šipka a popisek nabádá ke sdílení. 31

7. Specifika pro použití na webu 7.1 Rozdíl velikost tlačítka a velikost klikací plochy Některá tlačítka a položky menu mají menší klikatelnou plochu, než je jejich velikost. Klikatelná by měla být celá plocha, kterou uživatel vizuálně identifikuje jako tlačítko. Obr. 61: Klikatelná oblast je mnou zvýrazněna modrou barvou. Na webu se někdy stává, že klikatelná plocha tlačítka je menší, než viditelné rozměry tlačítka. Děje se to často u vnořených tagů. V ukázce jde o e-shopovou šablonu systému Zoner inshop4. Tag <LI> je stylizován do podoby tlačítka a v něm je klikatelný tag <A> v podobě textu s menšími rozměry.33 7.2 Hover efekt u seznamů Obr. 62: Odkazy bez hover efektu v těsné blízkosti Tyto odkazy nemají hover efekt ani viditelné okraje. Jsou tak blízko u sebe, že při přejezdu myší z jednoho odkazu na druhý zůstává stále kurzor ručky. U takto umístěného kurzoru nelze poznat, zda se mi po kliknutí zobrazí přihlášení nebo registrace.34 33 (vlastní postřeh) 34 (vlastní postřeh) 32

8. Specifika pro dotyková zařízení Tablet nemá hover efekt. Při najetí na tlačítko se nezmění kurzor na "ručku". Nelze najet na ikonu a zobrazit si popisek co dělá. Focus tu obvykle také nefunguje. Pomocí prstů je obtížné dosáhnout stejné přesnosti jako u použití myši. Vzhledem k těmto faktorům je o to důležitější znázornit aktivní stav stisknutí tlačítka. 35 8.1 Malá tlačítka Malá tlačítka se špatně mačkají. Uživatelé používají bříško prstu. Objekt menší než velikost prstu není pod prstem vidět. Nemají tedy vizuální odezvu zda jsou přesně nad tlačítkem. Obr. 63: Rozdíly mezi použitím bříška prstu a špičky prstu Také velká blízkost jiných klikatelných objektů je problém, protože prst může přesáhnout i do vedlejšího prvku. Lidé často používají palec, který je méně přesný než ukazováček.36 Dle studie MIT Touch Lab má průměrný ukazováček většiny dospělých velikost 16-20mm. 37 Pokud tento rozměr převedeme vychází to přibližně 45 57px, což je více než doporučují grafické manuály. U palce je to 25mm. Při vymýšlení velikosti tlačítek je třeba vzít do úvahy různé DPI displejů a tudíž není vhodné používat velikosti v pixelech. Např. Sony Xperia Z1 má 441DPI a běžný monitor 96DPI. 35 http://uxmag.com/articles/the-pursuit-of-tappiness 36 http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-targetsizes/ 37 http://touchlab.mit.edu/publications/2003_009.pdf 33

Obr. 64: Ukázka nového rozhraní Emailu od Seznam.cz Nový vzhled se lépe používá na dotykových zařízeních. Tlačítka jsou větší a kulatá. 8.2 Sjednocování verzí Blesk.cz provedl optimalizaci webu pro tablety. Čím dál tím víc lidí nám chodí na plné stránky i z mobilních telefonů, o tabletech nemluvě. Proto je design postavený tak, aby lidé mohli celou stránku konzumovat i na display telefonu, říká ředitel online divize Ringier Axel Springer CZ Matěj Hušek. Web si podle něj sice zachová speciální mobilní stránku, bude ale určena spíš majitelům starších smartphonů.38 Seznam.cz změnil design webům Super.cz, Stream.cz. a Lide.cz chystají také změnu. Tyto odvážné inovace mají zajistit existenci společnosti Seznam.cz i v budoucnosti.39 Microsoft má v úmyslu spojit Windows Phone a Windows RT do jedné verze.40 9. Přístupnost U webů státní správy České republiky je přístupnost nutností. Jejich povinností je poskytovat informace všem občanům bez rozdílu. Česká verze pravidel přístupnosti je součástí zákonem dané normy pro přístupnost webů veřejné správy.41 V mezinárodním měřítku se přístupností na webu zabývá WCAG (Web Content Accessibility Guidelines). Tato pravidla vytvořila skupina WAI (Web Accessibility Initiative) spadající pod W3C (World wide web consortium). Každý netextový prvek nesoucí významové sdělení má svou textovou alternativu. V takovém případě je text tlačítka součástí obrázku a není tudíž strojově snadno čitelný. Pro tvůrce webu jsou pak problematické překlady a dodatečná změna textu, protože se pokaždé musí upravovat obrázek tlačítka. 38 39 40 41 http://www.lupa.cz/clanky/redesign-blesk-cz-meni-podobu-bude-se-menit-podle-toho-odkud-ctenar-prijde/ http://www.lupa.cz/clanky/pavel-zima-seznam-cz-kdybychom-nic-nedelali-tak-tady-za-dvacet-let-nebudeme/ http://www.ictmanazer.cz/2013/09/microsoft-windows-phone-a-windows-rt-splynou-v-jeden-os/ http://www.pristupnost.cz/pravidla-pristupnosti/ 34

Pokud se z nějakého důvodu nezobrazí obrázek tlačítka, je obtížnější poznat k čemu tlačítko slouží. Obr. 65: Tlačítko s alternativním textovým popisem Vlevo na obrázku je normální tlačítko. Vpravo stejné tlačítko s nedostupným obrázkem. Poznámka k ilustraci: Výška pravého tlačítka byla mnou zvětšena, pro účely ukázky. Alternativní text se nezobrazuje v příliš malém prostoru. V HTML kódu to vypadá takto:42 <input type="image" class="classic-img-submit" src="/design/images/dp-data-tocart.gif" alt="do košíku"> Další ukázka na obrázku nemá alternativní text. Text tlačítka je součástí obrázku. Při nedostupnosti obrázků není tlačítko vidět a jediné, co naznačuje jeho existenci změna kurzoru. Obr. 66: Obrázkové tlačítko bez alternativního popisu Vlevo: ukázka s dostupným obrázkem. Vpravo: stejné tlačítko v případě nezobrazení obrázku. Pro představu kód výše uvedené ukázky vypadá takto:43 HTML <a href="detail.php?id=251" class="vypis_vozidlo_button_detail"></a> CSS.vypis_vozidlo_button_detail { float: right; 42 http://www.3dliving.cz/ 43 http://www.autoodstrejdy.cz/vypis.php 35

width: 110px; height: 49px; margin-right: 25px; z-index: 10; background-image: url(../web_images/vypis_button_detail.png);}.vypis_vozidlo_button_detail:hover { background-image: url(../web_images/vypis_button_detail_hover.png);} 9.1 Kontrast Z pravidel přístupnosti: Barvy popředí a pozadí jsou dostatečně kontrastní. Na pozadí není vzorek, který snižuje čitelnost. Kombinace barvy popředí (tj. typicky písma) a barvy či vzorku na pozadí tvoří dostatečný vzájemný kontrast, aby vzájemně nesplývaly pro uživatele, kteří mají zhoršený zrak. Na některých špatně kalibrovaných monitorech a monitorech s matricí TN mohou splývat bílé a světle šedé barvy. Čitelnost může snižovat také okolní světlo dopadající na displej.44 Obr. 67: Nedostatečně kontrastní pozadí a popředí Nástroj pro kontrolu kontrastu barev podle specifikace WCAG 2.0.45 Obr. 68: Barvy v ukázce nejsou dostatečně kontrastní. 44 http://contrastrebellion.com/ 45 http://snook.ca/technical/colour_contrast/colour.html 36

Obr. 69: Ukázka kontrastního vzorku na pozadí snižující čitelnost 9.2 Barvoslepost. Přibližně 8 % můžu a 0.5 % žen jsou postižení některým způsobem barvosleposti, ať už se jedná o jednu barvu, barevnou kombinaci nebo jiný druh poruchy.46 Obr. 70: Podrobná tabulka o barvosleposti Nejčastější formami barvosleposti jsou menší citlivost na červené světlo (protanomaly) a menší citlivost na zelené světlo (deuteranomaly). Monochromacy kompletní absence barev. Dichromacy absence jedné barvy. Anomalous Trichromacy snížená citlivost jedné barvy. 46 http://www.colour-blindness.com/general/prevalence/ 37

Obr. 71: Simulace toho, jak lidé postižení nejčastější formou barvosleposti vidí semaforová světla. Obr. 72: Vlevo normální barvocit. Vpravo simulace deuteranopie V případě na obrázku výše navíc kombinace zelené a oranžové způsobuje nepříjemné chromatické zkreslení. Obr. 73: Nahoře normální barvocit. Dole simulace deuteranopie Z pravidel přístupnosti: Informace sdělované barvou jsou dostupné i bez barevného rozlišení. Odkazy jsou odlišeny od ostatního textu, a to nikoli pouze barvou. 38