To je ale pekná stránka. A čo to na nej je? Neviem, nechcelo sa mi to z nejakého dôvodu čítať. To je ale krásne vyzerajúci program a čože robí to tlačidlo? Aha, to vlastne tlačidlo ani nie je. Nedeľník TOUCHIT vážne i nevážne. Nezviazané IT témy na tisíc spôsobov.
Čítajú sa vám v posledných rokoch webové stránky nejako ťažšie? Zdajú sa vám písmená nejasné a musíte sa viac približovať k displeju svojho notebooku alebo smartfónu? Sú nové verzie programov akési ťažkopádne a pracuje sa s nimi nejako menej svižne? Nie ste sami.
Web a softvér v posledných rokoch prechádza zmenami a novými grafickými trendmi, pričom niektoré z nich sú hnané do extrému. Často pri tom už prestávajú človeku slúžiť a začínajú byť poriadne frustrujúce.
Web, ktorý bledne pred očami
Jedným z najviac otravných trendov, ktorý stále naberá na sile, je ústup od vysokého kontrastu. U grafikov je čoraz viac populárnejší a na túto loď nasadli mnohé veľké IT spoločnosti, vrátene Googlu a Apple. Tento postup pri tom nemá len negatívny efekt na ľudí s horším zrakom, ale dovolím si tvrdiť, že negatívne ovplyvňuje zážitok z používania webu každého človeka.
Google App Engine v minulosti
Pozrite sa napríklad na Google App Engine v minulosti a dnes a všimnite si, aký obrovský ústup od kontrastu písma a jednotlivých prvkov sa odohral. Je pri tom dôležité, aby ste text naozaj skúsili prečítať a nedívali ste sa na obrázok ako na tapetu na pozadí.
Upozorňujem, že nehovorím o grafike ako takej. Je nesporné, že nový vzhľad je omnoho úhľadnejší a ostré hrany a plochosť je podľa aktuálnych trendov. Hovorím o tom, ako výrazne horšie sa dané prvky čítajú z dôvodu ich vyblednutia. Ako veľmi sa musíte viac sústrediť, aby ste prvky rozpoznali.
Nepotrebujete byť dôchodca, ani mať na svojich očiach silné okuliare, aby ste ten rozdiel spoznali. Orientácia v týchto prvkoch je ťažšia aj pre človeka s celkom zdravým zrakom.
Tento trend vyblednutosti sa pri tom na webe rozširuje čoraz viac a viac. Že ste to ani nespoznali? Ide o typickú situáciu uvarenia žaby v hrnci, v ktorom sa teplota zvyšuje postupne. Človek si skrátka dokáže zvyknúť aj na horšiu vec a zoskočene si zmenu uvedomí až v momente, kedy zbadá minulý stav.
Google App Engine dnes
Priznám sa, že som si sám tento webový trend dlho neuvedomoval. Zmena bola vskutku mierna. To čo som si ale uvedomil bolo, že mám na niektorých stránkach často problémy s orientáciou v menu a že mi rôzne preklikávanie trvá omnoho dlhšie, ako kedysi.
Najprv som sa obvinil, že starnem, že vidím horšie, že môj monitor už dosluhuje a treba ho vymeniť atď. Stačí ale, ak kontrast zmením hoc aj ručne v rámci vstavaných vývojárskych nástrojov prehliadača a rýchlo zisťujem, že porucha akosi nie je na mojom prijímači.
Pri pohľade na staršie a novšie weby mám často pocit, ako keď sa na YouTube prepnem zo 480p na 1080p alebo viac. Pri vysokom kontraste je zrazu všetko jasné, web nepôsobí ako nezáživná plachta a všetko je akési viac prístupné.
To, prečo sa grafika uberá týmto smerom, je prakticky len vecou módy. Mdlé farby a text sú skrátka v kurze, aj keď stránka vyzerá, ako keby ste ju už 1000× vyprali v práčke.
Aký je vhodný pomer kontrastu? Organizácia Web Accessibility Initiative, ktorej odporučenia z hľadiska dobrej čitateľnosti webu sú považované za webový štandard v súvislosti s nediskriminovaním čitateľov so zrakovými ťažkosťami, odporúča webovým návrhárom používať kontrastný pomer 7:1 a viac. Čo to znamená? Maximálny kontrast, ktorý dosiahnete pri čisto čiernom texte na bielom pozadí, alebo jasne bielom texte na čiernom, je 21 ku 1 (21:1). Naopak nulový kontrast, pri ktorom je text rovnakej farby ako má pozadie a teda nie je vôbec viditeľný, je 1:1.
Mnohé aj veľké weby tieto pravidlá prestali dodržiavať, pričom často idú aj proti svojim interným grafickým odporučeniam, takže je vidieť, že weboví grafici akosi hrajú na inú notu, ako softvéroví. Na tento problém pekne upozornil Kevin Marks, ktorý si v inštrukčnom manuáli pre typografiu na Apple platforme všimol, že grafici Apple odporúčajú vývojárom aplikácii kontrast 7:1. To je skvelé nie? No, až na to, že dizajnér webovej stránky Apple asi tento obežník nedostal, pretože samotný text, ktorý tieto odporúčania popisuje, má kontrastný pomer len 5,1:1.
Podobne je na tom aj Google, ktorý síce odporúča kontrastný pomer 7:1, ale vzhľadom na jeho pravidlá štýlov sa všetko zvrhne len k 4,6:1.
Apple, Google a iné veľké spoločnosti pritom stanovujú grafické trendy. Tieto postupy, ktoré sú na hranici čitateľnosti, sa preto rozšírili na zvyšok webu ako rakovina. V tomto treba pochváliť napríklad Microsoft, ktorý si drží vo svojom operačnom systéme a takisto weboch vysoké pomery kontrastov. Aj on však už čoraz viac skĺzava, čo je vidieť napríklad na novom okne Nastavení Windows 10.
Táto nízko kontrastnosť sa pri tom netýka len písmen, ktorú sú stále viac a viac svetlo šedé. Dobrým príkladom sú aj aktuálne mapy Googlu, ktoré s pribúdajúcim vekom blednú viac, než čierne tričko na slnku. Možno ste si to ani nevšimli, ale rozdiel ako kontrast poklesol jasne uvidíte, ak použijete konkurenčné riešenie, ako napríklad Mapy.cz, ktoré týmto neduhom ešte netrpia. Všimnite, si, ako sa na mapy značne lepšie pozerá a ako výraznejšie je vidieť jednotlivé hrany a detaily.
Proti tomuto trendu dokonca existuje aj hnutie, nazvané Contrast Rebelion, i keď ste o ňom pravdepodobne ani nepočuli. Rozhodne sa pri tom neopiera len o nejaké subjektívne pocity. Za pozornosť stojí experiment čitateľnosti, vykonaný na Austinovej štátnej univerzite v Texase, ktorý neprekvapivo ukázal, že so znižujúcim kontrastom výrazne klesá schopnosť rýchlo a efektívne čítať text.
Hnutie za vyšší kontrast webu (www.contrastrebellion.com)
Kým problém nemusí byť veľký, keď čítate napríklad elektronickú knihu, značne narastá v prípade navigácie, kde sa musíte orientovať v grafických prvkoch a preklikávať sa nimi, čo je prípad webu. Váš reakčný čas je skrátka pomalší.
Estetika mnohých stránok je dnes dávaná na prvé miesto, aj na úkor toho, že sa znižuje čitateľnosť textu. Žiaľ, pre niektorých grafikov je text stránky len výplach z Lorem Ipsum generátoru a nič viac. Nie je nutné mu preto venovať pozornosť. Na stránku sa skrátka dívajú ako na tapetu a grafický výtvor, pričom zabúdajú, že jej zmyslom je obvykle to, že čitateľovi poskytuje nejakú informáciu.
Len ťažko ale očakávať, že by hnutie Contrast Rebelion malo nejaký efekt. Sila, ktorú nízko kontrastná vlna nabrala, je dnes už skrátka príliš veľká.
Útok parných valcov
Plochý dizajn, alebo v angličtine Flat design, je moderný grafický trend softvéru a takisto webovej grafiky. V posledných rokoch prakticky úplne vytlačil veľký skeumorfizmus, pri ktorom grafické prvky čo najviac imitovali fyzickú podobu objektov a značne využívali perspektívu. Tlačidlá teda vyzerali ako tlačidlá, prehrávače hudby imitovali zjav fyzických rádií a podobne.
Plochý dizajn nabral na sile hlavne s mobilnou érou, kde bol veľmi žiadaný hlavne z dôvodu prehľadnosti a takisto ľahkej zmene veľkostí grafiky v rámci tzv. responzívneho dizajnu. Vplyv Googlu a Apple na tento trend je nesporný (Android, iOS), značne je ale doplnený o prechod z oblých hrán k ostrým, čo výrazne pretlačil najmä Microsoft.
Nálet bublín v minulom desaťročí
Proti plochému dizajnu ako takému nič nemám. Útok bublín, ktorý sa udial v minulej dekáde, už totiž aspoň pre mňa presiahol hranice dobrého vkusu a niektoré programy už vyzerali skutočne absurdne. Trvalo im pri tom dosť dlho, než sa z grafickej éry Windows XP posunuli do súčasnosti a prestali vyzerať ako oblečenie z roku 1990.
Ako som už spomenul, webový dizajn podlieha podobným pravidlám ako móda a v budúcom desaťročí bude v „IN“ zas niečo iné. Grafický vkus sa skrátka mení a máme pred sebou ešte pár rokov, kým sa súčasné dizajny omrzia a niečo nové začne pôsobiť úžasne a sviežo.
Súčasné ploché dizajny však nie sú bez chýb a aj v tomto prípade mnohí grafici prekračujú hranicu, neuvedomujúc si slabiny tohto konceptu. Základnou achillovou pätou plochého dizajnu je napríklad rozlišovanie ovládacích prvkov od pozadia.
Hľadá sa Waldo. Ktoré prvky stránky sú interaktívne? Tipnite si. Výsledok nájdete o kúsok nižšie
Nielsen Norman Group, zaoberajúci sa prieskumom a študovaním používateľských rozhraní, napríklad upozorňuje na pomerne dôležitý problém nazvaný „click uncertainty“, teda neistotu kliknutia. V moderných dizajnoch totiž ľudia často nedokážu rozlíšiť, čo je odkaz a čo je prvok v rámci programu, ktorý po kliknutí alebo ťuknutí niečo vykoná.
Tento problém je pálčivý hlavne pri dotykovom ovládaní, pretože pri ňom človek hľadá prvky len vizuálne a musí sa rozhodnúť, či na ne ťukne alebo neťukne prstom (pravdaže, musí do toho zarátať aj to, že sa netrafí, takže pri neúspechu bude ťukať viac krát). V prípade myši si vývojár môže pomôcť, pretože myš má o jeden funkčný prvok navyše. Myš totiž môže aj ukazovať, pričom sa využíva funkcia mouseover. Ak je prvok plochý a nevýrazný a pri presunutí kurzoru myši zmení farbu alebo vykoná nejakú alternáciu svojho tvaru, používateľ okamžite vie, že naň môže kliknúť a niečo sa stane. Pri dotyku niečo také neexistuje (jednak displej nevie, kde sa ho chystáte dotknúť a takisto si prvok prstom zakryjete, takže ho nevidíte).
V tejto oblasti je často vhodným riešením „takmer plochý dizajn“ pri ktorom sa vytvárajú pomocou tieňovania mierne dojmy 3D rozmeru. V mnohom je tento trend vidieť v tzv. materiálovom dizajne Googlu, napríklad okolo okna.
Pozitívnym prvkom plochého dizajnu je zjednodušovanie grafických prvkov. Opäť však vidíme preháňanie a prílišné tlačenie na pílu v mnohých smeroch.
Typický príklad je, ak plochá ikona, ktorá jasne ukazuje na čo slúži, náhle dostane abstraktný tvar, ktorý neznamená úplne nič. Takto sa to stalo napríklad pri modernizácii ikony Instagramu, alebo pri modernizácii ikony fotoaplikácie na iOS. Kým stará ikona je jasná aj používateľovi, ktorý ju vidí prvý krát a dokáže si odvodiť, na čo asi slúži, nová neznázorňuje nič a používateľ je nútený čítať popis a zdržovať sa.
Možno si poviete, že ide len o definitívne vytlačenie skeumorfizmu, pretože ikona ukazuje fyzickú fotografiu a fotoaparát. Doba sa mení a fyzické rámčekové fotografie a samostatné fotoaparáty sú čoraz väčšou raritou, takže nemá zmysel ich udržiavať. To má síce zmysel, ale len do momentu, kedy si uvedomíte, že nová ikona neukazuje, čo má daný prvok robiť a nemá teda absolútne žiadny zmysel. Garantujem vám, že ak by ste ju ukázali ľudom, ktorí ju nikdy nevideli, nikto nikdy neodhadne, že program s touto ikonou slúži na fotenie.
Zmena ikony Instagramu
Myslím si, že ide o obrovské zlyhanie návrhu používateľské prostredia, pretože grafické rozhranie má orientáciu uľahčovať, nie sťažovať. Pripadá mi to ako návrat do doby príkazového riadku. Grafici v tomto smere zachádzajú do nepotvrdených absurdností a predpokladajú, že deti alebo tínedžeri aj tak nebudú vedieť, čo niektoré prvky už znamenajú, pretože ich nikdy fyzicky nepoužívali.
Ide však o klamlivú predstavu. Ja osobne som nikdy nepoužil ani nezažil telegraf, avšak jeho dobre znázornenú siluetu bez problémov rozpoznám. Rovnaké je to aj u súčasnej mladej generácie.
Pekný prieskum na 500 stredoškolákoch v minulom roku vykonala vývojárka Lis Pardi, pričom svoje výsledky prezentovala na konferencií používateľských rozhraní (Madison UX). Ukázala pri tom, že súčasní americkí stredoškoláci (14 až 18 rokov) bez problémov rozpoznávajú ikonu diskety a vedia že reprezentuje v rámci počítačov uloženie.
Stará a nová ikona aplikácie iPhoto pre správu fotiek na iOS. Gratulujem grafik, dobrá práca
Bezpečne takisto rozpoznávajú ozubené koliesko a vedia, že v rámci počítačov vedie do nastavení. Vedia identifikovať obrázok lupy, i keď fyzickú nikdy nepoužili, pričom vedia aj to, že v rámci počítačov a webu má dva rôzne významy. Ak je v hornej časti stránky, znamená hľadanie, ak je niekde dole v rohu, znamená zväčšenie.
Ide skrátka o zabehnuté konvencie, s ktorými sa roky stretávajú a len grafik blázon ich bude bez dobrého dôvodu meniť. Je celkom nepodstatné, že mnohé fyzické reprezentácie daných prvkov prestanú alebo už dávno prestali byť relevantné (napr. slúchadlo telefónu, čomu som sa venoval už v starom Nedeľníku: Aj vy čísla vytáčate, video natáčate a k mailu pridávate CC?). Dôležité je, že ide o niečo zabehnuté a stabilné.
Dnes pri motoroch stále používame jednotku výkonu v podobe koní a nikto pri nej už na tieto zvieratá nemyslí. Slovo skrátka nabralo svoj vlastný význam a kontext, tak ako ich nabrali dlhé roky používané ikony diskety či ozubeného kolieska. Ak ich niekto ničí a myslí si, že nejaká abstraktná čiarka a machuľa bez významu je lepšia a niečo používateľovi uľahčí, je to skrátka blázon.
Nový a starý editačný panel ACDSee
Bohužiaľ, toto prekračovanie hranice do absurdity sa netýka len nezmyslených grafických ikon bez významu. Čoraz väčším trendom je aj fádnosť rozhrania. Stále viac grafikov prestáva odlišovať rôzne prvky rôznou farbou a dáva prednosť len jednej.
Bohužiaľ, daň za túto grafickú nádheru je spomalenie práce. Ak hľadáte nejaký prvok alebo tlačidlo, vašim prvým navigátorom je farba a až následne tvar a text. Som veľmi rád, že programy z balíku Office, ktoré majú veľké množstvo grafických tlačidiel týmto neduhom ešte netrpia a tie dôležité si stále uchovávajú výraznú farbu, takže je možné rýchlo sa medzi nimi navigovať skoro až intuitívne.
Napríklad ale práca v programe ako ACDSee je pre mňa omnoho zdĺhavejšia ako v minulosti. Dnes keď rýchlo musím upraviť nejaký obrázok, vždy sa musím výrazne sústrediť a nájsť tvar alebo prečítať popisku hľadaného nástroja (napríklad na orezanie, zmenu jasu či veľkosti). A čo je najhoršie, ani po viac ako roku používania sa to nezlepšilo. V minulosti boli prvky farebne a graficky tak odlíšené, že som ich našiel kútikom oka prakticky okamžite. Dnes vyzerajú všetky na jedno kopyto a musím ich hľadať.
Ide len o malú časť problémov, ktoré moderná grafika má a zatiaľ to nevyzerá, že by sa trend nejako otáčal. Bolo by ale naivné myslieť si, že takto to bude navždy. Grafika sa každých pár rokov skrátka mení a podlieha novým trendom. Pevne verím, že trend, ktorý začne zrejme niekedy po roku 2020, bude v tomto smere lepší a že nám vráti kontrast aj farbu.
Grafický dizajn musí byť sekundárny k funkcii, nie naopak. Text sa musí dobre čítať a byť pekný, a tlačidlo musí byť pekné a zároveň rozpoznateľné. Počítače, nech už majú formát akýkoľvek, predsa chceme rýchlo a efektívne používať, nie sa na len pozerať ako na svätý obrázok.
Nedeľník TOUCHIT hľadajte na našom webe ako inak než v nedeľu. Ak ste predchádzajúce zmeškali, nájdete ich všetky pod rovnomenným kľúčovým slovom.
