Návrh UI
Z MiS
(Rozdíly mezi verzemi)
(Doplnění testování použitelnosti.) |
m (Poopravena struktura.) |
||
| Řádka 14: | Řádka 14: | ||
== Dostupnost == | == Dostupnost == | ||
| − | * Availability | + | * ''Availability'' |
* Výrobek musí být schopen ovládat i uživatel s omezeními. | * Výrobek musí být schopen ovládat i uživatel s omezeními. | ||
* Zdravotní handicap | * Zdravotní handicap | ||
| Řádka 20: | Řádka 20: | ||
; Doporučení | ; Doporučení | ||
| − | * Dostatečný kontrast | + | * Dostatečný kontrast mezi pozadím a popředím |
| − | * Možnost | + | * Možnost ovládání jednou rukou, možnost ovládání myší |
| − | * | + | * Přiměřená velikost ovládacích prvků |
* Vzdálenost mezi ovládacími prvky | * Vzdálenost mezi ovládacími prvky | ||
* ... | * ... | ||
| Řádka 34: | Řádka 34: | ||
== Použitelnost == | == Použitelnost == | ||
| − | + | * ''Usability'' | |
| − | + | * Uživatel na první pohled pozná, k čemu výrobek slouží. | |
| − | * Uživatel na první pohled | + | * Uživatel na první pokus vyřeší svůj úkol. |
| − | * Uživatel | + | |
** přehlednost, snadná orientace | ** přehlednost, snadná orientace | ||
| − | * Uživatel považuje ovládání za snadné. | + | * Uživatel považuje ovládání za snadné, baví ho to. |
| − | === | + | === Časté problémy === |
Viz: Adaptic.cz | Viz: Adaptic.cz | ||
* přílišná originalita, především v ovládání webu, ale i při návrhu layoutu nebo vzhledu | * přílišná originalita, především v ovládání webu, ale i při návrhu layoutu nebo vzhledu | ||
| Řádka 59: | Řádka 58: | ||
| − | == Chování uživatele na webu == | + | === Chování uživatele na webu === |
Viz: KRUG | Viz: KRUG | ||
| Řádka 69: | Řádka 68: | ||
**V době vyhledávačů může uživatel na váš server vstoupit kteroukoli stránkou, nejen úvodní. | **V době vyhledávačů může uživatel na váš server vstoupit kteroukoli stránkou, nejen úvodní. | ||
| − | === Postupy k dosažení použitelnosti === | + | === Postupy k dosažení použitelnosti === |
Viz: KRUG | Viz: KRUG | ||
| Řádka 77: | Řádka 76: | ||
** tlačítka se zvýrazněnými okraji | ** tlačítka se zvýrazněnými okraji | ||
** jednotlivé bloky stránky graficky oddělené | ** jednotlivé bloky stránky graficky oddělené | ||
| − | * „Vynechte polovinu | + | * Zredukujte text — „Vynechte polovinu slov!“ |
** žádné uvítací prology | ** žádné uvítací prology | ||
** žádné dlouhé odstavce textu | ** žádné dlouhé odstavce textu | ||
| Řádka 83: | Řádka 82: | ||
* Dejte stránkám jasnou strukturu | * Dejte stránkám jasnou strukturu | ||
| − | |||
* Nejprve kreslete a testujte, pak až kódujte! | * Nejprve kreslete a testujte, pak až kódujte! | ||
| − | |||
* Dodržení standardů | * Dodržení standardů | ||
| − | * Dodržení běžných konvencí | + | * Dodržení běžných konvencí ovládání |
| − | + | ||
| − | * Testujte na lidech! (viz | + | * Testujte na lidech! (viz [[#Analýza použitelnosti]]) |
; Speciálně pro web | ; Speciálně pro web | ||
| Řádka 99: | Řádka 96: | ||
=== Analýza použitelnosti === | === Analýza použitelnosti === | ||
| − | |||
* Vytipujte cílové uživatele výrobku/webu. | * Vytipujte cílové uživatele výrobku/webu. | ||
| Řádka 109: | Řádka 105: | ||
** Sledujte, jak reagují. | ** Sledujte, jak reagují. | ||
| − | ; Pravidla | + | ; Na první pohled byste měli identifikovat |
| + | * Součásti webové stránky | ||
| + | ** Logo serveru | ||
| + | ** Název stránky (v rámci serveru) | ||
| + | ** Záložky sekcí | ||
| + | ** Lokální navigace | ||
| + | ** Nástroj pro vyhledávání | ||
| + | |||
| + | * Co web nabízí | ||
| + | * Čí web to je | ||
| + | |||
| + | * Kudy máte pokračovat — podle úkolu, který potřebujeme vyřešit. | ||
| + | |||
| + | ; Pravidla testování | ||
* Uživatel nikdy nejedná „špatně“!!! | * Uživatel nikdy nejedná „špatně“!!! | ||
| − | ** Pokud zvolil špatný postup, je to | + | ** Pokud uživatel zvolil špatný postup, je to chyba návrhu UI. |
* Nenapovídejte uživateli! | * Nenapovídejte uživateli! | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Verze z 10. 9. 2020, 13:06
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 mezi pozadím a popředím
- Možnost ovládání jednou rukou, možnost ovládání myší
- Přiměřená 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
- Usability
- Uživatel na první pohled pozná, k čemu výrobek slouží.
- Uživatel na první pokus vyřeší svůj úkol.
- přehlednost, snadná orientace
- Uživatel považuje ovládání za snadné, baví ho to.
Časté problémy
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é
- Zredukujte text — „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
- Nejprve kreslete a testujte, pak až kódujte!
- Dodržení standardů
- Dodržení běžných konvencí ovládání
- 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
- 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í.
- Na první pohled byste měli identifikovat
- Součásti webové stránky
- Logo serveru
- Název stránky (v rámci serveru)
- Záložky sekcí
- Lokální navigace
- Nástroj pro vyhledávání
- Co web nabízí
- Čí web to je
- Kudy máte pokračovat — podle úkolu, který potřebujeme vyřešit.
- Pravidla testování
- Uživatel nikdy nejedná „špatně“!!!
- Pokud uživatel zvolil špatný postup, je to chyba návrhu UI.
- Nenapovídejte uživateli!
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
