Usability Použitelnost

Lukáš Bařinka

TOC

Obsah

  1. Good Deeds of webdesign
  2. Bad Habits of webdesign
  3. Sources
  1. Dobré zvyky webdesignu
  2. Špatné zvyky webdesignu
  3. Zdroje
XKCD: University website

Good Deeds in Web Design

Dobré zvyky webdesignu

  • Place your name and logo on every page Make the logo a link to the home page
    (except on the home page itself)
  • Provide search If the site has more than 100 pages
  • Write straightforward and simple headlines and page titles Clearly explain what the page is about That will make sense when read out-of-context (in SERP)
  • Structure the page to facilitate scanning Help users ignore large chunks of the page E.g., use grouping and subheadings to break a long list
  • Jméno a logo na každé stránce Jako odkaz na domovskou stránku
    (s výjimkou domovské stránky)
  • Vyhledávání Na webu s více než 100 stránkami
  • Přímočaré a jednoduché pojmenování
    (nadpisy, titulky, odkazy, …) Vystihující obsah stránky (vytržené z kontextu či jako výsledek vyhledávání) Začínající nejdůležitějším slovem
  • Strukturovaný obsah stránky Umožnující rychlou orientaci v textu a jeho čtení Např. rozdělit dlouhý seznam do více menších skupin oddělených podnadpisy
  • Use hypertext to structure the content space Several secondary pages that each focus on a specific topic Avoid wasting time on those subtopics
  • Use product photos Small photo on each of the individual product pages Link the photo to one or more bigger ones that show as much detail as users need
  • Use relevance-enhanced image reduction Use a combination of cropping and resizing
  • Členění obsahu stránky Na menší tématické podstránky provázané odkazy Např. odkazy na detaily produktu
  • Používání fotografií (např. produktu) Ústřední obrázek s odkazem na galerii s detaily podle potřeb Např. stránka s produktem v e-shopu
  • Náhledy obrázku zobrazující to podstatné Jako kombinace zmenšení a ořezu (nikoli prosté zmenšení)
  • Use link titles Provide users with a preview of where each link will take them before they have clicked on it E.g., „Click to enlarge“
  • Make important pages accessible for users with disabilities Especially blind users - more than standard A11Y
  • Do the same as everybody else Users spend most of their time on other sites That’s where they form their expectations
  • Titulky odkazu Upřesňující cíl odkazu (dříve, než uživatel klikne) Např. „Adresy poboček společnosti“ k odkazu „… na kontaktních místech… “ Např. „Kliknutím zvětšit obrázek“ pro odkaz z náhledu
  • Přístupnost (důležitých) stránek Pro postižené uživatele
    (např. zrakově - více než jen běžná A11Y)
  • Konvenční přístup k webu Aby jej uživatelé mohli používat stejně jako ostatní weby Obdobně jako např. rozložení znaků na klávesnici
  • Use a liquid layout Lets users adjust the homepage size
  • Use graphics to show real content Not just to decorate your homepage
  • Používejte flexibilní rozložení prvku (liquid layout) Umožněte uživatelům přizpůsobit rozměr stránky svým potřebám
  • Používejte grafiku doplňující obsah Nikoli pouze pro dekoraci

Mistakes in Web Design

