Návrh UI
Z MiS
(Rozdíly mezi verzemi)
(Přidána dostupnost) |
(Doplnění testování použitelnosti.) |
||
| Řádka 7: | Řádka 7: | ||
* Jedná se o jednu z oblastí ''softwarového inženýrství'' (SI). | * Jedná se o jednu z oblastí ''softwarového inženýrství'' (SI). | ||
| + | ; Požadavky | ||
| + | * atraktivní vzhled (design, grafika,...) | ||
| + | * dostupnost | ||
| + | * použitelnost | ||
| + | |||
| + | |||
| + | == Dostupnost == | ||
| + | * Availability | ||
| + | * Výrobek musí být schopen ovládat i uživatel s omezeními. | ||
| + | * Zdravotní handicap | ||
| + | * Zrakové omezení | ||
| + | |||
| + | ; Doporučení | ||
| + | * Dostatečný kontrast | ||
| + | * Možnost ovládat jednou rukou | ||
| + | * Velikost ovládacích prvků | ||
| + | * Vzdálenost mezi ovládacími prvky | ||
| + | * ... | ||
| + | |||
| + | ; Web | ||
| + | * Dodržení standardů a strukturování textu | ||
| + | ** Tak, aby mohly fungovat automatické čtečky. | ||
| − | |||
| Řádka 15: | Řádka 36: | ||
=== Cíle === | === Cíle === | ||
| − | * | + | * Uživatel na první pohled ví, k čemu výrobek slouží. |
| − | + | * Uživatel ví, jak vyřešit svůj úkol. | |
| − | + | ** přehlednost, snadná orientace | |
| − | + | * Uživatel považuje ovládání za snadné. | |
| − | + | ||
| − | + | ||
| − | ; | + | |
| − | * | + | |
| − | ** | + | |
| − | * | + | |
| − | + | ||
=== Negativa === | === Negativa === | ||
| Řádka 43: | Řádka 57: | ||
* nefungující chybová stránka 404, | * nefungující chybová stránka 404, | ||
* neexistující fulltextové vyhledávání | * neexistující fulltextové vyhledávání | ||
| + | |||
== Chování uživatele na webu == | == Chování uživatele na webu == | ||
| Řádka 67: | Řádka 82: | ||
**: (s vyjímkou novinových článků a literárních statí či knih) | **: (s vyjímkou novinových článků a literárních statí či knih) | ||
* Dejte stránkám jasnou strukturu | * Dejte stránkám jasnou strukturu | ||
| + | |||
| + | === Jak dosáhnout použitelnosti === | ||
| + | * Nejprve kreslete a testujte, pak až kódujte! | ||
| + | * Nepřehlcení informacemi | ||
| + | * Dodržení standardů | ||
| + | * Dodržení běžných konvencí | ||
| + | * Vizuální přitažlivost | ||
| + | * Testujte na lidech! (viz (#Analýza použitelnosti]]) | ||
| + | |||
| + | ; Speciálně pro web | ||
| + | * aktuálnost | ||
| + | ** snadnost doplňování | ||
| + | ** možnost přidělení rubrik editorům | ||
| + | * dostupnost na portálech, SEO | ||
| + | |||
=== Analýza použitelnosti === | === Analýza použitelnosti === | ||
Viz: KRUG | Viz: KRUG | ||
| + | |||
| + | * Vytipujte cílové uživatele výrobku/webu. | ||
| + | ** Můžete vytvořit „persony“. | ||
| + | * Vytipujte úlohy, které budou uživatelé s výrobkem provádět | ||
| + | * Najděte příklady uživatelů a testujte | ||
| + | ** Najděte konkrétní uživatele z cílových skupin. | ||
| + | ** Zadávejte jim úlohy. | ||
| + | ** Sledujte, jak reagují. | ||
| + | |||
| + | ; Pravidla | ||
| + | * Uživatel nikdy nejedná „špatně“!!! | ||
| + | ** Pokud zvolil špatný postup, je to asi chyba návrhu UI. | ||
| + | * Nenapovídejte uživateli! | ||
*Na první pohled byste měli identifikovat: | *Na první pohled byste měli identifikovat: | ||
| Řádka 85: | Řádka 128: | ||
***Pro jednotlivé kategorie uživatelů | ***Pro jednotlivé kategorie uživatelů | ||
*Testujte na lidech!!! | *Testujte na lidech!!! | ||
| + | |||
Verze z 10. 9. 2020, 08:46
Obsah |
Uživatelské rozhraní
- UI... User Interface
- Zařízení či software, které slouží uživateli k ovládání výrobku/služby/počítače...
- Nemusí být nutně vztaženo k IT.
- Jedná se o jednu z oblastí softwarového inženýrství (SI).
- Požadavky
- atraktivní vzhled (design, grafika,...)
- dostupnost
- použitelnost
Dostupnost
- Availability
- Výrobek musí být schopen ovládat i uživatel s omezeními.
- Zdravotní handicap
- Zrakové omezení
- Doporučení
- Dostatečný kontrast
- Možnost ovládat jednou rukou
- Velikost ovládacích prvků
- Vzdálenost mezi ovládacími prvky
- ...
- Web
- Dodržení standardů a strukturování textu
- Tak, aby mohly fungovat automatické čtečky.
Použitelnost
Cíle
- Uživatel na první pohled ví, k čemu výrobek slouží.
- Uživatel ví, jak vyřešit svůj úkol.
- přehlednost, snadná orientace
- Uživatel považuje ovládání za snadné.
Negativa
Viz: Adaptic.cz
- přílišná originalita, především v ovládání webu, ale i při návrhu layoutu nebo vzhledu
- nekonzistence hlavních prvků a jejich funkčnosti
- malá rychlost načítání a vykreslování stránky v prohlížeči
- nefungující či nedostatečná navigace
- špatná informační architektura – především nelogické uspořádání, rozmístění a malá strukturovanost informací
- zasahování do uživatelského prostředí prohlížeče, např. obarvené lišty, otvírání odkazů do nového okna
- neexistence tiskové verze
- chybějící zpětná vazba
- nepřívětivý tvar URL
- U větších webů také
- chybějící mapa stránek,
- nefungující chybová stránka 404,
- neexistující fulltextové vyhledávání
Chování uživatele na webu
Viz: KRUG
- Prohlížíme, nečteme
- Volíme první „rozumnou“ volbu
- Máme-li řešení, nehledáme další
- Pozor!
- V době vyhledávačů může uživatel na váš server vstoupit kteroukoli stránkou, nejen úvodní.
Postupy k dosažení použitelnosti
Viz: KRUG
- Motto
- „Nenuťte uživatele přemýšlet“
- Prvkům ponechte tradiční vzhled
- odkazy podtržené
- tlačítka se zvýrazněnými okraji
- jednotlivé bloky stránky graficky oddělené
- „Vynechte polovinu slov“
- žádné uvítací prology
- žádné dlouhé odstavce textu
- (s vyjímkou novinových článků a literárních statí či knih)
- Dejte stránkám jasnou strukturu
Jak dosáhnout použitelnosti
- Nejprve kreslete a testujte, pak až kódujte!
- Nepřehlcení informacemi
- Dodržení standardů
- Dodržení běžných konvencí
- Vizuální přitažlivost
- Testujte na lidech! (viz (#Analýza použitelnosti]])
- Speciálně pro web
- aktuálnost
- snadnost doplňování
- možnost přidělení rubrik editorům
- dostupnost na portálech, SEO
Analýza použitelnosti
Viz: KRUG
- Vytipujte cílové uživatele výrobku/webu.
- Můžete vytvořit „persony“.
- Vytipujte úlohy, které budou uživatelé s výrobkem provádět
- Najděte příklady uživatelů a testujte
- Najděte konkrétní uživatele z cílových skupin.
- Zadávejte jim úlohy.
- Sledujte, jak reagují.
- Pravidla
- Uživatel nikdy nejedná „špatně“!!!
- Pokud zvolil špatný postup, je to asi chyba návrhu UI.
- Nenapovídejte uživateli!
- Na první pohled byste měli identifikovat:
- Logo serveru
- Název stránky (v rámci serveru)
- Záložky sekcí
- Lokální navigace
- Nástroj pro vyhledávání
- Při pohledu na stránku máte vědět
- Co web nabízí
- Název
- Logo
- Slogan
- Kudy máte pokračovat
- Pro jednotlivé kategorie uživatelů
- Co web nabízí
- Testujte na lidech!!!
Zdroje:
- KRUG, Steve. Webdesign : Nenuťte uživatele přemýšlet. 2. aktualizované. Brno : Computer Press, 2007. 164 s. ISBN 80-251-1291-8.
- Anglický originál: Steve Krug. Don't Make Me Think: A Common Sense Approach to Web Usability
- Adaptic.cz > Použitelnost webu
- Prezentace z Data.businessworld.cz
