Patrick Haney and Jenna Marino take you through the practices to follow and mistakes to avoid when designing for smart devices of all shapes and sizes
Designers today have a number of things working in their favour. They are able to search a vast collection of resources for documentation and inspiration online, they can become part of a community around specific devices and operating systems, and they can easily collaborate and share knowledge with their colleagues.
But with all the technological advances in our society, a designer’s responsibilities have begun to bleed into other areas as well. Design constraints are no longer just about screen sizes and operating systems. Here are some tips and tricks to help any designer in our new, multi-device, connected world.
State the obvious
As designers, sometimes we take things for granted. We’ve become familiar with the notorious hamburger icon as a navigational prompt, but how many of our users are still unaware of what it means? And how can we help ease the transition to these new interface metaphors?
Think about the last time you found yourself in front of a restroom with cleverly renamed signage for ‘Men’ and ‘Women’. Did it take you an extra second or two to get the right door? Ambiguous restroom labels are almost as annoying as the obscure UI patterns we’ve begun to see in our websites and apps.
Being clever may add delight, but the obvious always wins. As Luke Wroblewski points out, hiding parts of your app behind menus, ambiguous or not, can greatly decrease engagement. It’s a case of out of sight, out of mind.
For smart TVs, it gets even worse. Hiding important information under a menu on a television screen never works out for your users. They typically don’t know to look there – and even when they do, menus are difficult to navigate using traditional television input methods.
Instead, make sure your interface elements are front and centre, and their intent is obvious. Use straightforward labels, with icons to reinforce their meaning. The folks at nGen Works integrated the hamburger icon into the navigation on their site by replacing the ‘E’ in the ‘Menu’ label. Obvious and clever: the perfect combination.
In fact, using the word ‘Menu’ rather than the hamburger icon can increase engagement by up to 20 per cent, according to New Zealand-based web developer James Foster. These familiar three bars may not be as familiar as we think.
Value users’ input
The way that we interact with our computing devices is constantly changing. Keyboards, mouses and trackpads are commonplace and will be around for some time to come, but touch and multi-touch interfaces are now also widespread. So much so that our one-year-old already knows how to use our phones and tablet. With 350,000 new ‘users’ born every day, best practices for touchscreen interfaces should be a concern for every designer.
With multi-touch interfaces, the most common gestures are scroll, swipe and tap. Pinch to zoom is also commonly understood, but if it means zooming in and scrolling left and right, most people will tend to abandon what they’re doing and look for another way to browse the site.
Touchpoints are also critical to your application’s interface, as finger sizes range from toddler to hulk. Apple recommends a minimum 44 x 44px touch size to optimise the ease of tapping an interface element. Microsoft and Nokia recommend similar sizes in millimeters: 9x9 and 7x7 respectively.
But keep in mind that our applications are moving outside of the desktop and mobile realm and into our TVs, through set-top boxes and native smart TV apps, where the remote becomes the most common input device. And that can be a scary thought for designers.
Follow the three Cs
In the book Designing Multi-Device Experiences author Mihal Levin discusses what she calls the three Cs of design. She argues that consistent, continuous and complementary experiences are the key to dealing with design across a multitude of devices and screens.
Be consistent
Consistent design is important in two areas: the interface and the brand. Do I recognise the app when I switch devices, and do I feel confident I can pick up where I left off? When you use Netflix on your Apple TV and need to leave the house, can you easily find your way around the iPhone app? Netflix has done an incredible job of making sure its brand, interface elements and hierarchy of information translate well across the numerous devices it supports.
Speaking of TV, the screen layout is integral to helping your users accomplish their goals easily. Using consistent templates for TV applications reduces the learning curve considerably. Stick with two or three layout templates at the most, and make your navigational methods predictable.
But we can’t all be like Netflix. When in doubt, follow expected device patterns and avoid breaking existing, learned behaviours. Android devices differ greatly from iOS devices, and their users should have a preconceived idea of what to expect from each. Consistency is especially important, considering 90 per cent of people use multiple devices in sequence to accomplish a task.
Continue the journey
Cooking a meal at home can be broken down into a few obvious tasks, including searching for a recipe, buying the ingredients and following directions. Let’s map those tasks to common devices: we might use a computer at our desk to find and save the recipe, our smartphone to check off ingredients at the grocery store, and our tablet to watch prep videos and follow steps in the kitchen.
Remember that not every device is good at, or typically used for, each action required to accomplish a goal. It makes sense to highlight the tasks that are more likely to be done in each context, rather than making everything work exactly the same everywhere. Optimise the experience within the context of the task and play to the strengths of the device.
Keep it complementary
As we all know, our devices are not always used sequentially, as they were in the previous example. Perhaps you’re watching a cookery show on television and want to find the recipe being cooked to save for later. Complementary usage comes into play here, and it’s a big part of how we engage with the world. In fact, 77 per cent of TV viewers use more than one device at the same time, and nearly half of those viewers are using a smartphone.
The opportunity here to help people engage with the things they see on television is huge. Watching TV is no longer just a passive behaviour; we’re always looking to learn more about the people, places or things we see.
77 per cent of mobile searches happen at home or at work, and 22 per cent of searches done from a smartphone were prompted by something seen on TV. That translates to a lot of mobile engagement, regardless of whether the people themselves are out and about. If your site or app isn’t mobile-optimised, you’re already missing out.
Check Your Environment
A person is generally two or three feet away from their computer monitor, and even closer to their smartphone. But for television, the average viewing distance is typically between 12 and 15 feet (often called the ‘10 foot experience’). This context matters, especially with TV, because doubling the viewing distance essentially halves the apparent size of an object, making 12 point type unreadable. To truly understand a device’s limitations, you must experience it in its native environment. For example, designing a smart television app on a computer won’t give you the same experience as seeing it for yourself at the right distance, especially when it comes to establishing things like the correct font and image sizes.
We should also be thinking about the physical environment surrounding any device interactions, not just viewing distance. Users sitting at a desk are mentally prepared to work through tasks using devices with the most capabilities (keyboard, mouse, connected devices). But sitting on the couch in front of a television lowers our tolerance for hangups, so simplicity and ease of use are even more important.
Start with Mobile
By now you’ve heard of the mobilefirst approach to RWD. Starting with mobile forces us to begin with the most constraints, to really think about the content and functionality we need to offer to our users. What will people absolutely need to do, and what’s the easiest way for them to do it?
The other advantage of starting with mobile is that most people have a smartphone (and plenty consider it their only computing device). Mobile phones now outnumber people on this planet. So you can count on many of your users to be coming from a mobile device.
Make transitions seamless
Considering how often we switch devices, moving from one to another should be less painful than it is. Cloud technologies such as Dropbox and iCloud are addressing this issue, but our software isn’t there yet. Apple has decided this is worth looking into, and its Handoff technology in OS X and iOS already allows apps to share data for easy transitions from one Apple device to another.
Nine out of 10 people use multiple devices to accomplish a goal, and almost all of them move between devices in the same day. It’s our job to make that transition a smooth one.
The screens are coming
Beyond the growing number of screen-based internet devices, designers must also consider the devices in our daily lives that don’t have screens. This growing Internet of Things is bringing the power of connectivity into our home appliances, cars and even out onto the hiking trail.
Activity trackers like the Jawbone UP and Fitbit display very little visual information, relying instead on separate mobile apps and the vibration feedback on the device itself. And how do we make the data collected by these smart devices useful? Our software must make sense of it and present it in a way that is easy to digest and beautiful.
The Apple Watch uses an ‘exercise ring’ to communicate activity data. A quick glance at the watch face and you can see where you are with your calorie, exercise and stand goals for the day. You’re welcome to tap on the rings for a more detailed view, but this overview is more than enough in most cases.
Talk amongst yourselves
Finally, remember that your users don’t use their devices in a silo, so you should avoid designing in one. Without open communication in the workplace, your product cannot succeed in the hands of your users. Make sure design teams throughout the entire company are sharing their experiences, goals and user research, and everyone is on the same page.
Design thinking must be done outside the box, and the screen. Today it’s about evolving from app-focused design to an action-based ecosystem of connected devices. The future is now.
TVs: Stay in control
Take a look at your TV’s remote control. How many of those buttons do you actually use? Probably 10 at most, including the four directional buttons (left, right, up and down), a selection button, channel up and down, volume up and down, and the power button. When designing applications for TV, be aware that each brand has its own design and button arrangement, not to mention special hardware buttons. And these remotes differ, even within a single brand’s lineup.
Considering all those buttons, you’d probably expect a lot of options for TV app developers. Not so fast. The only inputs you can rely on when designing for TV are the four directional buttons and the remote’s selection button.
When it comes to TV interfaces, the directional buttons are your friends, because the less you force the user to look down at the remote, the better. A TV-watcher does not want to deal with complicated tasks, but instead is expecting to leisurely browse or quickly find the program they’re looking for.
And don’t forget about voice and gesture inputs. Many smart TVs now include a microphone and/or camera to track your movements and listen to commands. This brings a new set of input methods to consider. With gesture, you’ll need to take into account variance – i.e. the shakiness of a person’s hand while trying to select an item, and how long it has to be held up in the air to navigate.
With voice commands, the onscreen interface must display button labels for voice controls, including accents and languages, for both accessibility and learning curve improvements. Microsoft, for instance, limits the number of voice commands on Xbox apps. Once again, the aim is to be as simple and concise as possible in your design.
Test on real devices
Application development has got easier thanks to fantastic simulation tools, but there is no substitute for testing on an actual device. The experience of using a smartwatch app on your wrist, or navigating a television app with a remote control in your living room cannot be fully replicated using a hardware simulator on a computer.
Early Apple Watch development is a perfect example. Developers were creating applications for a device that didn’t even exist, and using a simple simulator that provided a rectangle for their app to run in. But that rectangle didn’t replicate the black bezel around every Apple Watch that acts as a buffer between interface elements and the edge of the device.
Without it, buttons and text ran to the edge of the screen and nothing looked right. On an actual Apple Watch, however, interface elements were given a sense of space, thanks to the hardware around the screen.
Designing for TV is the exact opposite. If you push your interface elements up against the edges of the screen, you’re likely to lose them to any or all of the typical television safe zones. Smart TV apps must respect these varying soft areas around the outside edge of televisions in order to prevent cutting off text or buttons. It’s just like print design.
Considering a video aspect ratio of 16:9, you can expect a resolution of 1920 x 1080px for television in most cases. But only the background images of your smart TV application should be expected to reach the full height and width of that screen. The action safe area is actually 1792 x 1016px, and the title safe area is even smaller at 1720 x 1000px, which is where you should plan on keeping content and interface elements.