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

Design

A Design Process: User-Centred Design

CS349 - Design Process 1

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

CS349 - Design Process 5

6

Frank Gehry, Walt Disney Concert Hall

Iteration

CS349 - Design Process

UCD: Understanding Users

CS349 - Design Process 7

http://javlaskitsystem.se/2012/02/whats-the-waiter-doing-with-the-computer-screen/

Observe Existing Solutions

CS349 - Design Process 8

Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

Exercise: Sending an Email Message

Pat wants to send her prof an email asking about midterm coverage. She fires up her email client and clicks the “new message”

• button. A window opens with places to

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

Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

Exercise: Sending an Email Message

CS349 - Design Process 10

Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

Other Scenarios

• Send email with attachment.
• Send email to multiple recipients.
• Reply to a received email.
• Forward an email to someone else.
• 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

Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

Scenarios …

…are stories of people undertaking activities with technology …are a natural way to think – easy to understand (for developers and users) – 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 Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

List and Prioritize Functions

List functions required by the scenarios – Some functions will be required by several scenarios 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

Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

Understand: Usage Patterns

CS349 - Design Process 14

By Many By Few Frequent Most people will do this task nearly every time they use the application.  Visible, few clicks Only some people will do this task nearly every time they use the application.  Suggested, few clicks Occasional Most people will do this task, but not very often.  Suggested, more clicks Only some people will do this task and not very often.  Hidden, more clicks

Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

Frequent: visible, few clicks

CS349 - Design Process 15

Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

Occasional: hidden, many clicks

CS349 - Design Process 16

Observe existing solutions List scenarios List functions required by scenarios Prioritize functions List functions by freq. & commonality Understand the User

UCD: Design the UI

CS349 - Design Process 17

Design the UI

• Identify/design widgets (components)

and widget types (component types) to support prioritized functionality – e.g. text fields, buttons, etc.

• 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

Document the design Design the UI Identify and design comp. Design comp. distributions Test the design with users

Design: Component Distribution Temporal distribution: – When components appear, the flow from one interface to another Spatial distribution: – Where components appear on an individual interface section – Use visual design & Gestalt principles

CS349 - Design Process 19

Document the design Design the UI Identify and design comp. Design comp. distributions Test the design with users

Storyboards

Quick way to sketch out sequence and schematics – could form the basis of a paper prototype Typically linked to a scenario

CS349 - Design Process 20 from James Landay’s HCI lecture notes

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

CS349 - Design Process 21

Main Display Find Flight List of Flights Change Seat View Arrivals time, city select one of tabs selection Sign-In Edit Seat Trips Arrivals error

• k

select trip select airport, airline, or city Booking select flight my trips already signed-in save

Change Seat Find Flight Main Menu Arrivals toronto honolulu from to

CALENDAR

depart return today

CALENDAR

7 days

PICK

PICK FIND FLIGHTS

Sign-In Status GPS MAP

Interaction Sequences

• Illustrate exemplary interaction paths (with alternate paths)

– like a flow chart, but focusing on interface logic, not “back- end” logic – “boxes and arrows”

CS349 - Design Process 22

Match To Existing Entry entry exists Phone Book Edit Entry add new entry submit

Interaction Sequence Example

CS349 - Design Process 23

Labeled boxes and arrows are usually enough, but sometimes a more extensive visual vocabulary may be helpful.

Main Display Find Flight List of Flights Change Seat View Arrivals time, city select tab Sign-In Edit Seat Trips Arrivals error

• k

select trip select airport, airline, or city Booking select flight my trips already signed-in save

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

Interface Schematics (Wireframes)

Includes enough detail so that someone could begin designing and implementing system logic – visual arrangement of content/information – functionality of interface (widgets, forms, data) – navigational and content elements ordered to convey structure and meaning – indicates the relative significance of all elements Interface schematics are not the same as: – graphic design mockup – paper prototypes

CS349 - Design Process 25

