Principy interaktivního designu/old

Typy modelů v interaktivním designu? Co je to design zaměřený na cíle (goal directed design)? Popište jednotlivé etapy interaktivního designu.

• Cooper, A., Reiman, R. About Face 2.0: The Essentials of Interaction Design, John Wiley & Sons, Inc. NY 2003, kapitoly 1,2,7

Přehled

Principy interaktivní tvorby nabývají na důležitosti s rozvojem a rozmachem používání digitálních technologií. Složité systémy potřebují design, který bude nejen efektivní, ale i snadno pochopitelný a lákavý pro uživatele. Jde tu ale např. i o marketing a obchod. Podle Victora Papanka je design „the conscious and intuitive effort to impose meaningful order“

Obsah

Hlavní aktivity interakčního designu: - porozumění uživatelovým přáním, potřebám, motivům a kontextu - porozumění obchodu, technickým možnostem a omezením a možnostem, omezením sítě/ portálu/ produktu - používání tohoto vědění pro plány tvorby produktů – jejich formy, obsahu – aby byly použitelné, ekonomicky dostupné a technicky možné

O digitálních technologiích: Digitální produkty jsou nevychované – neustálé hlášky o chybách, nutí přizpůsobit se uživatele, ujišťování o jeho úkonech apod. Digitální produkty vyžadují po uživateli myslet jako počítač Digitální produkty předvádějí ubohé chování – často si „nepamatují“ předešlé příkazy a znovu požadují jejich schválení apod. Digitální produkty vyžadují po uživateli příliš mnoho práce – manuální kopírování textu, úkony, které by SW mohl díky jednoduchému produktu umět

Vývoj interakčního designu V prvopočátcích mu nebyla přikládána velká váha. Programátoři vytvořili vlastní verzi, která putovala na trh. Pozdější fáze:

Manažeři (návrh) → Programátoři (testovací verze) → Zákazník Manažeři (návrh) → Programátoři (testovací verze) → QA (testování kvality) → Designeři → Zákazník Manažeři (návrh) → Uživatelé (výzkum, test) → Designeři → Programátoři (testovací verze) → QA (testování kvality) → Uživatelé (výzkum, test) → Zákazník

Příklon k designu chování (design of behavior) – nejde jen o vizualitu produktu, ale o vztah uživatele k produktu – porozumění přáním a přenpokladům, které uživatel do produktu vkládá

→ cílený design (goal directed design) – propojení přání zákazníků s možnostmi výrobce (možnosti a omezení designerů, technologií, managementu) - základem je porozumět uživatelovým cílům/ očekáváním (ne úkolům, které chce vykonávat, na což se mnoho výzkumů a sond chybně zaměřuje) - design jako definice produktu založená na cílech uživatele, možnostech technologií a mangementu - cílený design kombinuje techniky etnografie, rozhovory s investory, marketingový výzkum, detailní uživatelské modely, základní principy a postupy interakce - odpovídá na otázky: 1) Kdo jsou naši uživatelé? 2) Čeho se naši uživatelé snaží dosáhnout? 3) Jak naši uživatelé přemýšlí o tom, čeho se snaží dosáhnout_ 4) Jakou odpověď dostanou po zadání požadavku? 5) Jak by se měl náš produkt „chovat“? 6) Jakou formu by měl náš produkt mít? 7) Jak mohou být funkce produktu co nejefektivněji zorganizovány? 8) Jak se produkt představí při první interakci s uživatelem? 9) Jak může být produkt jednoduše srozumitelný a kontrolovatelný? 10) Jak může produkt řešit uživatelovy interakční problémy? 11) Jak bude produkt pomáhat dosáhnout uživatelových cílů? 12) Jak může produkt uspokojit potřeby expertních uživatelů?

- cílený design má 6 fází: Výzkum (research) → modelování (modeling) → požadavky (requirements) → základní kostra (framework) → upřesňování (refinement) → podpora (support).

1.Výzkum (research) – uživatel vs. produkt: slouží k deskripci cílů, potřeb, postupů. Kombinuje techniky etnografie, rozhovory s investory, marketingový výzkum apod.

2.Modelování (modeling) – uživatel a kontext: vytváření typologií uživatelů (personas), jakési archetypy definované chováním, postoji, schopnostmi, cíli, motivy atd. zjištěnými v průběhu výzkumné fáze. Porovnáváním jednotlivostí se tvoří hierarchie priorit.

