July 2014   session 3 - Sketching and user-centered design
Upcoming SlideShare
Loading in...5
×
 

July 2014 session 3 - Sketching and user-centered design

on

  • 669 views

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 ...

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?

Statistics

Views

Total Views
669
Views on SlideShare
666
Embed Views
3

Actions

Likes
9
Downloads
13
Comments
0

2 Embeds 3

http://www.slideee.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • 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 kickstarter projects.
  • Pick an organization principle that makes sense for the content and context. For example, sometimes alphabetical organization makes sense and sometimes it doesn’t.
  • 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.)
  • 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 - (probably) not very good curation of choices.
  • 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 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
  • 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 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 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.
  • 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 critique.
  • 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 & sketch for 5 minutes. Then bring your ideas together & work on it together.