1. Human-Centered Design

2.  Users’ tasks and goals are the driving force behind development  Users are consulted throughout development  All design decisions are taken from within the context of the users, their work, and their environment  Attentive to human abilities, goals, and desires

3. Why is HCI Important?  UI is the major part of work for “real” programs  approximately 50%  Bad user interfaces cost  money  5% satisfaction up to 85% profits  reputation of organization (e.g., brand loyalty)  lives (Therac-25)  User interfaces hard to get right  people are unpredictable  intuition of designers often wrong

4.  Nearly 25% of all applications projects fail. Why?  overrun budgets & management pulls plug  others complete, but are too hard to learn/use  Solution is user-centered design. Why?  easier to learn & use products sell better  can help keep a product on schedule  finding problems early makes them easier to fix!  training costs reduced

5. User Interface Development Process

6. Usability  According to the ISO:  The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments  This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals

7. Usability/User Experience Goals  Set goals for early & later use to measure progress  Goals often have tradeoffs, so prioritize  Example goals  Learnable  faster the 2nd time & so on  Memorable  from session to session  Flexible  multiple ways to do tasks  Efficient  perform tasks quickly  Robust  minimal error rates  good feedback so user can recover  Discoverable  learn new features over time  Pleasing  high user satisfaction  Fun

8. Who Creates UIs?  A team of specialists (ideally)  graphic designers  interaction / interface designers  information architects  technical writers  marketers  test engineers  usability engineers  software engineers  customers

9. Knowledge  Design  Applied Psychology  Computer Science  There are multiple strands, sometimes in parallel, sometimes cross-fertilizing.  Goal is not to advocate, but explain.

10. History http://en.wikipedia.org/wiki/Bauhaus

11.  “Form Follows Function”  -- Walter Gropius: funder of Bauhaus school  The shape of a building or object should be primarily based upon its intended function or purpose  Design for People, design for manufacturing.  Le Corbusier’s assertion that “a house is a machine for living in.”

12.  Vannevar Bush

13.  Capturing, Storing, Retrieving, Sharing Information  Interactive!  Human-Centered  Founds NSF/DARPA  and of University research at scale as forming the leading edge of applied research

14. Memex system  The world’s first hypertext  The idea is that all the world’s information would be available on a knowledge worker’s desktop.  Information storage and retrieval were key parts of this vision.  What’s especially prescient is the vision outlined a plan for sharing ideas.  People could author “trails” through the world’s information, save them for later use, and share them with others.

16.  But, you’re not always at your desk  You want technology to come with you.  And knowledge workers need to produce content as well as consume it.  And the world isn’t just textual, it’s also visual.  So, Bush imagined you’d wear a camera and use it to capture stuff.  -- most of us keep our mobile computation and camera in our pocket.

18. Digital Computing  Feb 14, 1946 ENIAC -- Designed by John Mauchly and J. Presper Eckert.  was the first large-scale, electronic, digital computer capable of being reprogrammed to solve a full range of computing problems  weighed almost 30 tons. Input was possible from an IBM card reader, while an IBM card punch was used for output.

20. Compilers  The idea of creating tools to empower users has a long and storied history, beginning with the first compiler -- Grace Hopper’s invention in the early 1950s  She conceptualized how improved tools could provide a much wider audience with access to computation.  In the intervening years, good programming environments for the desktop and web enabled legions of developers to create the content that helped put a PC on every desks.

22. Memex Inspires Doug Engelbart Graphical UI

23. Memex inspires Mouse, Hypertext

24. Memex inspires Alan Kay  PARC, where he fleshes out his vision of a Dynabook – (laptop, tablet pc)  “The best way to predict the future is to invent it”

25. Inspiration

26. “Good artists borrow, great artists steal” - Pablo Picasso Les Demoiselles d'Avignon 19th century Fang sculpture

27. Course Values  This story demonstrates several principles that form the core values of this course. First, as Vannevar Bush showed us

28. Course Values  People  designs are for people. The success of our field is determined by how much we empower people. Second,

29. Course Values  People  Prototype - rapid prototyping is both essential and tractable, even for highly futuristic technologies, helps us evolve our ideas, learn from their use, and communicate to others.  Alan Kay built the Dynabook out of cardboard! Bush didn’t just say Memex would help knowledge work. He painted a rich picture of how, and even produce sketches and an implementation plan.

30. Course Values  People  Prototype  Compare  Third, it’s essential to create, evaluate, and compare many alternatives. Doug’s group made a whole lot of input devices before settling on the mouse. Fourth, designs often improve through iteration.

31. Course Values  People  Prototype  Compare  Iterate  After the input bake-off, Engelbart’s group wasn’t done. They used the best ideas themselves, watched others use them, and continued both controlled and informal experiments. Fifth,

32. Course Values  People  Prototype  Compare  Iterate  Principles  theory can help inspire designs, and clarify what their salient differences are. The theories of Alan Newell, Stu Card, and colleagues helped guide PARC’s designers.