Designing Adaptive UI for New Types of Screens
When people think about user interfaces, they most likely consider a computer screen or maybe a phone. Though the devices in each group differ slightly, interface design is still usually thought of as either desktop or mobile.
But in recent times, the range of screen sizes has grown to be as small as a watch face and as big as a flat screen TV. People interact with information in more parts of their lives in increasingly unique ways. With these new types of screens, how do you design an effective user interface?
Key Features
Devices serve different purposes in a variety of contexts, and the interface must support user goals in these contexts. Do certain features on a desktop matter to someone viewing their smartwatch or checking their phone? Are there device limitations that affect people’s ability to interact with specific elements?
For example:
Mouse hovering isn’t possible on a mobile device
Small buttons are more difficult to tap than to click
Mobile First Approach
Many products are initially designed for desktop and then converted to fit other devices as a secondary priority. This is called graceful degradation, as elements are gradually removed or changed to fit the new screen. However, computer screens being larger means more room for content, visuals, and features that may not be essential to using the service; trying to then cram all this extra material onto a small screen can cause clutter and complexity that interfere with user experience.
UXPin’s A Hands-On Guide to Mobile-First Responsive Design explains, “The problem with graceful degradation is that when you build the all-inclusive design right from the start, the core and supplementary elements merge and become harder to distinguish and separate. The entire philosophy runs the risk of treating mobile design as more of an afterthought since you’re ‘cutting down’ the experience” (UXPin).
This is why many designers instead utilize a mobile first approach. By starting with the smallest device the product will be shown on, designers are forced to decide what parts are most important. After creating a UI that effectively fulfills core functions, it is then easy to expand and build on that for a larger screen.
Interactions
Different devices involve different ways to interact, whether it be a TV remote, a computer mouse, or a touch screen. It is important to capitalize on the methods available for each type to create flexible options for users.
In his article for Onething Design, The Impact of Wearable UX and Smartwatch UI Design: From User Experience to Product Success, Siddhant Gandotra says, “Because the screens on wearables are small, it's crucial to focus on the most important stuff […] Get creative with how people can interact with the device. Maybe it responds to touch, buttons, or even your voice” (Gandotra).
Adaptive UI
Adapting an interface to fit the various devices it may be accessed on is crucial. It ensures that no matter how and where a person uses the service, they will have an enjoyable experience that effectively helps them fulfill their goals.
