At Josh.ai we strive to make the best user experience possible for our clients. This includes hardware, voice control, automations, and of course graphical interfaces.
Connected lighting is one of the first devices most homeowners invest in when outfitting a smart home. The ability to say a command or tap a button to control all your lights, whether at home or away, is powerful. In this article we’ll explore the intricacies of designing for connected lighting use cases, from common to obscure.
“Smart lights” typically comes in three variations:
- A “smart” bulb that has an onboard Wi-Fi, Z-Wave, or Zigbee radio, connects to a central hub or router, and is connected to a regular wall switch that controls the power
- A regular bulb that is controlled by a “smart” switch with built-in Wi-Fi, Z-Wave, or Zigbee that connects to a central hub, router, or becomes the hub, and takes the place of an old switch on the wall
- A series of bulbs across several rooms all controlled by a central processor(s) that support both wire and wireless connections to individual bulbs, requires professional programming, and is controllable over the local area network
There are even more variations involving built-in microphones and speakers on the bulb or switch itself, but for the purpose of illustrating strictly lighting control, we will stick to the most common types of smart lighting.
The efficacy and response times of smart lighting depend on multiple factors:
- Number of smart bulbs being installed — the more there are, the more network traffic there is, causing lag and delays
- Positioning of smart bulbs / switches — if the bulb / switch is in a Wi-Fi deadzone, or if it runs on a mesh network (Z-Wave, Zigbee) and is too far from the last device or over the limit for a sustainable network, commands fall through
- Wi-Fi is the most common and easiest connection protocol but can pose security risks
- Z-Wave and Zigbee require an additional hub to connect to all devices and oftentimes have a limit to how many they can effectively control before requiring additional hardware to extend their reach
- Serial vs parallel connections — a command to “turn on all the lights” will take much longer if lights are connected in serial versus in parallel
For most folks, buying into smart lighting means a couple rooms outfitted with smart bulbs or switches by brands like Philips Hue, LIFX, TP-Link, Eufy, and others. This is a common use case where complexity is limited to turning on and off a set of lights across one or two rooms, and occasionally changing colors if the bulbs support it.
On the other end of the spectrum, there are houses with lighting loads (a “load” = a set of lights represented as one entity, i.e. “living room ceiling lights”) in the hundreds, each with their own unique set of properties. Some lights are binary on/off, some are dimmers, some are dimmers with temperature control, and some are dimmers with near-full spectrum color. Even more advanced setups feature bulbs with the ability to intensify or desaturate a certain range of the color spectrum. This is particularly useful for showcasing pieces of artwork in a home. Such setups are commonly controlled by Lutron, Ketra, Crestron, and Control4.
All of these lights can be controlled via physical switch, voice, sensors, and of course, a graphical user interface (an app). No longer is it enough to just display a simple “on/off” toggle. A modern and competent lighting control interface must:
- Adapt the control interface to fit the wide range of capabilities of smart lights (turn on/off, adjust brightness, set hue/saturation/brightness, apply chosen setting across several lights, retain last on state, save presets)
- Accurately track and display the current states of all lights in a home
- Provide equally quick access to a single light, a group of lights, or all the lights in a home
- Respond to the user if an action was successful, failed, or is taking longer than usual to finish
- Introduce options to link lighting controls to other aspects of home automation, such as circadian lighting, scenes, and conditional logic (if a motion sensor is triggered, turn on the lights)
Challenges & Ambiguities
- Displaying a light’s current state (this light is already on) versus intent (tap this button to turn the light on)
- Controlling lights at a group or room level, including ability to change color
- Offering multiple methods to manipulate a characteristic (eg. draggable slider vs numerical value input vs lo/med/hi preset buttons to change brightness)
- Retaining previously-on state; a light can be turned off but show that turning it back on will resume the last configuration (eg. 2700K warmness at 56% brightness)
- Integrating hue, saturation, and brightness into as simple a control scheme as possible
- Handling sliders at a room level that control a mix of binary lights and dimmers set to different values (some are off, some are at non-zero values)
- Defining lighting profiles that adjust to the time of day (asking to turn on your lights at 2AM should set them to a soft glow, not 100%)
- Disambiguating between lights with common names; eg. “ceiling lights” in the downstairs living room vs the upstairs living room
- Addressing a light by multiple names, as family members tend to refer to devices throughout the house by different names
- Making the control interface as consistent as possible on mobile phones, tablets, and desktop browsers
Examples in Practice
Pros: Central dashboard with quick scrolling access to all devices, easy to understand interface for dimming lights, scene creator and event scheduler, pick custom icons for different types of lights, offers widgets for quick actions
Cons: Not easy to control lights at a room level, can’t group lights together outside of rooms unless as part of a scene
Pros: Granular color changing controls, easy grouping controls, easy to apply the same color across multiple lights, wide range of scenes and custom scene creator, routines provide geofenced home and away modes, user customizable default “on” modes (lights can turn on to an ambient level), timer ability to have lights fade off at bedtime, offers widgets for quick actions
Cons: Scenes and routines lack feature parity across third party integrations and even Philips’ own hardware accessories, liberal use of colors can be jarring to look at
Pros: Optimized hue/saturation/brightness sliders make it easy to get specific colors with just your thumb in a small area, circadian lighting mode (not pictured), wide range of scenes and additional features like flicker and music visualizer
Cons: Main dashboard (not pictured) is hard to differentiate and navigate between multiple rooms as their shortcuts all look the same
Pros: Wide-bodied slider paired with haptic feedback gives the user absolute certainty about what they are controlling, animations are smooth
Cons: Unorganized dashboard with too many tiles is difficult to navigate, no easy way to control all lights at a home or room level, color presets and color pickers are clunky, does not retain last-on power state, no clear way to group lights together unless as part of a scene
Pros: User defined device groups are a welcome feature, can control lights at a home or room level, retains last-on power state, plain text readout coupled with clear visual reinforces the current state
Cons: Getting to a specific light control is tedious and buried under many steps, color picker is limited and does not give free range to the full spectrum, no support for ambient and circadian modes
Pros: Dashboard is action oriented with all lights on/off as the top two buttons, dimmer interface is light and friendly, retains last-on power state
Cons: Main dashboard is tedious to scroll through to get to a certain room or device, device groups only extend to audio devices, color picker is limited and does not give free range to the full color spectrum
Pros: Granular control allows for adjusting the brightness with a slider or with button presets that support scenes, advanced color picker dives into RGB+W along with temperature control, user configured color presets, can apply presets across the board to multiple lights throughout the house
Cons: Navigating to a specific light is buried under several steps, UI elements are difficult to read on top of some photos, advanced controls may overwhelm some users
Lutron Connect (Radio Ra2, Homeworks QS, Ketra)
Pros: Offers advanced options like vibrancy mode and supports circadian lighting (requires custom programming and specific hardware)
Cons: Vibrancy mode limited to high or low settings only, can’t apply color preset across the board to multiple lights, can’t create scenes beyond triggering existing macros programmed to a physical keypad
Like any thoughtful product, our interface is under a constant state of change as we test and learn from real world use cases. The current proposed solution is the result of four years of ideating, prototyping, testing, and refining. We expect to learn even more with the newest iteration. We aim to strike a balance between utility, ease of use, and aesthetics without sacrificing one for another when designing our interfaces.
A common point of feedback from users was the need to quickly jump to lights that are currently on without having to tap and scroll through numerous menus. We designed the top half of the app’s main screen to highlight exactly what’s on. A single tap drills down into a room level view, and another tap on a room reveals individual lights. At every level there is easy access to “all on” and “all off” buttons and a slider to manipulate all lights within that view simultaneously.
Room Level Control
When we initially started the design process for whole home lighting control, we designed around the assumption that users wanted access to lights on an individual scale. We quickly learned that users actually wanted access on a room scale as most use cases saw people controlling an entire room’s worth of lights at once. Rarely do users drill down to an individual light.
Basic Controllers: Binary & Dimmer
The two most common types of lights encountered are binary on/off lights and dimmers. There are hundreds of discarded artboards leading up to the 4 seen here. When designing something “simple,” it’s far too easy to over-design.
Complex Controllers: Temperature & Color
In our latest app update we introduce the ability to control lights with hue, saturation, and temperature sliders in a compact format.
Advanced Controllers: Full H/S/B, Temperature, Batch Preset, and Ambiance
As Josh grows its integrations to support lights with circadian rhythms and more finite control, so too must the interface expand to accommodate those features. This is a peek at an in-progress iteration featuring user-defined color presets, a more robust color and temperature picker, applying a color preset to a batch of lights, advanced settings such as multiple device nicknames (which we’ve supported from day one), and a time constrained ambient lighting mode (so your lights don’t blind you at 2AM on the way to the bathroom).
Beyond the immediate interface showcased here, Josh can tie in lighting control to complex user-configured scenes (a blog post for another day) with natural language. The goal has been and always will be to provide the user with equally capable access to control their smart home by any means they please, whether it be voice, physical controls, or on a good old graphical user interface.
It’s easy to underestimate the most humble aspect of home control, but lighting is oftentimes the most crucial aspect of designing for a smart home. Understanding the variable complexities involved will help inform better user interfaces for the next generation of smart connected lighting solutions.
This post was written by Jason, one of two designers at Josh.ai. He attended Art Center College of Design in Pasadena, California and studied illustration and entertainment design. Jason survives on cold brew coffee, collects LEGOs, and wears (almost) exclusively Star Wars t-shirts. You can follow Jason on Instagram at @jas0n_0n_a_bike.