Usability - PowerPoint PPT Presentation

1 / 76
About This Presentation
Title:

Usability

Description:

Usability Graphical Communication 2001 John Nerbonne and Erik van den Hout Nerbonne_at_let.rug.nl Usability Overview Introduction History Theory Computer User Interfaces ... – PowerPoint PPT presentation

Number of Views:207
Avg rating:3.0/5.0
Slides: 77
Provided by: Erikvan3
Category:
Tags: gnome | usability

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com