Interacting with computers: Vision, Graphic Design and Visual Display

1
Interacting with computers Vision, Graphic
Design and Visual Display

• Human Computer Interaction
• 9th May 2007
• Mar Pérez Sanagustín Simone Stahel

2
Introduction

• Goals in user-interface design
• Speed of learning
• Speed of use
• Minimize error rate
• Rapid recall
• Attractiveness of the interface

3
The form and the content

• Two different languages
• User-Computer language Actions applied to
  interaction devices
• Computer-User dialog Graphics
• Two components of languages
• Meaning Content or message
• Form or look and feel

4
Meaning

• Conceptual Principal set of users tasks
• Objects
• Properties
• Relationships
• Operations
• Described by metaphors
• Concept familiar with the user that is analog
  with something that the application uses
• Functional or semantic Specifies functionality

5
Form

• Sequencing or syntactic Order of inputs/outputs
• Input Rules by which a sequence of units of
  meaning becomes complete
• Output Notion of sequences including spatial an
  temporal factors
• Binding or lexical How input/output units of
  mea-ning are actually formed from hardware
  primitives

6
Design considerations

• Consistency Uniform conceptual model, semantic
  and syntactic
• In output
• Use sema codings colors, shapes, ...
• System-status messages at a logically fixed space
• Menu items always at same position
• In input
• Keyboard characters always with the same function
• Generic commands must be possible to apply to any
  type of object

7
Design considerations

• Provide feedback
• Given at every level
• Semantic, syntactic and lexical
• Problem-domain feedback
• Concerns actual object being manipulated
• Control-domain feedback
• Concerns mechanisms controlling interactive
  system

8
Design considerations

• Provide error possibilities don't set the user
  for a fall (Foley et al.)
• Context sensitivity
• The system provides user only valid commands
• Avoid side effects
• Avoid results that the user would not expect
• Provide error Recovery Undo, Abort, Cancel and
  Correct
• Encorauges exploratory learning
• User's sensation to have the system under
  control

9
Design considerations

• Accommodate Multiple Skill Levels
• Design the system for a wide spectrum of users
• Minimize Memorization
• Invoke the user's recognition instead of recall
  memory

10
User Interface Styles

• WYSIWYG (What you see is what you get)
• The user gets the exact image displayed by the
  computer

11
User Interface Styles

• Direct Manipulation
• Objects, attributes or relations that can be
  operated on are represented visually
• Operations are invoked by actions performed on
  visual representations

12
User Interface Styles

• Iconic User Interface
• Icon pictorial representation of concept/object
• Recognition how quickly meaning is identified
• Remembering how easy to remember
• Discrimination how well distinguishable

13
Other Interface Styles

• Menu selection
• Form fill-in

14
Other Interface Styles

• Command language
• Natural language

15
Summary

• Requirements for an Interface
• Consistent with form and meaning
• Provide feedback
• Control errors
• How?
• Vision and graphics

16
Vision, Graphics Displays

• HCI Transactions demand users decisions
• Provide relevant information
• Appropriate, articulate, laconic
• Procure compact structure and organization
• Main information perceived by vision
• Focus on perception, (re-) presentation and
  comprehension of information

17
Sensation and perception

• Brain ? computer
• Physical image ? perceived image gt translate
• Differ intensity and brightness, wavelength and
  hue,
• Psychophysics visual system is easy to trick!

18
(No Transcript)
19
(No Transcript)
20
Sensation and perception

• Brain ? computer
• Physical image ? perceived image gt translate
• Differ intensity and brightness, wavelength and
  hue,
• Psychophysics visual system is easy to trick!
• Consider HOW particular visual components are
  received by the observer!

21
Graphic Design

• Goal effective visual communication
• Three basic principles (Marcus, 1992)
• 1. Organize
• 2. Economize
• 3. Communicate
• Composition and contrast (Dondis, 1973)
• Visualization process (Bowman, 1968)
• What, how, how much, where

22
(Graphic) Design General issues

• Address to which users?
• Age, language, culture, education,
• Disability of users
• Technology
• Connection, screen resolution, required
  programs,
