Design A Design Process: User-Centred Design 1 CS349 - Design - PowerPoint PPT Presentation

Design A Design Process: User-Centred Design 1 CS349 - Design Process

User Centred Design (UCD) • To make things usable and useful, you need to understand the people who use your software. • UCD is a philosophy: – You ask real people about what they need – You ask people what problems they have with current solution – You think about the people who will use your software – You test your ideas with people • Developers are not people! CS349 - Design Process 2

User Centred Design: History Refined at Apple, with the Mac user-interface Process: – User studies: Bring in users, provide mockups, assess – Implementation: Iterate based in feedback – Usability studies: More users, more video, more analysis Problems: – Time: add 1-2 years to the development cycle – Changes: no “cutoff” for changes! Solution: – Manage through iteration (sim. Agile processes) CS349 - Design Process 3

UCD Principles • Understand users’ needs : build a product that meets real needs rather than building it because it can be built. • Design the UI first : design the UI first, and then design the architecture to support that UI • Iterate : You won’t create the best UI design on the first try; a great design requires iteration • Use it yourself : you’ll find obvious problems that can be fixed while it’s still easy to fix • Observe others using it : it’s critical to observe other people using your UI in a realistic way very early in the development cycle CS349 - Design Process 4

UCD Iteration Cycle 5 CS349 - Design Process

Iteration 6 CS349 - Design Process Frank Gehry, Walt Disney Concert Hall

UCD: Understanding Users 7 CS349 - Design Process

Observe Existing Solutions Understand the User Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality http://javlaskitsystem.se/2012/02/whats-the-waiter-doing-with-the-computer-screen/ 8 CS349 - Design Process

Exercise: Sending an Email Message Understand the User Pat wants to send her prof an email asking Observe existing solutions List scenarios about midterm coverage. She fires up her List functions required email client and clicks the “new message” by scenarios Prioritize functions List functions by freq. & button. A window opens with places to commonality put her prof’s email address, a subject, and the text of her message. Pat finds her prof’s email address and types it in. She enters a subject of “midterm coverage” and then types her message. Spellcheck highlights several spelling mistakes, which she edits to correct. Pat clicks the “send mail” button. The window disappears and in a moment there is a “ woosh ” to indicate it has been sent. Pat then checks the “sent mail” folder and finds a copy there. CS349 - Design Process 9

Exercise: Sending an Email Message Understand the User Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality 10 CS349 - Design Process

• Send email with attachment. Other Scenarios Understand the User Observe existing solutions • Send email to multiple recipients. List scenarios List functions required • Reply to a received email. by scenarios Prioritize functions • Forward an email to someone else. List functions by freq. & commonality • Create an email with rich text formatting. • Create an email based on a template. • Read incoming email. • Search for an email by sender/subject/date/ … • Delete an email. • Create a new mailbox. • Move an email to a mailbox. • Set up a new account • ... CS349 - Design Process 11

…are stories of people undertaking activities Understand the User Scenarios … Observe existing solutions with technology List scenarios List functions required …are a natural way to think by scenarios Prioritize functions – easy to understand (for developers and users) List functions by freq. & commonality – contain sequencing data …must be refined/elaborated with appropriate detail – exactly what user does – how UI changes in response …have pitfalls – typical crowds out the exceptional (exceptional uses and users) – often fail to catch “ oughts ” – cannot be formalized (also a strength) …have variations …should be retained – written vs. memorized vs. generated on demand CS349 - Design Process 12

List and Prioritize Functions List functions required by the scenarios Understand the User Observe existing solutions List scenarios – Some functions will be required by List functions required by scenarios several scenarios Prioritize functions List functions by freq. & commonality Prioritize Functions – Critical: Needed by early users to do something useful – Important: Required before shipping the product – Nice to Have: Nice, but unnecessary CS349 - Design Process 13

Understand: Usage Patterns Understand the User Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality By Many By Few Most people will do this task nearly Only some people will do this every time they use the application. task nearly every time they use the application. Frequent  Visible, few clicks  Suggested, few clicks Most people will do this task, but Only some people will do this not very often. task and not very often. Occasional  Suggested, more clicks  Hidden, more clicks 14 CS349 - Design Process

Frequent: visible, few clicks Understand the User Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality CS349 - Design Process 15

Occasional: hidden, many clicks Understand the User Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality CS349 - Design Process 16

UCD: Design the UI 17 CS349 - Design Process

Design the UI Design the UI • Identify/design widgets (components) and widget types (component types) Identify and design comp. Design comp. distributions to support prioritized functionality Test the design with users – e.g. text fields, buttons, etc. Document the design • Balance functionality with well-understood widget types – i.e. customized control vs. familiar controls • Assign attributes – Model: what data does it need? – Affordances: what can you do with it? – Presentation: how does it appear in the UI? CS349 - Design Process 18

Design the UI Design: Component Distribution Temporal distribution: – When components Identify and design comp. Design comp. distributions appear, the flow from one Test the design with users interface to another Document the design Spatial distribution: – Where components appear on an individual interface section – Use visual design & Gestalt principles CS349 - Design Process 19

Storyboards Quick way to sketch out sequence and schematics – could form the basis of a paper prototype Typically linked to a scenario from James Landay’s HCI lecture notes CS349 - Design Process 20

Macro and Micro Structure Interaction Sequences : macro-structure, convey the "big picture“ of system interaction. Interface Schematics : micro-structure, convey essential content, and functionality at individual steps of interaction. • Need both to describe a user interface Main Display Main Menu Sign-In Status select one of tabs selection Find Flight Change Seat Arrivals Find Change View Flight Seat Arrivals toronto honolulu from to time, city my trips select PICK PICK airport, List of Sign-In airline, or today 7 days Flights depart return Arrivals city CALENDAR CALENDAR error select flight ok already FIND FLIGHTS Booking signed-in Trips select trip GPS MAP save Edit Seat CS349 - Design Process 21

Interaction Sequences • Illustrate exemplary interaction paths (with alternate paths) – like a flow chart, but focusing on interface logic, not “back - end” logic Phone – “boxes and arrows” Book add new entry Edit Entry submit entry exists Match To Existing Entry CS349 - Design Process 22

Interaction Sequence Example Main Display select tab Labeled boxes and arrows Change View are usually enough, but Find Flight Seat Arrivals sometimes a more time, city my trips select airport, airline, or city extensive visual vocabulary List of Sign-In Flights may be helpful. Arrivals error select flight ok already signed-in Booking Trips select trip save Edit Seat 23 CS349 - Design Process

Visual Vocabulary • A standard set of graphical symbols and notation to describe something. • Qualities of a good UI design visual vocabulary (from JJG) – Whiteboard-compatible – Tool-independent – Small and self-contained • The UML tends to be too formal, too “high ceremony” • Jesse James Garret’s visual vocabulary: good, but web -centric – http://www.jjg.net/ia/visvocab/ • Find a consistent visual vocabulary that works for you. CS349 - Design Process 24