Cosi 165a - IT Entrepreneurship

UI and UX Basics (Mon Oct 27, lecture 15)

Homework due for today

  1. Read A Summary of User Interface Design Principles and Principles of User Interface Design. Note: you may add your favorite other article about UI and UX design. Deliverable: A post about one of the principles from these or your readings and how it applies to your product. Prepare for a classroom discussion
  2. Check out Five Second Test and choose an aspect of your product to test using this site. It can be a paper mockup, a product name, a tag line, or anything else. Deliverable: post of what you tested and what the result was. Include a link to the site or a screen capture of the result.
  3. Read Effective Use of white space in forms. Prepare for discussion.
  4. Read Affordances and Metaphor. Prepare for discussion.
  5. Term Projects: Keep your teams moving forward on your projects

General Notes about Frame 1

  • Think bigger. You will need to make a case that the product will be a viable business.
  • Be Serious. Your work is evaluated not just on whether you follow the steps or the format but based on whether you are being realistic and intellectually honest about your proposal. Would you actually pitch this to an Angel?
  • Get Out. Everyone needs to get out of the building more. Go beyond your friends. Talk to strangers!
  • Pivot. If you need to. Real startups pivot if the evidence is not coming in. Zoom out pivot if your idea is too small.
  • Presentation. Professional, neat, readable etc.
  • Frame 2. You will have a chance to improve and revise Frame 1, as it is part of Frame 2

Discussion

  • Review of homework

Designing the User Experience

  • Difference between UX and UI?
  • What is good UX? Is it just a matter of opinion?
Looking at some existing products: 5-10 minute exercise
  • Make some notes about the user experience for discussion after examining these two well known sites.
  • Think about the UX and UI principles we’ve looked at
  • Work independently but it’s ok to look over each others shoulders :)
    • Facebook - Something you know well. Find 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? What is the most confusing?
    • Latte - Let’s examine the UI and UX and think about your own use of Latte. What are the top good and bad things about the user experience. Focus not on taste, but on specific concepts we have discussed.

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?
  • 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 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
  • MOBILE is NOT DIFFERENT, but…
    • 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?
Let’s look at some sites

Split into project teams and a different one from below without checking what it is. Don’t just click on the front page, try to use the site. Analyze and report back:

  • What does the site do?
  • Are the affordances you expect present?
  • Can you locate the key functions and purposes?
  • What’s good and/or bad about each one?
  • Refer back to all the principles

Here’s the list:

Conclusion

  • 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!

Next Class

Was this helpful!? yes / no