Information Representation & Multimedia January 2005 Gerrit C. van der Veer FEW-Informatica-IMSE

1. Information Representation & Multimedia January 2005 Gerrit C. van der Veer FEW-Informatica-IMSE Human-Computer Interaction - Multimedia & Cultuur gerrit@cs.vu.nl

2. Background of this course: Computer science - HCI - MMC Research focus within Software Engineering Bachelor & Master as specialism of Information Sciences Multidisciplinar domain and team Focus on design of state of the art Information Representation for people in context (culture of use) not aiming at the technology but at: • the User Virtual Machine (UVM) • the UserExperience

3. M.M. Technologie  M.M. Design • Insight in the multidisciplinary basis for art of information representation: Perception, Cognition, Graphic art, Semiotics, Cognitive Ergonomy, User Interface design, Creativity • Experience in practicing the techniques, and acquisition of basic skills in design of text, graphic representation, motion visualisation, envisioning scenario, sound and touch • Basics ot multimedia techniques and user-relevant concepts for the design of virtual reality • Experience in team-design of a representation for a client, a target audience, and a topic or domain of discourse.

4. An intensive course Ects: 6 (160 hours of student time) Period: 10/1/2005 - 4/2/2005 - full time Course material Lecture notes, presentations, information, : www.cs.vu.nl/~gerrit/Communicatie-Afbeeldingen general availability: after each lecture

5. Introductie (3) Recente advertentie: “We apply our knowledge of cognitive issues of perception, monitoring, attention,and task structure to the design of Network Management Graphical User Interfaces (GUIs). We have developed a consistent graphic vocabulary with redundant perceptual coding, to the representation of elements and links and of alarm states.” Deze termen zullen in deze cursus aan de orde komen.

6. Wat komt er in dit vak aan de orde? • Basic concepts over informatie representatie • basics over menselijk waarnemen en begrijpen • Evaluatie methoden voor representaties • Soorten representaties: tekst, beeld, animatie, gebaar, geluid en gevoel • het ontwerpen van representaties

7. Information visualization contour maps Notations algebra muziek Narrative film Action language digitale horloge knoppen Verscheidenheid in representatie Wij geven voorbeelden en proberen daarmee algemene concepten te behandelen.

8. Zelfde concept, verschillende representaties Algebra vs graphs: y1 = 5 x y2 = – 9x ‘wat is het beste’ ? - hangt af van “expressive power” Expressing what? - concepten (‘what’s in the mind’)

9. Geen concept, geen betekenis Pictish monument in Scotland. Wat betekent de inscriptie?

10. Alleen een concept Een rechthoekige balk ABCD, horizontaal gefixeerd bij AB, onderworpen aan een verticale kracht M bij CD Galileo’s diagram Diagram in schoolboek 2001

11. Welke optelling is makkelijker? DIII DXIV XXXIX ––––––––––– ––––––––––– 53 64 39 ––––– ––––– --- en waarom?

12. “Stakeholders” • kooplieden • architecten • steenhouwers Makkelijker voor wie?

13. Andere aspecten - stijl Stijl is van belang, hangt samen met cultuur van gebruiker, emotie, en andere determinanten van begrijpen.

14. Aspecten van bruikbaarheid (usability) • Structuur and toegankelijkheid • Schrijvers zijn ook gebruikers • Tijd en veranderingen • Short cuts en abstracties • De conceptuele representatie

15. Structuur en toegankelijkheid Toegankelijkheid van bibliotheek: welke verdieping welke kast welke plank welk boek (linear search) Toegankelijkheid van agenda: welk jaar welke maand welke week welke dag welke tijd (linear search) Search is een probleem voor alle soorten informatie. B.v., Hoe weet je welke nummers er in een mobiele telefoon zijn opgeslagen?

16. Zoeken in begrensde systemen Lineaire search kost tijd en stelt hoge eisen aan menselijk geheugen. Probeer de talking timetable (zie repository, Thomas Green) Maar het kost vaak moeite een niet-lineaire representatie te ontwerpen. lineair: cartesiaans:

17. Schrijvers zijn ook gebruikers Schrijvers en lezers zijn beide “stakeholders” (met verschillende taken). Schrijven is niet lineair

18. Niet-linear coderen 110 Restore 2 20 Dim data%(9) 6 : Dim Reversed%(9) 3 30 For I% = 0 To 9: Read data%(I%): 7 Reversed 9 % 8 (9-I%) = data%(I%): 4 Print; data%(I%); “ “: Next 5 40 10 Print: For I% = 0 To 9: 11 Print; Reversed%(I%);” “: Next 12 50 Data 1,2,3,4,5,6,7,8,9,0

19. 10 Restore 20 Dim data%(9) 30 For I% = 0 To 9: Read data%(I%): Print; data%(I%); “ “: Next 40

20. 10 Restore 20 Dim data%(9) : Dim Reversed%(9) 30 For I% = 0 To 9: Read data%(I%): Print; data%(I%); “ “: Next 40

21. 10 Restore 20 Dim data%(9) : Dim Reversed%(9) 30 For I% = 0 To 9: Read data%(I%): Reversed (9-I%) = data%(I%): Print; data%(I%); “ “: Next 40

22. 10 Restore 20 Dim data%(9) : Dim Reversed%(9) 30 For I% = 0 To 9: Read data%(I%): Reversed % (9-I%) = data%(I%): Print; data%(I%); “ “: Next 40

23. Wat is beter? • Een code editor die programmeurs dwingt om vooraf de details uit te werken en dan in te voeren in correcte volgorde Of - • een editor die toelaat dat je elk deel in willekeurige volgorde kunt invoeren? • Gaat dat ook op voor het componeren van muziek?

