The Future of the Web:Visual, Social, Universal

Ben ShneidermanBen Shneiderman(ben@cs.umd.edu)(ben@cs.umd.edu)

Director, Human-Computer Interaction Laboratory Director, Human-Computer Interaction Laboratory Professor, Department of Computer ScienceProfessor, Department of Computer Science

Member, Institutes for Advanced Computer Studies &Member, Institutes for Advanced Computer Studies &Systems ResearchSystems Research

University of MarylandUniversity of MarylandCollege Park, MD 20742College Park, MD 20742

Human-Computer Interaction Laboratory

Interdisciplinary research community - Computer Science & Psychology - Information Studies & Education (www.cs.umd.edu/hcil)

User Interface Design Goals

Cognitively comprehensible:Consistent, predictable & controllable

Affectively acceptable: Mastery, satisfaction & responsibility

NOT:

Adaptive, autonomous & anthropomorphic

User Interface Design Goals

Cognitively comprehensible:Consistent, predictable & controllable

Affectively acceptable: Mastery, satisfaction & responsibility

NOT:

Adaptive, autonomous & anthropomorphic

ConsistentPredictable

Controllable

Design IssuesDesign 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/DTUIhcibib.org

usableweb.com

Scientific ApproachScientific Approach (beyond user friendly)(beyond user friendly)

Specify users and tasksSpecify users and tasks Predict and measure Predict and measure

time to learntime to learn speed of performancespeed of performance rate of human errorsrate of human errors human retention over timehuman retention over time

Assess subjective satisfaction Assess subjective satisfaction (Questionnaire for User (Questionnaire for User Interaction Satisfaction 7.0, Interaction Satisfaction 7.0, www.lap.umd.edu/QUIS/index.html)www.lap.umd.edu/QUIS/index.html)

Accommodate individual differencesAccommodate individual differences Consider social, organizational & cultural contextConsider social, organizational & cultural context

U.S. Library of CongressU.S. Library of Congress

Scholars, Journalists, CitizensScholars, Journalists, Citizens

Teachers, StudentsTeachers, Students

Visible Human Explorer (NLM)Visible Human Explorer (NLM)

DoctorsDoctors

SurgeonsSurgeons

ResearchersResearchers

StudentsStudents

NASA Environmental DataNASA Environmental Data

ScientistsScientists

FarmersFarmers

Land plannersLand planners

StudentsStudents

U.S. Bureau of CensusU.S. Bureau of Census

Economists, Policy Economists, Policy makers, Journalistsmakers, Journalists

Teachers, StudentsTeachers, Students

Planning the Future:

Old Computing Is About What Computers Can Do,

New Computing Is About What

Users Can Do

Old Metrics: Computer-Centered Old Metrics: Computer-Centered

Network bandwidthNetwork bandwidth Processor speedsProcessor speeds Web pages and page visitsWeb pages and page visits Server capacity & reliabilityServer capacity & reliability Database sizes for images, videos, music, Database sizes for images, videos, music,

statistics, remote sensing statistics, remote sensing System response timesSystem response times

Web Design Strategies to Empower Users:

Visual, Social, Universal

New Metrics: User-centeredNew Metrics: User-centered

1) Visual Design1) Visual Design Speed of performance on benchmark tasksSpeed of performance on benchmark tasks Error rates & recovery patterns Error rates & recovery patterns Retention & familiarityRetention & familiarity

2) Social Support2) Social Support Capacity to communicate with othersCapacity to communicate with others Degree of empathy, trust, privacy & securityDegree of empathy, trust, privacy & security Pace of cooperation & knowledge exchangePace of cooperation & knowledge exchange

3) Universal Usability3) Universal Usability Range of technology supportedRange of technology supported Diversity of users accommodatedDiversity of users accommodated Support for novices & expertsSupport for novices & experts

Application Explosions Application Explosions

E-commerce Sales, Sales, Sales Information, customer support & service New partnerships for integrated services Business to Business (B2B) opportunities

Medicine & healthcare Tele-medicine consultation & information sharing More informed and active patients New patient-doctor relationships Graphical patient histories: diagnosis, assessment, research

ConsistentPredictable

Controllable

E-commerce MetricsE-commerce Metrics

Speed in locating known items in a catalogSpeed in locating known items in a catalog Broad/shallow designs for exploration & browsingBroad/shallow designs for exploration & browsing Causes of abandoned shopping basketsCauses of abandoned shopping baskets Return visitors profileReturn visitors profile Purchases as a function of session length & path Purchases as a function of session length & path Impact of advertisements & publicityImpact of advertisements & publicity Sources of referrals & destinations on exitSources of referrals & destinations on exit Market share & comparison with competitorsMarket share & comparison with competitors Number of forgotten/unserved usersNumber of forgotten/unserved users

Application ExplosionsApplication Explosions

Educational technology Distance Learning & on-demand courses Just-in-time training Active learning, teamwork & project orientation Philosophy: Relate-Create-Donate

Tele-democracy Government information and services Online voting, licenses, payments Participation in political processes Campaign contributions

ConsistentPredictable

