Sketching and User-Centered Design
Session 3 - April 10, 2014
School of Visual Concepts - UX1
http://svc-ux1.leannagingras...
AGENDA
Good design
Design rules of thumb
Sketching
Critique
Studio
GOOD DESIGN
LOL j/k
https://www.marmosetmusic.com/singles?
http://www.starbucks.com/coffeehouse/mobile-apps
QuizUp
Street art is beautiful & serves a civic function
DESIGN RULES OF THUMB
Menus: Example of organizing genre to help the user quickly zoom into what they want.
Kickstarter has several groupings here: Information related to a featured project, kickstarter categories, and Seattle
kic...
Pick an organization principle that makes sense for the content and context. For example, sometimes alphabetical
organizat...
Organizing alphabetically makes
more sense for a big list of majors.
Kickstarter is a good example of visual hierarchy that does what it should: elevate the most important
elements to the use...
SongCloud stream is a good example of organization and visual hierarchy.
Presents it song-first and associates all of the ...
Go where the action is:
Putting this sign on top of the thermostat is more effective than putting it in the break room or ...
https://www.flickr.com/photos/designingwebinterfaces/4506200490/
(Avoid dead ends...or at least give users an exit.)
That’s a lot of stuff to present to the user all at once. Break it up into steps to make it easier.
Filters help users arrow their choices down.
Uber’s mobile experience also limits choices by eliminating account functionality.
This site’s structure is broad, deep in some places, narrow in others, and has a single instance of a
third level - (proba...
This is a more consistent and guided structure.
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 e...
How can we make this better?
Eastern Mountain Sports
How can we make this better?
City of Seattle
SKETCHING
From Bill Buxton’s “Sketching the User Experience”
Messy, fast, not perfect.
Example: Refining through a particular interaction
Example: this is a later iteration of a sketch.
It has just enough detail to communicate the core design idea, no more.
Since sketches are fast, lo-fi and disposable, they’re perfect for brainstorming, capturing options, and
exploring ideas w...
People generate better ideas individually, and refine ideas better collaboratively.
example: designing a mobile menu
I needed a responsive menu that works for a big retailer. First, I generated a bunch of ideas and
patterns to make it easi...
I picked a couple and fleshed them out a little bit.
I knew something similar to Option 4 - the off-canvas sliding menu - had worked for Trina Turk.
...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 ref...
how was that?
take 5 minutes. work individually on a first pass.
we’ll come back to this later...
Sketches are for generating and working through ideas, but also for communicating ideas as a
boundary object. it allows cr...
Let’s present.
Walk through not just your final sketch,
but the steps you took to get there.
Studio
If you don’t have a project, find someone who does.
Get on the same page re: project goals.
Pick a key task & sketc...
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Session 3: Sketching and User-centered Design
Upcoming SlideShare
Loading in...5
×

Session 3: Sketching and User-centered Design

886

Published on

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/

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
886
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Session 3: Sketching and User-centered Design

  1. 1. Sketching and User-Centered Design Session 3 - April 10, 2014 School of Visual Concepts - UX1 http://svc-ux1.leannagingras.com
  2. 2. AGENDA Good design Design rules of thumb Sketching Critique Studio
  3. 3. GOOD DESIGN
  4. 4. LOL j/k
  5. 5. https://www.marmosetmusic.com/singles?
  6. 6. http://www.starbucks.com/coffeehouse/mobile-apps
  7. 7. QuizUp
  8. 8. Street art is beautiful & serves a civic function
  9. 9. DESIGN RULES OF THUMB
  10. 10. Menus: Example of organizing genre to help the user quickly zoom into what they want.
  11. 11. Kickstarter has several groupings here: Information related to a featured project, kickstarter categories, and Seattle kickstarter projects.
  12. 12. Pick an organization principle that makes sense for the content and context. For example, sometimes alphabetical organization makes sense and sometimes it doesn’t.
  13. 13. Organizing alphabetically makes more sense for a big list of majors.
  14. 14. 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$
  15. 15. 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.
  16. 16. 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.
  17. 17. https://www.flickr.com/photos/designingwebinterfaces/4506200490/
  18. 18. (Avoid dead ends...or at least give users an exit.)
  19. 19. That’s a lot of stuff to present to the user all at once. Break it up into steps to make it easier.
  20. 20. Filters help users arrow their choices down.
  21. 21. Uber’s mobile experience also limits choices by eliminating account functionality.
  22. 22. 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.
  23. 23. This is a more consistent and guided structure.
  24. 24. 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.
  25. 25. How can we make this better? Eastern Mountain Sports
  26. 26. How can we make this better? City of Seattle
  27. 27. SKETCHING
  28. 28. From Bill Buxton’s “Sketching the User Experience”
  29. 29. Messy, fast, not perfect.
  30. 30. Example: Refining through a particular interaction
  31. 31. Example: this is a later iteration of a sketch. It has just enough detail to communicate the core design idea, no more.
  32. 32. Since sketches are fast, lo-fi and disposable, they’re perfect for brainstorming, capturing options, and exploring ideas without getting lost in the details.
  33. 33. People generate better ideas individually, and refine ideas better collaboratively.
  34. 34. example: designing a mobile menu
  35. 35. 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.
  36. 36. I picked a couple and fleshed them out a little bit.
  37. 37. I knew something similar to Option 4 - the off-canvas sliding menu - had worked for Trina Turk.
  38. 38. ...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.
  39. 39. how was that?
  40. 40. take 5 minutes. work individually on a first pass. we’ll come back to this later...
  41. 41. Sketches are for generating and working through ideas, but also for communicating ideas as a boundary object. it allows critique.
  42. 42. Let’s present. Walk through not just your final sketch, but the steps you took to get there.
  43. 43. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×