9. Designing for Mobile & Tablets
Designing for Mobile & Tablets
- Introduction to Mobile Usability
More and more people are using mobile phones and tablets for accessing information and performing various tasks, however, sometimes mobile usability still lags behind desktop usability. The same usability principles apply as for any other interface, but the context of use and size limitations need to be taken into account when designing mobile apps or mobile versions of websites.
- Screen size & Device Types
Devices vary greatly in terms of size and resolution, which needs to be taken into account when making design decisions and testing the interface. You should look at the specs of currently common devices to ensure that the interface scales appropriately for different sizes and resolutions; ideally it should scale well for all realistically possible sizes, since new devices appear every day.
Link to an overview of popular screen sizes and resolutions in 2015, the data is divided by country as well: https://deviceatlas.com/sites/deviceatlas.com/files/pdf/DeviceAtlas%20-%20Mobile%20Traffic%20Report%20Q3%202015.pdf
The fact that mobile devices have smaller screen sizes than computers needs to be taken into account when making design decisions. It is twice as difficult to read text on a mobile as on a device with a bigger screen – users cannot see the entire page in order to look for keywords they want to find, their attention is diverted by having to scroll, navigate and remember what was seen, which reduce their reading comprehension. As a result, effort should be taken to make it easier for users to recognize the most important content by making it bigger, bolder and brighter.
Another consideration is the difference between smartphones and tablets – though the devices are similar, differences in how they are being used and in the ergonomics of the devices are important:
- Smartphones are often held in one hand and while on the go, thus users have limited dexterity and shorter attention span, also, they often multitask. Devices are more likely to be used in variety of locations and scenarios.
- Tablets are usually used with two hand while seated, which often leads to more attention and longer sessions.
- Consumer Behavior (Touch, Gesture & Location)
Controls and input mechanisms are different from those in desktop based applications, touch and gestures (drag, swipe, long press, pinch open etc.) are used.
To maximize the usability of touch controls:
- The most common controls should be placed where it is easiest for users to use their thumbs to press them.
One study (http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php) observed how users hold smartphones and discovered three common ways of doing it:
One-handed use (49% of cases)
Cradled use (36% of cases, of which 72% with thumb on the screen, 18% with finger on the screen
Two-handed use (15%, of which 90% used it in portrait mode, 10% in landscape)
However, the way users hold devices is not a static state, users change it to the way which the most appropriate for a given tasks. It is strongly recommended to do some user testing to see how some actual users hold their phones when interacting with your interface and whether all elements are comfortable to reach.
Common ways of holding a tablet:
- To cater for left-handed and right-handed users, applications should be usable in either hand. For tap-intensive applications, provide an option for a right-handed or left-handed interface.
- Touchable elements, such as buttons, should be of a size that is comfortable for tapping. Apple’s iOS Human Interface Guidelines recommend at least 44 x 44 points, Microsoft defines the tap region as 9.12mm or 38 x 38 pixels, Google recommends using density-independent pixels (dp), which enable the region to scale to different screen sizes. There is no common agreed on the minimum size, but always try to make it on a bigger side.
Gestures provide many opportunities for creating easy interactions without many menus, however, they often pose many usability problems and need to be designed with a great care, and undergo a substantial amount of user testing.
A big challenges is that there is a lack of established standards and expectations, many developers try to implement creative ideas of gestural interaction instead of familiarizing themselves with findings of various usability research, which leads to confusion and poor user experience.
Gesture-based interfaces often violate fundamental principles of usability:
- Visibility – users have to know that a particular gesture exists and in which setting or part of an app it works. If they do not know that, they will struggle to discover it. Showing a mini tutorial once a user starts using a new app is not an adequate solution, since it relies on users remembering things.
- Consistency – often different applications use the same gestures for different actions, which requires users to remember how a gesture is used in a particular context.
- Discoverability – the emergence of graphical user interfaces made programs more user friendly, since users were no longer required to remember commands, however, gestural interfaces make that disappear, since operations are not discoverable by just looking at a menu.
- Reliability – accidental activation is common. Another issue is that when users’ gestures are a little bit off, commands do not work and the users do not understand why. It goes against one of the fundamentals of usability – sense of control.
Creating interactions based on gestures should be still based on established usability principles and involve a lot of user testing. Gestures have a lot of potential, however, they often have a steep learning curve as well, which needs to be reduced as much as possible.
Another aspect of designing for mobile devices is location based needs. Users might not want to use a complex search form to find a hotel close to them – since smarphones can track their location, it should be determined automatically. Also, it is very bright outside when it is sunny, thus the color scheme that is excellent indoors might be not usable. Another issue might be that Internet is less stable in specific context, e.g. while on a train. It is important to understand potential usage scenarios by observing users or at least interviewing them.
- Responsive Web Design
In order to make a website usable on smaller screens, different versions of them are sometimes created for different devices. However, since there is an endless number of devices and resolutions, it is often better to have one version of a website which responds to different screen sizes and is usable on each of them. The additional benefit of it is that this way a website is easier to maintain – you have to update only one version, not multiple.
Responsive web design uses so-called breakpoints to determine how the layout of a website will appear: one design is used above a breakpoint and another design is applied below that breakpoint, breakpoints are based on the width of the browser. It is not enough to make the website fit on a screen and not require any zooming; content, design and performance need to be optimized for devices that use each breakpoint.
Source: https://pixabay.com , free images, not attribution required.
Some examples of websites made responsive:
How to make the design for the mobile breakpoint more user friendly:
- Prioritize the most important content and features and simplify the website– if needed, remove some less important content, especially decorative images etc. The goal is to load fast and allow users to find what they need quickly and without excessive scrolling.
Example below: www.nationwide.com website – options that are the most important to users are available at the top of the page without or with very little scrolling, it takes just one second for a user to be recognize what can be done on the website.
- Keep the layout clear and simple, without any horizontal scrolling. Example below: BBC News website uses one column with two tabs for two most important content categories – a difference from a multi-column layout on their desktop site.
- Try to remove popups, since they often do not work well on mobiles, or at least thoroughly test them on various devices. Make sure that a button for closing a popup is big enough to be used comfortably on mobiles – tiny close buttons are a common issue with popups on mobiles.
- Avoid using automatic refreshes – mobile users are likely to have some bandwidth constraints.
- Optimize navigation, instead of showing a long menu that takes up half a screen, use a collapsible menu with a ‘hamburger’ menu button.
- There is no mouse over (hover) state on mobiles and tablets – if your user interface relies on users putting a mouse over some elements to see more details, it will not work on mobiles, alternative design decisions need to be made.
- Take advantage of built-in functionalities that allow users GPS mapping, QR codes or click to call functionality. Example below: Booking.com allows searching for hotels around a user’s current location.
- Optimize forms since they are harder to use on mobile by nature. Where possible, use drop-down lists instead of typing. Use relevant HTML input types to help browsers recognize the requires type of input and adjust their input modes accordingly. For example, specifying an input of the type ”url” brings up an alphanumeric keyboard with “.”, “/”, “.com” keys. Read more about input types here: http://www.w3schools.com/html/html_form_input_types.asp .
- How Designing for Mobile is Affecting Desktop Usability
Responsive web design has made using websites on mobile devices more pleasurable, however, when effort is not taken to understand the differences in desktop and mobile users’ needs, situations and afforfances, it often leads to reduced usability of websites on desktop.
One example of it is using collapsed menus with ‘hamburger’ buttons on desktop websites – while it is great on mobile, because the alternative is menu links taking up the whole screen, it is not optimal on desktop, where the alternative is just having a visible menu. Hiding global navigation on desktop versions reduce users’ ability to get a sense of what is available on the website, it an acceptable compromise on mobiles, however, it is often used on desktop versions as well in order to make the design similar on all breakpoints.
You should always strive to create optimal designs for each breakpoint, the desktop version of the website does not have to suffer because you made it responsive. You should also do some user testing for each breakpoint as well.