16 Dec 7 UX Commandments

User experience is the most valuable piece of product design here at Onfleet. But working in an agile mode, releasing weekly features and improvements while keeping things under control becomes tough. That’s why we needed to establish a set of rules that everyone on the team can understand and apply in our day-to-day work building the best delivery management software.

All these rules apply to Nina — our fictional user who we want to make the most efficient and happy user possible.

1. Give Nina exactly the information and tools needed for each step of her work. Don’t hide the complexity, this will only serve to increase it. Don’t show too much, it will distract the user.

Twitter for Mac hides Public Reply inside settings, making the app look cleaner and complicating a simple interaction

1*TOIqrVcKD7eNHWkRg7tyKQ

Highlighting the Facebook share modal presents Nina exactly with the information she needs, eliminating distractions

2. Make it easy for Nina to discover information and tools she needs — if she can’t see it, in her world, it doesn’t exist.

Nina doesn’t know that Reminders app can remind her of things when she arrives at the store, since it’s hidden so deeply within the app. Do you have similar features in your app?

Nina doesn’t know that Reminders app can remind her of things when she arrives at the store, since it’s hidden so deeply within the app. Do you have similar features in your app?

 

3. Make UI elements visually consistent when they act the same and, more importantly, visually inconsistent when they act differently.

Within iBooks, although visually consistent, Tabs A and Tabs B (UISegmentControl) act differently — performing sorting, and navigating, respectively. Adding to the confusion, “Books” dropdown at the top, while visually very different, is, like Tabs B used for navigating.

Within iBooks, although visually consistent, Tabs A and Tabs B (UISegmentControl) act differently — performing sorting, and navigating, respectively. Adding to the confusion, “Books” dropdown at the top, while visually very different, is, like Tabs B used for navigating.

4. Always keep Nina informed of (and her expectations aligned with) what’s happening in the interface.

When importing pictures into Photos app, Nina stays on top of the import, can easily predict when to expect the import to be done, while a confirmation message let’s her know the task is completed.

When importing pictures into Photos app, Nina stays on top of the import, can easily predict when to expect the import to be done, while a confirmation message let’s her know the task is completed.

5. Remember — Nina is in charge and the interface should be flexible enough to let her accomplish her goals the way she wants.

Even if Adding a Photo has a designated button in the toolbar, Nina might want to right-click and Import Image. Her cursor, her rules.

Even if Adding a Photo has a designated button in the toolbar, Nina might want to right-click and Import Image. Her cursor, her rules.

6. When Nina makes a mistake, help her by explaining what went wrong and providing guidance on what she needs to do to fix her mistake.

1*8hURv1ozfoJwC2PA9nDCFA

Knowing how to fix an error or where to look is a great way of putting your user in charge.

Knowing how to fix an error or where to look is a great way of putting your user in charge.

7. Make Nina’s actions easily-reversible and always allow for an easy way out if she gets lost.

Nina is informed of what she’s about to confirm, she has a way out via Cancel and also a way to revert her actions

Nina is informed of what she’s about to confirm, she has a way out via Cancel and also a way to revert her actions

Establishing a set of flexible rules that apply to every aspect of your product is a productivity booster for the whole team. I urge you to come up with yours, or feel free to use ours in order to delight your users.

No Comments

Sorry, the comment form is closed at this time.