On Wednesday 30th of May, the basement of Hyves headquarters in Amsterdam was the stage for “Small screens, big changes”, a workshop by Josh Clark. Together with about 24 other interaction and content professionals, I spent a day learning about how to make the most of the challenging design questions mobile developments pose.
Designing for touch
Josh Clark (@globalmoxie) first of all convinced us of the fact that it is an exciting time. For decades people have interacted with machines as machines, by using all kinds of prosthetics to make the machine understand whatever we as humans wanted from it. Now, with the emergence of touch screens (and speech, facial and gesture recognition coming up next) machines are understanding more human forms of communications. Now it’s just us and our device, or rather us and the content interacting directly.
Clarity trumps density
He went on to reveal that designing for touch is not just information, interaction and visual design, but also industrial design. Mobile devices are handheld, so basically we design how those hands will interact. And to make sure that it doesn’t become too difficult, we should learn from the Wenger Giant Swiss army knife with its 87 tools and 145 functions.
This tool can probably do loads of things, but probably slowly and clumsily so. It will take some time to identify the right tool, and once you’ve got it, you’ll have a hard time holding the big knife properly to clip your toenail. So, says Josh, clarity trumps density. Focus on one thing and put all the rest in appropriate places.
And what are those places? Well, make sure they’re at least out of content’s way! With smaller mobile devices the hotzone for touch is the lower left corner. This is where the thumb comes to rest when the device is held in one hand. Here you can do your actions, without covering the content on top of it. Watch out for Android though, because they have built-in system controls at the bottom of the screen. Stacking controls on top of these can cause mistaps, so for Android apps move the controls to the top. For the mobile web it’s best to move all important controls to the top corners, because iOS also put their navigation on the bottom of the screen already.
Image from Designing for touch by Josh Clark (.net magazine 2012)
For tablets the hotzones are the top left and right corner down to about a third of the screen. This works for both landscape and portrait mode. Why that is? Josh asks us to think about how we lie down on our sofas or beds, with the tablet resting on our bellies or blankets. Not easy to reach the bottom of the screen, right? Here the navigation that requires tapping can move to its more traditional place. However, if content can be browsed or previewed, the controls are best situated at the bottom, because sliders at the top will cause the hand to cover the content below.
Image from Designing for touch by Josh Clark (.net magazine 2012)
A fingertip is approximately 44 x 44 pixels big, say about 7 x 7 millimetres. Apple uses the 44-pixel rule for their designs, not just for buttons, but also for row heights. Thus they create a visual rhythm with elements that have the same height.
To fit all the keys on the touch screen, they resized the width of a key to 29 pixels, which is the minimum that will still work properly, as long as the height is 44. The same goes for Android, although they use a 48-pixel rule (9 millimetres). Not because they want to annoy everyone, but because there are so many devices that run Android that they had to take some safety measures for badly calibrated ones.
About pixels, points, and DIPs
And while he’s on the subject, Josh tells us that what we think is a pixel (a tiny dot on our screen) is no longer just that. He explains the difference between virtual and hardware or device pixels. The last ones are no longer much use to use, because there are a gazillion devices with as many resolutions. So, the virtual pixel was invented, which is an absolute measure. Apple chose to name the virtual pixel Point, Android calls it Density Independent Pixel and CSS calls it Pixel.
Apart from the fact that having different names is not very helpful, the virtual pixel raises a design question. We all know what happens to low resolution images on high resolution screens. While designing for mobile we should take this into account and make sure we have a minimum of two images. One for low resolution and one for larger resolution screens. Mostly two will be enough. There are all sorts of ways to make sure the right image is displayed on the right device. Josh hints that googling ‘grigsby responsive imgs’ offers some interesting solutions, but informs us that there is none as yet that will work perfectly.
The future of buttons
According to Josh gestures are becoming the shortcuts of touch. Not a big surprise, when we realise buttons are a hack. Because it is difficult to screw a lightbulb in place in a dark room, we created light switches, but the switch has no inherent relation with the bulb in the middle of the ceiling. User interfaces used to be like that, but no longer have to be, because we’re moving from GUI to NUI: natural user interfaces. So, will we need buttons at all? Josh thinks so, but feels we should always offer a gesture as an alternative. We do have to take into account that the larger a device is, the more annoying buttons are. On an iPad it’s much more frustrating to move up to the back-button than on an iPod. Larger devices ask for large gestures.
Data physically represented
Natural user interfaces make it possible to give a physical representation to our data, because we interact with it like we do with physical counterparts like books and diaries. However, if we choose a metaphor like that for a digital application, we have to stay true to that metaphor to avoid frustration. An early version of the diary for the iPhone looked like a diary, but didn’t act like it. Pages couldn’t be turned and in the worst case leafing through it could cause entries to be deleted.
What does this teach us? If the interface suggests that you can turn pages, make sure that’s how it works, and, if the necessary gestures are more complex, make sure people learn them before they accidentally remove things they really want to keep.
There are different ways to teach people how to interact with an application, but by far the most effective over manuals or screen casts is in context teaching. We all know hardly anyone reads manuals, and (compulsory) screencasts feel more like something we want to get out of the way. Moreover, most people are not going to remember all the tricks and tips provided, because they have no clear idea yet what the app is about and how they want to use it.
Josh advises us to look at video games. They are great at in context training. When you play for the first time and a big troll comes up to us with its club raised, just before we’re crushed the whole thing freezes and a little message flashes ‘Tap twice to block’. Because our brains are wired for survival, we will remember this straight away, and if we don’t smart apps will help us remember until we do it properly.
Just like video games employ coaching, levelling up and power ups, other digital apps can use these strategies to teach users what to do. When someone’s mastered the basics, they can move on to more complex gestures or deeper levels. The reward (power up) is increased knowledge and a better interaction between the user and the app.
To round things off, Josh emphasises again that it’s an exciting time for both designers and users. We shouldn’t forget that we are like kids right now, learning to figure this thing out. Therefore, we should allow ourselves to play around and learn, have an open mind and be generous with our knowledge.
Ready? Set, go!
Thanks to Josh’ way of presenting and his group exercises to put his lessons into practice, the workshop was highly enjoyable and enlightening. For me, and for a lot of other people I’m sure, designing for touch is an emerging field, and with Josh’ basic tips and tricks, I feel much more prepared to dive in and take on the challenge.
About the author
Jantine Geldof Pluim (@JantineG) has 5 years of experience as a web editor and content specialist. Working at Informaat, she focuses on structuring and creating content that enhances user experience. She has a particular interest in storytelling. Jantine has a Master’s degree in comparative literature from Utrecht University.