menu icon MENU

Designing Configurable Interfaces

Written by Atom Groom

This article was originally published on the Bitovi blog. Archived permanently here.

When designing web and mobile apps, we aren’t fully delivering experiences that allow the user to control the interface in a way that makes sense to them. We talk about delighting the user and having empathy, but more often than not, we tend to miss the mark and deliver a frustrating experience. It’s time that we consider giving the user more control with how they prefer the interface to function.

Designers are missing the opportunity to create configurable options for users. This article will help you get started with designing a configurable interface.

What is a Configurable Interface?

A configurable interface is designed for the user to have the ability to modify the way the software or app looks and works. It can also include the option to choose what data is displayed within each panel.

For example with software, Photoshop offers a great deal of customization:

alt text

Configurable interfaces can also be used in web applications, though most web apps don’t offer this. In the animation below you’ll see an interactive prototype Bitovi built to test different configuration ideas. We explored preset layouts as well as different widget options the user can pick from.

alt text

We don’t often see configurable interfaces in apps today because simply put; they are very hard to design, develop and test. Here are a few examples:

While these examples are certainly big obstacles, we should not let them stop us from designing a great user experience. Let’s roll up our sleeves, get our hands dirty, and create something users will truly appreciate.

How We Design Apps Now

We currently use methods like user testing and data-driven design to help us design the best experiences. While these methods are helpful, they still might leave the user needing something more.

User Testing

User testing usually only provides feedback to a single interface option, or just a set of tasks. Even if we listen to our users, it can be difficult to meet and understand their needs. Maybe what they really need is configurable options.

Data Driven Design

Data Driven Design only provides partial insight into a set of design options. The data itself is accurate, but it is how we interpret it and the decisions that we make the data inaccurate. If we don’t fully test all possible options available, then we cannot assume we are making a logical decision.

Often, the designer makes the decisions for the user because he or she knows best. In other cases, stakeholders like executives, product or marketing will trump the final decision making. In the end, the user may lose out on the best possible experience if it’s not tailored to their individual needs.

Why Users Prefer a Personalized Experience

Not everyone likes the same style of cooked egg. Some like it scrambled, over easy, over medium, or sunny side up. So why do we expect users to only like one type of interface? What are we afraid of?

As an example, we can allow the user to define the placement of a navigation as a sticky header, or a footer and still make sure that it is designed to work in both positions. Thoughtful interactions and branding pull it all together. By designing an array of preset interface options, the user can now choose the style they prefer, for how they like to use your app. Now THAT is delighting the user.

This design strategy can lead to less complaining from your users. Users won’t be as frustrated if your organization decides to redesign the app. We can avoid a lack of user understanding of what an icon means, if we can design an option to allow them to get rid of icons and display the label only. That is what users want - an experience that allows them to make it their own.

alt text

Example Configurable Interface Templates

Good design happens with good constraints, let’s look at the following examples of different options that could be offered in a social application to allow for user configuration.

Minimal

alt text

Description:

User Persona: Pro User


Standard

alt text

Description:

User Persona: Intermediate User


Expanded

alt text

Description:

User Persona


Fully customized (drag and drop elements to selected areas)

alt text alt text

Description:

User Persona:

User Testing This concept

To see if this idea has traction, I decided to chat with some of my family members to see what they might want from a configurable interface. Here are two examples.

User One: Grandfather

Product: GMail

alt text

Grandpa doesn’t like how the compose window sits in the bottom right corner and would also like it to be bigger. He clicks the expand window icon, but now that overlays the entire screen. He would like to be able to configure how that works by dragging the window and also being able to view an email.

User Two: Wife

Product: Netflix

alt text

She doesn’t like how the rows of titles are preset. “Why should I have to scroll all the way down to one category every time”. She would like to be able to choose the order of certain categories and even which categories show up.

In these two simple user interviews there is definitely a desire for configuration options. This same technique can be used to discover your user’s workflows. Understanding how each user interacts and utilizes your app will help you to define different workflows. The workflows can then be used to design the app’s configuration templates.

Onward and Upward

This is a short and simple example of how we might allow users to configure native and web apps. Not all of these options will be the right choice for your organization. You might only offer one option to start (appearance, layout, or content). Remember, create good constraints (pre-configured templates) so that your design team can get their job done.

I encourage designers to embrace this in their next project! Bitovi’s team are experts in creating engaging and personalized configurable interfaces. Please contact us if you’re interested in working together.

Cheers to the future my friends.