Designing for large touchscreens

Mario Šimić

Digital designer

As someone who made only “regular size” screens, I’ve quickly learned that designing for a big touchable surface was quite a different experience from any other project. As soon as you put together your first paper prototype on a similarly sized table, you suddenly realize that you have a different set of challenges that you usually deal with. Then again, who doesn’t love a good challenge?

Let’s make something for a large touchscreen. Okay, how difficult can it be – you take a standard size screen and make everything bigger, right? You probably already know it’s not that simple (otherwise you wouldn’t be reading this article right now). There are a lot of factors to consider, so let’s see what conclusions I’ve drawn from the project that included creating a game for a door sized screen.

Think about the context

To make something meaningful, you always need to consider the context and how will the project ultimately be used. This is something that is actually easier because large screens fit in the “not-so-portable” category of devices (unlike smartphones or tablets). This means that you can familiarise yourself with the environment that this device will be placed in. Will that place be outdoor or somewhere inside? What are the lighting conditions? By asking these types of questions, we try to get as much information about the environment as possible. Get a feeling for it, imagine yourself standing there and using it – it will influence what and how you’re presenting stuff on the screen.

Consider the users

Let’s say you have a large screen placed as a low table in the middle of the room. A kid walks in and starts tapping. And then you realize that this goofy toddler is unable to reach most of the buttons (that you placed out of reach) and starts crying, and causing s lot of drama in the process. You wake up in cold sweat and start revising your UI… ok, I went a bit too far here, but you get the point. Know who you’re designing for. Touchscreen interactives have relatively simple interactions, meaning they will appeal to a broad range of users, some of which may have limited physical capabilities (like small children or people with disabilities).

Your users will leave

Just like with mobile applications or web pages, you can expect that users will not feel any obligation to finish all actions they started. Unlike mobile devices, your touch screen will most like be a “public” device, meaning users can leave in the middle of the action, and leave the application in an “unfinished” state for the next user.

User flow example

User flow example

Planning your application’s flow must reflect that—each screen needs to have a clear set of easy-to-learn controls, so a new user can pick up where the previous left off (or even better, restart the application). This can be partially mitigated by implementing a timeout screen which will restart the app after some idle time.

Know your hardware

On web based projects, UI designers usually do not need to worry about hardware too much (with a few exceptions like resolution or good color reproduction). This changes now as differences between similarly sized screens can be great. Here is a real life example – some touchscreens have implemented capacitive technology meaning you can trigger interactions using your finger, but not with your glove. It’s the same tech you have in your smartphone. Reliable, but pretty expensive for large screens.

Other touchscreens are just normal screens with an invisible infrared grid in front of it (touch frame as they call it). As you disrupt that grid with your fingers, screen knows where that happened and registers this as a touch.

Similar screens often use different underlying technologies

Similar screens often use different underlying technologies

Don’t worry, you don’t need to be tech savvy to know this upfront, you can learn how a screen works by simply using it and seeing how it behaves. Just a quick note – touch frame screens don’t play too well with multitouch in some cases. It’s something to bear in mind if you’re designing complex multiplayer interactions.

Indicate that the screen is actually touchable

Interestingly, touch screen interactive needs to “say” that it can be interacted with. Why? Because it tends to remind some people of TV, which does not encourage people to try them out. Although a bit funny, this makes perfect sense as there are no physical difference between regular screens and touch screens. This is where you, dear designer, come in, it’s up to you to fix that. Various gesture icons within the UI or even the placement of the touchscreen can be of great help when indicating that screen is, in fact, interactive. For example, if we lay the screen at a 45° angle, this resembles a “control console” user might make use of.

Interestingly, touch screen interactive needs to “say” that it can be interacted with. Why? Because it tends to remind some people to TV.

Field of view and attention

This is an interesting one. No matter the screen size, we almost always operate with touch screen at arms-length, which means that parts of the screen (or separate screen for multi screen apps) can go well beyond our field of view.

In this case you have 2 options:

  1. put important elements in users ‘field of view so they can be easily observed and touched
  2. use animation to divert attention to key elements on the screen
User might miss things on screen that are located on the edge of their field of view

User might miss things on screen that are located on the edge of their field of view

In my experience, the first method is always the preferable one as users do not need to move their heads or hands too much. By doing this, you can reduce the amount of activity that’s needed because large touchscreens require extra physical effort to operate.

The second method needs some forward thinking because, as you divert attention to a certain part of the screen, you have to ensure that nothing important happens on the other parts. Users don’t have a complete overview of the whole screen real estate as they would on a mobile device or a computer screen, so they might miss some of the messages you’re trying to convey.

Performers delight

The whole point of having large touchscreen is to display something impressive, especially if users have the influence or control of application that runs on it. This is something your users will like a lot because a large touch screen can easily attract some audience due to its size. By making said application animated, responsive and impressive to look at, we can make users feel powerful and competent. That’s something we’re going for here, right?

By making application animated, responsive and impressive to look at, we can make users feel powerful and competent.

Size is not a resolution

Now, you’re sitting at your fancy table designing an app that will be displayed on a large touch screen. You’re pushing those elements around and set that zoom to 100% so you can see if anything is out of place. It’s a totally legit method for seeing how the element works in a larger context, but it does not give you the whole picture. The reason? Screen size.

This is the exact same reason why mobile designers use mirroring apps to get the exact feeling on how their UI will perform in real conditions. While it might not be viable to hook your Mac on an 84” screen (although, that would be insanely awesome), you can test your designs and see how touchable areas scale compared to the design on your monitor. Hardware plays a big role here as a 55” screen can be either 4k or 1080p, and that will greatly impact the sizing of your cool buttons.

So, what’s next?

Hopefully, with this newly acquired knowledge you’ll be more prepared for projects that go beyond standard devices we use every day. Bookmark this article, love it, cherish it, someday it might save you from headache or two.

P.S. Most of the stuff in this article was learned the hard way, however, there are some nuggets of wisdom that helped me format this in a more coherent way, so feel free to invest some time in reading those, they are really useful. :)

  1. Very Large Touchscreens: UX Design Differs From Mobile Screens
  2. Large Touchscreens: What’s Different?
Author

Mario Šimić

Digital designer

Degordian's UI/UX Designer. He lives his dream by combining technology with design and creating cool interactive experiences. Likes terrible puns.

All stories by Mario

SIGN UP FOR OUR MONTHLY NEWSLETTER

Get more digital stories directly in your inbox.
Your email is saved
Join the discussion

No Comments

Share your thoughts

Let's work together  →
Go to top
css.php