Controllable

New ChallengesNew Challenges 1) Visual Design1) Visual Design

Advanced Graphical User Interfaces Advanced Graphical User Interfaces Information VisualizationInformation Visualization Dynamic queries & query previewsDynamic queries & query previews

2) Social Support2) Social Support From 100-person listserv to million-person communitiesFrom 100-person listserv to million-person communities Instant messaging, team coordination, knowledge managementInstant messaging, team coordination, knowledge management Medical support groups as empathic communitiesMedical support groups as empathic communities

3) Universal Usability Cope with technology variety Accommodate diverse users Reduce complexity & promote evolutionary learning

1) Visual Design1) Visual Design

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

ConsistentPredictable

Controllable

Information Visualization: DefinitionInformation Visualization: DefinitionCompact graphical presentation and

user interface for

manipulating large numbers of items (102 - 106),

possibly extracted from far larger datasets.

Enables users to make

discoveries,

decisions, or

explanations

about

patterns (trend, cluster, gap, outlier...),

groups of items, or

individual items.

Customer Analysis Perspective addresses:

Which of my highest-spending customers are my most profitable?

Which customers should I target for cross-sell/up-sell opportunities?

Temporal Info Viz - LifeLinesTemporal Info Viz - LifeLines

LifeLines

Treemap - view large trees with node valuesTreemap - view large trees with node values

Space fillingSpace filling Space limitedSpace limited Color codingColor coding Size codingSize coding Requires learningRequires learning

Shneiderman, ACM Trans. on Graphics, 1992 www.cs.umd.edu/hcil/treemaps

TreeViz (Mac, Johnson, 1992)NBA-Tree(Sun, Turo, 1993)Winsurfer (Teittinen, 1996)Diskmapper (Windows, Micrologic)Treemap97 (Windows, UMd)

Treemap - Stock market, clustered by industryTreemap - Stock market, clustered by industry

Information Visualization: MantraInformation 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

2) Social Support: Concepts2) Social Support: Concepts Online communities

E-commerce customer service & consumer conversations Medical support groups & information exchange Educational discussions & teamwork Neighborhood forums & political organizing

Technologies Synchronous text: Instant messaging, chat rooms Asynchronous text: Listservs, bulletin boards, newsgroups Audio,video, virtual realities

2) Social Support: Goals2) Social Support: Goals Supporting Sociability

People: Target a population Purposes: Clearly state focus Policies: Make expectations explicit

behavior, privacy, moderation, joining rules

Designing Usability Users: Know the users Tasks: Understand frequencies and sequences Systems: Choose seamless combinations of tools

Online Communities: Supporting Sociability, Designing Usability Jenny Preece, John Wiley & Sons, June 2000

ConsistentPredictable

Controllable

2) Social Support: Trust2) Social Support: Trust

Invite participation by ensuring trustInvite participation by ensuring trust Disclose patterns of past performance Provide references from past and current users Get certifications from third parties Make policies for privacy & security easy to find & read

Accelerate action by clarifying responsibility Clarify each participant's responsibilities Provide clear guarantees with compensation Describe dispute resolution and mediation services

Communications of the ACM, Special Issue on Trust

3) Universal Usability Technology variety:

Support broad range of hardware, software, and network access

User diversity: Accommodate users with different skills, knowledge, age, gender, literacy, culture, income, disabilities, disabling conditions (mobility, injury, noise, light)...

Gaps in user knowledge: Bridge the gap between what users know and what they need to know

Communications of the ACM, May 2000

ConsistentPredictable

Controllable

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 Laptops Large Desktop or Wall Display 30,000 480,000 3,840,000 pixels

Software Versions Compatibility File conversion Multiple platforms

Device Independence Input: keyboard, speech,... Output: visual, auditory,... Conversion: Text-speech Speech-text,...

1 to 100 range in network bandwidth

9.6K 56K 10,000Kbps

Language & Culture Western, Eastern, developing...

Personality Introvert vs extravert Thinking vs feeling Risk aversion Locus of control Planful vs playful

User diversity: Accommodate different users

Skills Computer newbie to hacker Knowledge Domain novice to expert

Figure 4: The second challenge is to accommodate the enormous diversity of users.

Age Young to oldGender Male or FemaleIncome Impoverished to wealthy

Disabilities Visual, auditory, motoric, cognitive

Disabling conditions Mobility, injury, noise, sunlight

Online help Context sensitive, tables of contents, Indexes, Keyword search, FAQs, Newsgroups, Chat rooms Online communities

Gaps in User Knowledge - StrategiesBridge the gap between what users know and

what they need to know

Design Layered Level-structured Task-oriented Training

Fade-able scaffolding Training wheels Minimalist

Online Learning (evolutionary, phased) Introductory tutorials Getting started manuals, Cue cards Walkthroughs/Demos Minimalist/Active

Customer service Email Phone Help desks

Thomas Jefferson

I feel... an ardent desire to see knowledge so disseminated through the mass of mankind that it may...reach even the extremes of society: beggars and kings.

-- Reply to American Philosophical Society, 1808

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