Usability

1
Usability

• Graphical Communication 2001
• John Nerbonne and Erik van den Hout
• Nerbonne_at_let.rug.nl

2
Usability Overview

• Introduction
• History
• Theory
• Computer User Interfaces
• World Wide Web
• Assignment
• Accompanying Website

3
Introduction

• Computers explain themselves visually
• group items in windows, mnemonic icons
• tool bars, menus, balloon help, scroll bars,
  highlighting (color, motion)
• Extremely complex machinery
• Freedom in presenting complexity
• Differences in clarity, ease of understanding

4
Motivation

• Everyday machines much more complex
• cars, video recorders, mobile phones, PCs, ...
• Some people never use complex machines
• 10 Dutch cant use ATM
• Most people cant program video recorder
• Even technical people have gaps
• Kenneth Olsen, engineer DEC founder, couldnt
  use a microwave (in D.Normans Psychology of
  Everyday Things)

5
Myths of Interface Design

• Maximal functionality -- anything goes
• text editors that allow letters
• Minimal Functionality -- just whats needed
• but simplified products dont sell
• LetterPerfect (simplified WordPerfect), Microsoft
  Writer
• Philips Easy Line radios, TVs, video recorders
• Wysiwyg What you see is what you get best
• problems (i) nondocuments (ii) documents
  graphics for diff. media?
• Do what I mean, not what I say.
• example problem overeager spell-checkers

line
off
6
Overcoming Myths

• Anything goes
• Minimalism
• WYSIWYG superiority
• Do what I mean

• Focus on Task
• Accommodate Range of Users
• Accommodate Technical Needs
• User-Controller Interface Functions

7
UsabilityShared Responsibility

• Interface layers, e.g., Website
• Operating system MS-Windows, iMac, Unix
• Browser Netscape, Opera, Internet Explorer,
  Mozilla, Konqueror
• Site interface Navigation, design
• Inconsistency is confusing to users

8
History Usability before computers

• Shape of handle, direction of sharp edge indicate
  proper use

• Carelman Coffeepot for Masochists

9
Different Layers of Interaction

• Operating System Interface
• Application Interface
• Website Interface

10
User Interface Focal Points

• Issues
• Purpose
• Audience
• Media
• Many disciplines involved
• Graphical Communication principles apply!
• Screen presents information in two dim.

11
Presentation Topics

• History of usability
• Theory of usability
• Norman
• Shneidermann
• Nardi
• Dix
• Usability outside ICT

12
Usability Overview

• Introduction
• History
• Theory
• Computer User Interfaces
• World Wide Web
• Assignment
• Accompanying Website

13
Early Usability

• Lucy Suchman filmed dozens of hours of use of
  Xerox copiers in 1970s
• complex machines allow magnification, reduction,
  two-sided copying, collation
• most users couldnt operate machines easily
• most uses involved single copies of 1-2 pp.
• Solution green button
• Lesson analyze task, frequency

14
Research Terminology

• Human Factors (US)
• Cognitive Ergonomics (Europe)
• Human-Computer Interaction
• Usability

15
Usability Principles

• Design
• with the user in mind
• with the users usage in mind
• to make errors hard, if not impossible
• to provide proper feedback
• Logical but not obvious

16
Why Usability as CS Research?

• Early computer users were the programmers
  themselves
• Aware of illogical design
• Aware of cause of misbehaviour by application
• Nowadays computer programmers are hardly ever the
  intended users
• Illogical design cannot be explained
• Misbehaviour cannot be explained

17
Usability Focus

• Intuitive interface
• User does not care about programming issues
• Usability Expert ensures
• Program purpose, status clear
• User is guided through application
• User is given proper feedback
• Consistency with co-operating interfaces

18
Usability Overview

• Introduction
• History
• Theory
• Computer User Interfaces
• World Wide Web
• Assignment
• Accompanying Website

19
Usability Theory

