If you’re going to design for mobile, then it’s likely you’re going to need to consider the way that the device is used and the specifics of the device itself. There are some general principles that can help designers for mobile get started but don’t forget that these don’t replace the need for user research. They are guidelines not hard and fast rules.
There are many things to consider when designing for mobile and while many are standard UX considerations; there are going to be mobile specific design considerations too. Are you going to integrate your mobile offering with your current offering? Will you use responsive design or adaptive design if you do?
A lot of this will boil down to context. E.g the context in which the mobile device will be used. If your users access the mobile web from their desks, that’s awesome, but many users don’t. They’re going to be trying to use them in the supermarket, on their daily commute, on the walk to the coffee shop, etc.
That means you’re going to have to consider how to reduce distractions and make it easy for the user to focus on the task in hand too.
Josh Clark, the author of Tapworthy- Designing Great iPhone Apps, offers three categories for mobile web access:
- Microtasking: When the user interacts with their device for brief but frenzied periods of activity
- Local: When the user wants to know what’s going on around them
- Bored: When the user has nothing better to do and is looking to be entertained or otherwise diverted
Basic Design Considerations for the Mobile Web
Small Screens
You don’t have as much screen real estate for mobile devices as you do for PCs and laptops. That means, normally, you’ll be designing for multiple screen sizes. You need to make a decision early as to whether to use responsive design (where the device handles the changes in display) or adaptive design (where your servers handle the changes).
You want to focus on a “mobile first” approach which means designing for the smallest mobile platforms and increasing complexity from there.
A good process to follow would be:
- Group device types based on similar screen sizes and try to keep this to a manageable number of groups
- Define content rules and design adaption rules that enable you to display things well on each group of devices
- Try to adhere as closely to web standards (W3) as possible when implementing flexible layouts
Don’t forget that there are many different browser types available for the mobile web and the wider Internet too. You want to ensure that you support as many of these as possible – including those that are no longer current (such as BlackBerry and Nokia WebKit).
Keep Navigation Simple
Keypads and touch screens don’t make for precise navigation like mice do – so try to:
- Prioritize navigation based on the way users work with functionality – the most popular go at the top
- Minimize the levels of navigation involved
- Ensure labelling is clear and concise for navigation
- Offer short-key access to different features
- Remember to offer a 30×30 pixel space for touch screen tap points
- Ensure that links are visually distinct and make it clear when they have been activated too
- Make it easy to swap between the mobile and full site (if you choose to implement separate versions)
Keep Content to a Minimum
Don’t overwhelm your users – respect the small screen space. Keep content to a minimum.
Make sure that content is universally supported on all devices or avoid it. Think Flash and then don’t use it, for example.
Make page descriptions short and to the point – for relevant bookmarks.
Reduce the Inputs Required from Users
The less the user has to fiddle with their phone; the more they’re going to enjoy using your mobile web offering. Consider:
- Keeping URLs short.
- Offering alternative input mechanisms (video, voice, etc.)
- Minimizing inputs in forms (you can always ask for more data when the user logs on to the desktop)
- Allowing permanent sign in (most smartphones are password or fingerprint protected – the risks of staying logged in are less than on the desktop)
- Keep scrolling to a minimum and only allow scrolling in one direction
Remember Mobile Connections Are Not Stable
Mobile connections can be a colossal PITA in areas with patchy service. Don’t make things hard on your users. Try:
- Retaining data so that it’s not lost in a connection break
- Minimizing page size for rapid loading
- Killing off ad-networks, etc. on mobile sites which consume huge amounts of bandwidth and data
- Keeping images to a minimum and reducing the size of those images
- Reducing the numbers of embedded images to a minimum (speeding up load times)
Continuous Integrated Experiences
As users move between mobile and the desktop they’re going to expect similar experiences. Remember to:
- Maintain continuity. If they log into your webstore on mobile they should be able to track orders and make purchases just like they would on the desktop.
- Maintain consistency. Offer the option to switch between mobile and desktop offerings at will.
- Maintain brand. The look and feel of each version should be similar.
The Take Away
Mobile is different from the traditional desktop environment and while standard UX and usabilityconsiderations are needed in a mobile context – the mobile environment also brings new design considerations. It’s important for mobile designers to pay attention to the details in order to deliver the best possible user experiences.
Source : www.interaction-design.org
