A settings case study

1 - Introduction

What a mess!!! This is the first idea that crossed my mind when I saw the settings part for the first time! It reminded me of a complicated washing machine with so much information that make the product unusable. Think about the iPhone, you don’t need any instructions to start using the product, right? It should be the same for your product, especially for the settings part. You shouldn’t have to think about it.

Settings should be understandable at a glance and shouldn’t to be reviewed. In interaction design we might traditionally have referred to this idea as “usability” : don’t make me notice what I’m doing, just make it so simple that I don’t even have to think about it.

2 — Problems

We’ve worked on the settings of our product because we had to go through 3 menus before finding the setting we had set our minds on. On the other hand, we were thinking about adding new features to our product which meant adding new settings on top of this mess.

Here is a non-exhaustive list of the major problems that we wanted to solve:

• The layout: We had to go through 3 menus before finding the setting we had set our minds on.
• The wording: We had problems with the way we engaged our users. Sometimes, we used impersonal labels and sometimes we used personal ones. Again, sometimes we used verbs, nouns, sentences to describe the labels and some other times just nouns.
• The explanation: There were sentences with labels to explain labels we weren’t really able to explain.
• The content: The objectives section was in the settings. Does it make sense to find it there?
• Switches and buttons: We had some toggles that acted on other settings of the interface.
• The flags: We only had flags and no country names to choose the languages spoken by the users. Does it make sense? Does everybody know all the flags by heart?
• The radio button: This one is probably my favorite. We had radio buttons to indicate “no action”. Does it make sense? Shouldn’t we use toggles?
• The save button: We had a hidden save button on the bottom to enable users to save what they had done. Because it was hidden, almost all the users forgot to save.
• Etc.

3 - Positioning

This part contains detailed workflows on how we tackled the main issues and the reflection we’ve used during the whole process. This reflection helped us to strive for more consistency on all other issues we have in intern.

Settings for scanning, not scrolling. You don’t have to display all the settings on the same page. Instead you should find a way to figure out all the available settings and understand at a glance what’s behind it. Cards are a good way to do that because it makes the page much shorter allowing a user to see much without scrolling.

Blocs vs. cards

Settings for scanning, not reading. Web users are not just hanging out in the settings section, they’re generally on a mission! They’re trying to set up their preferences as fast as possible. The main thing you need to know about your users is that they have neither the time nor desire to read more than necessary. Instead, they tend to focus on words or phrases that match the task they have in mind. For example, I’m looking for the notifications section and I don’t need anything else as the word “notifications” to refer to this task. The settings part should be as short as possible without unnecessary words in order to make the useful content more prominent.

Sentences vs. words

Settings for everybody, not somebody. Everybody is different and the most meaningful words to you, may not be the most meaningful ones to other users. Words that look obvious to you, may sounds weird to your users. Everybody should be able to understand quickly each settings and what’s behind it. You should use as many verbs and nouns as possible and don’t make the things too personal. Remember, web users are not hanging out in the settings section, they’re generally on a mission, they tend to focus on words or phrases they have in mind.

Verbs, nouns, actions, sentences vs. nouns

Settings for simplicity, not eccentricity. Web conventions make life easier for users because they reduce the cognitive load. For example, almost all the website that let users indicate their preferences use toggle, radio button and checklist button. Designers are often reluctant to take advantage of them because they think that they can do better, not the same old thing that everybody already did. They really love subtle cues and sophisticated interface but web users are generally in such a hurry that they routinely miss all this lovely things. Typically, it just amounts of time spent trying to solve the same problem. Instead you should spent more time trying to handle the real problem and take advantage of conventions when you can.

We didn’t reinvent the wheel.

Settings for speed, not slowness. Web users are generally in such a hurry that they don’t have time to wait for informations. If your website doesn’t work well, they will move on to a new one. There are a lot of product outside ready to take care of your customers. The settings part should be as brief as possible without useless informations in order to reduce the loading time of your website. Only displaying information that are important for them will improve both reading and loading speed.

Loading time divided by 3.

Settings for choices, no chance. If you are a designer the initial configuration that makes most sense to you may not make most sense to your user. If you are working on a new interface, ask your users what the configuration they’ll use the most or try to create use cases. If you are working on a redesign, represent the most used choices according your data.

What the designer think vs. what the user think.

Settings for guidelines, no exceptions. As a UI designer, Product designer or whatever the society call you, you have to follow all the components ready in your design team’s “components” library. Designers always think that they could do better using a different color and are often reluctant to take advantage of them. They think that they have been hired to change everything without understanding what a detail change can ruin the whole consistency. You should use the components whenever you can to thrive for more consistency.

Our guidelines.

4 - Result

Before vs. After

This is the first article of a global redesign we’ve been working on. Other articles will come later to explain how we tackled the main problems. We are going to make the next articles as evolutive as we can in order to show you the work we’ve done over the last year. Feel free to share your suggestions with us. We would love to hear news from you 😉

Thanks for reading! 🙏

P.S. Big thanks to Florent Gosselin and Mylène Larnaud for their feedbacks! Thanks to Camille Bourjade for helping me get this out.

Emmanuel Julliot — Freelance Product Designer