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

Embed Size (px)


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

  • Sketching and User-Centered Design Session 3 - July 9, 2014 School of Visual Concepts - UX1 http://svc-ux1.leannagingras.com
  • AGENDA Good design Design rules of thumb Sketching Critique Studio
  • LOL j/k
  • https://www.marmosetmusic.com/singles?
  • http://www.starbucks.com/coffeehouse/mobile-apps
  • QuizUp
  • Street art is beautiful & serves a civic function
  • 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 kickstarter projects.
  • Pick an organization principle that makes sense for the content and context. For example, sometimes alphabetical organization makes sense and sometimes it doesnt.
  • Organizing alphabetically makes more sense for a big list of majors.
  • 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.
  • https://www.flickr.com/photos/designingwebinterfaces/4506200490/
  • (Avoid dead ends...or at least give users an exit.)
  • Thats 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.
  • Ubers mobile experience also limits choices by eliminating account functionality.
  • This sites 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.
  • This is a more consistent and guided structure.
  • A sitemap from my colleague Dan Cooney. He cant 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.
  • How can we make this better? Eastern Mountain Sports
  • How can we make this better? City of Seattle
  • From Bill Buxtons 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, theyre perfect for brainstorming, capturing options, and exploring ideas without getting lost in the details.
  • 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 easier to compare my options.
  • 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 wasnt 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.
  • how was that?
  • take 5 minutes. work individually on a first pass. well come back to this later...
  • Sketches are for generating and working through ideas, but also for communicating ideas as a boundary object. it allows critique.
  • Lets present. Walk through not just your final sketch, but the steps you took to get there.
  • Studio If you dont 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.