UI, UX and Design (Fri Oct 20, lecture 20)

Homework due for today

Legend: : Participation | : Early | : PDF | : Portfolio | : Zipped

  • Read and reflect: Read several of these articles. Write a reflection, 1 page max, about which of these articels hit you the hardest, taught you the most, and perhaps which of these articles are not good and should be off this list. Secondly, how will this reading change or affect the way your product looks and works? Deliverable: Your personal reflection, participation only.
  • Report: Write your PR Meeting review summary. Make it professional, with a beginning, middle and end. Make sure you include the action items or other commitments you made to your PR. Team Deliverable: Your report, +/-1 page. 1. Rails PA 3: Continue working on PA Rails 3

Project Teams midcourse progress review!

This is not actually homework but a chance to catch up if you need it. Tomorrow the TAs and I will review your progress on your product up to now. This will count as 5% of the 35% of your grade for the product. The other 30% will come through based on your work from now forward. Progress scores will be based on:

  • A high level review of all the code you have so far.
  • Does it appear to be going in the right direction
  • Does it show an understanding of the technology
  • How much of a challenge you are taking on in the project plan
  • Perceptions of your TA about your project
  • Preparation and actual PR meetings, as reported by PR
  • How well the team seems to be functioning,

Discussion about homework for today

  • I know you’re all in the trenches getting anything to work
  • What did you think of the various articles and papers? Interesting?
  • Some simple lessons you learned about UI
  • How will they be applicable to your products?

Examples of User Experience

  • Discussion: In each case, can you tell how to operate this device? And while you are trying to answer the question, be introspective, and tell me your thought process. How are you trying to find the problem, if any?

[Pito’s] Rules of thumb for good User Experience

  • Pay attention to AFFORDANCES
    • I want to make you become aware of affordances all around you
    • Visual (or other clues) that something can be pushed, pulled, dragged, clicked, etc.
    • Without them user is lost
  • Know the answer to the question: WHO IS MY USER?
    • “Personas”. Note, often there is more than one.
    • 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)
    • Some links:
      • This article talks about one kind of metaphor. I mean something broader.
      • This article has some more relevant examples.
      • This article has some interesting examples of misunderstood and obsolete metaphors
    • What this application or feature is about - that sets expectations?
    • What the USER (see above) is ‘expecting’ right now? What is she ‘reaching for’ right now?
    • Remember the importance of WORDS that match this metaphor and user expectations
    • Metaphors can become dated and inappropriate (file save icon in MS Word is what?) Any examples?
    • 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 aesthetics
  • Don’t 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 it?
    • What are the most important things on this screen?
    • Think about DISCOVERABILITY
    • 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?
    • Screen is far smaller
    • “Mobile First”
  • Dealing with COMPLEXITY
    • “Simple things should be simple to do, complex things should be possible”
    • Principle of progressive disclosure.
    • What controls are only available at the back panel of the device, under a little door?
    • We all know that users don’t read manuals, right?

Applying this to real sites

Let’s look at these sites
  • Heroku. Lets look around it purely from a UX perspective and see what we like and don’t like about. Can you see principles that it satisfies and that it contradicts?
  • Noteflight - Can you or can’t you assume that the user is a musician, or knows music notation?
Split into groups of 2

Split into groups of 2, each pick a different one from below without checking what it is. Make notes about what’s good and/or bad about each one? And, specifically refer to one of the principles we have discussed


  • I want you to always refer back to principles such as these when you design or present a user experience.
  • It’s very easy to say, “Oh it’s common sense.” But you submit designs that violate these principles left and right.
  • It’s important. Make it part of your toolkit. Internalize it! Take care!

Look at next class