Everyday UI: Chrome Settings

Interface Description (or: Come Brows-er-round Through This Confusing Settings Page)

Ray Mackie
4 min readSep 18, 2018

The Google Chrome settings page (Figs 1–5) is meant to provide users with the ability to customize their experience of using the browser.

Figs 1–5: the full Chrome settings page

As settings pages go, it is fairly intuitive to use. Panels with descriptive text mark different categories of settings and small arrows on the right of each panel indicate drop-down menus with the settings themselves (Figs 2–3). The design is minimalist but functional, allowing user to see only possible settings and making the interface easier to use. A search bar stays fixed at the top of the page in case users cannot find the setting that they are looking for.

Despite the multiple affordances and high learnability of the design, however, it has several major flaws that decrease efficiency and prevent memorability.

First, the page is extremely text-heavy. Younger users or users who are less comfortable with the default language of their browser might have difficulty navigating to the setting that they want.

Second, the the page is extremely long. It took five screenshots just to capture all of the information on the page. Especially because it is so text-heavy, it is easy to be overwhelmed by the number of options. There is a table of contents style panel on the lefthand side, but it is hidden by default and not especially detailed, as it only shows sparse category headers.

Both of these things significantly diminish the page’s efficiency.

Additionally, each section seems to have its own confusing style, significantly decreasing memorability and learnability.

It has numerous panels with small drop-down arrows, but each drop-down seems to do something different. For example, the “manage other people” arrow in Fig 6 opens up a new popup window as shown in Fig 7:

Fig 6: The “manage other people” dropdown
Fig 7: The “manage other people” popup

On the other hand, the “Customize fonts” arrow (Fig 8)opens what initially looks like an embedded iFrame within the current window, but turns out to be a link to a different page (Fig 9):

Fig 8: The “customize fonts” dropdown
Fig 9: The “customize fonts” new page

In some cases, words (Fig 10) seem arbitrarily chosen to link to Google’s help pages (Fig 11):

Fig 10: The word “address bar” is a mysterious link…
Fig 11: …that, bizarrely enough, takes you to a separate help page that explains how to go back to the settings page from which you came.

But in other cases, help can be found by clicking on “Learn more” (Figs 11–12).

Fig 11: This time, “Learn more” is a link (note that there is also a missing period)…
Fig 12: …that takes you to the same help page with instructions on getting back to settings

There are dozens more of these inconsistencies riddling Chrome’s settings pages. I have compiled a few more into a list, to save you the trouble of having to look at dozens of screenshots:

  • Instructions on how to use the settings page are never actually linked to from the page itself. The closest we get is chrome://settings/help, which displays information about the browser and links to a general Chrome help page
  • The “Accessibility” setting opens a link to the Google Chrome store, where users can by accessibility extension. However, Chrome has a built in Accessibility page that is confusingly laid out and poorly documented, but has features that might need to be activated for certain screen readers and related technologies.

Design Choices (or: The Tangled Web of Choices that Make this Browser What it Is)

The designers who built the Google Chrome settings page had many constraints to handle. The page needs to serve both casual users (who will likely not need to change very many settings) and developers (who might have detailed technical requirements). It must adhere to Google’s style while also being malleable enough to fit other Chromium-based browsers.

It is also likely one of the least-used features of the browser, as the default settings are enough most of the time. It makes sense that developers would spend less time improving its UI/UX.

Settings Page Redesign (or: Setting Up A Better System)

Improving the settings page would require only a few simple tweaks.

  • Instead of inconsistent links, all settings categories should display hover-over tooltip text describing what the setting does
  • The text description of each item should be preceded by a small and informative graphic
  • The table of contents should be visible right when the page loads in order to help users find the settings category they’re looking for.

--

--