Leonardo's Laptop:
Human Needs and the New Computing
Ben Shneiderman
Founding Director (1983-2000), Human-Computer Interaction Laboratory
Professor, Department of Computer Science
Member, Institutes for Advanced Computer Studies &
Systems Research
University of Maryland
ben@cs.umd.edu
Human-Computer Interaction Laboratory
Interdisciplinary research community
- Computer Science & Psychology
- Information Studies & Education
(www.cs.umd.edu/hcil)
Scientific Approach (beyond user friendly)


Specify users and tasks
Predict and measure
time to learn
 speed of performance
 rate of human errors
 human retention over time


Assess subjective satisfaction
(Questionnaire for User Interface Satisfaction)


Accommodate individual differences
Consider social, organizational & cultural context
Design Issues

Input devices & strategies
Keyboards, pointing devices, voice
 Direct manipulation
 Menus, forms, commands


Output devices & formats
Screens, windows, color, sound
 Text, tables, graphics
 Instructions, messages, help



Collaboration & communities
Manuals, tutorials, training
www.awl.com/DTUI
usableweb.com
hcibib.org
useit.com
Library of Congress
Scholars,
Journalists, Citizens
Teachers,
Students
Visible Human Explorer (NLM)
Doctors
Surgeons
Researchers
Students
NASA Environmental Data
Scientists
Farmers
Land
planners
Students
Bureau of Census
Economists,
Policy
makers, Journalists
Teachers,
Students
Leonardo da Vinci (1452-1519)
Renaissance Man






Painter
Inventor
Visionary
Mathematician
Philosopher
Engineer
Mona Lisa
Lady with Ermine & Leda with Swan
Last Supper Fresco
Remarkable Drawing Skill
Faces of Old Men
Anatomical Drawings
Machine Gun and Giant Crossbow
Why Leonardo Inspires Us
He integrated
- Scientific outlook
- Practical technology
- Artistic skill
Leonardo: An Inspirational Muse
Three lessons:
1) Human needs drive innovation
2) Universal usability
3) Creativity support tools
1) Human needs drive innovation

Jefferson: Life, Liberty & the Pursuit of Happiness

Roosevelt: Freedom of speech & expression, religion,
from want, from fear

Maslow: Hierarchy of human needs






Physiological
Safety
Love
Esteem
Self-Actualization
Covey: Living, Loving, Learning & Leaving a legacy
Spectrum of relationships
Family & Friends
(2-20 close intimates)
Colleagues & Neighbors
(10-1000 regular encounters)
Members & Residents
(1000-1,000,000 professionals or city residents )
Citizenry & Markets
(larger communities)
Range of Activities
Collect:
Information
Relate:
Communication
Create:
Innovation
Donate:
Dissemination
Periodic table
Activities:
Relationships:
Family & Friends
Colleagues & Neighbors
Members & Residents
Citizenry & Markets
Collect
Relate Create Donate
Periodic table
Activities:
Relationships:
Collect
Relate Create Donate
Family & Friends
Colleagues & Neighbors
Members & Residents
Citizenry & Markets
Skeptics corner
- Aren’t relationships more complex
- Are these useful activities?
Examples: Collecting information
Activities:
Relationships:
Family & Friends
Colleagues & Neighbors
Members & Residents
Citizenry & Markets
Collect
LifeLines
InfoDoor
InfoWall
WebBush
Relate
Create
Donate
Examples: Relating to others
Activities:
Relationships:
Collect
Relate Create
Family & Friends
Empathic
support
Colleagues & Neighbors
Neighbor
.com
Members & Residents
Citizenry & Markets
Negotiated
expectations
Million
person
community
Donate
Examples: Creating a future
Activities:
Relationships:
Collect Relate
Create
Family & Friends
Vacation
plan
Colleagues & Neighbors
Business
strategy
Members & Residents
Urban
renewal
Citizenry & Markets
Policy
manifesto
Donate
Examples: Disseminating & Leading
Activities:
Relationships:
Family & Friends
Colleagues & Neighbors
Collect
Relate Create
Donate
Tell stories
Teach kids
Record events
Train novices
Members & Residents
Report decisions
Mentorship
Citizenry & Markets
Preserve history
Leadership
Human needs drive innovation
Activities:
Relationships:
Family & Friends
Collect
Photo
Finder
Relate
ICQ
Create
Donate
Gatherround.com
XXX.LANL
Colleagues & Neighbors
Photo
Quilt
Members & Residents
GlassEye
Citizenry & Markets
Ebay
Nasdaq
Napster
2) Universal Usability

