JAK - III - Vlastní gui na webových stránkách

Webové stránky a aplikace zvlášť, často zasahují do uživatelského rozhraní (UI), zvláště pak do toho grafického (GUI). Mění ne jen jeho vzhled, ale i chování. Zda je to přínosné, vhodné a moudré se pokusím vysvětlit v tomto článku.

10.2.2011 00:00 | Ondřej Tůma | přečteno 13391×

UI a GUI ?

Nejprve se podívejme co to to UI resp. GUI vlastně je. Uživatelským rozhraním, v případě webu pak tím grafickým nazýváme vše, co umožňuje nám uživatelům ovládat webovou stránku, webovou aplikaci. Jednoduše řečeno, jsou to všechny ovládací prvky stránky: formuláře, tlačítka, ikonky, odkazy, kurzory myší, scrollbary, různá jiná hejbátka a táhýlka, kterými za pomocí myší, klávesnice, případně jiného zařízení ovládáme stránku.

Na webových stránkách pak můžeme najít takovéto prvky dvojího druhu, systémové a vlastní. Těmi systémovými myslím takové, které v systému, resp. v prohlížeči sami existují a jsou definované prostřednictvím příslušné verze html. Ty vlastní jsou pak takové, které si autor stránek / aplikace musí sám vytvořit např. za pomocí javascriptu a to proto, že pro ně neexistuje odpovídající tag v příslušné html verzi (například kalendář, třístavový checkbox, atd.).

Možnost volby

To co mnohé tvůrce webových stránek a zejména pak grafiky štve, je, že systémové ovládací prvky nezapadají do jejich grafického návrhu stránky  či aplikace. Dokonce i některé webové prohlížeče vykreslují jednotlivé prvky různým způsobem, například vstupní pole pro výběr souboru. A tak se html kodéři všemi možnými metodami pokoušejí změnit vše, co jen jde. Některé prvky jsou relativně snadno stylovatelné, jiné hůře a u některých to prostě nejde. Podívejme se tedy teď na několik pohledů pro a proti používání vlastních grafických prvků, nebo alespoň vlastního vzhledu těchto ovládacích prvků.

Proč ano

Prvním a tím nejdůležitějším důvodem proč definovat vlastní vzhled těchto prvků, je visuální dojem stránky. Grafické prostředí na počítači může vypadat opravdu různě, dokonce i samotné webové prohlížeče jdou různě „skinovat”. Takže vzhled, barva i velikost standardně vykreslených prvků může vypadat opravdu všelijak.

[akceptování vzhledu prohlížeče a vlastní ovládací prvky]
phpmyadmin nestyluje nijak zvlast inputy    babybox.cz - implementuje vlastní scrollbar a velmi atypické menu

Jsou sice případy kdy to nevadí, ba dokonce je v pořádku, že tomu tak je, ale pak jsou také případy, kdy je vzhled velmi důležitý. Například různé grafické, mediální, herní či jinak umělecké stránky a aplikace. Kdyby se na takových to stránkách objevily ovládací prvky zcela jiných barev rozměrů a obecně vzhledu, umělecký dojem by značně utrpěl, což je trochu problém pokud je to jeden ze základů dotyčné stránky.

Druhým důvodem proč tvořit vlastní ovládací prvky je jejich neexistence, nebo nedostatečná funkcionalita. V případě některých si ani neuvědomíme, že jde o ovládací prvky. Vedle scrollbarů, které ovládají cokoli jiného, jen ne scrollování, to jsou kalendáře, různé stavové prvky, ikony, kurzory myší, kroutítka a táhýlka. Tradičním atypickým prvkem je například trojúhelník obehnaný kružnicí, kterým se vybírají barvy. Mnoho takových prvků nově najdete v html5 specifikaci, ale ta bohužel není stále rozšířená a tak tvůrci sahají po javascriptovksých náhradách. Navíc nové prvky se buď běžným stylům zcela vymykají, nebo pro ně neexistuje dostatečně jednotný tvar (např. kalendář).

V neposlední řadě důvodů proč tvořit něco vlastního, nebo to alespoň ostylovat dle grafické podoby je paradoxně zachování systémového vzhledu. Některé aplikace mají svůj typický vzhled, např Microsoft Outlook (r). Ten má samozřejmě svoje typické uživatelské rozhraní a tak i webová verze vypadá co nejvíce totožně. To proto, aby se uživatel v prostředí co nejvíce orientoval a práce mu připadala pokud možno stejná jako v klasické verzi.

Proč ne

