The student will discover how the foreknowledge of hand gestures used in mobile experiences can be combined with the principle of emphasis to create more useable and aesthetically pleasing design.
- [Voiceover] Touch enabled devices are everywhere it seems, so as designers we must adapt our skills to new and emerging forms of user behavior. Before smartphones and tablets, the only kinds of hand gestures internet visitors used were mouse clicks and double clicks, the occasional flick of a track ball or track wheel or the taps, double taps and flicks they might use with a touch pad. Today, the average app will employ anywhere from 7 to 18 different touch gestures, in addition to manipulating the device itself such as shaking, moving and tilting it.
That's a lot. The seven most common gestures that web and app designers should consider include the tap, double tap, the press, the flick, the drag, the swipe, the spread, and the pinch. To use these gestures effectively, the interface elements need to be large enough to use seamlessly. In fact, the actual sizes of interactive elements are vital to helping users avoid touch errors which we all know can be super annoying.
Estimates show the average index finger pad size is roughly 8 to 10 millimeters which converts to roughly 30 to 37 pixels. This means that to ensure users will be able to interact with the desired target within the app, the target size should be at least 10 to 12 millimeters and that's roughly 37 to 45 pixels. While current recommended touch target sizes for human interface design vary by device, there is consensus that there be at least eight pixels or six points minimum space between elements.
In addition to making sure that interactive elements are sized and spaced adequately, designers would do well by paying special attention to the thumb zone, a term coined by mobile interaction designer Steve Hoober in his 2011 book Designing Mobile Interfaces. This thumb zone refers to the area that one and two handed users are likely to reach comfortably by thumb. Essentially this means when designing any interface, you'll want to put the more important elements within thumb's reach.
Then place less important elements in the bending thumb areas shown here in orange and the least important elements in the extending thumb area shown here in yellow and that's going to be near the top of the screen in portrait view or along the left and right edges in landscape view. Use white space for important buttons to maximize touchability, make sure tapable areas are large enough for the average index finger and use adequate spacing between elements to avoid touch errors.
Here are some additional suggestions to help you design with hand gestures in mind. For good UX, keep your menus short and sweet and make it easy to return to the homepage. Make site search visible. Leverage mobile specific features like tap to call and social sharing. Put labels above forms so they're visible as users input data. Place calls to action in prominent view. In addition, to keep pages loading fast, rely on design elements that can be created with CSS instead of graphics.
Here are more suggestions to help design visually compelling and easy to use mobile experiences. Make your buttons big. Create emphasis using elements of design like color, value, size, shape, line and space. Use white space liberally. Design sliders that are easy to drag. Design using shapes that imply the motion required for interaction, like rotate or spin. Separate elements with uniform spacing. Employ a clear hierarchy with type.
Use dots and arrows to indicate swiping left and right. Most importantly, keep important actions and information in the thumb zone.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices