session 3: sketching and user-centered design

74
Sketching and User-Centered Design Session 3 - April 10, 2014 School of Visual Concepts - UX1 http://svc-ux1.leannagingras.com

Upload: leanna-gingras

Post on 27-Jan-2015

116 views

Category:

Design


1 download

DESCRIPTION

This week's UX class covers good design, brainstorming and concepting, sketching, design rules of thumb, and the art of critique. There's a LOT of sketching exercises. Learn by doing! These are lecture slides for the User Experience class I'm teaching at SVC. Learn more here: http://svc-ux1.leannagingras.com/

TRANSCRIPT

Page 1: Session 3: Sketching and User-centered Design

Sketching and User-Centered DesignSession 3 - April 10, 2014School of Visual Concepts - UX1

http://svc-ux1.leannagingras.com

Page 2: Session 3: Sketching and User-centered Design

AGENDA

Good designDesign rules of thumbSketchingCritiqueStudio

Page 3: Session 3: Sketching and User-centered Design

GOOD DESIGN

Page 4: Session 3: Sketching and User-centered Design

LOL j/k

Page 5: Session 3: Sketching and User-centered Design
Page 7: Session 3: Sketching and User-centered Design
Page 8: Session 3: Sketching and User-centered Design
Page 9: Session 3: Sketching and User-centered Design
Page 10: Session 3: Sketching and User-centered Design
Page 11: Session 3: Sketching and User-centered Design
Page 12: Session 3: Sketching and User-centered Design
Page 14: Session 3: Sketching and User-centered Design

QuizUp

Page 15: Session 3: Sketching and User-centered Design

Street art is beautiful & serves a civic function

Page 16: Session 3: Sketching and User-centered Design

DESIGN RULES OF THUMB

Page 17: Session 3: Sketching and User-centered Design
Page 18: Session 3: Sketching and User-centered Design
Page 19: Session 3: Sketching and User-centered Design
Page 20: Session 3: Sketching and User-centered Design

Menus: Example of organizing genre to help the user quickly zoom into what they want.

Page 21: Session 3: Sketching and User-centered Design

Kickstarter has several groupings here: Information related to a featured project, kickstarter categories, and Seattle kickstarter projects.

Page 22: Session 3: Sketching and User-centered Design

Pick an organization principle that makes sense for the content and context. For example, sometimes alphabetical organization makes sense and sometimes it doesn’t.

Page 23: Session 3: Sketching and User-centered Design

Organizing alphabetically makes more sense for a big list of majors.

Page 24: Session 3: Sketching and User-centered Design
Page 25: Session 3: Sketching and User-centered Design
Page 26: Session 3: Sketching and User-centered Design

Kickstarter is a good example of visual hierarchy that does what it should: elevate the most important elements to the user. Note that the biggest element on the page isn’t stanard: $money$

Page 27: Session 3: Sketching and User-centered Design

SongCloud stream is a good example of organization and visual hierarchy. Presents it song-first and associates all of the related action s with that.

Page 28: Session 3: Sketching and User-centered Design
Page 29: Session 3: Sketching and User-centered Design

Go where the action is: Putting this sign on top of the thermostat is more effective than putting it in the break room or kitchen.

Page 30: Session 3: Sketching and User-centered Design
Page 31: Session 3: Sketching and User-centered Design
Page 33: Session 3: Sketching and User-centered Design
Page 34: Session 3: Sketching and User-centered Design
Page 35: Session 3: Sketching and User-centered Design

(Avoid dead ends...or at least give users an exit.)

Page 36: Session 3: Sketching and User-centered Design
Page 37: Session 3: Sketching and User-centered Design

That’s a lot of stuff to present to the user all at once. Break it up into steps to make it easier.

Page 38: Session 3: Sketching and User-centered Design
Page 39: Session 3: Sketching and User-centered Design

Filters help users arrow their choices down.

Page 40: Session 3: Sketching and User-centered Design

Uber’s mobile experience also limits choices by eliminating account functionality.

Page 41: Session 3: Sketching and User-centered Design

This site’s structure is broad, deep in some places, narrow in others, and has a single instance of a third level - (probably) not very good curation of choices.

Page 42: Session 3: Sketching and User-centered Design

This is a more consistent and guided structure.

Page 43: Session 3: Sketching and User-centered Design

A sitemap from my colleague Dan Cooney. He can’t just get rid of pages, so he will creates a hierarchy that will make it easy for the user to narrow down to what they want.

Page 45: Session 3: Sketching and User-centered Design

How can we make this better?

City of Seattle

Page 46: Session 3: Sketching and User-centered Design

SKETCHING

Page 47: Session 3: Sketching and User-centered Design

From Bill Buxton’s “Sketching the User Experience”

Page 48: Session 3: Sketching and User-centered Design

Messy, fast, not perfect.

Page 49: Session 3: Sketching and User-centered Design

Example: Refining through a particular interaction

Page 50: Session 3: Sketching and User-centered Design

Example: this is a later iteration of a sketch. It has just enough detail to communicate the core design idea, no more.

Page 51: Session 3: Sketching and User-centered Design

Since sketches are fast, lo-fi and disposable, they’re perfect for brainstorming, capturing options, and exploring ideas without getting lost in the details.

Page 52: Session 3: Sketching and User-centered Design

People generate better ideas individually, and refine ideas better collaboratively.

Page 53: Session 3: Sketching and User-centered Design

example: designing a mobile menu

Page 54: Session 3: Sketching and User-centered Design
Page 55: Session 3: Sketching and User-centered Design

I needed a responsive menu that works for a big retailer. First, I generated a bunch of ideas and patterns to make it easier to compare my options.

Page 56: Session 3: Sketching and User-centered Design
Page 57: Session 3: Sketching and User-centered Design

I picked a couple and fleshed them out a little bit.

Page 58: Session 3: Sketching and User-centered Design

I knew something similar to Option 4 - the off-canvas sliding menu - had worked for Trina Turk.

Page 59: Session 3: Sketching and User-centered Design

...but I wasn’t sure how it would work for a site with two levels of hierarchy, so I sketched it out a little more and refined from there.

Page 60: Session 3: Sketching and User-centered Design
Page 61: Session 3: Sketching and User-centered Design
Page 62: Session 3: Sketching and User-centered Design
Page 63: Session 3: Sketching and User-centered Design

how was that?

Page 64: Session 3: Sketching and User-centered Design
Page 65: Session 3: Sketching and User-centered Design
Page 66: Session 3: Sketching and User-centered Design

take 5 minutes. work individually on a first pass. we’ll come back to this later...

Page 67: Session 3: Sketching and User-centered Design
Page 68: Session 3: Sketching and User-centered Design
Page 69: Session 3: Sketching and User-centered Design

Sketches are for generating and working through ideas, but also for communicating ideas as a boundary object. it allows critique.

Page 70: Session 3: Sketching and User-centered Design
Page 71: Session 3: Sketching and User-centered Design
Page 72: Session 3: Sketching and User-centered Design
Page 73: Session 3: Sketching and User-centered Design

Let’s present.

Walk through not just your final sketch, but the steps you took to get there.

Page 74: Session 3: Sketching and User-centered Design

Studio

If you don’t have a project, find someone who does.Get on the same page re: project goals.Pick a key task & sketch for 5 minutes.

Then bring your ideas together & work on it together.