• Theory presented is based on Norman
• Affordances
• Mental and Conceptual Models
• Natural Mapping
• Direct Manipulation
• User Centered Design

20
Donald A. Norman

• Design of Everyday Things
• Focus on making design simple and easy to use
• Obvious, but hard to accomplish
• Personal Homepage http//www.jnd.org/

21
Normans Homepage
22
Affordances

• Oxford Advanced Learners Dictionary
• afford 3. provide sth give sth.

Affordances are the actions an object is
obviously suited for. Handle grabbing,
pulling Switch toggling on and off Dial
turning
23
Incorrect Affordances

• An object gives wrong information on proper
  action
• Doors sign telling you to pull will not work if
  a handle is designed improperly
• Remember users tends to blame themselves even
  though the design is flawed

24
Mental Models

• Experience of users
• Culturally determined
• Model of the world
• Design in line with mental model makes errors
  less likely to occur

25
Mental Models

• Excel suggests a clear model
• accountants ledgers
• Internal complexity hidden
• Immediately popular
• Word Processors -- Paper Document

26
Conceptual Models

• Model of objects behaviour
• Based on mental model
• User infers conceptual model from design!
• Goal keep this inference easy, exploit prior
  mental models
• Example thermostat

27
Natural Mapping

• Mapping is association
• Design to make associations natural
• files in trash can will be discarded
• Culturally biased
• Western world red is stop
• China (communist) red is go

28
Direct Manipulation

• Action on object itself
• fix temperature of gas burners vs. electrical
  coils
• Programs
• Moving window via x,y coordinates vs. dragging
• Dragging, then dropping a file into trash can
• Activating a program by pressing a button
• Combining Natural Mapping and Direct Manipulation
  improves ease of use
• but not easy -- consider search engine interfaces

29
User-Centered Design

• Standardise, but provide aids
• Provide feedback to visualise the invisible
• Automate but keep task the same
• Do not over-automate!
• Change tasks nature
• Simplification
• Breaking up complex tasks

30
Usability Overview

• Introduction
• History
• Theory
• Computer User Interfaces
• World Wide Web
• Assignment
• Accompanying Website

31
Computer User Interfaces

• Different layers
• Operating System
• Graphical User Interface of Operating System
• Graphical User Interface of Application
• Why so many Layers?

32
Early Computer Interfaces

• Text based due to technology
• Complex vocabulary
• rm unix command to remove a file
• CTRLK CTRLB make text bold in a text-based
  word processing application
• Learning commands difficult
• Once learned, quick to apply

33
Apple

• Introduction of first widespread Graphical User
  Interface
• Use of direct manipulation
• Intuitive to learn

34
Apple II GUI

• Black and White
• Standardised
• Click to open
• start a program (.exe)
• start appropriate program for data file (.doc,
  .ppt, etc.)
• view directory contents
• Drag to move
• Trash to remove
• Files, Floppies !

35
Apple iMac GUI

• Colour GUI
• Concepts stayed the same!
• Click to open
• Drag to move
• Trash to remove
• File
• Floppies
• CDs

36
Apples Direct Manipulation

• Only GUI exists
• OS is invisible except through GUI
• No cryptic commands
• Standardised to keep things consistent
• All tasks available through GUI

37
X-Windows

• GUI application on top of UNIX OS
• Not one GUI
• Sun Solaris
• Motif and derivatives
• GNOME and KDE
• Command-based actions still required
• Terminal Window
• Cryptic commands (grep, less, cut, ls,)

38
Sun Solaris
39
Motif
40
FVWM FVWM 95
41
GNOME and KDE
42
Microsoft

• Based on MS-DOS
• First MS-Windows version similar to X-Windows
• OS MS-DOS
• MS-Windows MS-DOS application
• MS-DOS more and more hidden
• Still requires DOS-box for some commands

43
MS Windows 3.1
44
Windows 95
45
Windows NT 3.51
46
Windows NT 4
47
Windows Millenium Edition
48
Windows 2000
49
Windows XP
50
Applications

