1. SE 431 Human Computer Interactions Jamal Nasir

2. How to design & build good UIs UI Development process Usability goals User-centered design Design discovery Rapid prototyping Evaluation Programming SE 431 - HCI (Sp. 2015)2

3. User Interface Development Process 3 Design Exploration EvaluateProduction Proposal: Demos/ Lo Fi Prototypes (How) Work together to realize the design in detail Evaluate with Customers Design Discovery Customers, Products, Business, Marketing Customers, Products, Business, Marketing Design Definition: - Design Problem Statement - Targeted User Roles (Who) - Targeted User Tasks (What) - Design Direction Statements Specification: Hi Fidelity, Refined Design - Based on customer feedback - Foundation in product reality - Refined Design description Storyboard Customers: - Roles (Who) - Tasks (What) - Context (Stories) Marketing: - Business Priorities - Messages Technology: - Products - Architecture Design: - Leading/competing technologies Review & Iterate

4. Iteration At every stage! 4 Design Prototype Evaluate

5. Usability (?) According to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments This doesn’t mean you have to create a “dry” design 5

6. Usability/User Experience Goals  Learnable faster the 2 nd 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 6 Set goals early & later use to measure progress Goals often have tradeoffs, so prioritize Example goals (?)

7. Design Discovery Task Analysis & Contextual Inquiry Contextual Inquiry & Task Analysis  observe existing work practices  make sure key questions answered 7

8. Design Discovery Task Analysis & Contextual Inquiry Observe existing work practices  augment with self-report tools (e.g., ESM) 9/23/2014 8

9. Design Discovery Task Analysis & Contextual Inquiry Observe existing work practices  augment with self-report tools (e.g., ESM) Create examples & scenarios of actual use Discover tasks to design for Answer key questions about tasks & users “Try-out”new ideas before building software HCI+D: User Interface Design, Prototyping, and Evaluation9

10. Video Prototyping Illustrate how users will interact w/ system Unlike brainstorming… Quick to build Inexpensive Forces designers to consider details of how users will react to the design May better illustrate context of use 10 video prototyping contracts the design space

11. Rapid Prototyping Build a mock-up of design so you can test it Low fidelity techniques  paper sketches  cut, copy, paste Interactive prototyping tools  HTML, Flash, DENIM, SketchFlow, Balsamiq, Axure, proto.io, etc. UI builders  Expression Blend + Visual Studio, etc. 11 Fantasy Basketball

12. ESP Evaluation 12 Test with real customers (participants)  w/ interactive prototype  low-fi with paper “computer” Build models  GOMS Low-cost techniques  expert evaluation  walkthroughs  online testing

13. Context –Computing in 1945 Harvard Mark I : 55 feet long, 8 feet high, 5 tons http://piano.dsi.uminho.pt/museuv/indexmark.htm 13

14. http://www-eecs.mit.edu/AY95-96/events/bush/ Vannevar Bush Kicked Off Big Science MIT faculty member Coordinated WWII scientific effort Social contract for science ffederal government funds universities uuniversities do basic research hhelps economy & national defense “As We May Think”, the Atlantic Monthly, July 1945 Futuristic inventions / trends ? wwearable cameras to record life eencyclopedia for a nickel aautomatic transcripts of speech ttrails of discovery ccapture of nerve impulses MMemex 14

15. As We May Think 15 Picture from http://www.dynamicdiagrams.com/design/memex/model.htm#downloahttp://www.dynamicdiagrams.com/design/memex/model.htm#downloa Demo at http://www.dynamicdiagrams.com/case_studies/mit_memex.htmlhttp://www.dynamicdiagrams.com/case_studies/mit_memex.html

16. Memex never built… or was it? 16 Memex #001 by Trevor Smith, 2013 http://trevor.smith.name/memex/

17. Predicting → Inventing the Future Computers weren’t always like this… Computers don’t have to be like this! 17

18. SketchPad – Sutherland (1963) 18

19. Dynabook – Kay (1974) 19

20. Xerox Star – 1 st Commercial GUI (1981) 20

21. “The best way to predict the future is to invent it” Alan Kay 21

22. The Future 22 ?