Problem: Confusion, frustration, and remorse
dominate user experiences
Survey of 6000 users finds 5.1 hours/week wasted
 Incompatible files, interfaces, networks, hardware
 Poorly designed websites lacking accessibility policy


Solutions:
Raise user expectations
 Conduct research
 Provide practical tools & methods

2) Universal Usability

Problem: Confusion, frustration, and remorse
dominate user experiences
Survey of 6000 users finds 5.1 hours/week wasted
 Incompatible files, interfaces, networks, hardware
 Poorly designed websites lacking accessibility policy


Solutions:
Raise user expectations
 Conduct research
Skeptics corner
 Provide practical tools & methods - Dumbing down

- Lowest common denominator
2) Universal Usability

Problem: Confusion, frustration, and remorse
dominate user experiences
Survey of 6000 users finds 5.1 hours/week wasted
 Incompatible files, interfaces, networks, hardware
 Poorly designed websites lacking accessibility policy


Solutions:
Raise user expectations
 Conduct research
 Provide practical tools & methods

ACM Code of Ethics
In a fair society, all individuals would have
equal opportunity to participate
in, or benefit from, the use of
computer resources regardless of race,
sex, religion, age, disability, national
origin or other such similar factors.
Internet Use by Education - 1998

Percent of U.S. Households Using the Internet
Total U.S., Rural, Urban, and Central City Areas
Falling Through the Net: Defining the Digital Divide www.ntia.doc.gov
Internet Use by Income - 1998

Percent of U.S. Households Using the Internet
Total U.S., Rural, Urban, and Central City Areas
Falling Through
the Net:
Defining the
Digital Divide
www.ntia.doc.gov
Research Agenda

Technology variety:
Support broad range of hardware, software,
and network access

User diversity:
Accommodate users with different skills,
knowledge, age, gender, disabilities, disabling
conditions (mobility, injury, noise, sunlight),
literacy, culture, income, etc.

Gaps in user knowledge:
Bridge the gap between what users know and
what they need to know
Communications of the ACM, May 2000
Technology variety: Support broad range of
hardware, software, and network access
1 to 100 range in processor speeds
286 486
Pentium
1 to 100 range in screen sizes
Palm
devices
30,000
Device Independence
Input: keyboard, speech,...
Output: visual, auditory,...
Conversion: Text-speech
Speech-text,...
Software Versions
Laptops
480,000
Large Desktop or Wall Display
3,840,000 pixels
1 to 100 range in network bandwidth
9.6K 56K
10,000Kbps
Compatibility
File conversion
Multiple platforms
User diversity: Accommodate different users
Language & Culture
Western, Eastern, developing...
Personality
Introvert vs extravert
Thinking vs feeling
Risk aversion
Locus of control
Planful vs playful
Skills
Computer newbie to hacker
Knowledge
Domain novice to expert
Disabilities
Visual, auditory, motoric, cognitive
Disabling conditions
Mobility, injury, noise, sunlight
Age
Young to old
Gender
Male or Female
Income
Impoverished to wealthy
Gaps in User Knowledge - Strategies
Bridge the gap between what users know and
what they need to know Online Learning
Design
Layered
Level-structured
Task-oriented
(evolutionary, phased)
Introductory tutorials
Getting started manuals,
Cue cards
Walkthroughs/Demos
Minimalist/Active
Training
Fade-able scaffolding
Training wheels
Minimalist
Online help
Context sensitive, tables of contents,
Indexes, Keyword search,
FAQs, Newsgroups, Chat rooms
Online communities
Customer service
Email
Phone
Help desks
3) Creativity Support Tools
 More
