Designing for Large Touchscreens
AuthorMario Šimić
DateSep 12, 2018
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 touchscreen 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
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 colour 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
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 is 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.
Field of View and Attention
This is an interesting one. No matter the screen size, we almost always operate with a touchscreen 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:
- Put important elements in users ‘field of view so they can be easily observed and touched
- Use animation to divert attention to key elements on the screen
A 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 in 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 a large touchscreen is to display something impressive, especially if users have the influence or control of the 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?
Size Is Not a Resolution
Now, you’re sitting at your fancy table designing an app that will be displayed on a large touchscreen. 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 a 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. 🙂
