Very Large Touchscreens: UX Design Differs From Mobile Screens

As smartphones continue to improve at rapid rates, tasks that used to be inconceivable on small touchscreens have become (often) quite simple and acceptable. We can read, buy, work, and collaborate… well sort of. Sharing information via a phone is easy, but sharing the small screen itself with the person by your side is not. If we need to look at the same item at the same time together, a larger screen or even a large print will easily win out over a 4-inch display. But maybe in the not-too-distant future tiny powerful projectors will come built in on all of our phones and watches, facilitating group viewing on any plain wall. In this scenario, the input device may still be the phone as a remote control. Or maybe we will be able to use the human body or a gestural device, like the Myo Gesture Control Armband, for easier input, enabling us to “touch” the links on the wall and have the UI react.

But until this day arrives, let’s consider very large touchscreens of today, for which the screen is both the input and the output device.

I had the pleasure of interviewing Dorothy Shamonsky who is Lead UX Designer for ViewPoint, a software provider for touchscreen kiosks. Shamonsky works on the interface design for large touchscreens, including some as large as 72-inch.

To get a sense of how big a 72-inch screen is, stretch your arms straight out by your sides. This is about the distance from your fingertips on one hand to those on your other hand. And while the screen is about 380 times larger than that of the average smart phone, some design principles for a phone touchscreen apply to the huge touchscreen. Shamonsky provided these and many more insights and design ideas for large, immovable touchscreens. These are described in this article.

Design Recommendations for Both Small and Very Large Touchscreens

Whether designing for a 7- or 70-inch touchscreen, there are many guidelines that hold true. Some of the most important ones include the following:

1. Allow natural gestures.
2. Minimize the interaction cost of tapping, typing, and moving between screens.
3. Offer user feedback via simple animations.
4. Make it easy-to-decipher which elements are tappable.
5. Make targets easy to tap.
6. Offer legible text and graphics.

What’s Different for Very Large Screens

Beyond these commonalities, there are also some important differences between small and very large touchscreens, both in terms of user behavior and design recommendations. Here we discuss a few of them, directed at both the macro level (how to design the screen so users know how they’re supposed to interact with it) and the micro level (how to design the specific UI elements so that they are noticeable).

Affordance and Signifiers at the Macro Level

Most people have learned to touch a smartphone screens, as well as screens that are commonly touch enabled at ATMs, gas pumps, ticket kiosks, or museums. But in some environments people do not know that a large screen is touch enabled and, due to this poorly signaled affordance, they are reluctant to touch large displays when they are not sure whether they will enjoy any benefit for the effort.

According to Shamonsky’s experiences, “Displays mounted on a wall or a stand tend to remind people of a TV and don’t imply that they are touch enabled. Instead users must rely on kiosk-specific cues such as location, angle of screen, and signage to figure out - that a large-screen interface is touch enabled.”

Shamonsky suggests a particular signifier: position the display at a 45-degree angle on the wall, with the top of the display leaning toward the wall and the bottom toward the user. “This tends to reassure users that the screen is touch enabled, especially in the absence of a keyboard or mouse. Tabletop displays also signal touch interactivity. But if you want to entertain and attract users from across a room, and encourage shared interaction, a wall-mounted screen is much more dramatic and preferable to a tabletop display.”

Large displays offer plenty of screen real estate for interface controls, so designers are not challenged to fit controls into the interface. However, since UI elements need to be larger to be seen and interacted with on a large screen, a big screen can fill up surprisingly quickly. Thus, a very large touchscreen design suffers the same threat of being over filled that smaller screens do. Designers should avoid clutter and should heed Edward Tufte’s recommendation to mind the ratio of content versus other UI elements. (Tufte’s Data-Ink Ratio is usually applied to graphs but can also be telling about screen real estate and content value.) Similarly, our eyetracking research reveals that page density accounts for 8% of the variability in how people look at web pages. In other words, good content, understandable UI elements, and less cluttered pages engage people more than cluttered pages do.

Recommended signifiers to indicating that a large screen is a touchscreen:

• If the display is affixed to a wall, angle the screen 45 degrees.
• Choose a tabletop display (flat or slightly angled).
• Prompt to touch with words on the screen and other touchable-looking items on the screen.
• Offer signage near the screen prompting to touch, such as modest placard that says, “This is a touchscreen”.
• Implement a timeout event that, after a particular amount of idle time, starts an “attract mode” that encourages people to try the device.
• Make the UI engaging and interesting so there are often other people using it people learn how to use it by seeing others using the touchscreen.
• We could say not to clean the screen or use a material that retains fingerprints and smudges longer, but that would be gross. Still, fingerprints on the screen are signifiers.
• Measure the clutter amount in the screen design. Remove screen content with little or no value so the important actions and features are more visible.

Touch Targets and Signifiers at the Micro Level

On smartphones, interface controls are sometimes hidden in small controls or hard-to-decipher icons. But it is at least possible to take in the whole screen with one glance. With a very large screen, however, the large field of view makes it difficult to see and notice interface elements. Users must move their heads around, not just the angle of their eye gazes, and must engage their necks to see all the parts of the interface.

Shamonsky describes, “It seems counterintuitive that interface controls would be harder to find on a large screen, but that is my experience observing users. So the designer has a different challenge with large screens than with small screens, which is to make interface elements noticeable, without being obnoxious.”

People interacting with very large touchscreens are usually farther away from the screen than are when using a phone, so this affects what they can see. They are most likely to:

• reach for the interface at extended arm’s length
• stand up
• have flexibility to move very close or step back to look at the screen.

Shamonsky notes, “Stepping back does provide a better ability to see the entire display more easily, and there is a tendency for users to do that as they interact with the device.”

