Presentation “UI Best Practices & Trends”

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.

3 Responses to Presentation “UI Best Practices & Trends”

  1. lukaseder says:

    Ahaha, yes. While successful with developers and product owners, I have never been successful convincing the UI Guru that his design might not match end users’ expectations… Nice one 🙂

    • digulla says:

      What’s the point of being a guru when mere users could know better?
      But that’s what usability testing is for. If people from the field have trouble using the software, even a guru will have to bend … a bit.

  2. I cannot agree more with this post. Though it’s 1 year old, UI becomes more and more important for software and apps to differentiate – sometimes less than the features. That’s why Apple is so successful. Since you mention Basecamp, there are so many project management solutions out there and probably many with better functionality than Basecamp. However Basecamp became mostly so popular due to paying attention to the UI. I’m working with Comindware Project (http://www.comindware.com/de) which differentiates also by its easy-to-use frontend. Another good example is also AirBnB (http://www.airbnb.com) where one of the CEOs is designer. That says it all which will be the trend in the future.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s