• Text Processing
• Early Command Based Applications
• Emacs (Unix)
• Wordstar (DOS)
• WYSIWYG What You See Is What You Get
• Word (Microsoft)
• Word Perfect (Corel)
• StarOffice (Sun)

51
GUI issues

• Inconsistency
• Managing complexity
• Superfluous GUI complexity
• decoration (Tuftes ducks), e.g., most web
  banners
• complexity not mirrored in application
• Conceptual or mental model flaws -- detect
• Which button publishes this on the web?
• Mapping errors
• not finding existing functionality

52
Usability Overview

• Introduction
• History
• Theory
• Computer User Interfaces
• World Wide Web
• Assignment
• Accompanying Website

53
World Wide Web

• Initially text-based
• Application Interface to texts on different
  computers
• Many different interfaces
• Increasing complexity

54
What is WWW?

• Segment of the internet
• Tim Berners-Lee (CERN)
• Roots in SGML gt HTML
• Initially only simple texts
• Semantical mark-up language based on tags
• Emphasis ltemgtimportantlt/emgt
• Contains also representational tags
• Bold ltboldgtimportantlt/boldgt

55
The Early Days
56
Layout Issues

• Work-around limitations
• Abuse of semantical tagging to achieve layout
• E.g. tables
• Browser War
• Add features
• Incompatibility

57
Basic Navigation

• Semantical tag ltagt
• Framesets introduced to create navigational
  overview
• Implementation differs
• Not guaranteed to work similarly in all browsers
• Different attributes needed in different browsers
• No semantical tagging

58
Frameset code
59
Frameset Displayed
60
Alternative Navigation

• Java applets, Javascript, Flash,
• Program inside page
• Mostly designed for navigation only
• Problems
• Mostly used in combination with framesets
• Content and Action not separated

61
Why Semantical Tagging

• Enhances searching capabilities
• Enhances ability to format for different media
• Paper
• Screen
• CD

62
Cascading Style Sheets

• Introduced to separate content and display
• Initially used on HTML only
• Extended to be used on XML
• XML allows for more semantic tagging
• XML allows for user defined tags
• One source for many alternative media

63
Web Applictions

• Each page on Internet is application
• Provides navigation
• Complex applications
• Perseus Project
• Visually Sorting Data Applet

64
Perseus Project

• Web interface to database
• Information on Greek and Latin History
• Allows for different views based on browser
  capabilities
• http//www.perseus.tufts.edu/

65
Perseus Project Home
66
Iliad in Transliteration
67
Perseus Settings
68
Iliad in Greek Font
69
Commentaries on Iliad
70
Visually Sorting Data Applet

• JAVA program to sort data
• Purpose to acquire information on relationships
• Interface simple, but complex
• Requires trial and error to learn how to use even
  though instructions available
• Users hardly ever read complex instructions
• http//hagen.let.rug.nl/s0863408/Vis/VisPage.html

71
Visually Sorting Data Applet
72
Usability Overview

• Introduction
• History
• Theory
• Computer User Interfaces
• World Wide Web
• Exercise
• Accompanying Website

73
(Optional) Exercise

• Usability evaluation
• Faculty homepages
• Faculty members homepages
• http//odur.let.rug.nl/evdhout/usability/assignme
  nt/index.html

74
Exercise Details

• Short introduction to usability.
• Analysis of the usability of each websites
  individually (pick two).
• Conclusions on the usability of each website
  individually, providing suggestions for
  improvement. Focus on graphical elements.
• Comparative analysis of the websites.
• A reasoned selection of what you consider to be
  the better website with respect to usability
• Overall conclusion and summary.

75
Usability Overview

• Introduction
• History
• Theory
• Computer User Interfaces
• World Wide Web
• Assignment
• Accompanying Website

76
Accompanying website

• http//let.rug.nl/evdhout/usability/index.html
• Provides
• Theory
• Background websites
• Further reading materials and pointers