In addition to the vision considerations, designers need to consider reach and touch accuracy on a very large screen on which people can tap, swipe, flick, drag, pinch close, and pinch open. But unlike a phone that people can hold comfortably in their hands, a large screen is:

• mounted firmly
• cannot be picked up by the user
• often cannot be tilted or swiveled at all
• may be flat against the wall

When designing links and buttons for computer screens and phones we already consider Fitts’s Law, which says that the time to acquire a target is a function of the distance to and size of the target. With mobile-phone design, because the screen is so small, all points are almost at the same distance from our fingertips, so we mostly focus on target size.

But with very large touchscreens, the distance from the target becomes more relevant. In particular, designers must consider the human physical traits and capabilities such as:

• arm reach
• arm motion
• hand touch with palm or multiple fingertips
• height of the person

Of course, the target size still remains essential in ensuring accurate reach. Shamonsky shared, “Comfortable target sizes on large displays are more complicated to determine, although the large screen gives the designer much more space to err on the side of larger target sizes. A frequently used target may need to be larger so people don’t have to struggle and slow down their arm momentum to hit it accurately. A rarely used target works at a minimum size [because the nuisance associated with the use is not experienced often].”

Another factor to consider is user fatigue, observed Shamonsky. “Although an expansive screen is seductive and offers many advantages over a small screen, it can be tiring to use,” she says. “Large touchscreens engage the whole body since the large space usually requires the use of arms to reach interface controls. The physical effort involved in interacting with a very large screen is significant enough that it becomes noticeably tiring when the task goes beyond casual browsing. In an editorial in Scientific American, David Pogue alluded to the effect of extended use of touchscreen as ‘gorilla arm’.”

When comparing a drag gesture on a very large screen to the same drag gesture on a small screen, interface elements feel harder to move on the large screen. Shamonsky observed that, “Tap is not an issue. But since swipe, flick, drag, and pinch and unpinch require continuous effort applied to a screen element, those gestures can feel more strenuous on a large display.”

Finally, the angle at which the screen is positioned can also alter how easily these gestures can be made, according to Shamonsky. “Especially when the screen is positioned at a 90-degree angle [hung so it is flat on the wall], it can negatively affect the user’s accuracy when dragging, pinching and unpinching, and typing on an onscreen keyboard. Allowing people to move the keyboard affords flexibility.”

Recommendations for gestures and text input, and for signifiers indicating controls on a large touchscreen:

• Make large interface elements.
• Add animations and slight movement to elements to attract the user’s eye.

• Ensure that text, images, and buttons are legible and decipherable, especially when standing at arm’s length from the screen. Create larger targets that also account for arm motion, arm reach, and user height variables.
• Make the on-screen keyboard a moveable element so users may drag it and use it in an area on the screen that is most comfortable for them—independent on their height.
• Adjust the drag, acceleration, and deceleration on interface elements to make them feel lighter and easy to control.

Privacy and Screen Sharing

Sharing the screen occurs naturally when there are multiple people and a very large screen present. Shamonsky explains that sharing “begins with a user seeing a large display across a room and observing others interact with it. As the user approaches the device, she may even engage with the current users and comment to them about what she is observing.” Then, depending on the actual size of the device, there is likely enough screen space for 2 or 3 people to interact at the same time.

The negative flipside to the easy screen sharing is that there is little or no privacy for users of large, public touch-screens. Shamonsky says that a screen angled at 45 degrees, “does offer a small amount of privacy from those standing farther back, but a vertical screen can only offer privacy of scale.”

Recommendations for privacy

• Consider the type of information you are asking people to enter, and the environment in which they will use the touch screen. Based on this, decide whether the information should be asked for at all.
• If asking someone to enter something private, for example an email address, consider making the keyboard itself fairly large but displaying text that is typed as small as possible (so it is only legible for people standing close to the display).

Freedom and Novelty of a Large Screen

“One of the most striking qualities of a large touchscreen,” explains Shamonsky, “is the size of the space in which information is presented, and the option to ‘play’ at interacting. It is inherently satisfying to have an expansive view of something. It is also appealing to have a large space in which to gesture with your whole arm, to move things around, and to share the space with others.”

Shamonsky also explained an unexpected attribute of large touchscreens: drawing out the entertainer in the user. “Obviously, others can observe what you are doing, so you become a performer of sorts with the application, which can be fun,” she says.

Recommendations for supporting “performers”

Ensure that the users are as comfortable as possible “performing”. You can do this by making them feel competent with designs that maximize ease of use. Adding in cool interface effects can always help a performer look impressive.

Conclusion

The table below summarizes some of the user behaviors with smart phones, large touch screens such as 24-in tablets, and very large touchscreens. (Besides their size, the main difference between large and very large touchescreens is that the large touchscreens can still be moved around by the user relatively easily.) Notice that large and very large touch screens present the most similar challenges.

Shamonsky shares other findings based on her research experience with very large touch screens, “A large touchscreen can look beautiful and is enjoyable to interact with! At the same time, a large display will magnify a poor user experience. If you don’t like the way an interface looks at a small size, on a large screen it will be more offensive. Everything about the user experience is exaggerated at the large size—the beauty and the fun, as well as the effort and the frustration. Attempting to use touch on sites and apps that are were not designed for touch is, if nothing else, boring. Creating compelling touch interaction requires an understanding of the familiar gestures and how to use them appropriately. Use simple and clear visual and aural feedback to create a sense of tactile feedback. Tune into the joy of a good user experience. ”

For more information about designing for different screen sizes, consider our Scaling User Interfaces course.

If you are interested in Dorothy Shamonsky's other research, check out her online seminar, Designer-Developer Dissonance.