--- title: Designing Configurable Interfaces description: Users love to configure the interface to fit their personal workflow. Atom Groom discusses how to get started with this approach in mobile and web apps. image: https://www.bitovi.com/hubfs/blog-header-atom2.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Design ](https://www.bitovi.com/blog/topic/design) | August 26, 2015 # Designing Configurable Interfaces Users love to configure the interface to fit their personal workflow. Atom Groom discusses how to get started with this approach in mobile and web apps. ![The Bitovi Team](https://www.bitovi.com/hubfs/TheBitoviTeam%20(1).png) The Bitovi Team Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) ![config-header](https://www.bitovi.com/hubfs/Imported_Blog_Media/config-header.gif) 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](http://whitneyhess.com/blog/2013/07/19/empathy-is-not-a-buzzword/) about delighting the user and having [empathy](http://boagworld.com/usability/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. In this article we’ll take a look at: 1. [What is a Configurable Interface](https://www.bitovi.com/blog/designing-configurable-interfaces#whatis) 2. [Why Configurable Interfaces are Not Popular](https://www.bitovi.com/blog/designing-configurable-interfaces#notpopular) 3. [Why Users Prefer a Personalized Experience](https://www.bitovi.com/blog/designing-configurable-interfaces#whyusers) 4. [Example Configurable Interface Templates](https://www.bitovi.com/blog/designing-configurable-interfaces#examples) 5. [ User Testing this Concept](https://www.bitovi.com/blog/designing-configurable-interfaces#usertests) ### 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: - layout: where panels float and how they are attached to each other - appearance: different color schemes, font sizing and more - user defined: save your own custom mix of layout and appearance ![photoshop-configuration](https://www.bitovi.com/hubfs/Imported_Blog_Media/photoshop-configuration.gif) 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. ![bitovi-configuration](https://www.bitovi.com/hubfs/Imported_Blog_Media/bitovi-configuration.gif) ### Why Configurable Interfaces are Not Popular 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: - too much control can be confusing and overwhelming for the user - user testing can be tedious - app testing and maintenance can be difficult - configuration options are not always the best fit for most apps - development and design time can be tripled 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. ![giphy](https://www.bitovi.com/hubfs/Imported_Blog_Media/giphy-2.gif) ### 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 ![user-defined-ui-1](https://www.bitovi.com/hubfs/Imported_Blog_Media/user-defined-ui-11.png) ![config-ex-mob-1](https://www.bitovi.com/hubfs/Imported_Blog_Media/config-ex-mob-1.png) | **Description** | **User Persona: Pro User** | | --- | --- | | - minimal interface - content priority - icon heavy - micro-interaction heavy | - young to middle age - uses app more than once a day - fully understands the app - prefers gestures on touch devices - interacts frequently with multiple areas of functionality | Description: - minimal interface - content priority - icon heavy - micro-interaction heavy User Persona: Pro User - young to middle age - uses app more than once a day - fully understands the app - prefers gestures on touch devices - interacts frequently with multiple areas of functionality --- #### Standard ![user-defined-ui-2](https://www.bitovi.com/hubfs/Imported_Blog_Media/user-defined-ui-2.png) ![config-ex-mob-2](https://www.bitovi.com/hubfs/Imported_Blog_Media/config-ex-mob-2.png) | **Description** | **User Persona: Intermediate User** | | --- | --- | | - fixed nav + sidebar - content scrolls - icon heavy + label - mix of micro-interactions and obvious buttons | - all ages - uses the app a few times a week and doesn’t interact much - is not aware of configurable options | Description: - fixed nav + sidebar - content scrolls - icon heavy + label - mix of micro-interactions and obvious buttons User Persona: Intermediate User - all ages - uses the app a few times a week and doesn’t interact much - is not aware of configurable options --- #### Expanded ![user-defined-ui-3](https://www.bitovi.com/hubfs/Imported_Blog_Media/user-defined-ui-3.png) ![config-ex-mob-3](https://www.bitovi.com/hubfs/Imported_Blog_Media/config-ex-mob-3.png) | **Description** | **User Persona: non-tech / disabled** | | --- | --- | | - fixed navs located up top - content priority - large typography and images - labels without icons - large buttons - obvious interactions | - mid-age to elderly - does not understand complex interface - requires obvious interactions - requires big type for readability - accessibility friendly | Description: - fixed navs located up top - content priority - large typography and images - labels without icons - large buttons - obvious interactions User Persona - mid-age to elderly - does not understand complex interface - requires obvious interactions - requires big type for readability - accessibility friendly --- #### Fully customized (drag and drop elements to selected areas) ![user-defined-ui-4](https://www.bitovi.com/hubfs/Imported_Blog_Media/user-defined-ui-41.png) ![config-ex-mob-4](https://www.bitovi.com/hubfs/Imported_Blog_Media/config-ex-mob-4.png) | **Description** | **User Persona: savvy pro** | | --- | --- | | - user can move interface components to desired location - user can choose from any of the options to complete their theme | - young to middle age - uses app more than once a day - fully understands the app - prefers gestures on touch devices - interacts frequently with multiple areas of functionality | Description: - user can move interface components to desired location - user can choose from any of the options to complete their theme User Persona: - young to middle age - uses app more than once a day - fully understands the app - prefers gestures on touch devices - interacts frequently with multiple areas of functionality #### Configurable Data Options In addition to configurable layout we can also provide options that allow the user to choose what type of data (content) they want to see inside the app. Here are a few examples of what a user might want to choose from to improve their personal experience. - which data type or category of content - rearrange the order in which data appears - view suggested data from outside sources - allow friends to influence the data ### 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 ![gmail_new_compose_window_standard](https://www.bitovi.com/hubfs/Imported_Blog_Media/gmail_new_compose_window_standard.png) 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 ![Netflix-Fire-TV](https://www.bitovi.com/hubfs/Imported_Blog_Media/Netflix-Fire-TV.png) 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](http://bitovi.com/) if you’re interested in working together. *Cheers to the future my friends.* [![Tag for user experience](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) user experience ](https://www.bitovi.com/blog/topic/user-experience) Previous Post ![](https://www.bitovi.com/hs-fs/hubfs/training-hero-bkg-5.jpg?height=117&name=training-hero-bkg-5.jpg) [ Training Series - Web Application Theory ](https://www.bitovi.com/blog/training-series-web-application-theory)   Next Post ![](https://www.bitovi.com/hs-fs/hubfs/Imported_Blog_Media/IMG_2284.jpg?height=117&name=IMG_2284.jpg) [ Bitovi Summer Training Retreat 2015 ](https://www.bitovi.com/blog/bitovi-summer-training-retreat) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/designing-configurable-interfaces", "@type" : "WebPage", "description" : "Users love to configure the interface to fit their personal workflow. Atom Groom discusses how to get started with this approach in mobile and web apps." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "The Bitovi Team" }, "dateModified" : "May 3, 2021, 4:30:04 PM", "datePublished" : "2015-08-26 10:00:00", "description" : "Users love to configure the interface to fit their personal workflow. Atom Groom discusses how to get started with this approach in mobile and web apps.", "headline" : "Designing Configurable Interfaces", "image" : { "@type" : "ImageObject", "url" : "http://cdn2.hubspot.net/hubfs/2171535/blog-header-atom2.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```