SE 431 Human Computer Interactions Jamal Nasir

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

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

Iteration At every stage! 4 Design Prototype Evaluate

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

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 (?)

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

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

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

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

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

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

Context –Computing in 1945 Harvard Mark I : 55 feet long, 8 feet high, 5 tons 13

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

As We May Think 15 Picture from Demo at

Memex never built… or was it? 16 Memex #001 by Trevor Smith,

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

SketchPad – Sutherland (1963) 18

Dynabook – Kay (1974) 19

Xerox Star – 1 st Commercial GUI (1981) 20

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

The Future 22 ?