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.
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.
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.
