Adobe Creative Cloud

Design

October 17, 2016 /UX/UI Design /

Holistic Adaptive Design: Factors to Consider in a Multi-Screen World

When we think about touch screens, we think about handheld devices like smartphones and tablets. The problem with having only one design is that every screen has a different viewing distance and height, creating a visual parallaxing factor that affects the usability of the device, system, and user interface. Touch screens are becoming larger and are being incorporated into laptops and desktops, and, more recently, they are being used as interactive displays in a variety of settings. You may have seen the large touch screens that McDonald’s is experimenting with in self-service ordering kiosks.

mcd

Users interact with content throughout the day with multiple devices. Each device has its own features and capabilities that prevents a one size fit all solution from being implemented. An adaptive/progressive enhancement approach needs to be taken in order to provide users with the best interactive experience with content in the proper context of use. These experiences and use cases are growing more dynamic and diverse, influenced by changes in technology, demographics and metadata.

When designing in a multi-screen world, the three major factors to consider at minimum are: viewing distance, touch area, and touch targets and interactions.

Viewing Distance

The viewing distance is the distance from which the user will read or interact with the content or device. Generally, for a handheld device, the distance is about one and half feet, while for a television, the viewing distance is, on average, ten feet. For the handheld, the input is a finger while for the television the input is the remote. Distance also has an effect on font size. The farther away the user is from the screen, the bigger the typography needs to be in order to maintain readability.

How can we adapt content to the viewing distance if the viewing distance changes in different use cases or situations? Marko Dugonjic has experimented with facial recognition for responsive typography, using media queries based on the distance of the user to the screen. As the user moves closer to the screen, the font size decreases (and vice versa). We need to start thinking about distance as part of the user experience and remember that it is not limited to the device-width form factor. Think of this as three dimensional responsive design. Distance is part of what creates a relationship with content, whether it is a “lean in” or “lean back” experience.

Touch Area

Touch area takes into consideration the size of the screen and how it is held. This will determine the areas of the screen that are easy or hard to access. The “easy/OK/hard” zone illustrates the ease of access to areas of the screen based on designing for the thumb. The touch areas can also be expanded in tablets and touch screen-enabled laptops. How users use different devices will determine the placement of touch targets, menu systems and navigational elements. Apple added a reachability feature to iOS8 to help users keep icons and interactive elements in the OK thumb zone.

maxheighttouch

An interactive touch display can create problems due to its physicality and height. A menu system that is in the upper corner of the interface may not be an issue for someone who is six feet tall, but to a shorter person, or someone in a wheelchair, the menu system is now out of reach. Conversely, a menu system that is in the lower corners may be easy for someone who is shorter to use, but it creates the need for an awkward posture for interacting with the touch screen for taller users.

Merging digital and physical interfaces has numerous ergonomic and input problems. Next time you travel, observe people using the self check-in kiosks at airports. The screens are too low for many users and the travel document area requires taller people to crouch into awkward positions. In isolation this may be a minor inconvenience, but in a busy airport with time constraints, long line-ups and stress of travel, can make a simple task difficult when external factors come into play.

adaptivedesignheader

The issue of user height or maximum reach can be solved in one of two ways. The first is to ask users to track or touch an interface element to determine the user’s reach in relation to the screen. Once the task is completed, the UI adapts to the newly defined container for the user. Depending on the user’s reach, the UI may move up or down the screen to create the proper ergonomics for the user.

The other is to create interactive zones around the form factor that will provide the user with navigational elements or other menus rather than relying on the standard menu layout paradigms within the screen, i.e., top left or right.

adaptivedesign2

Touch Targets and Interactions

Touch target is the minimum and maximum sizes of interface controls, links and buttons to capture finger actions, gestures and inputs. Making the touch target too small, which requires precise input precision, can frustrate users, while making touch targets too big can clutter the interface. Design for touch, and design for the thumb. Designing touch targets for the thumb pad (average width of 72 pixels) lowers the number of missed taps and input errors. Keep in mind that touch accuracy varies based on the position on screen.

touchtargets

Image Courtesy of Steven Hoober

Measuring the accuracy and time interval between tasks or inputs creates data that can be used to design an adaptive UI for people of different ages and/or cognitive abilities. The accuracy of touch inputs and how the mouse is moved across the screen can be used to adapt the digital experiences for those with Alzheimer’s or motor skill disabilities. Dealing with an aging population will make designing user experiences more challenging, but incredibly rewarding. We are only starting to scratch the surface of designing digital products that fully leverage the growing list of device features and capabilities. We have yet to tap into device metadata on who is accessing content and when and where content is being accessed. Inclusive and holistic adaptive design should be the standard.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD