Touch Design Patterns for Mobile
Touch devices have unique features in terms of design and usability. With the same amount of effort, the user can access every pixel on the screen; this encourages a different way of thinking about a design. Another difference is that the user will use her finger for touch selection (unless it is a stylus-based device). A finger is big compared to a mouse pointer, and the hit zone should reflect this.
The Touch Gesture Reference Guide is a great resource put together by Luke Wroblewskithat contains an overview of core gestures for most touch commands, tips on how to utilize gestures, visual representations of each one to use in documentation, and an outline of popular software platforms supporting them. You can download it from Touchguide.
Here are some useful design tips for touch devices:
- When the user touches the screen, parts of it will be obscured. Think about what will be hidden, and if it is important. Consider both right- and left-handed users.
- Provide a reasonable amount of space (20 pixels or more) between clickable elements.
- For frequently used buttons and links, provide a big clickable area (minimum 40 pixels width and height).
- For less frequently used buttons, you can use a smaller area (minimum 25 pixels).
- Provide quick feedback when a touch is accepted.
- Think about how scrolling will work.
- When using form input fields, try to insert the label above and hints below, not to the right or left of the input field. Generally, touch devices with virtual keyboards zoom in on the field when the user moves the focus to it, so the user will not see what is at the right or left of the input field while typing.
- Use finger gestures on compatible devices.
- Use infinite lists instead of pagination. An infinite list has a “More” final item that the user can click to dynamically add more elements to the list (via Ajax or other techniques). For performance purposes, you should reduce the number of pages shown at the same time. When adding new pages, the best way to approach this is to eliminate the first page from the DOM and create a “Previous” first item when the count reaches n pages (for example, 5). Doing this ensures that you will not have more than npages shown at the same time.
- Use an auto-clear textbox feature for the most common text inputs. This is just an X icon at the right of the text input box that the user can click to automatically clear the input.
- Use the long-press design pattern (also known as “touch and hold”) for contextual actions. This means that if the user presses a zone for two seconds or more, you can show a pop-up menu with contextual options.
- Prefer bottom-fixed to top-fixed tab navigation. The bottom of the screen (or the right, in landscape mode) is nearer the finger while browsing than the top zone.
- Analyze native touch applications for usability ideas.
- Hide the URL bar so you can have more space available for your app.
- Don’t create touch gestures on the borders of your page (top, bottom, left, or right), as some mobile browsers will capture those gestures for their own actions.
- When using touch gestures, make them obvious (following operating system patterns), such as swipe right or left for picture gallery navigation; if they’re not obvious, provide alternative buttons and/or an example tutorial at the first load.