Zobrazit/stáhnout dokument

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
Seznam obrázků
Obr. 1: Příklad použití podobných slov pro jinou věc.........................................................................3
Obr. 2: Ukázka striktního dodržování barevné konzistence..............................................................3
Obr. 3: Grafická reprezentace domu a jeho abstrakce.......................................................................4
Obr. 4: Přibližný graf znázorňující míru detailů a míru rozpoznání3................................................4
Obr. 5: Prostředí Metro z Windows 8 bez nadbytečných efektů.......................................................5
Obr. 6: Test atraktivity tlačítka s efekty a bez efektů..........................................................................6
Obr. 7: Vysvětlení testu atraktivity tlačítek a jeho výsledky...............................................................6
Obr. 8: Zdroj světla vlevo nahoře..........................................................................................................7
Obr. 9: Zdroj světla vpravo dole............................................................................................................7
Obr. 10: Méně zřejmý zdroj světla.........................................................................................................7
Obr. 11: Vlastnosti podporující afordanci............................................................................................8
Obr. 12:Některé další vlastnosti podporující afordanci......................................................................9
Obr. 13: Ukázka flat designu s dlouhým stínem...............................................................................10
Obr. 14: Vliv textu tlačítka na konverzní poměr 15...........................................................................10
Obr. 15: Tlačítko přihlášení do E-mailu na Seznam.cz. Samostatná stránka pro přihlášení.......11
Obr. 16: Přihlašovací formulář na hlavní stránce Seznam.cz..........................................................11
Obr. 17: Windows 7 – primární akce vlevo na tlačítku OK s defaultním focusem........................12
Obr. 18: Linux Mint – primární akce je vpravo..................................................................................12
Obr. 19: Předpokládaná trasa pohybu očí u primární akce vlevo..................................................13
Obr. 20: Předpokládaný pohyb očí u primární akce vpravo............................................................13
Obr. 21: Korespondence pozice tlačítek s postupem vpřed a vzad................................................13
Obr. 22: Dialog vložení do košíku na e-shopu...................................................................................14
Obr. 23: Pozice tlačítek programu Photoshop pod Windows XP....................................................14
Obr. 24: Stejný dialog v Mac OS...........................................................................................................15
Obr. 25: Možnost vlastního nastavení dialogových tlačítek.............................................................15
Obr. 26: Uživatelsky nepřívětivý popis chyby....................................................................................16
Obr. 27: Přívětivější chybová hláška...................................................................................................16
Obr. 28: Starší Windows XP bez vlastních popisků tlačítek..............................................................16
Obr. 29: Windows 7 s nápisem „Uložit“ místo „Ano“........................................................................17
Obr. 30: Dialog pro uložení – Linux Mint 16 – LibreOffice 4.1.2.3...................................................17
Obr. 31: Dialog programu Adobe Photoshop CS5.1.........................................................................17
Obr. 32: Tlačítko s nápisem „To se mi líbí“ fungující jako přepínač dvou stavů............................18
Obr. 33: Takto vypadá neaktivní stav tlačítka „To se mi líbí“............................................................18
Obr. 34: Tlačítko „Sleduji“ znázorňuje stav, ve kterém se nacházím..............................................19
Obr. 35: Nejednoznačné popisy tlačítek služby Pinterest................................................................19
Obr. 36: Zdařilejší slovenský překlad..................................................................................................19
Obr. 37: Focus je na tlačítku, které ponechá soubory a nezpůsobí nenávratnou akci................20
Obr. 38: Focus tlačítka – OS Android 4.3 v emulátoru VirtualBox...................................................20
Obr. 39: Tip č. 8 z webu goodui.org....................................................................................................21
Obr. 40: MindMup.com pro tvorbu myšlenkových map..................................................................21
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“.........................22
Obr. 43: Porovnání ikon s jednotným a unikátním tvarem 24........................................................22
Obr. 44: Registrace na Twitteru...........................................................................................................23
39
Obr. 45: Úprava článku ve Wordpressu..............................................................................................23
Obr. 46: 76 % lidi přiřazuje zelenou k úspěchu.................................................................................24
Obr. 47: 71 % lidí odpovědělo, že červená barva je nejvýraznější..................................................24
Obr. 48: Naprostá většina lidí si červenou barvu spojuje s chybou...............................................24
Obr. 49: Infografika znázorňující význam barev v různých kulturách............................................25
Obr. 50: Ve výchozím stavu jsou tlačítka pro práci se souborem skryta........................................26
Obr. 51: Při vybraném souboru se tlačítka zobrazí...........................................................................26
Obr. 52: Případ, kdy horní „checkbox“ dokáže vysvětlit nedostupnost dolních prvků................26
Obr. 53: Možnosti úprav zpráv se zobrazí po kliknutí na „Upravit zprávy“....................................27
Obr. 54: Po kliknutí se zobrazí tlačítka pro editaci e-mailů..............................................................27
Obr. 55: Dostupná tlačítka pro editaci e-mailů.................................................................................28
Obr. 56: Google.com – Dřívější verze přihlašovacího tlačítka.........................................................29
Obr. 57 Google.com – Současná podoba pravého horního rohu a tlačítka přihlásit...................29
Obr. 58: Prázdný prostor mezi nadpisem a tlačítky zvýrazňuje tlačítka........................................30
Obr. 59: Ukázka velkého tlačítka ke stažení na webu Firefoxu.......................................................31
Obr. 60: Blesk.cz – výrazná červená šipka a popisek nabádá ke sdílení........................................31
Obr. 61: Klikatelná oblast je mnou zvýrazněna modrou barvou....................................................32
Obr. 62: Odkazy bez hover efektu v těsné blízkosti..........................................................................32
Obr. 63: Rozdíly mezi použitím bříška prstu a špičky prstu.............................................................33
Obr. 64: Ukázka nového rozhraní Emailu od Seznam.cz..................................................................34
Obr. 65: Tlačítko s alternativním textovým popisem........................................................................35
Obr. 66: Obrázkové tlačítko bez alternativního popisu....................................................................35
Obr. 67: Nedostatečně kontrastní pozadí a popředí........................................................................36
Obr. 68: Barvy v ukázce nejsou dostatečně kontrastní....................................................................36
Obr. 69: Ukázka kontrastního vzorku na pozadí snižující čitelnost................................................37
Obr. 70: Podrobná tabulka o barvosleposti.......................................................................................37
Obr. 71: Simulace toho, jak lidé postižení nejčastější formou barvosleposti vidí semaforová
světla.......................................................................................................................................................38
Obr. 72: Vlevo normální barvocit. Vpravo simulace deuteranopie.................................................38
Obr. 73: Nahoře normální barvocit. Dole simulace deuteranopie.................................................38
40