03-Designing a great user interface

Homework required in preparation for this lecture

  1. Read this article about about principles for a clean visual design
    1. Select two of the principles and find two examples of web sites or mobile apps that VIOLATE those principles
    2. Deliverable: 2-5 paragraph blog post, with images, explaining the two principles in your own words, showing the examples that you found, and explaining why they violated the principles.
  2. Team assignment - Design Briefs
    1. Review the comments you received from others on your product's design brief
    2. Discuss them as a team and decide what suggestions you want to accept and what questions posed should be answered in the brief.
    3. Update the design brief accordingly
    4. Deliverable: Print a copy of your final design brief for each other student and hand them out.
  3. Team assignment - Beautiful/detailed 'comps' of two of your most important activities/screens
    1. A comp is an image of an app screen or web site which shows what it will look like, without having any functionality, usually for the purpose of showing it to a client. So it needs to look good. Think about colors, placement of items, alignment, balance and so on.
    2. You can use any tool(s) you want - photoshop, illustrator, watercolors, pencil and paper
    3. Deliverable: Individual links to each of the images posted to your blog. We will review them together in class.

User Interface

Compare: Which is the better user interface? Why?

What is this? How does it work?



User Experience (UX) Principles (Cold Calls on product groups)

  • Who is my user?
    • "Personas"
    • Build on what users likely have seen before
    • Platform consistency (iPhone, Android ... but then compare with Flash. Is that a platform? How about web?) 
    • Conventions: back, home, undo, cut, paste, file menu, etc.
  • Guide the USERS' CONCEPTUAL MODEL (sometimes called the user metaphor)
    • What this application is about - that sets expectations?
    • What the user is 'expecting' right now? 
      What is she 'reaching for' right now?
    • Remember the importance of words that match this metaphor and user expectations
  • Pay attention to AFFORDANCES
    • Visual (or other clues) that something can be pushed, pulled, dragged etc.
    • Without them user is lost
  • Proximity Implies Relationship
    • Put things that relate to each other near each other and vice versa
    • Pay attention to the Visual Hierarchy
    • Denote hierarchy/nesting of elements: posts->comments, projects->tasks, playlists->tracks, etc.
    • Use size (and type choice) consistently to communicate importance/role
    • Alignment and balance are important for aestheticse
  • Don't make user spend ANY mental energy on questions like this (see book by Steve Krug)
    • Where am I?
    • Where should I begin?
    • Where did they put ?
    • What are the most important things on this screen?
    • Think about DISCOVERABILITY
  • Mobile Considerations
    • Assume mobile user is distracted, brief attention span
    • Does NOT think of device as a computer
    • Context: What is users mindset? Where are they, in a car, in line at store, at the theatre?
    • Android Specifics
      • DONT ever ever break the back button
      • DONT assume Portrait mode

Let's Look at some sites

  • Discussion:
    • Facebook - Something you know well. Point out a few good and a few bad user interface elements. Have you ever tried to get someone (like a parent) to use Facebook? What worked and what did not?
    • Noteflight - Can you or can't you assume that the user is a musician, or knows music notation?
    • Split into four groups, analyze and report back: What's good and/or bad about each one?

Designer's Mindset

  • Try to fully imagine and empathize with your user
  • There's no formula. In the end it's art not science.
    • "Blank Piece of Paper" syndrome
    • Simplify, Simplify, Simplify
    • Be willing to fundamentally change your approach
    • But: it's not 'just a matter of opinion' - there's hard data, but you only get it after the fact (see APPL)
  • Test early and be willing to re-invent

Awesome Online Tools

How to conduct a usability test (Let's one team's paper prototype)

  • Can be conducted at any stage
    • Paper prototype
    • Online mockup or 'wireframes'
    • Actual build
    • The difference is how hard/painful it is to make changes - which is inversely proportional to how open you will be listening
  • Preparation
    • Decide on a task(s) for user. "Log in and post a picture", "Check and update your privacy settings"
    • Decide on the type(s) of users.
    • Decide on what knowledge or assumptions they will start with (new user, experienced user, musician, programmer, etc.)
  • Running the test
    • Mistakes are ALWAYS the fault of the software not the user. Make sure they know this and don't feel like they have to appologize when things go wrong.
    • Don't help.
    • Ask them to narrate their thought process: "I am not looking for a button called security or privacy. Oh here's one called settings, maybe that's it. I am going to click it. Hm, I expected to find security related stuff here but instead I see..." etc.
    • Make notes
  • Keep it simple
    • You don't need a one way mirror, video recording etc etc.
    • You don't need 10 subjects. Usually after 2-3 you already know what the problems are


  • Deciding what you are measuring for 
    • iPhone app store star ratings
    • Revenue?
    • User satisfaction (i.e. uninstalls)
    • Next release planning (What features are used and which ones are not)
    • Something else?
  • Including 'instrumentation' in your application/site
  • SEO - Search Engine Optimization
  • A/B Testing, optimizing for what?
  • Google Analytics, free web metrics

Homework Review for Tomorrow's Lecture