Once the process of structuring content is completed and done thoroughly, it is easy to design navigation structure, since it is just a matter of connecting the categories and sub-categories that have emerged during the structuring process and translating them into menus and menu items. Unlike with desktop screens, many menus cannot be displayed across the top of a smartphone screen. However, because interaction is touch-based with mobile phones and buttons or icons must therefore be larger to accommodate the finger makes this impractical in mobile interface design, which is also commonly known as “mobile design pattern.” Instead the presentation of menus in mobile phones is based on variations of a few general design principles, such as using the whole screen (or most of it) to display menus, permanently displaying only core navigation aids at the top or bottom of the screen, and permanently displaying a master generic navigation icon, such as a “three-line menu navicon,” previously
mentioned in Chapter 21. Figure 25.2 has already shown a variation of placing permanent navigation at the top and bottom of the screen. Figures 25.3 and 25.4 show illustrations of the use of the whole screen to display menus and the use of a permanently displayed navicon, respectively.
1. Designing Touch Targets
Once navigation structure is established, navigation aids, such as buttons and icons, or touch targets, need to be designed. The designs vary, but the same best practices apply. All touch targets should be big enough to accommodate the size of a fingertip for easy touching or tapping. Making touch targets large enough to comfortably accommodate the fingertip contributes to good user experience, because it ensures that users can work as fast as they want without activating the wrong targets by mistake. According to Fitts’ Law (discussed further in Chapter 26), the larger a target, the faster it takes to move from one point to the target. An implication of this, of course, is that the larger the target the less likely users are to worry about missing it and touching the wrong ones. For example, instead of requiring users to tap on just text or radio button, the surrounding area should be sensitive too to increase target size. Touch targets should also not be too close to each other, particularly if they are not big enough for the fingertip, otherwise users may end up touching the wrong target. An easy way to achieve these goals is to keep the amount of navigation options displayed simultaneously to minimum, so that there is enough space.
There is no one single recommendation for the size of a touch target, whether in centimeters or pixels. This is because different devices use different pixel sizes and different mobile platforms and manufacturers provide different recommendations. Also, different people have different finger sizes. In addition to this, different users screen-touch with different fingers; for example, some do with the index finger, while some with the thumb, which is bigger. There is, of course, also the question of whether there is enough space to make touch targets as big as possible. Here are some practical guidelines:
- Make targets the average width of the index finger if users are most likely to interact with an interface with the index finger or other fingers, but the thumb. This is between 1 cm and 2 cm, which is roughly 44-57 px on standard resolution screens and 88-114 px on high-density (retina) screens. Most mobile applications are interacted with using a non-thumb finger.
- Make targets the average width of the thumb if users are most likely to interact with the thumb, such as in games applications. This is about 2.5 cm (which is roughly 72 px).
- If screen space does not allow making targets as big as the fingertip, the recommendations of the relevant manufacturer can be used; or the number of touch targets can be reduced to only very essential ones and navigation structure refined accordingly.
Touch-targets should also be clear and look touchable in order to promote high discoverability. The hover state is hardly useful on touchscreen and does not need to be implemented. Unless a server is able to automatically detect whether users are using a mobile or desktop device, it can be useful to provide a clear direct link from the regular site to the mobile site, and a direct link from the mobile site to the regular site. For a mobile application (mobile app), this is seldom a design concern, as there is usually no accompanying site to which to link.
2. Designing Touch Gestures and Animations
After navigation structure and touch targets have been designed, the touch gestures to be used with them, and the associated animations (i.e., transition effects), need to be designed. The use of finger gestures on mobile screens to activate specific functions is probably an inevitable invention, because it is intuitive, requires limited space to execute, and the same space can be used to execute different gestures.
Touch gestures can be divided into two components: the action of the finger on the screen, and the function it activates. These components are termed, for example, by Google as touch mechanics and touch activities, respectively. A “touch mechanic” can be a single tap on the screen and may result in any of multiple commands, such as to start or stop a process, depending on context. For example, it might be to start playing a piece of music when a media player is opened or to close a window when its corner is tapped. Similarly, a “touch activity” can be evoked via using a touch mechanic or a combination of touch mechanics. Good gesture interaction design should be about using gestures that are most intuitive and easy to learn, as this contributes to good user experience. For example, a gesture interaction design that requires users to flick up or down a Web page is likely more intuitive than one that requires them to flick from left to right or right to left. Similarly, requiring a combination of gestures for such a basic and frequent task is likely off-putting. A practical and safe starting point is to make use of commonly used gestures and the functions for which they are commonly used. These are listed in Table 25.1.
The animation component of touch gestures helps give a touch activity feedback and more realism. Instead of the screen going directly from one state to another when a gesture is given, the states are animated, as discussed in Chapter 18. The animation can be a simple transition effect or a more elaborate and fancy animation. However, it is worth noting that fancy animations can become annoying after the initial fascination they provide. Figure 25.5 shows an illustration of the content of the screen changing from “1” to “2” after, for example, a swipe gesture, with the next content coming in from the right to cover the current one. The middle state represents the transition phase.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.