3.Požadavky (requirements) – definice uživatelových, obchodních a technických potřeb: k modelování požadavků používáme typologii uživatelů vytvořenou v průběhu fáze modelování, definice postupů, maximalizace užitku, minimalizace úsilí vyžadovaného od uživatele. Kontextové scénáře.

4.Základní kostra (framework) – definice struktury designu a procesů: využívání principů interakčního designu a interakčních postupů.

5.Upřesňování (refinement) – chování, formy a obsahu: přesně definuje možné cesty uživatelů. Výstupem je detailní dokumentace designu, specifikace forem a chování uživatele. Vizuální designeři definují systém stylů a velikostí, ikony atd.

6.Podpora (support) – možnost konzultací s týmy z předchozí fáze, požadavky se mohou v průběhu konstrukce produktu měnit.

Typy modelů v interaktivním designu Implementační model (implementation model) – reprezentace, jak systém/ stroj/ program opravdu funguje. Mentální modely (user mental models) – někdy také nazývané jako konceptuální modely jsou popisem toho, jak si uživatel vysvětluje fungování systému. Většinou nezahrnuje detaily. Reprezentované modely (represented models) – SW nebo jakýkoliv jiný digitální produkt má vizuální tvář, jíž se ukazuje uživatelům. Tato reprezentace nemusí být přesnou ukázkou toho, co se děje uvnitř mechanismu, jde o designerův a programátorův počin. Representovaný model je diskrepancí mezi tím, co je v produktu implementováno a co je nabízeno uživateli. Donald Norman tento model také nazývá designerovým modelem, protože jde o jím vybranou reprezentaci systému.

Mentální modely jsou jednodušší než realita, když mačkáme brzdu u auta, nevidíme opravdový průběh systému brždění auta. Reprezentované modely jsou proto velice zjednodušené (např. změny jasu a barev ve Photosopu, používáme „páčky“)

Reprezentované modely se začaly radikálně měnit ve srovnání s modely z industriálního období. Bohužel máme stále tendence vysvětlovat a popisovat nové systémy podle vzoru těch starých, industriálních (např. ikony jsou reprezentací starých médií – obálka pro nový e-mail, abecední řazení adres apod.). Nové digitální technologie mají mnoho předností, mnohé také oproti starým postrádají, při využívání starých reprezentací je třeba dávat pozor na to, aby nedocházelo k omezení možností.

Definování interakčního designu produktu - nejde jen o vizualizaci, ale také o procesy interakce, chování a organizace produktu. - 6 fází, které se prolínají:

1.Definování faktorů formy, pozice produktu a metodu komunikace – primárně je třeba definovat faktory formy (form factors) - jiné požadavky budou na webový portál, SW do mobilního telefonu apod. Následně lze popsat pozici produktu (posture), tzn. jaký typ interakce a v jakém rozsahu bude produkt vyžadovat od užitele a jak bude odpovídat. Metodou komunikace zvolím epodle předchozích dvou faktorů – bude se jednat o klávesnici, myš, dotykový displej, ovládač, konzole,... nebo jejich kombinaci? Jakou?

