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.

Viewing a user
Editing a user

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.

Adding a product

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.

User settings are in the top-right

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.

On a large screen
On a phone

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.

Like what you read? Give Stelios Constantinides a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.