Interface Schematic Example

CS349 - Design Process 26

Change Seat Find Flight Main Menu Arrivals When and where would you like to fly? toronto honolulu from to

CALENDAR

depart return today

CALENDAR

7 days

PICK PICK

shows calendar can enter natural text shows list of cities

FIND FLIGHTS

Sign-In Status GPS MAP Welcome <name>

SIGN-OUT

Please Sign-In

SIGN-IN

Find Flight Schematic: Sign-In Status Widget Schematic:

Note different sign-in and sign-out states.

Also fine to hand-sketch these, but sometimes using a simple drawing program is faster if there are revisions.

PICK

prev/next month

>> <<

june

selected day

Pick Widget Schematic:

Interface Schematic Example

Simple wireframe made with Pencil (http://pencil.evolus.vn/)

CS349 - Design Process 27

Interface Schematic Example

https://www.humaneinterface.net/ux-training-axure

CS349 - Design Process 28

Interface Schematic Tools

Wireframe drawing tools: – Pencil: http://pencil.evolus.vn/ (free, open source) – WireframeSkecther: http://wireframesketcher.com/ (paid) – Axure RP: https://www.axure.com/ (paid, but it’s possible to get a free student license) Image editing software: – Gimp: https://www.gimp.org/ (free, open source) – Inkscape: https://inkscape.org/ (free, open source) – Photoshop: http://www.photoshop.com/ (paid)

CS349 - Design Process 29

Graphic Design Mockups

• High fidelity

– colour, layout, type, shape

CS349 - Design Process 30

schematic mockup

Rebate Promotion DTL_PROMO_00 Use the Dream Room Planner to build your home theatre system. When you’re done, buy it online or print a list to take to a Wave

• dealer. Save you layouts and email them to

friends. You can view product information too.

Wave Home Theatre

Your Home Theatre dream begins when you chose one of our dream system bundles, or configure your own dream system using our wide range of components. Our dream systems will WOW you with brilliant images and awesome sound, and impress you with their sleek and sophisticated style.

Build

Launch Dream Room Planner Expanded GLOBAL HEADER used on MAIN only Don’t know much about home theatre? Looking to increase you knowledge? Let Wave give you a quick tour!

Learn

Learn about Wave Home Theatre LINK: LEARN_00 FOOTER

Wave Style

Canada promote tech or brand feature: DreamSystem

{call to action to view DreamSystem feature}

DreamSystem Feature DreamSystem Feature LINK: BUILD_00 DreamSystem image

X

Graphic Design Mockups

• High fidelity

– colour, layout, type, shape

CS349 - Design Process 31

schematic mockup

Design: Test with users

Prototyping – iteration and refinement! – might take successive versions to “get it right” Process – User studies: Bring in users, provide mockups, assess – Implementation: Iterate based in feedback – Usability studies: More users, more video, more analysis

CS349 - Design Process 34

Document the design Design the UI Identify and design comp. Design comp. distributions Test the design with users

AKA: Prototyping

Prototypes

A limited representation of a design that allows people to interact with it and to explore its suitability – Goal: Maximum Feedback for Minimum Effort Examples: – paper sketches/collage with “human computer processor” – slide show or video simulating the use of a system – physical models (wood, cardboard, etc.) – software or hardware with limited functionality

CS349 - Design Process 35

Prototype Objectives

Build “working” prototype from design work

• to aid in discussions with

stakeholders

• to help communication of ideas

among team members

• for user evaluation
• for technical/layout testing and

fine-tuning

CS349 - Design Process 36

Initial Design Refine Design High-fi Prototype

ideally, lots of iteration with design and evaluation

Evaluate Low-fi Prototype

Document the design Design the UI Identify and design comp. Design comp. distributions Test the design with users

What to Prototype?

Difficult, controversial, and critical areas Possible aspects to test: – Concepts and terminology – Navigation, task flow – Mental models – Documentation, help – Layout, colours, fonts, graphic elements, “brand” – Custom widgets – Performance metrics – Technical feasibility – Usefulness

CS349 - Design Process 37

Prototype Fidelity

Fidelity: faithfulness of prototype appearance and performance to final product. – Low fidelity: prototype doesn’t look much like final product,

• peration of the prototype may be simulated and slower.

– High fidelity: prototype looks and operates like the real product.

CS349 - Design Process 38

high-fi low-fi

fidelity

Low vs. High Fidelity Prototypes Low-fi prototypes are easy and fast compared to high-fi – faster, easier enables more iteration Low-fi prototypes are more creative – faster, less detail encourages experimentation High-fi prototypes can give false sense of completeness – people may critique it as a finished product (which it isn’t) High-fi prototypes are more accurate – comments are directly related to final product design

CS349 - Design Process 39

Paper Prototyping

“Usability Testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person playing computer, who doesn’t explain how the interface is intended to work.” (Snyder, 2003, p. 4)

CS349 - Design Process 40

http://groups.csail.mit.edu/graphics/classes/6.831/paper-prototypes/index.html

Paper Prototype Evaluation Example http://youtu.be/GrV2SZuRPv0

CS349 - Design Process 41

Wizard-of-Oz Technique (WoZ)

Evaluate unimplemented technology by using a human to simulate the response of a system Much easier to do WoZ simulation than implement complex features

CS349 - Design Process 42

“The man behind the curtain.”

Paper Prototyping Image Quality

Rendering: How good should it look? – Good enough to elicit feedback about critical/risky design issues Creation speed is of the essence! Modifications - when? – While user is present; get immediate feedback. Make changes without losing users’ context. – Consider allowing the user to make changes Coding effort in paper prototyping is always zero – No code to write or rewrite until design is stabilized

CS349 - Design Process 43

Interactive Prototype Example

https://youtu.be/sbYTD8uJV1E

CS349 - Design Process 44

Interactive Prototyping Tools

– Figma: https://www.figma.com (free/paid) – Axure RP: https://www.axure.com/ (paid, but it’s possible to get a free student license) – Sketch: https://sketchapp.com/ (paid, Mac only) – inVision: https://sketchapp.com/ (free/paid) – UXPin: https://www.uxpin.com/ (paid)

CS349 - Design Process 45

When and How to Prototype

CS349 - Design Process 46

Rough out interface style Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Limited field testing Alpha/Beta tests Low fidelity paper prototypes or physical models Medium fidelity interactive prototypes High fidelity interactive prototypes / restricted systems Working systems

Early design Late design

Main Display Find Flight List of Flights Change Seat View Arrivals time, city select one of tabs selection Sign-In Edit Seat Trips Arrivals error

• k

select trip select airport, airline, or city Booking select flight my trips already signed-in save Main Display Find Flight List of Flights Change Seat View Arrivals time, city select one of tabs selection Sign-In Edit Seat Trips Arrivals error

• k

select trip select airport, airline, or city Booking select flight my trips already signed-in save

Breadth vs. Depth

• Your prototypes will

have some “dead ends” and areas without any functionality

• The scenarios which

you want to test will be more complete

CS349 - Design Process 47

Comprehensiveness

The amount of features and functionality in the prototype compared to the final product. – Functionality (Depth): amount of interactivity and functionality – Features (Breadth): amount of features, options, and commands.

CS349 - Design Process 48

features functionality

full system

vertical prototye horizontal prototype full none Snyder, 2003, pg 260

complete product

Prototype Dimensions

CS349 - Design Process 49

features functionality

full none high low

fidelity

interactive prototype paper prototype graphic design mockup

Summary

• Usability and usefulness are important properties that don’t

just happen.

• User Centred Design is a process:

– Understand the user needs – Design the UI first – Iterate on design – Use it yourself – Observe others using it

CS349 - Design Process 51