Information Representation / Multimedia 1 & 2 November-December 2003 - February 2004

1. Information Representation / Multimedia 1 & 2 November-December 2003 - February 2004 Gerrit C. van der Veer FEW-Informatica-IMSE Human-Computer Interaction - Multimedia & Cultuur gerrit@cs.vu.nl

2. Background of this course and its teachers: 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: 12 for IR/M 1+2 (320 hours of student time) Period: 24.11.2003-19.12.2003, 02.02.2004-27.02.2004 - full time Teachers: • Gerrit C. van der Veer (GV), VU - coordination, design, • Johan F. Hoorn (JFH), VU - psychology, multimodal representation • Janke Smit (JS), VU - graphical design • Yuri Engelhardt (YE), guest teacher UvA - representation design

5. Course material Lecture notes, presentations, information, : www.cs.vu.nl/~gerrit/Communicatie-Afbeeldingen general availability: after each lecture

6. Time table, week 1&2 Di 25-11 8:30-10:00 (*) GV introduction 10:15-12:00(*) JFH Language Psy & Inf. Representaton Wo 26-11 9:45-12:00 JFH Text 13:45-16:00 JS graphical designprinciples Do 27-11 14:00-16:00 (*)JFH Image Vr 28-11 9:45-12:00 JFH Motion Ma 01-12 9:45-12:30 JS graphic design 2 Di 02-12 9:15-12:30 GV scenario development and analysis Wo 03-12 9:15-10:00 GV assessment of scenario homework 10:15-12:00 JFH Sound and Touch Do 04-12 12:15-14:00 JFH Creativity Support

7. Time table, week 3&4 Ma 08-12 9:45-12:00 JS graphics and style Di 09-12 9:15-12:00 YE representation design Do 11-12 9:45-11:30 JFH Virtual Reality 13:30-15:00 YE representation design 2 Ma 15-12 9:45-12:00 JS Graphics continued Di 16-12 9:45-11:30 JFH Digital Tour Guides Wo 17-12 9:15-12:00 GV/JFH/JS start project

8. Time table, week 5-8 Wo 04-02 9:45-11:30 GV/JFH/JS project review Wo 11-02 9:45-11:30 GV/JFH/JS project review Wo 18-02 9:45-11:30 GV/JFH/JS project review Vr 27-02 10:45-15:30 GV/JFH/JS project presentation

9. 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

10. 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

11. 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

12. 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)

13. 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)

14. 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

15. 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”)

16. 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

17. 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

18. Page lay-out:human perception:scanning, search, reading, understanding First 10 lines should be enough to get an impression of content and relevance top: title, main navigation, recognition bottom: additional navigation, author, date, e.c.

19. Lay-out en culture of use in the western world we read from left to right and from top to bottom

20. Text layout in the western world we read from left to right and from top to bottom: important issues should be presented first (top left) reading max: 40-60 char. per line • newspaper colloms (8 cm) • otherwise the head has to move

21. When using modern ICT and multimedia, consider the problem of platform diversity and changeability E.g., all images (e.g. gifs) negative effects: • download time • universal accesability (some users can not / decide not to accept pictures) • maintenance (teksteditor does not work)

22. Filling the space designers like “white space” (esthetics), like museum directors real estate is expensive, so designers tend to use every inch (newspapers, Las Vegas, sites like Yahoo) typografical rule of thumb: 70% “message”, rest blank psychological rules of thumb: (Fitts’ Law): use a simple “grid”

23. Consistency Most important lay-out rule facilitates: • recogntion • ease of use suggests carefulness

24. Typografie (a science on representation, reading, and communication) Typography considers contrast background-foreground Typography aims at readability of words and text

25. Fonts • Fonts are important graphical elements, that support meaning, as well as convey style • balance technology (screen resolution), tradition and the need to be different

26. guidelines based on psychology of perception • line distance not smaller than font size • restricted difference in font sizes (10-14) • maximum 2 font types • consider resolution of screens when choosing fonts • use font variables (color) mainly to indicate headers, not within text

27. background • A common cause of failure • contrast is the main importance: light text on dark background or vice versa • avoid contrast in the background

28. Pictures in hypermedia • Relevance of pictures? • restrict use of colors • test colors for various web browsers • indicate clearly possibilities to omit pictures • specify size • load pictures as soon as possible

29. Bitmaps or vector graphics - technology choice is related to user goals bitmaps (raster graphics) • gif, jpeg • for photos and pictures where color various continuous • vergen meer geheugen vector graphics • Postscript, Flash, VML (vector mark-up language) • line drawings, cartoons, fonts • independent of screen resolution

30. Compression • Small size files will load quicker • two types: lossy or lossless • lossless: GIF • lossy: JPEG

31. Use of color related to goal of owner and psychology of audience • helps to organize structure • a way to create consistency and harmony • this requires design: an early choice of a systematic color scheme

32. Accessability visualy (or other modality) impaired users, color blind users language people with old, slow, restricted technology circumstances (context of use)

33. Cultural accessability Cultural dimensions (Geert Hofstede): Neth. Jap. • power distance l h • individualism / collectivism i c • masculinity / femininity f m • uncertainty avoidance l h • long-term / short-term time orientation s l Cultural typology of websites: A. Marcus, Interactions VII, 4, july 2000, www.acm.org

34. Technical conditions and uncertainties: • browsers differ in implementation of standards • standards differ • HTML, Javascript, …. • colors, fonts, and font size differ between platforms(Mac, PC, Unix) • monitor size, resolution, number of colors

35. main rule: Keep it simpel • Be parsimonious in use of pixels (= relation data:inkt) • consider time to download, to search, to read, to maintain • priority to goals, content and meaning

36. Homework for next tuesday find examples of representations that are tailored to different audiences analyse the reasons for differences (cultures and contexts of use, different audience roles) indicate the variables chosen assess the success of the design choices example (not to be used): website of a car company in 5 different countries, and for 2 market segments (domestic / transport)