Zásadní chyby webdesignu

  • Bad Search (see Information Architecture) Too many/few/irrelevant results Wrong organization/categorization/vizualization
  • Content That’s Not Written for the Web PDF is an undifferentiated blob of content that’s hard to navigate
  • Not Changing the Color of Visited Links Letting users know which pages they’ve already visited Frees users from unintentionally revisiting the same pages over and over again
  • Non-Scannable Text Write for online, not print
  • Špatné vyhledávání Špatné výsledky vyhledávání (příliš mnoho/málo/nerelevantní) Špatná organizace/kategorizace/vizualizace výsledku
  • Nevhodný formát obsahu Obsah byl původně tvořen pro jiné médium než web Např. leták v PDF nebo JPEG
  • Nestandardní obarvování odkazů Odlišitelné od okolního textu Rozlišitelné navštívené a nenavštívené odkazy
  • Špatně strukturovaný/nestrukturovaný text Neumožňuje jeho rychlé načtení a orientaci v něm Omezuje možnosti indexace vyhledávacích strojů
  • Fixed Font Size Let users resize text as needed
  • Frozen Layouts with Fixed Page Widths On small window it triggers insufferable horizontal scrolling
  • Page Titles With Low Search Engine Visibility Content/length/important words
  • Anything That Looks Like an Advertisement Banner blindness Animation avoidance Pop-up purges
  • Absolutní (fixní) velikost písma Zamezuje přizpůsobení velikosti písma preferencím uživatele
  • Pevné rozložení prvků stránky (fixní layout) Např. s pevnou šířkou
  • Nevýstižné titulky stránek Obsahově/délkou/podstatnými slovy
  • Prvky připomínající reklamu Slepota vůči bannerům Animované prvky rozptylující pozornost Blokování vyskakovacích (pop-up) oken
  • Violating Design Conventions Consistency: When things always behave the same
  • Opening New Browser Windows It disables the Back button
  • Not Answering Users' Questions Worst example: avoiding listing the price
  • Legibility Problems Small font sizes or frozen font sizes, low contrast
  • Porušování konvencí (zvyklostí) designu Např. nekonzistentní či neobvyklé chování prvků
  • Otevírání nových oken prohlížeče Mate uživatele (zmizí tlačítko Zpět) a zanáší mu obrazovku
  • Nerelevantní odpovědi na dotazy uživatelů Např. vyhýbání se uvádění cen
  • Nečitelné písmo Nevhodná (zamrzlá) velikost, font, kontrast
  • Flash Should be used to offer users additional power and features that are unavailable from a static page Splash screens and Flash intros and menus are almost extinct
  • Browser Incompatibility Don’t turn away customers just because they prefer a different platform
  • Cumbersome Forms Cut any questions that are not needed Don’t make fields mandatory unless they truly are Support autofill to the max by avoiding unusual field labels Set the keyboard focus to the first field when the form is displayed
  • Nevhodné použití technologie Flash Obtěžující animace před vstupem na stránky s typickým nápisem „přeskočit intro“ Nekonečná smyčka na úvodní stránce (připomínající reklamu)
  • Nerespektování nekompatibilit prohlížečů Dodnes některé služby podporují jen konkrétní prohlížeče konkrétních operačních systémů (a ještě to veřejně přiznávají)
  • Zbytečně obsáhlé formuláře Odstraňte položky, které nejsou potřeba Nevyžadujte povinné položky, dokud to není nutné Podporujte automatické vyplňování
    (běžné pojmenování položek)     Nastavte do pole kurzor (ušetříte uživateli kliknutí)
  • Allow flexible input Do not insist on a particular input format Allow users enter the item in their preferred format including insignificant mistakes
  • No Contact Information or Other Company Info Do not forget to state address among contact information
  • Inadequate Photo Enlargement Typical mistake is to resize huge image using style
  • Non-Standard Use of GUI Widgets E.g., clicking radio button sends a form
  • Příliš striktní požadavky na položky formuláře Netrvejte na jednom jediném formátu Umožněte uživatelům zadat, např. telefonní číslo nebo datum, jak chtějí (včetně nevýznamných chyb)
  • Chybějící kontakty nebo další informace o společnosti Nezapomeňte zahrnout informace o společnosti a kontakt
  • Neadekvátní velikost obrázku (a náhledu) Typická chyba je zmenšení (obrovského) obrázku pomocí stylu
  • Nestandardní použití prvku grafického uživatelského rozhraní Např. výběr položky pomocí „radio“ tlačítka odešle formulář
  • Lack of Biographies "mailto:" link instead of a link to the author’s biography readers want to know the author more often than to contact him
  • Lack of Archives Old information is often good information and can be useful to readers
  • Moving Pages to New URLs Hurting the people who send you free customer referrals
  • Nedostatek biografických informací
    (např. o autorech) Nestačí jen uvést (e-mail) autora ke článku (a datum vložení), ale také zpřístupnit informace o něm (fotografii, web, …) Uživatelé chtějí obvykle vědět více informací o autorovi než jej kontaktovat
  • Chybějící archiv (např. událostí, zpráv) Neaktuální události či akční nabídky se z některých webu smažou místo přesunutí do archivu
  • Změna adresy stránek (bez zachování funkčnosti) Např. přesun z novinek do archivu; adresa události by měla zůstat nezměněná
  • Headlines That Make No Sense Out of Context ✓ Tell users what’s at the other end of the link with no guesswork required ✓ Protect users from following the link if they would not be interested in
  • Breaking or Slowing Down the Back Button ✗ Opening a new browser window ✗ Immediate redirect: every time the user clicks Back ✗ Prevents caching
  • Jumping at the Latest Internet Buzzword E.g., Push, community, chat, free email, 3D sitemaps, auctions
  • Nadpisy neodpovídající obsahu textu
    (jakožto potenciální odkazy ve výsledcích vyhledávání apod.) ✓ Mají jasně říkat, co je v příslušném obsahu (bez hádanek) ✓ Mají lákat jen uživatele, které obsah zajímá (bez návnad — ty fungují jen dočasně)
  • Potlačení nebo zpomalení tlačítka Zpět ✗ Otevírání nových oken prohlížeče ✗ Okamžité přesměrováním ✗ Zamezení „kešování“ (cache)
  • Zavádění internetové moderny (buzzword) Např. soudobý „cloud“ nebo „blockchain“
  • Slow Server Response Times Loss of traffic as users take their business elsewhere
  • Outdated Information Some information is worthless without a date A year old News on a home page does not look well
  • Small Thumbnail Images of Big, Detailed Photos Consider combination of resize and crop
  • Overly detailed ALT Text What users need to know about the image to use the site No need to describe irrelevant visual details
  • Pomalá odezva serveru Uživatelé pomalé stránky opouští
  • Neaktuální obsah či informace bez uvedení data Některé informace jsou bez data zveřejnění bezcenné Rok staré novinky na úvodní stránce společnosti o kvalitě webu nevypovídají nic dobrého
  • Titěrné náhledy zmenšením velké detailní fotky Místo prostého zmenšení často pomůže výřez
  • Příliš detailní alternativní text Popisování nepodstatných detailů (typicky loga)
  • No “What-If” Support Support users who want to consider alternatives Provide product comparison
  • Long Lists that Can’t Be Winnowed by Attributes The site must support winnowing in the first place
    • Keep it simple
    • Winnowing attributes must make sense to users
    • Differentiate products of interest from those the user wants to ignore
  • Pages That Link to Themselves Common example is logo on home page
  • Absence alternativních informací Např. rozdíl ceny pro posunutý termín Např. stejné zařízení s jedním (zásadním) rozdílem
  • Dlouhé seznamy bez možnosti filtrování dle atributu Stránky s dlouhými seznamy mají filtrování v první řade podporovat
    • Filtrování má uživatelům dávat smysl aniž by byl expert či zaměstnanec
    • Filtrování má umožnit některé produkty zcela ignorovat
    • Filtrování má být jednoduché
  • Stránky odkazující samy na sebe Častým příkladem je logo na domovské stránce
  • Gratuitous Use of Bleeding-Edge Technology E.g., VRML 3D models, where it is simpler to show it in 2D
  • Scrolling Text, Marquees, and Constantly Running Animations Moving images have an overpowering effect on the human peripheral vision
  • Complex URLs Users actually try to decode the URLs Many people don’t know how to type a “~” character
  • Orphan Pages Include a clear indication of what web site each page belongs to (link to homepage)
  • Bezdůvodné používání nejnovějších technologií Typickým příkladem je modelování 3D modelu ve VRML, kde je jednodušší zobrazit nákres 2D obrázkem
  • Pohyblivý či jezdící text (marquee) a permanentní animace Jakýkoli pohyb na stránce rozptyluje uživatelovu pozornost
  • Složité a nečitelné odkazy Dlouhé odkazy, které nedávají smysl
    (obsahují hash nebo číselný identifikátor)     Např. také odkazy s vlnovkou (~), kterou řada uživatelů neumí ani napsat
  • Sirotčí stránky Každá stránka má obsahovat odkaz na úvodní stránku
  • Too Long or Too Short Pages ✗ Too short: directory pages with only minimum (2-3) links to subordinate pages ✗ Too long: manuals, references Each page should contain balanced amount of content
  • Lack of Navigation Support See Information Architecture
  • Příliš krátké či příliš dlouhé stránky ✗ Typicky příliš krátké bývají rozcestníky s výčtem několika odkazů na podstránky ✗ Typicky příliš dlouhé bývají technické specifikace k nějaké technologií Každá stránka by měla mít přiměřené množství obsahu
  • Nedostatek navigace

Sources

Zdroje

Problems

Problémy

More topics

Další témata