LIFX Corner Segmented Control

✋ What is it?

This is a UI control found in the LIFX iOS Official App. This UI element is a segmented control that uses iconography (as opposed to text strings) and is aligned to the right of the nav-bar, which frees up real estate that is used by another significant navigation control aligned to the left.

🤲 How does this interaction or solution work?

LIFX is a company that produces smart home lights. As with most companies in this space, LIFX has a dedicated app that allows its users to control the different light parameters like brightness, color, and on/off states.

One major feature of these apps is the ability to create and control zones and groups, create scenes, and set up schedules, while maintaining the ability to create

Due to the intricate information architecture behind these types of apps, there's a need to create UI controls that can show the different amount of named lists (groups, scenes, etc.), objects (lights), and modes (calendars, routines, etc.).

A way to solve this problem is by breaking apart information is by using segmented controls. However, segmented controls can take a lot of screen real estate.

This particular segmented control is unique because it's tucked to the right corner of the navigation bar and uses iconography instead of text.

🙌 How does this interaction or solution work?

Optimized Real Estate

There's no doubt that screen real estate is a common challenge for mobile application developers. This UI control is an excellent example of a user interface treatment that takes optimal advantage of the available screen real estate.

Instead of using a regular segmented control under the navigation bar that takes vertical space and creates empty gutters, LIFX opted to add a segmented control as part of the nav-bar itself, and instead of being centered is aligned to the right.

This alignment frees up space for other UI controls on the left side of the nav-bar.