Design for Touch

Touch Targets

In the first section, we'll talk about touch targets. Interactive elements such as buttons should have an appropriate size so that the user can accurately tap the target with their finger. The general rule is 44pt for buttons and 12pt for small text, 17pt for body text and 20pt+ for titles. Interacting with these elements should feel natural to the user.

Navigation

Navigating across the application should be made as easy as possible. If you make the navigation flow complex, users might get frustrated. As a designer, you need to ensure that doesn't happen. Make sure that the navigation elements are visible and consistent across the app.

Content

Having way too much content is not highly recommended as it just ends up making your application look cluttered. Don't add in elements that are unnecessary just for the sake of adding them. The layout of your application should always look clean.

Thumb Zone

As mobile users, most of us use our thumbs to operate our devices. The thumb zone refers to the area on your screen that is convenient as well as easily reachable by your thumb. This excludes the area at the top of the screen. Always make sure that the gestures we'll be discussing below are within this thumb zone. However, please do keep in mind that not all users navigate an app using their thumb.

Tab Bar

The Tab Bar is the main navigation between multiple screens. Avoid the Hamburger menu if you have few items. Menus that are always visible will increase usage since obvious always win.

Giving Feedback

It is important to provide feedback to users especially when they perform an action. Feedback can help a user understand either the result of the action performed or the steps they should proceed with next. A good example would be showing a message or an animation when the user clicks a button or when the action is finished.

Haptic Feedback

Haptics enhances the user experiences as it provides people a sense of touch when interacting with an app. Haptics improves touch gestures and interactions like scrolling through a picker or toggling a switch offering a delightful experience for the user.

Long Press and Contextual Menu

The contextual menu allows people to quickly access options inside and outside of your app. Think of it like the keyboard shortcuts on your Mac – they enable people to do repeated tasks quicker. You have to design shortcuts that make power users more productive. But just like Keyboard shortcuts, essential features shouldn’t be exclusive to the contextual menu. Your users must be able to operate your app normally without it.

For example, users can long press your App Icon to find frequently used items. Inside an app, mail content can be peeked and links can be peeked before entering full-screen.

Gesture

With the introduction of bigger screens, the back button is now too high for the thumb to easily reach. So, while less obvious than a visible button, a gesture can be an extension to an already visible interaction. It makes it easier for power users. We're all becoming power users, that's why we require less visual cues and more useful functions.

Aim to use standard gestures since users have more muscle memory from using these common gestures. Try and avoid interfering with systemwide gestures like screen-edge gestures that provide access to the Home screen, app switcher, Notification Center, Control Center, and Dock.

Gestures must act as an extension to shortcuts but not to replace important navigation and actions performed by the app.

List of Gestures

There are a lot of gestures a user can perform while on a touchscreen device. Some of these include:

• Drag
• Flick
• Pinch-in and out
• Swipe
• Double tap
• Long Press (touch and hold)
• Rotate
• Shake

Multifinger gestures

These gestures are best if your app has to deal with multiple controls simultaneously as it provides a better user experience. The best use case of this is on gaming, VR/AR, and drawing apps. You can also use multi-finger gestures like Three-finger pinch/Swiple too on normal apps but more sure not to complicate things always aim to keep everything simple.