The structure of content forms the basis of navigation structure. For this reason, the structuring of content is usually done first, as it results in the creation of categories and sub-categories, which in turn translate into menus and menu items. The types of processes used to structure content, such as card sorting, are discussed in Chapter 26. The most important issue to consider when designing content for delivery on smartphones is limited screen space. Studies show that the small size of mobile phones compromise usability in various ways. One is that it makes comprehension of information more difficult than usual. For example, a message is often spread across multiple screens, requiring users to remember the content read in the previous screen and connect it to the one in the current screen to construct an understanding. This is often more than the highly volatile and weak human short-term memory can handle. Scrolling from one part of the screen to another to read the rest of a piece of information can also create the same problem. The problem gets even worse with horizontal scrolling. Having to go from screen to screen in order to see the whole of a piece of information also diverts users’ attention from the primary task of constructing understanding to the secondary task of looking for the rest of the information. All these mean that when delivering content on smartphones, design should compensate for small screens and prevent or minimize these problems. Some guidelines on how to achieve this are provided here.
1. Content Structuring
For a successful mobile version of a website or a mobile app, the core principle is to keep content extremely compact but meaningful, while also focusing users’ attention on what is important, using, for example, highlighting. The first screen should provide just enough elements to communicate the desired message. If users will not miss an element if it is not there, then it should not be there. Supportive or detailed information should be placed on secondary screens and shown only when requested by users. This is known as “progressive disclosure” (i.e., the principle of revealing a little at a time). In practice, this translates into providing short outlines of secondary content on the first screen and the means of accessing the detailed version. Studies have shown that the less dense and more focused the first screen, the more the likelihood that people will try to read and not skip it. This almost always translates into more visitors for a site. Even secondary content, such as a menu, should be subject to progressive disclosure. Figure 25.2 illustrates the principle of progressive disclosure, using menu page and menu-item page designs. The design on the left reveals too much for a menu, resulting in a design that is too dense and uneconomical with space. The same content is broken up and spread across the middle and right designs. The middle displays only the headings as hyperlinks, allowing for the use of ample space. The design on the right shows what is displayed when the first item is activated.
2. Number of Columns
It is best to use a single column that spans the width of the screen. Content should expand downwards instead of across, as it is easier to scroll downward than sideways and users generally prefer it. Even though some smartphones like iPhone typically zoom out content so as to make it fit the screen, when this is done, text usually becomes illegible, requiring users to zoom in various parts of a page in order to make them legible. This is not easy and requires extra work and can result in bad user experience.
3. Amount of Text Entry
Entering text on smartphones is more cumbersome than doing so on a proper QWERTY keyboard. Typing speed is slow and the number of errors is comparatively high. For these reasons, the amount of text users are required to enter should be minimal. To minimize text entry, users might be asked to use PIN instead of password, which is usually required to be long for the sake of security. When an address is required, users should be able to enter just an address code (postcode or zip code), which the system then uses to fill in the rest of the address. Also, users should only have to enter their address once. The address should be stored and retrieved when required.
4. Registration
Like in regular websites, early registration should be avoided in mobile websites or apps. Making users go through any type of registration process (including providing just an e-mail address) on the first screen of an app, before they can see what an app is about and decide whether or not they find it valuable enough to commit, can be off- putting. This can be even more so than in regular websites, because of the extra effort generally involved in inputting text in mobile devices. Another off-putting feature is a splash screen. Although it may be novel the first time, it can quickly become a nuisance, in that it forces users to wait unnecessarily.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.