Human-Computer Interaction Laboratory Interdisciplinary research community

1. Leonardo's Laptop: Human Needs and the New ComputingBen ShneidermanFounding Director (1983-2000), Human-Computer Interaction Laboratory Professor, Department of Computer ScienceMember, Institutes for Advanced Computer Studies &Systems ResearchUniversity of Marylandben@cs.umd.edu

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

3. 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

4. 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

5. Library of Congress • Scholars, Journalists, Citizens • Teachers, Students

6. Visible Human Explorer (NLM) • Doctors • Surgeons • Researchers • Students

7. NASA Environmental Data • Scientists • Farmers • Land planners • Students

8. Bureau of Census • Economists, Policy makers, Journalists • Teachers, Students

9. Leonardo da Vinci (1452-1519) Renaissance Man • Painter • Inventor • Visionary • Mathematician • Philosopher • Engineer

10. Mona Lisa

11. Lady with Ermine & Leda with Swan

12. Last Supper Fresco

13. Remarkable Drawing Skill

14. Faces of Old Men

15. Anatomical Drawings

16. Machine Gun and Giant Crossbow

17. Why Leonardo Inspires Us He integrated - Scientific outlook - Practical technology - Artistic skill

18. Leonardo: An Inspirational Muse Three lessons: 1) Human needs drive innovation 2) Universal usability 3) Creativity support tools

19. 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

20. 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)

21. Range of Activities Collect: Information Relate: Communication Create: Innovation Donate: Dissemination

22. Periodic table Relationships: Family & Friends Colleagues & Neighbors Members & Residents Citizenry & Markets Activities: Collect Relate Create Donate

23. Periodic table Relationships: Family & Friends Colleagues & Neighbors Members & Residents Citizenry & Markets Activities: Collect Relate Create Donate Skeptics corner - Aren’t relationships more complex - Are these useful activities?

24. Examples: Collecting information Relationships: Family & Friends Colleagues & Neighbors Members & Residents Citizenry & Markets Activities: Collect Relate Create Donate LifeLines InfoDoor InfoWall WebBush

25. Examples: Relating to others Relationships: Family & Friends Colleagues & Neighbors Members & Residents Citizenry & Markets Activities: Collect Relate Create Donate

26. Examples: Creating a future Relationships: Family & Friends Colleagues & Neighbors Members & Residents Citizenry & Markets Activities: Collect Relate Create Donate

27. Examples: Disseminating & Leading Relationships: Family & Friends Colleagues & Neighbors Members & Residents Citizenry & Markets Activities: Collect Relate Create Donate

28. Human needs drive innovation Relationships: Family & Friends Colleagues & Neighbors Members & Residents Citizenry & Markets Activities: Collect Relate Create Donate

29. 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

30. 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 Skeptics corner - Dumbing down - Lowest common denominator

31. 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

32. 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.

33. 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

34. 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

35. 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

36. 1 to 100 range in network bandwidth 9.6K 56K 10,000Kbps Technology variety: Support broad range of hardware, software, and network access Device Independence Input: keyboard, speech,... Output: visual, auditory,... Conversion: Text-speech Speech-text,... 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

37. 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 Disabilities Visual, auditory, motoric, cognitiveDisabling conditions Mobility, injury, noise, sunlight Age Young to old Gender Male or Female Income Impoverished to wealthy Skills Computer newbie to hacker Knowledge Domain novice to expert

38. Gaps in User Knowledge - Strategies Bridge the gap between what users know and what they need to know Online Learning (evolutionary, phased) Introductory tutorials Getting started manuals, Cue cards Walkthroughs/Demos Minimalist/Active Design Layered Level-structured Task-oriented 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

39. 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

40. 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

41. 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

42. 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)

43. 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

45. 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

46. Information Visualization: Data Types • 1-D Linear Document Lens, SeeSoft, Info Mural, Value Bars • 2-D Map GIS, ArcView, PageMaker, Medical imagery • 3-D World CAD, Medical, Molecules, Architecture • Multi-Dim Parallel Coordinates, Spotfire, XGobi, Visage, Influence Explorer, TableLens, DEVise • Temporal Perspective Wall, LifeLines, Lifestreams, Project Managers, DataSpiral • Tree Cone/Cam/Hyperbolic, TreeBrowser, Treemap • Network Netmap, netViz, SeeNet, Butterfly, Multi-trees (Online Library of Information Visualization Environments) otal.umd.edu/Olive

47. Customer Histories

48. LifeLines

49. 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)

50. Treemap - Stock market, clustered by industry