observa

The UX of Mobile Settings

A brief analysis of iOS8, Android KitKat (Lollipop updates soon!) & Windows Phone 8.1 settings screens.


Note: This article was translated to Chinese by 胡太狼.

Introduction

We love to analyze and write/read about good UX. It's common practice to pick an app, redesign a few screens without any constrains and then share the result in Dribbble. However, more often than not, business requirements in real projects and client's platform-constrains tend to be so complex that you end up struggling to come up with an intuitive interface.

Maybe that's why not many articles out there talk about complex projects like real dashboards for Business Intelligence, or platforms' settings that display a big set of nested options. This might not be as complicated as that, but I wanted to take a moment to compare the difference in experiences among Apple, Google and Microsoft device settings.

Devices Settings Image

There are a lot of questions to be discussed. Which OS offers the most easy-to-use settings screen? Which empowers the user the most? When should someone who changes their device settings be considered a power user? How do you approach the architecture of these screens when the user is virtually everyone?

Without a doubt, planning for these screens is a great and interesting challenge.


Screen Space Used By Persistent Menus

Since persistent menus are tied to the native UI of their respective OS, this section focus on comparing the difference of free canvas each design language provides, that is, the remaining space for the user to move through the settings.

Image showing space used by system bar on iPhone.
iOS

Using only 11% of screen space, the clever use of iOS Persistent Menu + Home button is the cleaner solution among the three OS.

Something worth noting is that Apple leads by example; the vast majority of iOS third party developers have been creating great experiences by applying correctly the Menu + Home button combo.

Image showing space used by system bars on Android.
Android

Contrary to iOS, by not having a physical Home button, Android devices must rely in that extra 7% of screen space at the bottom, which totals 18% of screen space used by Persistent Menus.

In version 4.4 (KitKat), Android introduced a 'full screen' mode for apps. This works as it sounds: both of your Persistent Menus hide, and you can bring them back by touching the screen (called the 'Lean Back' mode) or by swiping from any edge to bring back the bars (called the 'Immersive' mode).

The only reason keeping this approach from being the best among the three OS (because it totally is the best) is Android's user base fragmentation. This is only a temporary issue; hiding the system menus will surely become the new standard.

Image showing space used by system bars on Windows Phone.
Windows Phone

There are big issues with the current state of Microsoft's mobile OS.

In theory, Windows Phone has the best of two worlds:

  • It has a system bar with three options, similar to Android.
  • The system bar sits in the hardware, just like iPhone's home button.
Why then is the screen space used so poorly? What's the reason behind using an incredibly 23% of screen space for the persistent menu?

This design language needs some serious changes, and good thing is Microsoft already announced changes are coming.


Settings length

Although both of iOS and Android settings length extend by installing apps, here I'm using the settings default length to better analyze the system options.

Image showing the length of settings screens.
Windows Phone

Let's talk about WP first.

The settings are just thrown there in an endless list that doesn't follow a particular order. Good luck trying to quickly find keyboard options, or getting the difference between 'about' and 'extras+info'.

I'm intrigued about this seemingly unordered list and the design thinking that went behind it. This demands a lot from the user. I consider an error to force the user learn the precise location of a particular setting in such a painful way.

The list is longer than iOS and Android combined. And keep in mind the 23% of screen space used by the persistent menu. Again, this design language will definitely change soon.

iOS

By using just slight contrasts in the UI, the settings list in iOS ends up being nicely grouped.

The user can quickly perceive the difference among group sets and better form a mental path to any particular setting he often changes. Evenmore, icons (wireframe shows placeholders) greatly improve the fast identification of a setting.

Android

The concept of grouping the settings list into smaller sets is different here than in iOS.

Instead of using tone-contrasts like in iOS, Android presents a bit of contrast in line weights, preceded by a really useful label to define what the set of settings is about. (Also, icons in each setting, not showed in the wireframe)

One might say that iOS grouping by tones, without labels, is enough. But the most common user is, ironically, not that tech-savvy. Labels represent a quick and precise way to quickly identify what the set is about.

I consider Android's approach to be the best in the current state of these mobile OS. However, Android should change its dark-colored theme. iOS feels much more welcoming using light tones.


Ordering

Which process did Apple, Google and Microsoft apply for ordering their mobile settings? Which one would you apply if you were assigned this task? For the sake of comparison (and since Android presents the best ordered list), I decided to use Android's 5 categories and, from a card-sorting approach, better grasp the arragement of settings in iOS and Windows Phone.

Refer to this list of categories to identify the group a setting belongs to:

Network

Device

Personal

Accounts

System

Image showing the categories of settings.

Android is the standard by which others are measured here. It has the best settings categorization. I'm sure this is due to the exhaustive user testing process every Google project goes through.

Even without using labels, iOS ordering is cohesive and easy to follow. As we can see by the colored cards, there's a good and balanced distribution of settings, making it easy for the user to scan through them.

Windows Phone, once again, it's difficult to understand. Settings are so mixed, without a sense of good distribution nor balance among its categories, that the user easily ends up confused. The user is forced to slowly scan through each option in order to find what he's looking for. Honestly, this appears to never have been tested.


Conclusions

This brief analysis covered only the first level of settings a user encounters in their device. We can grasp much of these OS settings experience by observing and comparing their available screen space, the length of the settings list and the ordering of its options.

One could argue that one of Windows Phone strenghts is that there are not many sub-levels as in iOS or Android. However, something crucial is to engage the user from start, and help him quickly find what he's looking for. Right now, Windows Phone is well behind the goal, relying too much in users' ability to adapt to a complex, unordered system.

iOS and Android are the big, leading OS. Each one constantly outdoing the other. In the current state of UX, iOS is the most easy-to-use, where Android empowers users the most.

However, and these screens are a good example of it, Android is on track to have the best UI (Lollipop), and to become the leading experience in mobile.

At the end of the day, the mobile experience as a whole is a project Apple, Google and Microsoft are building together, and its crucial they have different approaches to it.


JLFM - setentaydos [at] gmail - @72mena - linkedin