people, more creative, more of the time
 Revolutionary
breakthroughs, paradigm shifts,
H-creativity
 Evolutionary,
normal science, music & art,
creative knowledge work
 Impromptu
everyday creativity
Eight Activities








1) Searching & browsing digital libraries
2) Consulting with peers & mentors
3) Visualizing data & processes
4) Thinking by free associations
5) Exploring solutions - What if tools
6) Composing artifacts & performances
7) Reviewing & replaying session histories
8) Disseminating results
Eight Activities








1) Searching & browsing digital libraries
2) Consulting with peers & mentors
3) Visualizing data & processes
4) Thinking by free associations
5) Exploring solutions - What if tools
6) Composing artifacts & performances
7) Reviewing & replaying session histories
8) Disseminating results
Skeptics corner
- Tools can limit imagination
- Not everyone wants to be creative
- Creativity can be malicious
3) Visualizing data & processes
The eye…
the window of the soul,
is the principal means
by which the central sense
can most completely and
abundantly appreciate
the infinite works of nature.
Leonardo da Vinci
(1452 - 1519)
Information Visualization: Using Vision to Think

Visual bandwidth is enormous
Human perceptual skills are remarkable
 Trend, cluster, gap, outlier...
 Color, size, shape, proximity...
 Human image storage is fast and vast


Opportunities
Spatial layouts & coordination
 Information visualization
 Scientific visualization & simulation
 Telepresence & augmented reality
 Virtual environments

Information Visualization: Mantra










Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Overview, zoom & filter, details-on-demand
Information Visualization: Data Types
Document Lens, SeeSoft, Info Mural, Value Bars

1-D Linear
2-D Map
3-D World
Multi-Dim

Temporal
Perspective Wall, LifeLines, Lifestreams,
Project Managers, DataSpiral

Tree
Network
Cone/Cam/Hyperbolic, TreeBrowser, Treemap




GIS, ArcView, PageMaker, Medical imagery
CAD, Medical, Molecules, Architecture
Parallel Coordinates, Spotfire, XGobi, Visage,
Influence Explorer, TableLens, DEVise
Netmap, netViz, SeeNet, Butterfly, Multi-trees
(Online Library of Information Visualization Environments)
otal.umd.edu/Olive
Customer Histories
LifeLines
Treemap - view large trees
Space filling
 Space limited
 Color coding
 Size coding
Requires learning


TreeViz (Mac, Johnson, 1992)
NBA-Tree(Sun, Turo, 1993)
Winsurfer (Teittinen, 1996)
Diskmapper (Windows, Micrologic)
Treemap97 (Windows, UMd)
(Shneiderman, ACM Trans. on Graphics, 1992)
Treemap - Stock market, clustered by industry
Leonardo da Vinci (1452-1519)
Three lessons:
1) Human needs drive innovation
2) Universal usability
3) Creativity support tools
ACM Conference on Universal Usability
Washington, DC
November 16-17, 2000
www.acm.org/sigchi/cuu
Human-Computer Interaction Laboratory
www.cs.umd.edu/hcil
For More Information

Visit the HCIL website for 200 papers & info on videos
(www.cs.umd.edu/hcil)

See Chapter 15 on Info Visualization
Shneiderman, B., Designing the User Interface:
Strategies for Effective Human-Computer Interaction:
Third Edition (1998) (www.aw.com/DTUI)

January 1999 book of readings:
Card, S., Mackinlay, J., and Shneiderman, B.
Information Visualization: Using Vision to Think