5. Metody návrhu uživatelského rozhraní

Transkript

1 Jan Schmidt 2011 Katedra číslicového návrhu Fakulta informačních technologií České vysoké učení technické v Praze Zimní semestr 2011/12 BI-TUR 5. Metody návrhu uživatelského rozhraní EVROPSKÝ SOCIÁLNÍ FOND PRAHA & EU: INVESTUJENE DO VAŠÍ BUDOUCNOSTI Návrhové postupy Formální popis Modely

2 Interakce jako uzavřená smyčka algoritmus chování (kód) vyhodnocení vstupu příkaz formulace cílů mentální model systému stav systém uživatel mentální model stavu systému zobrazení odezva vyhodnocení 2

3 Interakce textem abc UC Berkeley, ABC 1.01 (compiled Aug :55:19) abc 01> read devel/t481.blif abc 02> print_stats t481: i/o=16/1 lat=0 nd=2072 edge=6823 cube=4414 lev=10 abc 02> print_auto This command works only for AIGs (run "strash"). abc 02> strash abc 03> print_auto Output # 0: Inputs = 16. AutoK = 0. The cumulative statistics for all outputs: Ins= 16 InMax= 16 Outs= 1 Auto= 0 SumK= 0 KMax= 0 Supp= 0 Time=0.00 abc 03>

4 Interakce přímou manipulací

5 Model: interakce, uživatele, systému Interakce: typicky tam, kde konverzace má fáze, stav Gramatiky Stavové diagramy Uživatele: úmysly, preference, výkon, atd. GOMS (Goals, Operators, Methods, Selection Rules) Systému (artefaktu): Domény, aktivity, stavu (UML) Konceptuální modely (důraz na integraci)

6 Stav a modalita Stav artefaktu: pozorovatelnost paměťová a kognitivní zátěž uživatele (kde jsem? jak se dostanu sem?) předchozí příklad: stav je v datech! možné zkrácení dialogu Modalita interakce stav z jednoduché a poznatelné množiny příklad: kreslení výběr nástroje

7 Dialog je jayzk nezávisle na své složitosti a stavovosti má svůj slovník má svá gramatická pravidla můžeme mluvit všichni stejně (nezáživně) nebo si můžeme vymyslet každý svou krásnou řeč

8 Vrstvy jazyka klíčová slova, symboly lexikální vrstva tlačítka, boxy, menu gramatika jazyka syntaktická vrstva ovládací sekvence konceptuální model sémantická vrstva cíle uživatele

9 Konzistence, konzistence Konzistence: stejné věci se dělají stejně v rámci artefaktu (aplikace) v rámci platformy atd. Lexikální prvky grafického uživatelského rozhraní: widgety uživatel se je učí jen jednou definice jazyka: Guidelines Vyplatí se uživateli naučit se moje nové ovládací prvky?

10 Lexikální prvky: názvy viz: klasifikace viz: normy viz: style guidelines

11 Reakční časy V ideálním světě aplikace reagují hned Granularita dialogu (kolik informace v jedné otočce ) není ovlivněna Reálné komunikační prostředí: pozorovatelná latence Systém je líný uživatel je líný (naměřeno) Málo informace v jedné otočce : pomalý postup Mnoho informace v jedné otočce : postup při chybě?

12 Uživatelské rozhraní: přímá manipulace co má smysl z hlediska uživatele, je zobrazeno co má podobu v reálu, je tak zobrazeno co se v reálu dá manipulovat, manipuluje se tak i v aplikaci a ještě: nastoupit, vystoupit co se tu dá manipulovat? a jak s tímhle světem mám manipulovat? funguje tu přetažení?

13 Uživatelské rozhraní: model a nástroj máme nějaký popis nebo model nebo jinou reprezentaci reality uživatel tomu rozumí protože v té branži dělá artefakt tomu rozumí protože jsme udělali doménovou analýzu nástroj je častým pojmem některé pojmy je nutno vynalézt (policy) a vyplatí se to uživateli, pochopit je? výsledky manipulace: pokud možno vidět přímo někdy až po složité analýze (co ten most udělá, když jsem vynechal tu výztuhu )

14 Konstrukce uživatelského rozhraní Případy použití (na úrovni odpovídající cílům uživatele) + charakteristiky uživatele Sloučení do jednoho celku Realizace aktivit standardními prostředky Mechanické provedení poukaz na problémy: násilné nebo méně násilné sloučení aktivit aplikace, která umí jenom původní use cases chybí podpora kreativity, nečekaného použití

15 Model implementace Implementace objektového charakteru (dnes běžně) Pokud uživatel vnímá aplikaci jako znázornění manipulovatelných objektů, přímá korespondence Pokud ne, co budeme reprezentovat objektem? Známé návrhové vzory: Model View Controller Model View Presenter Model View ViewModel