SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Adding Customization Options to Your User Interface

April 9, 2019 by Alex Fox

There’s a careful balance to be struck when adding customization options to your user interface. You need to provide a real degree of control, or dictate your design completely. Here are some things to consider when applying customization options to your user interface.

Theme Options

If you’re providing the option for your user interface to be customized, you’ll do well to think of them as themes. After all, a theme is nothing more than a collection of specific options preselected. By using themes, you give users the power to exert vast control over the user interface. It might be that there is only one theme. It might be that you can only offer one theme. But by bundling your preset modes as themes, you can always reserve the option of including additional customization options. Provided you create the framework for accommodating themes, you will always have the option to exercise that power. Without a unifying framework, you’ll find that many users are ill-suited to exercising customization control over the interface. They would often do well to see the results of a well-created theme.

Dark Mode

YouTube’s dark mode is simple but functional. Dark modes are especially appreciated in media-heavy websites and applications, especially video and longreads.

A dark mode or night mode is likely the most popular interface customization around today. This is especially popular on websites that host lots of text-based content. Some folks just prefer the aesthetic experience of light text against a dark background, while others find that reading on a dark background is less exhausting but others find it unbearable. So, if you do include this option, make sure you also provide a switch.

Dark mode shouldn’t just be black text on a white background. It should be approached as a separate color concept, designed on equal footing with the default color palette. Just like with the light mode design, the aesthetics should be based on hierarchy, content, and relative importance. It should help guide the user to the content they’re here for while producing as little frustration or confusion. Inverting your palette might be the first step, but it shouldn’t be your last.

Size and Typeface Options

Feedly provides customization options for typeface and size. Some of them are restricted to paid user accounts, which provides a good differentiator for premium memberships.

In addition to options for adjusting the color of the interface, you should include tools for adjusting the size of text. While the zoom feature of any browser can enlarge text, it does so by also enlarging everything equally. This means that images are quickly blurred, and sufficient zooming can trigger media queries.

Text size options should be set by the user, with excessively small and large options. If you plan for the user to read considerable text, you owe them the courtesy of providing easy-to-read text. This can be as simple as a size slider, or choosing from a fixed number of options. You can also give users the power to specify the text size by point. Whatever you choose, take care in setting minimums and maximums. These values should be well beyond what you believe are the most useful minimum and maximum values. Not all users will share your same understanding of the compromises that make text most readable. Don’t let a lack of creativity in imagining the variety of your visitors make your site less functional. Give a wide berth for the user’s needs.

Reset to Defaults

Any good user customization engine needs an escape hatch. There needs to be an emergency reset switch, something that reverts the system back to a condition that guaranteed to be usable. It might remove the users existing customization, but it at least provides a known basis for saving something. Be sure that default switches provide meaningful fallbacks, with an inalienable “abandon ship” switch that provides a safe exit from the existing theme.

You can provide default rests both globally and for specific settings or sub-sections. A global default switch requires setting defaults for all values. Once you’ve done that, including one default switch per option isn’t much harder. Balance the complexity of the interface against the difficulty of returning the slider to a “known good” condition. If it’s very difficult to “recover” a setting or subsection to a fully functional condition, then provide robust default resets.

Keep Control Where It Counts

In providing customization options for the appearance of your user interface, you are essentially giving the user the power over the coat of paint atop the basic structure of the site. You do not want to give users complete and total control, as this is rarely necessary and provides the user with countless ways to completely immobilizing the content of all your heard work.

Do not allow the user complete control over the system. You need to carefully consider each decision you empower the user to make. If you expose every possible slider and lever, the adventurous user will quickly break your app. They might know its their fault, and they might not blame you, but they should never have the opportunity to break your work. Instead, they should be given customization options that have the potential of enhancing the experience of using the site.

Sometimes, additional options can broaden the audience of your site or app. Options that make the service easier to use—accessibility options, you might call them—should always be enshrined. But good design is good accessibility, and a well-formed structure will never impede the use of the site.

If you can provide color and text options that appeal to the largest range of users, those that need them will appreciate it. Each and every one of us can benefit from effective accessibility options, whether we are young or old, healthy or infirm. Accessibility is simply about making the interface most usable for you. That’s what all customization and display options should be bent towards: creating the most usable version of your website or app for the greatest number of people.

You might also like the following posts:

How Many Programming Languages Should I Learn?

Decoding HTML Status and Error Codes For Fun and Profit

The 7 Programming Languages Web Developers Need To Know in 2019

Filed Under: Design Tagged With: Design, design tips, tips

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022