Nepopisujte, ukažte
Příklad toho, jak mi můj způsob uvažování někdy brání udělat jednodušší a lépe fungující uživatelské rozhraní. Šlo o PDF dokumenty, ale poučení má širší platnost.
Dělám na webu prodejce leteckých motorů. Každý motor má svou dokumentaci – kolem pěti PDF souborů. Měl jsem na stránce dost místa, tak jsem si řekl, že tam můžu umístit i malé ikony jednotlivých dokumentů. (První verzi vidíte na obrázku níže. Ještě na ni nenajíždějte myší, prosím.)
Ale pak klient přišel s tím, že se mu náhledy PDFek tak líbí, že by je chtěl větší. A když už v tom budeme, tak je můžeme udělat tak velké, že uživatel stránek přímo z náhledu přečte, co je to za dokument a můžeme se zbavit těch nadpisů. (Upraveno 24. 7. 2008) Tady bych měl dodat, že cílová skupina webu jsou technici, kteří už ty příručky mnohokrát viděli a poznají je podle vzhledu, proto nepotřebují číst názvy.
Výsledek po najetí myší:
Vidíte, jak se to odstraněním nadpisů zpřehlednilo? Uživatelé mají mnohem rychlejší a pohodlnější přehled – nemusí nic číst, všechny dokumenty vidí.
Poučení tedy zní: Kdykoli předkládáte uživateli něco k přečtení — názvy dokumentů, chybovou hlášku apod. — zkuste se zamyslet nad tím, jestli by nebylo možné mu výsledek přímo ukázat. Proto je mnohem lepší yellow-fade, než nějaký zelený rámeček se zprávou, že úprava proběhla správně.
Jak jednoduché a elegantní, problém je právě takto „jednoduše“ a uživatelsky přemýšlet. Příklad z jiného oboru: kamarádka se 15 minut přebírá v tom co si koupit, vyjde z kabinky s pocitem, že toto je to pravé co koupit, já jen vím, že to není ono a navrhuji, že ten kostýmek před tím byl lepší, nebo to třeba doplnit nějakým páskem (a i to byl na mne strhující výkon) a malý chlapeček stojící vedle s maminkou prohodí, jéé ta je v tom ošklivá… a je jasno, tak tenhle obleček ne. Není nad jednoduchou přímočarost.
Pěkné, ale napadá mě riziko, které se dá ukázat na zvětšeném dokumentu vlevo dole – není až tolik patrné, o co se jedná.
Proč nemít kombinaci obojího – obrázky větší varianty, a nad nimi menším písmem (asi jako je PDF… pod tím) pro pořádek o co se jedná.
Každopádně čitelný náhled první strany určitě není na škodu.
Řešení je to pěkné, ale přináší s sebou taky úskalí ‒ s vypnutými obrázky to bude hůře použitelné. Teď už nesmíte zapomenout vyplnit atribut alt.
Občas klient príde s dobrým nápadom a prekvapí i profesionála. Ak si ešte aj on nechá poradiť, tak pre takých je radosť pracovať.
Není to špatný nápad, avšak po zobrazení detailů jsem byl trochu dezoinetovaný a nevěděl jsem které že to pdf je to co jsem vlastně chtěl. Zobrazení detailů tímto způsobem je dobré, ale chtělo by to nějak naznačit, že se po najetí myši něco změní.
Uprimne receno, ja se mnohem rychleji zorientoval v te versi s nadpisy. Nadpisy jsem proskenoval za cca 2s, u velkych nahledu (kde musi oko prepinat mezi ruznymi umistenimi, velikostmi pisma a pozadimi)¨mi to trvalo minimalne 10s, nemluve o tom, ze u tech spodnich dvou nahledu je to skoro necitelne.
Takze ja osobne povazuji prvni reseni za vyrazne lepsi. Vetsi nahledy okolo textu by mely smysl tam, kde je primarni obrazova informace, tady jde ale predevsim o text.
A co zkusit ty náhledy trochu (hodně) ořezat? Tak, aby zbylo to podstatné a to, čím se jednotlivé náhledy liší.
Ta první varianta s nadpisy je mi osobně mnohem milejší, přehledná je dost a pro zorientování rychlejší.
ondrg: Aha, teď jsem si uvědomil, že to může být matoucí vysvětlení. Ten :hover stav tady je jen pro účely článku – abych ušetřil místo a neviděli jste řešení, než si přečtete ty úvodní odstavce. Jinak v reálné webu bude nasazen u je ten „stav“ :hover :)
A dodatek pro ostatní. Mně se právě zdála taky nejdřív přehlednějí ta varianta s nadpisy, ale klient mi vysvětlil, že lidi, co chodí na tenhle web už ty příručky znají a mají je jen pro rychlou referenci při hledání konrétní součástky nebo plánku. Takže pro ně je to rychlejší, protože opravdu nemusí ty nápisy číst – poznají svoje PDF už podle vzhledu. Já už je za tu doby práce na tom webu taky poznávám – stačí barvy, kolik je tam motorů, jaký mají tvar a jste doma během zlomku vteřiny.
To asi není ironie, viď? :) Na první pohled to tak vypadá.
Ten vysledný návrh je pro mne absolutně nepoužitelný. Trvá mi několik sekund než jsem schopen rozluštit, co že který náhled vlastně představuje. U záručních podmínek to není poznat vůbec.
Přece jen textové popisky asi mají určitý význam…:)
Musím souhlasit s oponenty. Možná to je zajímavější, ale rozhodně ne přehlednější. Zkoumat graficky zpracované obálky, když chci najít knihu, to je na houby – proto ostatně bývají hřbety publikací výtvarně méně řešené, protože tam jde o co největší přehlednost.
Dovolím si nesouhlasit, ona „lepší“ varianta je vizuálně méně přehledná, dokonce je nepříjemná. Hlavně mě nutí mě číst jakési miniaturní texty umístěné pokaždé jinde a provedené jiným způsobem. Jestli návštěvnící již ty příručky znají, tak je poznají stejně tak v „malém náhledu“.
Dundee, Lukáš Lánský: Opakuji, cílová skupina tohoto webu ty příručky poznává podle vzhledu, nepotřebuje číst jejich názvy.
Daniel Dočekal: Ano, pozvají je i v malém náhledu, ale v tom velkém to mají přece jen o dost jednodušší.
Pro webdesignera je těžké připustit si, že to, co vyhovuje jemu, nemusí vyhovovat cílové skupině. Od toho tu je tu právě uživatelské testování. Osobně bych dal také přednost prvnímu řešení, ale podstatnější je názor cílové skupiny. Blahopřeji každému, kdo se přes svůj názor dokáže v takovou chvíli přenést, může to být těžký vnitřní boj.
Prvni reseni mi prijde prehlednejsi. V druhe verzi navic nelze vyuzit vyhledavani (ctrl+f), pokud je na strance vice dokumentu. A take je otazka, jak budou vyhledavace indexovat dokumenty?
Marek Hudik: Tady mám jistotu, že jich nikdy nebude tolik, aby někdo potřeboval vyhledávat full-textem, ale jinak dobrá poznámka. Rozhodně to není myšleno jako univerzální řešení pro všechny případy. Naopak je to ukázka toho, že vybočení z nějakého zaběhlého schématu může být někdy lepší.
Pokud jde o indexování vyhledávači: Jednak je na stránce dost kontextových informací i tak, druhak vyhledávače indexují také vnitřky PDFek, ne? Na každém náhledu je odkaz s atributem title. Navíc uvažuju o tom, že tam přidám skrytý popis pro případné čtečky nebo vypnutá CSS. Možná tenhle popisek pak nechá zobrazit na :hover nad náhledem.
Jestli cílová skupina ocení spíše větší náhledy, tak přeci není co řešit :o) Ale asi by neuškodilo přidat ještě výhradně textové „menu“ – klidně před, jako samostatný blok (1-2 řádky) – „vizuálové“ ho přeskočí – „čtenáři“ si zde velmi pohodlně vyberou – mezi čtenáře počítám každého, kdo je na psanou informaci odkázán, páč neví, jak hledaný dokument vypadá – o robotech ani nemluvě :o) Malé náhledy jsou kompromis, který má závažnou vadu: při vizuálním výběru ze seznamu znemožňuje závěrečnou kontrolu, jestli je výběr opravdu správný.
Článek je matoucí, protože pointa je uvedena až v tomto komentáři – možná by to stálo za přesunutí do hlavního článku. Pro běžného člověka je druhý návrh skutečně velmi nepřehledný.
„Vidíte, jak se to odstraněním nadpisů zpřehlednilo?“ :)
Borek: Hm, máš recht :) Upraveno.
Ad yellowfade) Jeho nevýhoda je v tom, když člověk kouká na bednu nebo po borkách vedle v kanclu, tak mu ta podstatná msg unikne. Což se s boxem, který tam prostě zůstane trčet, jen tak nestane.
Jan Brašna: :) OK, OK, nic není úplně bez chyby, ale to, co popisuješ, je, řekněme, docela krajní varianta, ne ;)
No, dobře, chtěl jsem tím jen naznačit problém, kdy člověk nevěnuje 100% pozornost tomu, co následuje po akci, kterou provede. Reálně jde o případy jakéhokoliv multitaskingu … IM, twtr, telefon … klinu a přepnu tab … nebo kliknu a otočím se na kolegu atp. — stává se mi to pravidelně a tyhle mizící stavové zprávy tak většinou nevidím.
Jan Brašna: Jasný, já jsem to trochu zlehčil, ale máš pravdu, je to aspekt yellow-fade, který mě nenapadl a někde by to fakt mohlo ublížit.