July 2014 session 3 - Sketching and user-centered design

of 70 /70
Sketching and User-Centered Design Session 3 - July 9, 2014 School of Visual Concepts - UX1 http://svc-ux1.leannagingras.com

description

Session 3 of my June/July UX1 class at SVC. What is "good design"? What are some UX design guidelines? What role does sketching play in user-centered design? How do we diverge and create ideas, and then refine those ideas?

Transcript of July 2014 session 3 - Sketching and user-centered design

Page 1: July 2014   session 3 - Sketching and user-centered design

Sketching and User-Centered DesignSession 3 - July 9, 2014School of Visual Concepts - UX1

http://svc-ux1.leannagingras.com

Page 2: July 2014   session 3 - Sketching and user-centered design

AGENDA

Good designDesign rules of thumbSketchingCritiqueStudio

Page 3: July 2014   session 3 - Sketching and user-centered design

GOOD DESIGN

Page 4: July 2014   session 3 - Sketching and user-centered design

LOL j/k

Page 5: July 2014   session 3 - Sketching and user-centered design
Page 7: July 2014   session 3 - Sketching and user-centered design
Page 8: July 2014   session 3 - Sketching and user-centered design
Page 9: July 2014   session 3 - Sketching and user-centered design
Page 10: July 2014   session 3 - Sketching and user-centered design
Page 11: July 2014   session 3 - Sketching and user-centered design
Page 12: July 2014   session 3 - Sketching and user-centered design
Page 14: July 2014   session 3 - Sketching and user-centered design

QuizUp

Page 15: July 2014   session 3 - Sketching and user-centered design

Street art is beautiful & serves a civic function

Page 16: July 2014   session 3 - Sketching and user-centered design

DESIGN RULES OF THUMB

Page 17: July 2014   session 3 - Sketching and user-centered design
Page 18: July 2014   session 3 - Sketching and user-centered design
Page 19: July 2014   session 3 - Sketching and user-centered design
Page 20: July 2014   session 3 - Sketching and user-centered design

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

Page 21: July 2014   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: July 2014   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: July 2014   session 3 - Sketching and user-centered design

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

Page 24: July 2014   session 3 - Sketching and user-centered design
Page 25: July 2014   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 26: July 2014   session 3 - Sketching and user-centered design
Page 27: July 2014   session 3 - Sketching and user-centered design
Page 29: July 2014   session 3 - Sketching and user-centered design
Page 30: July 2014   session 3 - Sketching and user-centered design
Page 31: July 2014   session 3 - Sketching and user-centered design

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

Page 32: July 2014   session 3 - Sketching and user-centered design
Page 33: July 2014   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 34: July 2014   session 3 - Sketching and user-centered design
Page 35: July 2014   session 3 - Sketching and user-centered design

Filters help users arrow their choices down.

Page 36: July 2014   session 3 - Sketching and user-centered design

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

Page 37: July 2014   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 38: July 2014   session 3 - Sketching and user-centered design

This is a more consistent and guided structure.

Page 39: July 2014   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 41: July 2014   session 3 - Sketching and user-centered design

How can we make this better?

City of Seattle

Page 42: July 2014   session 3 - Sketching and user-centered design

SKETCHING

Page 43: July 2014   session 3 - Sketching and user-centered design

From Bill Buxton’s “Sketching the User Experience”

Page 44: July 2014   session 3 - Sketching and user-centered design

Messy, fast, not perfect.

Page 45: July 2014   session 3 - Sketching and user-centered design

Example: Refining through a particular interaction

Page 46: July 2014   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 47: July 2014   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 48: July 2014   session 3 - Sketching and user-centered design

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

Page 49: July 2014   session 3 - Sketching and user-centered design

example: designing a mobile menu

Page 50: July 2014   session 3 - Sketching and user-centered design
Page 51: July 2014   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 52: July 2014   session 3 - Sketching and user-centered design
Page 53: July 2014   session 3 - Sketching and user-centered design

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

Page 54: July 2014   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 55: July 2014   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 56: July 2014   session 3 - Sketching and user-centered design
Page 57: July 2014   session 3 - Sketching and user-centered design
Page 58: July 2014   session 3 - Sketching and user-centered design
Page 59: July 2014   session 3 - Sketching and user-centered design

how was that?

Page 60: July 2014   session 3 - Sketching and user-centered design
Page 61: July 2014   session 3 - Sketching and user-centered design
Page 62: July 2014   session 3 - Sketching and user-centered design

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

Page 63: July 2014   session 3 - Sketching and user-centered design
Page 64: July 2014   session 3 - Sketching and user-centered design
Page 65: July 2014   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 66: July 2014   session 3 - Sketching and user-centered design
Page 67: July 2014   session 3 - Sketching and user-centered design
Page 68: July 2014   session 3 - Sketching and user-centered design
Page 69: July 2014   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 70: July 2014   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.