• Tutorial methods
• Help new users, provide customer service,

23
Graphic Design Tools

• Typography
• Colors
• Pictures, icons, symbols and signs
• Software
• Display methods and technology
• GUIs

24
Typography

• Text primary source of information
• Aim increase readability, but find balance
• Expresses content first through style
• Styles change with time
• First printed book
• 21th century

25
(No Transcript)
26
Color

• Powerful instrument
• Potential to distinguish, guide, engage, inspire
• Appropriate use difficult gt sparingly
• Follow the contrast rule
• Highlight with a secondary indicator
• Common look and feel

27
Pictures, symbols, signs icons

• Popular use
• Danger of crowded screens
• Overall density 40
• Within groupings 62
• Group things effectively
• Visually appealing and effective
• Orient on guideline
• Increase consistency

28
Effective visualization

• Image enhance expression/communication
• Symbolic relationships, geographic data,
• Complex ideas -gt clear, precise, efficient
• gt Revelation of the complexity

29
Display methods technologies

• Multiple windows, fisheye views, zoom,
• Three-dimensional metaphors (e.g. interactive
  shadow widget, virtual reality)
• Animation gt interface memorable and vivid
• Technology of visual displays 4 steps
• 1) Understand characteristics of image
• 2) Understand changes (image-gttechnology)
• 3) Understand basic technology and architecture
• 4) Understand application of technology

30
Putting it all together GUIs

• Graphical User Interface look and feel
• Layout, symbolism, color, animation,
• Same for all applications/computers?!
• Many different, just key windowing systems
• Users would appreciate congruence!
• Goal unlikely to be realized
• We can do it better!
• We WANT to look different!
• Nobody shall profit from our ideas!

31
Conclusions

• Isolated components already difficult
• How to generalize results
• Multidisciplinary collaboration
• Psychology what not to do
• Design suggestions what to do
• Technology what is possible?

32
A brief history of HCI

• 1940 today
• Changes
• Devices
• Design
• Layout
• Use

33
Forties
34
Fifties
35
Sixties
36
1960/68

• Black and white screen
• Research

37
Seventies

• IBM 5100 (1976)
• Portable (!)
• 50 pounds
• 10000

38
Seventies 1973

• First graphics, mouse
• Video bit-map

39
Eighties 1981

• Xerox Star
• Graphic user interface
• Mouse

40
Eighties 1983

• Nintendo Entertainment system (NES)
• Critics non reliable, errors, freezing -gt
  product recall
• Circular buttons

41
Eighties 1985

• Windows version 1.01
• Colors, icons

42
Eighties 1988

• NeXt
• Multiple windows

43
Nineties
44
Nineties 1995

• Revolution Start-menu
• Super FX 3D for games

45
Today
46
Today
47
Tomorrow?
48
Future of HCI

• Virtual reality, intelligent agents
• Interaction facilitated How?
• Touch screens and/or voice?
• No direct interaction anymore?
• AI makes human redundant?
• Will it still be understandable?
• Do humans really want an intelligent machine?

49
References

• J. Foley, A. van Dam, S. Feiner, J. Hughes, and
  R. Phillips Introduction to Computer Graphics,
  Addison-Wesley, Reading, MA, 559 pp. (1993)
• J. Foley, A. van Dam, S. Feiner, J. Hughes
  Interactive Computer Graphics Principles and
  Practice, Addison-Wesley, Reading, MA, 1174 pp.
  (1990)
• J. Foley and A. van Dam Fundamentals of
  Interactive Computer Graphics, Addison-Wesley
  (IBM Systems Programming Series), Reading, MA,
  664 pp. (1982)
• B. Shneiderman A taxonomy and rule base for the
  selection of Interaction styles (the bible)
• R. Bias and D. Mayhew Cost-Justifying Usability
  An update for the Internet Age, Interactive
  Technologies, Elsevier (2005)
• B. Myers Strategic Directions in Human Computer
  Interaction A Brief History of Human Computer
  Interaction Technology, ACM Computing Surveys
  28(4) (1996)