Designing for Mobile Users
There seems to be a huge gap between the promises made to us by mobile operators and the reality of accessing the internet on mobile devices. Without fail’ every time I try and find something out through the internet, using my mobile phone, I come away incredibly frustrated and often without the information I was seeking.
Over the course of a few months I’ve attempted to access 100s of pages using two mobile devices, an Apple iPod Touch and a Nokia N95. Two vastly different devices, both of which claim to give you the internet in your pocket. The iPod Touch mostly succeeds, with the obvious limitation that you are tethered to a Wi-Fi hotspot. The N95, whilst more mobile, is restricted by a smaller screen and an awkward mobile browser. Using these two devices, I kept on noticing the same problems on many different websites. Armed with this experience, I’ve come up with the following steps that should be taken when designing a website, with an eye on mobile devices.
Test, and be harsh
If you already have a website, the first place to start is to assess what’s already there. Use multiple mobile devices and see how the site holds up. And be harsh. Always assume that you’re the best user who will ever come across your site, assume that all other users will be less skilled and less capable than you. If you can *just* complete a task, assume that it’s too difficult for the majority of users. And remember, every action becomes more difficult when using a mobile device. Pointing and selecting is less accurate, typing takes longer, and the reduced screen size means that reading is more difficult. Use the guidelines below to assess your site.
Focus on Data
Your efforts, with regards to mobile users, should be on reducing the number of page views. The best way to achieve this is to identify the data held on your site a user is most likely to be seeking, and put it at their fingertips.
For example, last week I was visiting a theme park, Alton Towers, and forgot to note the address. So whilst on the road, en route as it were, I had to use my N95 to find the address. This proved to be incredibly difficult. Not only is the site media heavy, and therefore slow to load, but the address is hidden behind a number of links. To compound the situation, the links aren’t clearly worded, so it may take a number of attempts before you follow the correct path.
As if to confuse you that little bit more, instead of just giving you the address they give you a “Sat Nav Reference”. To the rest of us, this is a post code.
The Alton Towers site is a clear example of a site that has not been optimised to help a user achieve a goal. As this is a site for a theme park, it’s fairly easy to determine the questions people will ask of it. Firstly, when is it open. Secondly, how much will it cost. And thirdly, how do I get there. If I wanted to visit the theme park, these are the questions I would want answered, and I’d want them answered quickly. If it’s a spur of the moment visit, it’s likely that I’ll be seeking this information on a mobile device. The bad site design, complexity of the link structure and media heavy pages make this very difficult to do.
The three questions identified above are actually fairly obvious. This holds true for a number of other sites. For example, if I’m visiting a Hotel’s website, I want to know room availability, price and location. If it’s a cinema, I want to know what films are playing and at what time. Performing this simple exercise, identifying the “in demand” data on your site, is the basis of a good design that will work well both on desktop and mobile devices.
Accessible Navigation
Obviously, it’s not possible to fit all the information onto one page, and even if you focus your efforts on the most required information, it’s inevitable that at some point navigation is required. To that end, navigation should be as clear, consistent and accessible as possible. For mobile users this means keeping it as simple as possible. Collapsing, hierarchical menus are fine in full browsers, but they don’t work well on mobile devices.
One of the examples I’ve come across recently is that of my local cinema. A cinema website is one that can never work on a single page, you have to at least select the location you wish to visit. So it is essential that such sites have excellent navigation. The image to the right is a screenshot from the website belonging to my local cinema. As you can see, navigation is down the left hand side of the screen. What you can’t see is that this navigation tracks your position on the page and follows your position (i.e. when you scroll up and down the page, the menu remains in the same position relative to your browser, as opposed to relative to the page). I can’t tell you how bad this is.
On a mobile device, one of two things happen. Either the javascript isn’t executed properly, resulting in a completely non-functional, sometimes un-displayed, menu. Or, the Javascript does work, hiding the bottom few links from view because the mobile screen isn’t as big as a regular screen, it can’t display the full menu. If this was a normal list of links you could just scroll down to see the bottom of the menu, but seeing as the menu moves when you scroll the options are always hidden.
As if to compound matters, Vue have decided to hide the information you really want behind one of these, potentially invisible, menu options. Take a look at the screen flow below.
Upon first entering the site you have to select a cinema. Then you get a list of films currently playing at the cinema. To see the show times you have to select one of the films. Alternatively, you can use the “all films/times” link, which gives you a list of films currently playing, along with the times they are showing and whether they are sold out or not. This is an incredibly useful page if you want to go and see a film at a particular time, it also mirrors the sort of information you would get from a leaflet or display inside the cinema. The utterly baffling thing is that Vue have decided to hide this page behind a link that some users may not be able to see. Considering that this is a cinema, i.e. somewhere people may want to visit on the spur of the moment, you would expect more attention would have been paid to these factors. In defence of Vue, they do offer a “Text Only” version of their site, but it is not automatically chosen for mobile devices (or at least not the three I tried) and the link to it is hidden at the bottom of the page. While having a plain version of a site is a good thing, there’s little point if you hide the link to it at the end of a page that may or may not correctly load for users who would want to use it.
The other side of navigation on mobile devices is whether that actually work. Examples of navigation menus and systems that may not work are those than use Flash, Javascript, Applets, Stateful CSS and AJAX. If you use anything other than simple HTML, you run the risk of locking mobile users out of your site.
Requiring Information
There’s been a trend over the past few years for site requiring information before letting you access information. Fortunately, the rise in usability-aware designers has stalled this in its tracks, but it still happens. When making the decision as to whether users should provide information before being allowed access to the site, you should be aware that this will effectively turn away mobile users. And if your site acts as a web presence for a bricks and mortar operation, you are turning away customers. Providing personal information is always a value proposition. Users weigh up the effort and risk against the potential benefits. On a mobile device, very few sites will win.
The Solutions
So far, it’s been all about the problems. So let’s lay down some basic rules for designing a mobile-friendly site.
- Identify the information users are most likely to be looking for. You can do this through common sense, your visitor logs and search engine queries that lead users to your site.
- Design your site around this information. Make it as easy as possible to access this information and consider the needs of users who are trying to access it. For example, is showing performance times enough, or can you also show ticket availability. If you are showing an address, is that enough or should directions be included.
- Keep navigation to a minimum. The perfect mobile site is one that consists of one page that contains the information that the user requires, and nothing more. Remember that many mobile users are billed based on the amount of data they use, so every unnecessary page load is costing your visitors money, leaving them with less to spend with you.
- Simplify necessary navigation. As we’ve seen in the cinema example above, sometimes some navigation is necessary. If this is true, simplify it as much as possible. Make sure the navigation is usable, and functions correctly on as many devices as you can test with. The wording of the navigation must be chosen carefully, being sure to be as descriptive as possible. The only thing worse than requiring a user to navigate through several pages is leading them to the incorrect page because of badly worded navigation.
- Focus on information. While there will inevitably be exceptions (banking websites for example), at the moment most mobile users will be seeking information. They use their phone to find out something, not to complete a task. So when designing navigation, make it data orientated, not task orientated. For example, the theme park website used above would better serve its mobile users if a link was called “Directions and Opening Hours” as opposed to “Plan Your Trip”. Planning a trip is not something I, or anyone else, would want to do using a mobile device.
- Strive for “Extreme Usability“. The extreme usability post by Jakob Nielsen covers something we should all be doing. After focusing on areas of sites that fail, we should be looking at areas of sites that almost fail, or only just pass. The aspects of sites that are borderline on desktops, are the ones that will no doubt fail on mobile devices.
- Test early, test often, test on multiple devices. When designing for the mobile web, a significant amount of resource must go into testing. Part of this is down to the huge amount of devices that can be used to access sites and the variance between them. It’s also important to note that whilst many devices may use the same browser, there are differences in screen sizes and resolutions, button layouts, operating systems and functionality. Additionally many mobile network operators and handset manufacturers “tweak” browsers to their own end. Mobile testing is far more taxing, complex, time consuming and specialised than normal web site testing. You can help catch problems early by storyboarding and involving potential users, asking the question “If you were to access our site from your mobile device, what would you be looking for?”.
I think that’s a reasonable start. Have you worked on mobile sites before? Or have you had a negative experience using a mobile device? Let us know in the comments.