Recommended
More Related Content
Viewers also liked
Viewers also liked (15)
Similar to Zaklady interakcniho designu 2007 - Zkusenost
Similar to Zaklady interakcniho designu 2007 - Zkusenost (11)
More from Jan Brejcha
More from Jan Brejcha (10)
Zaklady interakcniho designu 2007 - Zkusenost
- 1. Základy interakčního designu Mgr. Jan Brejcha - ZS 2007
- 2. Osnova
- 3. Osnova • Definice designu, materializace znaku
- 4. Osnova • Definice designu, materializace znaku • Z analogu na digitál
- 5. Osnova • Definice designu, materializace znaku • Z analogu na digitál • Emoce a roboti
- 6. Osnova • Definice designu, materializace znaku • Z analogu na digitál • Emoce a roboti • Interakční modely
- 7. Osnova • Definice designu, materializace znaku • Z analogu na digitál • Emoce a roboti • Interakční modely • Prvky uživatelské zkušenosti
- 9. Definice designu • Slovo „design“ pochází z latinského signum (znak, stopa). Sloveso designare (vyznačit, ohraničit) od de- + signare (značit, označovat). V angličtině znamená např. obrázek, tvar, dále vynalézat, plánovat s určitým záměrem, kreslit.
- 10. Definice designu • Slovo „design“ pochází z latinského signum (znak, stopa). Sloveso designare (vyznačit, ohraničit) od de- + signare (značit, označovat). V angličtině znamená např. obrázek, tvar, dále vynalézat, plánovat s určitým záměrem, kreslit. • Jak uvedeno výše je design znakem, stopou. Znak je podle obecné definice cokoli, co zastupuje něco jiného. Má tedy dvě složky, plány: tvar (formu, morphé), a obsah (funkci, význam, látku, hýle).
- 11. Definice designu
- 12. Definice designu • Podle Sutnara musí design „syntetizovat střet konfliktních prvků, jako je funkce a forma, užitnost a krása, racionální a iracionální. Výsledkem je nový fenomén, který musí vést k větší intenzitě vnímání a chápání.“
- 13. Definice designu • Podle Sutnara musí design „syntetizovat střet konfliktních prvků, jako je funkce a forma, užitnost a krása, racionální a iracionální. Výsledkem je nový fenomén, který musí vést k větší intenzitě vnímání a chápání.“ • Flusser: „Design (...) předvádí, že se látka (...) začíná ukazovat, až když je in-formována (stává se fenoménem). A tak je látka v designu (...) způsobem, jak se formy zjevují.“
- 15. Materializace znaku • Materializací se do jisté míry stírají hranice mezi oběma složkami kultury
- 16. Materializace znaku • Materializací se do jisté míry stírají hranice mezi oběma složkami kultury • Model se stává fenoménem. Ztrácí tím nadsmyslovost neměnných idejí, a tudíž na něj můžeme „přímo“ působit. Ale toto působení, manipulace, směřuje k modelu, jehož nosičem je ICT, a proto není v důsledku přímé, ale prostředkované.
- 17. Materializace znaku • Materializací se do jisté míry stírají hranice mezi oběma složkami kultury • Model se stává fenoménem. Ztrácí tím nadsmyslovost neměnných idejí, a tudíž na něj můžeme „přímo“ působit. Ale toto působení, manipulace, směřuje k modelu, jehož nosičem je ICT, a proto není v důsledku přímé, ale prostředkované. • Vytváří se iluze transparentnosti média, která se využívá při tzv. přímé manipulaci s objekty v počítačových prostředích.
- 19. Materializace znaku • Prostředek, medium, se při prostředkování řídí vlastními pravidly, jistým kódem. Náš záměr působit na něco je převáděn médiem na sadu počítačových instrukcí, která řídí způsob, jak naše působení probíhá.
- 20. Materializace znaku • Prostředek, medium, se při prostředkování řídí vlastními pravidly, jistým kódem. Náš záměr působit na něco je převáděn médiem na sadu počítačových instrukcí, která řídí způsob, jak naše působení probíhá. • Záměr je medializován (prostředkován). Je-li tento převod věrohodný, tj. když se nevymyká naší dosavadní zkušenosti, pak se médium stává transparentní, a mizí.
- 21. Materializace znaku • Prostředek, medium, se při prostředkování řídí vlastními pravidly, jistým kódem. Náš záměr působit na něco je převáděn médiem na sadu počítačových instrukcí, která řídí způsob, jak naše působení probíhá. • Záměr je medializován (prostředkován). Je-li tento převod věrohodný, tj. když se nevymyká naší dosavadní zkušenosti, pak se médium stává transparentní, a mizí. • Model se tak plně materializuje.
- 22. Medializace
- 23. Medializace • Pokud je medializace nevěrohodná, působí i opačným směrem: ovlivňuje náš záměr podle toho, co je možné medializovat.
- 24. Medializace • Pokud je medializace nevěrohodná, působí i opačným směrem: ovlivňuje náš záměr podle toho, co je možné medializovat. • Operátor uvádí aparát do funkce, aby jeho prostřednictvím a pomocí své vlastní technické imaginace něco vytvořil, funkcí aparátu je pak ale paradoxně i záměr tvůrce.
- 25. Parcelace designu Design aktivní složka pasivní složka záměr tvar, funkce účel způsob událost typ rozvrh vrženost pragmatika syntaktika symbol (třeťost) ikón (druhost)
- 26. Ch. S. Peirce Pragmatika Interpretant Symbol Syntaktika Sémantika Znak (vehikulum) Objekt Index Ikón
- 27. Kategorie znaků
- 28. Kategorie znaků • Prvost odpovídá afektu (pocitu), v němž panuje prvotní nerozlišenost „jednoho“,
- 29. Kategorie znaků • Prvost odpovídá afektu (pocitu), v němž panuje prvotní nerozlišenost „jednoho“, • Druhost odpovídá vazbě mezi akcí a reakcí, neboli působení „něčeho na něco“ bez účasti třetího, a konečně
- 30. Kategorie znaků • Prvost odpovídá afektu (pocitu), v němž panuje prvotní nerozlišenost „jednoho“, • Druhost odpovídá vazbě mezi akcí a reakcí, neboli působení „něčeho na něco“ bez účasti třetího, a konečně • Třeťost je takový jev, v němž ke třetímu nutně patří druhé a první
- 31. Kategorie znaků • Prvost odpovídá afektu (pocitu), v němž panuje prvotní nerozlišenost „jednoho“, • Druhost odpovídá vazbě mezi akcí a reakcí, neboli působení „něčeho na něco“ bez účasti třetího, a konečně • Třeťost je takový jev, v němž ke třetímu nutně patří druhé a první [B. Palek, 1997]
- 32. Druhy znaků
- 33. Druhy znaků • index – například kouř - ukazuje na oheň,
- 34. Druhy znaků • index – například kouř - ukazuje na oheň, • ikon – například obraz,
- 35. Druhy znaků • index – například kouř - ukazuje na oheň, • ikon – například obraz, • symbol – například slovo.
- 36. Druhy znaků • index – například kouř - ukazuje na oheň, • ikon – například obraz, • symbol – například slovo.
- 37. 3 typy světa
- 38. 3 typy světa • natura
- 39. 3 typy světa • natura • kultura
- 40. 3 typy světa • natura • kultura • odpady
- 41. 3 typy světa • natura • kultura • odpady • in-formace (natura > kultura)
- 42. 3 typy světa • natura • kultura • odpady • in-formace (natura > kultura) • de-formace (kultura > odpad)
- 43. 3 typy světa • natura • kultura • odpady • in-formace (natura > kultura) • de-formace (kultura > odpad) [Flusser, Filosofie designu]
- 44. Osnova
- 45. Osnova • Definice designu, materializace znaku • Z analogu na digitál • Emoce a roboti • Interakční modely • Prvky uživatelské zkušenosti
- 46. Analog • Post-it • převod analogových metafor do virtuálního prostředí
- 47. Digitál • Mac Post-it • přechod z analogu na digitál s využitím (analogových) metafor nefunguje úplně, protože jde o radikálně odlišné technologie.
- 48. • Analogový fax
- 49. ticking sound for a clock; normal function sounds, such as a click when a button is pushed; and alarm sounds when events occur that require the user's attention, such as a cuckoo sound for a clock, or a bell for a ringing telephone. Use animation to convey relationships Many people are captivated by animation effects, especially in today's relatively static interfaces. But animation has a important functional role as well. It provides a way of showing relationships between components, such as the tray that slides out from the realistic phone. • virtuální fax • IBM.com/Easy The relationship between the tray and the phone is unambiguous. It's clear that the tray is contained within the phone. It doesn't just suddenly appear and does not exist independent of the phone. It's important not to over use animation. Too many animations at the same time or an animation that continues on longer than useful becomes an annoyance. Guidelines: Value-Add
- 50. Knowledge Navigator • Studie nového typu rozhraní • forma scénáře použití
- 51. Knowledge Navigator • Apple
- 52. Negroponte
- 53. Negroponte • The Knowledge Navigator a HAL (A. Clarke, Kubrick) disponují takovou inteligencí, že fyzické rozhraní mizí (dobré rozhraní má zmizet).
- 54. Negroponte • The Knowledge Navigator a HAL (A. Clarke, Kubrick) disponují takovou inteligencí, že fyzické rozhraní mizí (dobré rozhraní má zmizet). • Např. telefonní sluchátko je nejčastější objekt designérů, stále však nevyhovuje. Telefon je zatížen nadbytkem funkcí.
- 55. Osnova
- 56. Osnova • Definice designu, materializace znaku • Z analogu na digitál • Emoce a roboti • Interakční modely • Prvky uživatelské zkušenosti
- 57. Emoce a roboti
- 58. Emoce a roboti • “Bojím se” [HAL]
- 59. Emoce a roboti • “Bojím se” [HAL] • Emoce hrají zásadní roli v přežití, sociální interakci, spolupráci a učení.
- 60. Emoce a roboti • “Bojím se” [HAL] • Emoce hrají zásadní roli v přežití, sociální interakci, spolupráci a učení. • Potřebují stroje emoce?
- 61. Emoce a roboti • “Bojím se” [HAL] • Emoce hrají zásadní roli v přežití, sociální interakci, spolupráci a učení. • Potřebují stroje emoce? • Ano, pokud budou čelit stejným podmínkám jako lidé.
- 62. Emoce a roboti • “Bojím se” [HAL] • Emoce hrají zásadní roli v přežití, sociální interakci, spolupráci a učení. • Potřebují stroje emoce? • Ano, pokud budou čelit stejným podmínkám jako lidé. [Norman, Emoční design]
- 63. Emoce a roboti
- 64. Emoce a roboti • Lidé si přejí stále více činností delegovat a stále méně přímo obsluhovat počítač.
- 65. Emoce a roboti • Lidé si přejí stále více činností delegovat a stále méně přímo obsluhovat počítač. • Snaha vytvořit počítačového agenta jednajícího za nás v informačním světě.
- 66. Emoce a roboti • Lidé si přejí stále více činností delegovat a stále méně přímo obsluhovat počítač. • Snaha vytvořit počítačového agenta jednajícího za nás v informačním světě. • Máme s ním kontakt jen na začátku.
- 67. Emoce a roboti • Lidé si přejí stále více činností delegovat a stále méně přímo obsluhovat počítač. • Snaha vytvořit počítačového agenta jednajícího za nás v informačním světě. • Máme s ním kontakt jen na začátku. • Rozhraní se vždy plně přizpůsobí našim potřebám.
- 68. Emoce a roboti • Lidé si přejí stále více činností delegovat a stále méně přímo obsluhovat počítač. • Snaha vytvořit počítačového agenta jednajícího za nás v informačním světě. • Máme s ním kontakt jen na začátku. • Rozhraní se vždy plně přizpůsobí našim potřebám. [Negroponte, Digitální svět]
- 69. Emoce vůči robotům • RUR
- 70. Emoce vůči robotům • Elektro Robot jako digitální komorník
- 71. Emoce vůči robotům • Select-O-Vision • Manipulace se skutečností
- 72. Emoce vůči robotům • Robot zloděj
- 73. Emoce vůči robotům • HAL • Lidé jsou nuceni se schovávat před psychopatickým počítačem [Bradshaw, Making Agents Acceptable]
- 76. Okouzlení a sedukce Fáze: • enticement - příslib
- 77. Okouzlení a sedukce Fáze: • enticement - příslib • relationship - vztah
- 78. Okouzlení a sedukce Fáze: • enticement - příslib • relationship - vztah • fulfillment - naplnění
- 79. Okouzlení a sedukce Fáze: • enticement - příslib • relationship - vztah • fulfillment - naplnění [Khaslavsky a Shedroff]
- 80. Okouzlení a sedukce • 'Řasy' od Jayne Wallace. Figure 2. 'Eyelashes' by Jayne Wallace. The eyelashes, made from silver and stainless steel, are pa
- 81. and of functionality, comfort and ease of use, ignoring th cess of sensory possibilities explored in the contemporary je taking described above. thened Okouzlení a sedukce bjects. ony is ry that ing of a rich s were ated to • “Technošperky” IDEO t were rather porary bilities Figure 3. IDEO 'Technojewellery'.
- 82. relating being as the pieces only become 'inter make sense when one person interacts with anothe Okouzlení a sedukce • “Světelné šperky” Christoph Zellwegger [McCarthy, The Experience of Enchantment in Human- Computer Interaction] Figure 5. 'Light Jewellery' Christoph Zellwegge
- 83. Emoce a design
- 84. Emoce a design
- 85. Emoce a design • Visceral (útrobní) design > Vzhled
- 86. Emoce a design • Visceral (útrobní) design > Vzhled • Behavioral (funkční) design > Potěšení a efektivita použití
- 87. Emoce a design • Visceral (útrobní) design > Vzhled • Behavioral (funkční) design > Potěšení a efektivita použití • Reflective (sociální) design > Image, osobní uspokojení, vzpomínky
- 88. Emoce a design • Visceral (útrobní) design > Vzhled • Behavioral (funkční) design > Potěšení a efektivita použití • Reflective (sociální) design > Image, osobní uspokojení, vzpomínky [Norman, Emoční design]
- 89. Osnova
- 90. Osnova • Definice designu, materializace znaku • Z analogu na digitál • Emoce a roboti • Interakční modely • Prvky uživatelské zkušenosti
- 92. Interakční modely • agenti a delegování interakce (Negroponte, Bradshaw)
- 93. Interakční modely • agenti a delegování interakce (Negroponte, Bradshaw) • koncept přímé manipulace (GUI, TUI, Flusser, aj.)
- 94. Interakční modely • agenti a delegování interakce (Negroponte, Bradshaw) • koncept přímé manipulace (GUI, TUI, Flusser, aj.) • jazykové koncepty (CLI)
- 95. Přímá manipulace
- 96. Přímá manipulace • pojem zavedl Ben Shneiderman 1983
- 97. Přímá manipulace • pojem zavedl Ben Shneiderman 1983 • snaha co nejvíce omezit opakované úkony
- 98. Přímá manipulace • pojem zavedl Ben Shneiderman 1983 • snaha co nejvíce omezit opakované úkony • založena na GUI a TUI
- 99. Přímá manipulace • pojem zavedl Ben Shneiderman 1983 • snaha co nejvíce omezit opakované úkony • založena na GUI a TUI • Transparentní interakce (Flusser, Norman)
- 100. Přímá manipulace • pojem zavedl Ben Shneiderman 1983 • snaha co nejvíce omezit opakované úkony • založena na GUI a TUI • Transparentní interakce (Flusser, Norman) • využívá syntagma objekt + akce
- 102. Jazykové koncepty (interaktivní řádek) • Command line interface
- 103. Jazykové koncepty (interaktivní řádek) • Command line interface • “echo nadpis >> seminarka.txt”
- 104. Jazykové koncepty (interaktivní řádek) • Command line interface • “echo nadpis >> seminarka.txt” • využívá syntagma akce + objekt
- 105. Jazykové koncepty (interaktivní řádek) • Command line interface • “echo nadpis >> seminarka.txt” • využívá syntagma akce + objekt • založeno na přirozeném jazyku
- 106. Osnova
- 107. Osnova • Definice designu, materializace znaku • Z analogu na digitál • Emoce a roboti • Interakční modely • Prvky uživatelské zkušenosti
- 108. Prvky zkušenosti
- 109. Prvky zkušenosti • Jesse James Garrett, The Elements Of User Experience, http://www.jjg.net/elements/
- 110. Prvky zkušenosti • Jesse James Garrett, The Elements Of User Experience, http://www.jjg.net/elements/ • Plány/úrovně designu
- 111. Povrch
- 113. Povrch The Surface Plane • Vše vizuálně spojuje.
- 114. Povrch The Surface Plane • Vše vizuálně spojuje. • Vytváří konečný vzhled produktu.
- 115. Kostra
- 117. Kostra The Skeleton Plane • Konkretizuje strukturu produktu
- 118. Kostra The Skeleton Plane • Konkretizuje strukturu produktu • Jaké komponenty umožní uživatelům používat náš produkt?
- 119. Struktura
- 121. Struktura The Structure Plane • Dává tvar rozsahu
- 122. Struktura The Structure Plane • Dává tvar rozsahu • Jak budou spolu jednotlivé části produktu souviset a chovat se?
- 123. Rozsah
- 125. Rozsah The Scope Plane • Přeměňuje strategii na požadavky
- 126. Rozsah The Scope Plane • Přeměňuje strategii na požadavky • Co by měl produkt obsahovat?
- 127. Strategie
- 129. Strategie The Strategy Plane • Samotný začátek
- 130. Strategie The Strategy Plane • Samotný začátek • Co od produktu očekáváme?
- 131. Strategie The Strategy Plane • Samotný začátek • Co od produktu očekáváme? • Co od něho očekávají uživatelé?
- 132. Co nám to přinese?
- 133. Co nám to přinese? • Vrstvíme jednotlivé plány odspodu
- 134. Co nám to přinese? • Vrstvíme jednotlivé plány odspodu • Plány strategie, rozsahu, struktury, kostry a povrchu nám poskytují rámec pro komunikaci o problémech uživatelské zkušenosti a nástrojích pro jejich řešení.
- 135. finer levels of detail.
- 137. Úkol č. 1
- 138. Úkol č. 1 • Vybrat si rozhraní ve svém okolí
- 139. Úkol č. 1 • Vybrat si rozhraní ve svém okolí • Čím nás ne/oslovilo? Čím nám ne/vyhovuje?
- 140. Úkol č. 1 • Vybrat si rozhraní ve svém okolí • Čím nás ne/oslovilo? Čím nám ne/vyhovuje? • Reflektovat z probraných teorií (Norman, Garrett)
- 141. Úkol č. 1 • Vybrat si rozhraní ve svém okolí • Čím nás ne/oslovilo? Čím nám ne/vyhovuje? • Reflektovat z probraných teorií (Norman, Garrett) • Sepsat na 1-3 s.
- 142. Úkol č. 1 • Vybrat si rozhraní ve svém okolí • Čím nás ne/oslovilo? Čím nám ne/vyhovuje? • Reflektovat z probraných teorií (Norman, Garrett) • Sepsat na 1-3 s. • Odevzdat do soboty 20.10.
- 143. Děkuji za pozornost