Tvorba uživatelských rozhraní a hodnocení použitelnosti
Martin Dostál
Honeywell International - Aerospace Advanced Technology Europe
Masarykova Univerzita v Brně, Fakulta informatiky
PV252
4. přednáška
WEB A UŽIVATELSKÁ
ROZHRANÍ
•Identifikujte webová specifika
•Srovnejte s desktopovým
prostøředím
Diskuze
• „to be in control”
• respektovat nastavení prohlížeče
(písma, velikost okna ...)
• pokud možno neotevírat nová okna
• ne zvuk
• web - volnějši forma, ale stále platí
form follows function
• časopis ?
• prezentace bohatá, interakce střídmá
• ne samoúčelnost
• neimitovat GUI, resp. WIMP
Web a uživatelské rozhraní
3
• orientace na obsah vs. data – více připomíná (interaktivní) noviny než
aplikace
• prohlížení vs. vytváření
• pomalá interakce
• nejsou aplikace v pravém smyslu
• heterogenní prostředí (platformy, prohlížeče, technologie)
• nepříliš standardizované – osvědčené příklady namísto HIG
• jednoduchá interakce – klikání
• součástí tvorby je i forma
• vzhled není pevně daný
• web se výrazně posunul k jiným účelům - aplikace
Web a uživatelské rozhraní
4
• stránky
• zaměřené na navigaci
• zaměřené na obsah
• image safe area
• pozor na navigaci „vpravo”
• načtení stránky do 1 vteřiny, maximálně 10
vteřin
zdroj: IBM Ease of Use Web
Guidelines
Webové stránky
5
• poslání:
• kde jsem
• kde jsem byl předtím
• kam se mohu dostat
• jak se sem dostanu přímo
• drop down ne pro navigaci
• odkazy na soubory vyznačit (PDF)
Navigace
6
• Menu
• Drobečková navigace
• Záložky
• Katalog
• Mapa webu
• Vizuální mapy
Navigace
7
zdroj: www.upol.cz, www.csas.cz, www.amazon.co.uk
Menu
8
Obr´azek 1: P%íklad mapy webu: www.mall.cz
Obr´azek 2: P%íklad drobe(kové navigace: www.mall.cz
ti&t#n"m textem. Pokud stránka obsahuje v#t&í mno!ství textu, pak se hodí na
úvod uvést shrnutí (i abstrakt toho, co (tená% najde ní!e.
• struktura – velmi d$le!ité je obsah stránky dob%e strukturovat, abychom umo!nili
procházení (scanning) stránky namísto (tení, co! je zdlouhavé a (asto zbyte(né.
Hodí se vyu!ívání sekcí, odrá!ek a podobn#.
zdroj: ww.mall.cz,www.upol.cz
• hierachie, cesta, vlastnosti (struktura)
Drobečková navigace
9
Obr´azek 1: P%íklad mapy webu: www.mall.cz
zdroj: www.mall.cz
Mapa webu
10
• vizuální identifikace
• informace kde jsme a co tam můžeme dělat
• stručná informace o obsahu, „úvod”
• navigace
• vyhledávání
• aktuality (novinky, akce ...)
• informace pro prvonávštěvníky
• „Splash page” musí mít také nějakou funkci
Domovská stránka
11
zdroj: www.kanzelsberger.cz
Splash Page
12
Splash Page
13
• minimalizujte text
• inspirujte se novinami, co to znamená ?
• 50 % proti tištěnému obsahu
• obrácená pyramida
• organizujte text
• ne dlouhý text
• struktura
• odrážky apod.
• ne odkazy typu „klikněte zde” nebo „tady”
• navigace – též Zpět a Vpřed !
Obsah
14
Formuláře a popisky
položek
• vhodné pro rutinní operace nebo dobře
známé oblasti
• nejrychlejší
• + rychlá orientace (scanning)
• - spotřeba místa vertikálně
zdroj: www.dvurnadrokytkou.cz
Umístění „vlevo-nad”
16
• vhodné pro nepříliš známé/zaběhnutné oblasti, nebo tam kde se předpokládá delší
doba vyplňování
• + spotřeba místa vertikálně
• + rychlá orientace vertikálně
• - horší orientace horizontálně
zdroj: www.google.com
Umístění „vlevo-vedle”
17
• o 50% rychlejší než předchozí způsob
• + šetří oči
• + spotřeba místa vertikálně
• + orientace horizontálně
• - pomalejší orientace vertikálně
zdroj: www.seznam.cz
Umístění „vpravo-vedle”
18
• text nebo *, barva
• indikace povinných/nepovinných
• většinová preference
• minimalizovat nepovinná pole
• podpora tabulátorů
• nápověda
• příklady
• doplňování
!
zdroj: www.aukro.cz
Povinná/nepovinná pole
19
• šířka podle délky vstupu, je-li to
možné a vhodné
• preferovat jednotu, malý počet
různých rozměrů
• seskupování ano, ale ne na úkor
toku !
• preferovat separátor
• minimalizace vizuálního šumu
zdroj: www.paypal.com
Šířka polí a seskupování
20
• hlavní
• hedlejší
• důležitost demonstrovat raději umístěním než vzhledem
• prezentace
• textové odkazy
• obrázkové odkazy
• tlačítka
Akce
21
• webové aplikace
• Inductive User Interface (Microsoft)
zdroj: http://msdn.microsoft.com/en-us/library/
ms951103.aspx
Web a aplikace
22
Webové aplikace - doporučení
• preferujte jednoduchost před komplexností
• drag-and-drop, klávesové zkratky - ano, ale opatrně
• mimializuje hierarchii
• myslete na motoriku
• posilte strukturu
• posilte zpětnou vazbu
• silná/slabá
• in-place
• status-bar
• zvýrazňování
• nemodální validace
23
Webové aplikace - doporučení
• posilte nápovědu a trénink
• validace, doplňování,...
• posilte návodnost (afforance, invitation)
• staticky/dynamicky
• hledejte hranici mezi implementací prostředí a implementací aplikace
• inspirujte se u desktopu ale mějte na paměti omezení webové platformy ďáběl
je ukrytý v detailu
• uvažujte nad tokem informací
• definujte standard
24
Vzorové interakce
• Best practices, de-facto standardy
• Progressive Disclosure
• Master-Detail
• Column Browser
• Dynamic Search
• Dashboard (Inlay)
• Overlay (dialogy)
• Wizard
• ...
25
INteraction patterns
Návrh webových rozhraní
• Obecné principy tvorby UI
• Vizuální styl
• Korporátní Human Interface Guidelines/Styleguide (u velkých projektů)
• Rapid prototyping!
• Evaluace/Iterace
26
Progressive Disclosure
27
Column Browser
28
Dynamic Search
29
Dashboard (Inlay)
30
Obrázkový test
• jednoduchá metoda pro základní oveření použitelnosti
• charakter dotazovací a hodnotící
• úloha
• účastník má rozeznat a popsat funkcionalitu aplikace, stránky či
formuláře pouze ze snímku obrazovky
• snímek není interaktivní
• účastník se nemůže dotazovat
• můžete poté, co uživatel přestane dodávat jeden komentář za druhým
udělat čáru pod posledním vloženým komentářem - to je to co uživatel
rozeznal na první pohled
31
Obrázkový test: výsledek
• zda uživatel poznal co může dělat
• zajímavé je pořadí
• zajímavé jsou komentáře uživatele
• zajímavé jsou omyly (čí ?)
32
Obrázkový test: příklad
33