5 rules to better design
Our design philosophy at Reliefwatch is simple: don’t make the user work.
Reliefwatch isn’t a social network. It’s not a sexy alternative to email. It’s supply chain software for the developing world. Our goal is to help people do their jobs more effectively, and making our software easy to use is a great way to do that.
With that in mind, let’s look at five rules that help guide our designs, from user flows to how we set the color of a button.
1. Be consistent
Keep elements consistent from page to page. What are we keeping consistent? The position, style, and language. A button shouldn’t say “delete” on one page and “remove” on the next.
Why it’s important
When elements move around, the user wastes time searching for them. When styles or language change, the user has to figure out if “delete” and “remove” actually do the same thing.
An example
The layout for viewing a user (below) and editing a user (far below) are almost exactly the same. This consistent placement of fields means the user spends less time searching.
2. Be clear
Use size, color, and position to inform the user where they are and guide them to their most likely action.
Why it’s important
This one is pretty straightforward: nobody wants to be confused about what page they’re on or the purpose of that page.
An example
Below is our form for adding a product. The title clearly explains the page’s purpose. The “Create” button is prominent and reinforces the purpose of the page. And the “Cancel” button is visible, but isn’t distracting to the user.
3. Follow conventions
Favor common design patterns over what’s trendy. You might think you made a great new icon to represent search, but there’s a clear convention.
Why it’s important
The user expects certain things to happen. When they don’t, they’ll quickly get frustrated.
An example
Many apps put the current user (and their settings) in the top-right corner. There isn’t a good reason for us to break this convention.
4. Make it responsive
Don’t just make it responsive, make sure your design makes sense for mobile. Are you showing the user what they care about when they log in from their tablet or phone?
Why it’s important
Users have different priorities when they use different devices. If they’re on their phone, they probably aren’t interested in obscure settings, but they probably are interested in checking notifications.
An example
Our locations page shows a map on larger screen sizes (below) but not on mobile devices (far below). This frees up valuable screen real-estate and shortens mobile load times.
5. Make it accessible
It’s not enough to design for users with different hardware, design for users with different abilities.
Why it’s important
Around 8% of men and 0.5 % of women have a color deficiency of some sort (source). There’s no excuse for not considering that in your designs.
An example
Color blind user? No problem, we already accounted for it.
Conclusion
It’s often echoed: don’t design for yourself, design for your users. Overstated? Sure. Useful? You bet.
Remember: Keep the experience clear & consistent. Use conventions that are already familiar. And make sure all users have access from anywhere.
