Developing mobile and tablet guidelines involves creating a balance between standard mobile design patterns, OS specific guidelines (where appropriate), alongside existing online brand guidelines.
All of these together allow you to create a better user experience for customers who are using a mobile or tablet device.
Think big picture
But before you start developing guidelines, it’s important to have a clear understanding of what the requirements and goals are, both for the business and the user.
- A strategic vision - Developing a strategic vision based on the core business objectives will allow you to tailor your guidelines enable you to achieve these goals. Define how each of your mobile channels will help you achieve your goals, e.g. what your mobile site needs to do, how you can reach more customers and with them engage through native apps.
- How can you satisfy your users - Understanding your mobile and tablet users is a necessity too. User research can give you the information you need to develop design principles that will ensure a high quality, and consistent, user experience is carried through all the mobile and tablet offering.
Mobile sites and apps have well formed standard interaction patterns and transitions that users have grown to recognise and expect. You may decide to diverge from these to suit the purpose of your site or app. However, this means it’s important that you retain this, consistently throughout, and test to ensure your interaction is usable.
Due to touch screens the way a user physically interacts with tools or content is very different from on a desktop or laptop. This will heavily impact the functionality and layout of what you create.
- Gestures – these are the inputs performed by the user on a touch sensitive screen, such as tapping or swiping. This alters how you need to consider interactions, e.g. you can’t hover over buttons, typing becomes more difficult.
- Hit areas – An average finger press is around 7 to 9mm2, so buttons and links need to be adequately sized and spaced. This will translate to around 44px2 on a standard resolution screen and 88px2 on a retina display.
- Orientation – On many smart phones and on tablets the user can rotate their device. This may change how content is presented on the device, so rules need to be created on how content and images should reconfigure.
Transitions are animations that occur as a screen changes from one to the other, most relevant to native apps. This can be strongly tied to how the user understands how they are navigating through content, e.g. a slide from right to left implies the user is going forwards to new content, and a slide from left to right implies the user is going back. Thinking about how you want these transitions to help guide the user through the site or app will help them feel more confident and less frustrated while using it.
As well as being a wide range of devices with different specifications and features, there are also different operating systems, including iOS, Android and Windows, each one with their own standard styles and interactions patterns. These range from basic styling (such as default fonts that you may want to use to make an app feel more integral to the device), to different control mechanisms (Android has back and home buttons as part of the interface whereas this is included within an iOS app interface).
Design and style guidelines
Your current brand guidelines shouldn’t be forgotten when designing for mobile and tablet, but they may need to be redeveloped to consider how design elements are displayed on mobile and tablet devices.
- Overall style - It’s important to consider how visual elements will need to be modified for mobile and tablet devices. Grid structures, logos, type and iconography may all need new rules, or old rules modified to cater for display on smaller screen sizes.
- Components & templates - There will be new components and templates that should be designed too. This will include items such as headers and toolbars, as well as specific content and tool components. It’s important to consider how these will be viewed with restricted screen space, where it becomes even more essential that legibility and readability are accommodated for. There’s also connectivity and bandwidth limitations to consider. Users will be concerned with information loading quickly and as easily as possible, so it’s important to ensure the lowest amount of data required is downloaded to the user’s device.
Putting it all together
These are only really an overview of the elements that are required to create robust mobile and tablet guidelines, however when they are done well they will allow you to develop a consistent and excellent user experience across all mobile and tablet services, ensuring customers feel more connected and loyal to the brand.
There are some lovely guidelines that are worth a look at too. These look great, but more importantly make it much easier to design and develop something well.
- Android Design Guidelines - http://developer.android.com/design/
- Nokia N9 - http://harmattan-dev.nokia.com/docs/ux/
- BBC GEL guidelines - http://www.bbc.co.uk/gel
Read Elaine's related article on UX Booth