Dark Views

A short summary of the presentation “UI Best Practices & Trends” held by Roland Studer of We Are Cube (slides).

Short summary:

1. UIs are often bloated, confusing and frustrate users.
2. A major factor is that features are often requested by people who won’t have to use the software later i.e. by (self) “important” managers. A variation of “Nothing is impossible if you don’t have to do it yourself.”
3. “Don’t make me think” by Steve Krug (Amazon)
4. “The interface is your product” (“Getting Real – The Book“). Customers don’t care about the code or the effort which went into the product, they only see what you show them on the screen.

14 recommendations:

1. “Show me where I am”
   – breadcrumbs, highlight tabs, use tree navigation
2. “Use the F-Pattern”
   – eyes travel left to right, top to bottom in Western cultures
3. “Emphasize in Tables”
   – gray out less important values, make important ones bold, group with color, use gauges instead of numbers
4. “Affordance (sic): Show what’s interactive”
   – Make it obvious for users to see where they can click
5. “Make frequent uses accessible”
   – Show only the most important actions as buttons (max. 5).
   – Put the other, less signification actions in a popup menu.
6. “Caution with icons”
   – “A picture says more than 1000 words but which words exactly?”
   – Icons can be confusing, hard to remember and they depend on culture/training.
   – Offer at least user preferences to replace them with text or show text in addition to the icon or use tooltips.
7. “Emphasize primary actions”
   – Make the button stand out which the user most likely wants to click next or reduce visibility of less likely options (like “[Submit] [Cancel]”).
   – Be careful that the visual cue doesn’t conflict with “this button is disabled”
8. “Avoid OK / Cancel”
   – Instead of asking “Is it OK to delete?”, ask “This object is still be used. [Delete Anyway] [Keep]”
9. “Use undo if you can”
   – Avoid confirmation dialogs. No one ever reads them.
   – The user should never be able to do anything that isn’t reversible in some way.
   – Allows users who got confused with an icon (see #6 above) to unto destructive action on touch screens.
10. “Avoid left aligned form labels”
    – The eye is only able to align elements when they are close enough.
    – Right align labels, rely on browser search for locating elements if you have too many of them (which you shouldn’t)
    – Or put the label on top of the fields (but this works better for forms where you have to fill in every single field)
11. “Be nice to user input”
    – Support “slang” like “next Tuesday” or “now” in date fields
    – Keep illegal values so the user can edit them
12. “Prevent errors”
    – Calendar popups
    – Offer a list of valid inputs in a drop-down list or use radio buttons
13. “Instant Feedback”
    – Show what has been entered correctly as well as what’s wrong.
    – Display validation errors immediately (when the focus is lost) instead of waiting for the user to click on a “Submit” button
    – Use tooltips on disabled buttons to explain how to enable them
14. “Help users recover from errors”
    – Avoid “There have been errors” dialogs; they aren’t useful in any way.
    – Don’t tell what’s wrong, tell how to fix the error. If you don’t know how to fix it, will the user?

Trends:

1. “Responsive Web Design” – adjust the layout to available screen space. “Mobile first” helps to concentrate on the core features of your application. “Reduce to the max”, avoid distractions, show only the absolute minimum of data. Anything on the page begs to be noticed, so even if the user doesn’t read it, it will still take a tiny bit of concentration to ignore!
   
2. There is a trend towards flat and minimal design. Example: http://basecamp.com/ where a lot of things on the page are interactive (i.e. responds to clicks) but almost everything looks like plain text.
3. “Actions only on hover” – Show available actions only when the user hovers over some part of the page. Drawback: Doesn’t work on touchscreens since the user can’t “hover”
4. “Implicit feedback” – Show a “saved successfully” message. Give hints in text fields.

Always keep in mind:

Developer != User
Product Owner  != User
UI Guru != User

Do usability testing. If you can’t, try installing the product on a laptop and ask someone in the corridor to use it for five minutes. A little is better than nothing. You’re blind to your own prejudices.