Důvodů proč ne, již není tolik a vlastně jsou zaměřené právě na okrajové skupiny uživatelů, tedy mima cílených aplikací samozřejmě. Nemalá skupina uživatelů internetu má nějaký hendikep. Ten nejzásadnější v našem případě je samozřejmě zrakový. On člověk ani nemusí být nějak postižený, stačí aby mu už vlivem věku nesloužily oči. A tak mnozí takoví uživatelé, pokud ještě alespoň něco vidí, se snaží přizpůsobit si vzhled svého gui tak, aby se s ním dobře pracovalo.

Teď myslím změnu velikosti písma, kontrastu, nebo obecně barev. Mimochodem, poměrně slušná část populace je barvoslepá (u mužů to je téměř 8%). To není malé číslo a nikdo z nás by o takovém člověku nemluvil jako o postiženém. Tito lidé normálně žijí v našem světě a v mnoha ohledech jim jejich zraková vada vůbec nevadí. Tak či onak, existuje celkem velké procento lidí, jenž si své grafické uživatelské rozhraní počítače přizpůsobí. Tento fakt ale některé stránky / aplikace zcela ignorují a takový člověk může mít velké problémy.

[zobrazení v šedé: akceptování velikosti písma v prohlížeči a neakceptování]
Zeropage.cz - vetší nastavené písmo již může způsobit rozhození designu    T-mobile.cz - zcela ignoruje vlastni nastavení písma

Tvůrce webu a designu by se k takové věci měl postavit čelem. Buď zapomenout na všechny možné nestandardní prvky, a omezit se jen na ty standardní a přítomné ve všech browserech. Počítat s tím že uživatelé si sami budou měnit velikost písma a očekávají že stránky na to budou reagovat. Nebo prostě vytvoří navíc ještě takovou verzi, která alespoň na informace nebude chudší, ale zároveň bude vypadat přesně tak, aby ji uživatel mohl bez problémů vnímat.

Ovšem důvodů je samozřejmě více. Zastavme se u Běžných Frantů Uživatelů, zkráceně BFU. Takový Franta má doma počítač, ono dneska má počítač kde kdo, ten mu nainstaloval jeho syn a společně vybrali nějaký pěkný vzhled GUI. A Franta se naučil pracovat s různými programy a nedělá mu žádně větší problémy ovládat libovolnou aplikaci, kterou má na svém počítači nainstalovanou. Ale teď do naší představy vleze moc pěkná aplikace na publikování fotek. Náš Franta fotí, a dokonce si i fotky sám retušuje a teď je tedy chce vystavit na internet. Aplikace která mu to umožní a kterou mu poradil syn, jakožto tu nejlepší co může být má však pro Frantu jednu zásadní vadu. Má vlastní gui. Pro našeho Frantu je peklo tuto aplikaci ovládat, protože vždy dlouho hledá ovládací prvky, které vypadají úplně jinak.

Laskavý čtenář by mohl namítnout, že Franta má smůlu a pokud není blbec, tak si přeci zvykne. Ano, našeho Frantu opravdu necháme časem si aplikaci osvojit a zvyknout si na ní. Ale co jiný Franta, který to nezvládne. Takového laskavého čtenáře tedy odkáži na řadu nejrůznějších zážitků a zkušeností nás všech, kteří se trpělivě pokouší naučit naše rodiče, prarodiče a jiné Franty pracovat s mobilním telefonem, televizí, nebo i mikrovlnou troubou. Problém totiž je, že webová stránka resp. aplikace, i když je dělaná pro tzv. masu, nikdy nebude mít sama vlastní vzhled, který bude stejný na všech verzích všech systémech. Leda by vlastní vzhled vůbec neměla, což může být dost těžké, ne-li nemožné.

A poslední důvod, který zmíním, a který by měl stát u rozhodování se pro použití vlastního vzhledu je cílené zařízení. Různé prohlížeče toho různě umí. To teď myslím zcela vážně, protože prohlížeč, je dnes v mobilech, v televizích, v herních konzolích, vlastně za prohlížeč můžeme svým způsobem považovat i indexovacího robota. Těmto všem můžeme postavit překážku v podobě nějakého úžasného javascriptovského tlačítka, nebo menu, díky kterému se nikam nedostane.

A co dál ?

Dnešní díl ze seriálu o javascriptu byl velmi teoretický a spíše idealistický. Byla to taková omáčka pro díly následující, ve kterých se podíváme například na vytvoření vlastního, dvou a následně třístavového checkboxu. Tedy jedním z takových prvků, který je díky svému vzhledu a použití značně diskutabilní.
Online verze článku: http://www.linuxsoft.cz/article.php?id_article=1794