2.Definování funkčních a datových elementů – jde o reprezentaci funkčnosti a dat, jež se uživateli ukazují. Datové elementy jsou základními prvky interaktivních produktů (fotografie, e-maily apod.), mohou být navázané na další datové elementy (fotografie na alba, hudební skladby a seznam skladeb apod. Funkční elementy jsou pak možnostmi operací s datovými elementy. Je dobré při tomto kroku vytvořit scénáře možných operací a požadavků uživatelů.

3.Vytvoření funkčních skupin a jejich hierarchizace – jde o třídění elementů definovaných v předešlém kroku (které elementy zahrnují jiné, jak je nejlépe zorganizovat, které elementy se používají společně, jaké interakční modely a postupy budou vhodné.

4.Interakční schéma – založeno na funkcích a datech. Postupujeme od jednoduchých modelů až k složitým za použití např. Adobe Fireworks, Adobe Illustrator, Microsoft Visio, Microsoft PowerPoint, Omni Group's OmniGraffle.

5.Konstrukce klíčových scénářů – jak bude uživatel zacházet s produktem na podkladu interaktivního schématu. Tvorba storyboardů.

6.Kontrola designu prostřednictvím platných scénářů – klíčové scénáře jsou rozčleněny podle reálných potřeb a cílů uživatelů, některé cesty jsou používány častěji apod. Scénáře rozkreslujeme např. do schémat rozhodovacích stromů.

Anotovaná bibliografie

http://jan.brejcha.name/

http://www.useit.com/

Nielsen, J. Web.Design. 1. vyd., Praha: SoftPress, 2002, ISBN 80-86497-27-5.

Cooper, A.; Reinmann, R.; Cronin, D. About Face 3: The Essentials of Interaction Design. Indianapolis, Indiana: Wiley Publishing Inc., 2007, ISBN 978-0-470-08411-3.

Obsah knihy (pro účely této otázky použity kapitoly 1,2,7):

1. Goal-Directed Design.

2. Implementation Models and Mental Models.

3. Beginners, Experts, and Intermediates.

4. Understanding Users: Qualitative Research.

5. Modeling Users: Personas and Goals.

6. The Foundations of Design: Scenarios and Requirements.

7. From Requirements to Design: the Interaction Framework and Design Refinement.

8. Patterns and Principles.

9. Platform and Posture.

10. Orchestration and Flow.

11. Eliminating Excise.

12. Making Software Considerate and Smart.

13. Metaphors and Idioms.

14. Visual Interface Design.

15. Searching and Finding: Improving Data Retrieval.

16. Understanding Undo.

17. Rethinking Files and Save.

18. Improving Data Entry.

19. Selection, Direct Manipulation and Mouse Interactions.

20. Window Behaviors.

21. Controls.

22. Menus.

23. Toolbars and ToolTips.

24. Dialogs.

25. Errors, Alerts, and Confirmation.

26. Designing for Different Needs.

Demonstrace

Přístupnost webu zdravotně a tělesně postiženým

Ráda bych připomněla několik jednoduchých rad pro zpřístupnění webu lidem postiženým nebo stárnoucím. Jsou také uživateli Internetu a v médiu, které vzniklo jako prostor pro rovnoprávnou a svobodnou komunikaci by se na ně nemělo ani v nejmenším zapomínat. Na http://www.w3.org/WAI naleznete standard WAI, který shrnuje pravidla pro zvýšení dostupnosti internetových stránek. Já se v textu zmíním o několika užitečných radách, které dává ve své knize Web.Design Jakob Nielsen.

Při tvorbě textu je důležité myslet na osoby se špatným zrakem – prohlížeč umožňuje změnu velikosti písma, pro umožnění tohoto kroku: Nikdy nedefinujte informace pomocí absolutních velikostí textu, použijte relativní značení. V případě použití kaskádového stylu nenastavovat velikost písma v počtu pixelů, ale na základě procentuálních proporcí výchozího písma. Zkontrolujte vizuální vyváženost stránek při všech možných velikostech písma.

Pro nevidomé je třeba vytvořit alternativní verzi stránek, např. popisy obrázků, které se ve čtečce převedou na mluvený text a zpřístupní nevidomým uživatelům celý obsah včetně obrázků (tzv ALT texty). Text by měl také obsahovat tzv. obrázkové mapy, které „ukáží“ na daný obrázek, když se právě vztahuje k textu.

Pro sluchově postižené je třeba ke každému videu nebo podcastu umístit titulky. Titulky také zpřístupní obsah cizincům, kteří lépe porozumí psanému textu než mluvenému slovu.

Pohybově postižení také ocení, když budou odkazy nebo obrázkové mapy dostatečně velké a nebudou vyžadovat jemného ovládání myši. Veškeré applety rozšiřující možnosti stránky nad rámec schopností jazyka HTML by měly být implementovány tak, aby umožňovaly ovládání i bez myši.

V dnešních dobách, kdy se počítač a spolu s ním Internet dostávají do rukou naprosté většině populace, je třeba zvýšit intuitivnost ovládání stránek, které obsah zpřístupní lidem, kteří nemají vysokou počítačovou gramotnost. Zvláštním požadavkem je pak přizpůsobení vyhledávání i gramatickým chybám – hledání bez ohledu na pravopis budehlavní pomocí dyslektikům (vlastně všemJ.

Na závěr trefná rada Jakoba Nielsena: „Kromě vyhovění vyhláškám a poslechnutí vlastní lidskosti existují i další ryze obchodní důvody, proč umožnit přístup na web i postiženým lidem. Takoví lidé se velice často stávají velice věrnými zákazníky, pokud najdou v dodavatelích důvěryhodného partnera, dobré služby a vyhovění jejich specifickým potřebám.“

http://michaelabuchtova.blogspot.com/2008/01/pstupnost-webu-zdravotn-tlesn-postienm.html