Internet

1
Information Representation / Multimedia 1
2 November-December 2003 - February 2004 Gerrit
C. van der Veer FEW-Informatica-IMSE Human-Compute
r Interaction - Multimedia Cultuur gerrit_at_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 User Experience

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 12 (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 12

• Di 25-11 830-1000 () GV introduction
• 1015-1200 () JFH Language Psy Inf.
  Representaton
• Wo 26-11 945-1200 JFH Text
• 1345-1600 JS graphical design principles
• Do 27-11 1400-1600 () JFH Image
• Vr 28-11 945-1200 JFH Motion
• Ma 01-12 945-1230 JS graphic design 2
• Di 02-12 915-1230 GV scenario development and
  analysis
• Wo 03-12 915-1000 GV assessment of scenario
  homework
• 1015-1200 JFH Sound and Touch
• Do 04-12 1215-1400 JFH Creativity Support

7
Time table, week 34

• Ma 08-12 945-1200 JS graphics and style
• Di 09-12 915-1200 YE representation design
• Do 11-12 945-1130 JFH Virtual Reality
• 1330-1500 YE representation design 2
• Ma 15-12 945-1200 JS Graphics continued
• Di 16-12 945-1130 JFH Digital Tour Guides
• Wo 17-12 915-1200 GV/JFH/JS start project

8
Time table, week 5-8

• Wo 04-02 945-1130 GV/JFH/JS project review
• Wo 11-02 945-1130 GV/JFH/JS project review
• Wo 18-02 945-1130 GV/JFH/JS project review
• Vr 27-02 1045-1530 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. estheticspainting 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-outhuman perceptionscanning,
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-foregroun
  d
• 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 datainkt)
• 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)