24. Shortcuts en abstracties • Power users gebruiken shortcuts • Shortcuts zijn abstractions: • een key vervangt meerdere • een object classe bevat vele instanties • een Word stijl geldt voor vele paragrafen • Abstracties maken soms dat de representaties beter passen bij de concepten van de gebruiker • … en soms juist niet (“abstraction maintenance …”)

25. Intern en extern (menselijke kennis - machine/papier) • externe versie dient “conform” de interne te zijn ... • geen triviale opgave!

27. een voorbeeld • Mijn eigen telefoonnummer • dat “iedereen” kent • …maar het is minder evident dan je denkt

28. Wat is een telefoonnummer? • Nummer van een persoon? • Van een huis of kantoor? • Van een toestel? • Van een socket? • Is het een random serie cijfers? +31 20 598 7764

29. Probleem 1: representatie Komt niet (geheel) overeen met interne representaties (mentaal model): 020 5987764 0031 20 598 7764 NL / Amsterdam / 5987764 Wat is de code van Amsterdam? 20 of 020

30. Probleem 2: stakeholders Gebruikers met verschillende taken • bellers: • buiten Amsterdam • in Amsterdam • binnen de VU • binnen de sectie Informatica • communicatie engineers (telefoondienst) • authoriteiten die nummers uitgeven

31. Probleem 3: Usability: hoe worden telefoonnummers gebruikt? • Intoetsen (draaien??) • dicteren • onthouden • opzoeken • inspreken in spraakherkennings-systeem • opslaan in telefoongeheugen • verzenden via modems

32. Probleem 4: Lineariteit • Afgedwongen door achterhaalde technologie • van meest-significant (land) naar minst significant (individual) • bij “ouderwetse” toesteppen geen faciliteit voor het tussenvoegen van een cijfer dat je vergat • bij moderne systemen kun je het nummer eerst editen • zou het niet beter zijn als we in omgekeerde volgorde konden intoetsen? - waarom?

33. Probleem 5: Abstracties • Oorspronkelijke telefoons: alleen het gehele nummer: 020 5987764 • eerste generatie “smart phones”: short-cut codes *1 => 020-5987764 De prijs is een ‘abstraction manager’ • tweede generatie: namen voor nummers: “gv” => 020-5987764 een ‘abstraction manager’ is nog steeds nodig

34. Samenvatting - bruikbaarheid Doel: ontwerpen en evalueren van representaties • verschillende stakeholders - verschillende behoeften • Usability 1: toegang tot de informatie • Usability 2: creeren en editen • Usability 3: externe representaties conform interne concepten • Usability 4: abstracties sparen tijd en helpen de intern-externe match, maar … • …. de prijs is een ‘abstraction manager’

35. representaties hebben nog andere doelen: Veelal gerelateerd aan emoties: • aandacht trekken • vermaak / verrassen • afschrikken / waarschuwen Vooral hierbij is relatie tot de gebruikscultuur erg belangrijk

36. Bernd Pfarr Eine kleine Nachtmusik

39. Design of representations We focus on design, not implementation A representation is a view on a universe of discourse: the world of the content Users of a representation have a goal in relation to the content In many cases there are several different roles for users, e.g.: • author - goal: to define content • publisher - to sell course book for a certain audience • teacher - to select and provide course material • student - to collect content information

40. Design of representations Some types of users (role related) provide content, all have goals, each type has a context of use, depending ont the context there are aspects of culture and emotion. Design decisions: • structure of the content • navigation through content • modality, style, make-up and representation of content

41. Design for a client The client starts with: • a situation / culture/ context of use for the new design • a goal for the design • wishes / requirements / knowledge regarding the content • one or more target groups with specific roles related to the content The designer starts with: • analysis based on this, followed by • specification of dialogue/navigation, stucture, representation

42. A short introduction: is there a problem, and what can be elements in the solution? Focus is on the representation of information that allows correct and effective transfer of the content: This requires • knowledge of the goals, the context and culture of use, and information on all user roles • insight in technical possibilities and conditions (multimodal representations by applying multimedia ICT)

43. Goal of the clientcorrectness: is the representation perceived / understood correctly? A matter of content, but … format, make-up and representation may suggest (other) meaning

44. Choice of representation has strong implications : e.g., the Challenger disaster

45. Goal of the clientcorrectness: is the representation perceived / understood correctly? A matter of content, but … format, make-up and representation may suggest (other) meaning Perceptual mechanisms: • humans presume relations because of spatial structure, colour, common movement, etc. Habit / culture: • underscore, blue color, are interpreted as hyperlink • button like headings / labels (gif)

46. An alternative representation improves decision making

47. Goal of the client: Effectiveness Same mechanisms and others serve to support quick and easy understanding Criteria: • consistency • readability • efficiency, parsimoneous (no irrelevant distractors) • logical: form reflects content structure • productive: form shows patterns

48. Additional client goals to “attract” • to pleasure (“keep attentive”, “stay”, “come back”) • to shock / engage (Amnesty International, SIRE) • to arouse (“seduce audience to act”) to distinguish to create / maintain identity (“branding”)

49. Representation from the point of view of the audience space (lay-out) perceptual mechanisms and variables: • color, shape, size, orientation, movement representation design and text “pages • page lay-out • typography • illustrations

50. Meaning v.s. esthetics:painting with characters a page may be completely structured without the use of lines and other separators • position, color, size, line length, line spacing, character spacing think in blocks that are build from characters