Homework required in preparation for this lecture
- Read this article about about principles for a clean visual design
- Select two of the principles and find two examples of web sites or mobile apps that VIOLATE those principles
- 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.
- Team assignment - Design Briefs
- Review the comments you received from others on your product's design brief
- Discuss them as a team and decide what suggestions you want to accept and what questions posed should be answered in the brief.
- Update the design brief accordingly
- Deliverable: Print a copy of your final design brief for each other student and hand them out.
- Team assignment - Beautiful/detailed 'comps' of two of your most important activities/screens
- 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.
- You can use any tool(s) you want - photoshop, illustrator, watercolors, pencil and paper
- Deliverable: Individual links to each of the images posted to your blog. We will review them together in class.
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?
- 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 is she 'reaching for' right now?
What the user is 'expecting' 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
- 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?
- 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
- 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
- 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