What to think about for a mobile website?
When you are planning for a mobile version of your desktop PC website, it would be wise to take quite a different view on the content and how it is presented. See example image below.
Of course most well-built websites work on a mobile device, but they often are not very usable. Hard to read, fiddly to press buttons, difficult to navigate links – all symptoms of a website that has been created for a Desktop PC but is being used on a much smaller device.
Read on for some of the things you need to consider for your website’s mobile “version”.
1. Adopt a mobile mindset
Because of the differences between mobile and desktop, it’s important to get yourself into a mobile mindset before getting started.
- Focus: More is not better. Edit your features/content ruthlessly. You are going to need to leave things out.
- Be considerate: Put yourself in your users’ shoes in order to create an engaging experience and meet the needs of your audience.
2. The Mobile context
There are three major mobile contexts: Bored, Busy and Lost.
- Bored: There are a lot of people using their smart phones on the couch at home. In this context, immersive and delightful experiences geared toward a longer usage session are a great fit.
- Busy: Your users may to accomplish small tasks quickly and reliably with one hand, in a hectic environment. If they weren’t, they would probably be at a desk! They need their answers/information/products, quickly.
- Lost: Users who are in transit, in unfamiliar surroundings. e.g. trying to locate your contact details
3. Of Prime Importance
There are some things that always matter.
- Responsiveness: Responsiveness is critical. If your user does something, your app must acknowledge the interaction instantly. On a slow connection, the user needs to know that things are happening.
- Polish: Polish is extremely valuable. Because of the ‘constant companion’ nature of our relationship to smart phones, paying a lot of attention to getting the little details perfect will be noticed and appreciated. I think of this as being like the ‘fit and finish’ of a car. The engine might be powerful and the body style gorgeous, but if there’s a lot of road noise or rattling on the highway, the experience will begin to degrade for the commuter.
- Thumbs: The humble thumb is what we need to design for. Unless the user is interacting with her smart phone with two hands, it’s almost impossible to get a finger on the screen. And even in a two handed grip, she’s likely to type with two thumbs. The magic number for thumb friendly user interface elements is 44 pixels. Exceptions abound, but this is a good – ahem – rule of thumb.
- Controls: When you do have to add controls, try to put them at the bottom of the screen (in other words beneath the content). The user may need to see things whilst typing/selecting with their thumb.
- Scrolling: Avoid scrolling where you can for a beter “feel”.
4. Typing’s a drag
Typing is a pain for many people, so you should do what you can to minimise it.
One of the most iconic aspects of modern touch interfaces is that they support gesture-based user interaction. As great as gestures are keep in mind:
- Invisible: Gestures are invisible, so discovery is an issue. You have to decide how to reveal their existence to the user. The most clever approach I’ve seen is on the promotional iPads mounted in Apple’s retail stores. When a page first loads, any scrollable areas do a quick ‘reverse scroll’ into their default position. This immediately invites a swipe or flick gesture from the user without having to explicitly indicate which areas are scrollable.
- No replacement: It’s too soon to skip visible controls that can be used with a single-finger – a button, so don’t leave them out!
- Portrait is by far the most popular orientation so optimise for this case first.
- If your site invites typing, or includes images that get larger on rotation, you should also support landscape orientation.
Focus and compromise are probably the buzz words here. And cliche’s like “you can’t get a quart into a pint pot” – one that will be lost on my children.
If you need any help planning for content or with implementation or just want to talk about the subject, just comment, email or call me.
Both comments and pings are currently closed.