Responsive design, UI, UX, rendering, information architecture… if you speak with anyone in the mobile or web space nowadays you will certainly cover the topic of user experience. That’s because the user experience is critical to success on mobile or web, and becoming increasingly important everyday as new devices proliferate the market and people on the move have less patience for poorly designed sites and apps.
Regardless of your involvement on a mobile project, a great user experience should be the goal for all of us who work in mobile. That’s because good design ensures end users find what they need and repeat visit – and that just makes good business sense.
User experience,aka UX, is common practice on many desktop websites but its only starting to take hold on mobile; when you visit the majority of web sites from a mobile device most are laid out for presentation on desktop size displays and exploit capabilities of desktop browsing software like flash which doesn’t work on smartphones or most tablet devices. Accessing such a Web page on a mobile device often results in a poor or unusable experience.
So how do we fix this? Through a little bit of technology, a little bit of art and a few little tricks of the trade. Below you’ll find some tips to help you overcome mobile design challenges and create brilliant experiences users will love and that will support your business objectives on mobile.
- Know Your Purpose
- Think Small But Don’t Shrink Down
- Consider All Shapes & Sizes
- Be Light
- Touchy Feely Mechanics
- Context in Context
1. Know Your Purpose
Each business will have different objectives or goals, i.e. to sell more, be more useful, communicatein a more targeted way, etc. By clearly defining objectives and then considering how mobile could help achieve them – differently than a desktop could – will set the foundation for what features and functions your mobile experience should encompass.
In broad strokes the three major benefits mobile will give your business are: Simplicity, Immediacy & Context.
Have you considered how using mobile could speed up a process like selling pizza? How it could take advantage of where the user is located - be it at that moment or in relation to your business/offering? How you could capitalize on in the moment requests for information like a song name? As you answer these questions you will get closer to what you need to build. Be sure to write these objectives and goals down and share with the whole project team. Being on the same page will also ensure your whole team creates the mobile experience you need.
2. Think Small But Don’t Shrink Down
Because of the limited screen size, content on a pagewill quickly fall below the fold (visible screen) and may need considerable scrolling to be visible, especially if the top of the page contains images and navigation links. That means people may not immediately know just by looking quickly at the page if they are in the right place.
With less real estate on mobile, each part is more valuable so carefully consider what to include for a person who is accessing the experience through mobile. Consider what it would be like for a 2500 sq foot house to be squeezed into a property that’s 750 sq foot in size. In order to keep all the bedrooms, bathrooms and basement there you would have to shrink everything down to an unusable size! That wouldn’t work for anyone. But if you think about what someone who is looking for a small space may want and need, then you could design the appropriate layout.
There are a couple simple design tips to make the most out of limited space. First, hide the mobile browser only calling it up when someone scrolls or moves to the top of the page. It represents approximately 60pixels of valuable real estate that isn’t actually needed by users all of the time. Second, consider the use of collapsible/expendable lists where possible. This allows for you to present all the options on the screen and expose more detail on that same page when requested by users.
Above all, decide what’s needed in your experience and lay it out appropriately to the space you have available. Help users create a mental image of the site/experience as quickly as possible. A consistent style with visual cues, titles and/or clear navigation are critical signposts for users.
3. Consider all Shapes & Sizes
Small, medium, large.
Vertical and horitzontal views.
480x360, 960x540, 1024x600 resolution.
4”, 3.5”, 3.3”, 7.0”, 10.1” across.
Mobile has a reputation of being complex to build for, partlydue to the differences in technology and often due to the various screen sizes and resolutions. Just when we thought we had it figured out with smartphones and the browsers have gotten better, along come tablets.
There are a few different ways to handle this problem. One way is to design native downloadable mobile applications which are custom designed for devices and operating systems. For the right purpose, this may be the solution, but it could be cost prohibitive if you want to achieve very wide reach.
If you are designing for the wide reaching web, you have to be at least a little more general because of the sheer number of devices that will be searching for and pulling up your site. The biggest concern really is width (height could be scrolled so it's a little less important). You could handle this issue by either designing for a mid-size device to lessen the amount of resizing the browser has to do but it will leave a lot resizing up to the device browsers. An alternative is to bucket devices into categories, i.e. if a screen size is over X width or specify the devices, and then build slightly different layouts for them. This takes more work but if you have a lot of images and graphics that need to appear in a certain order and can’t be shrunk down too much you’ll want to define the layout, it may be worthwhile.
This same thinking also applies to tablets. Tablets are not just big smartphones. Arguably, many of them are even getting close to the size of many laptops screens. If the business case could be made, consider creating a tablet-friendly page layout or audit your desktop site to see if it would be suitable.
Some companies choose to address the shape and size issue by adopting a hybrid approach, which combines standard web techniques with native device functionality. There are a number of different platforms that could be used to leverage a device’s native capabilities with the speed of web development but it is worth noting that none are perfect yet - some browsers or functionality may not be supported. That said, very few things in mobile are compatible and optimized across 100% of devices so if you can accept the limitations, this may be the right interim step until HTML5’s promise of true cross-platform compatibility is realized and web apps are able to access native device services.
Speaking of HTML5… by coding sites in HTML5 it is getting easier to create pages that resize automatically according to the browser and device size. This does require a higher degree of sophistication in your page coding and the pages will still constrained by a web browser’s user interface controls (it could still look like a web page not a slick highly designed app and then there’s the issue of older web browsers in the market). But if your focus is on people who are on the newest devices and you don’t want to leverage native capabilities, then this could be the right direction for you.
4. Be Light
The speed of mobile networks is increasing annually but it can be slow compared with fixed data connections. This can lead to long page times, especially for lengthy content and for content that requires a lot of navigation between pages. What’s more, after the wait some devices may not support the content types that are being requested. Add to that the mobile data charges a person may be racking up as they browse through your site and you may have a negative experience on your hands that you never intended.
When designing for mobile, try to limit the amount of content on each page and use lower resolution images. Striking a balance between keeping the page weight down and number of pages to click through is a bit of an art, depending on what you are trying to showcase so test some variations to see what’s right for you. A good rule of thumb though is most mobile webpages are under 30KB. Consider that the average desktop webpage is approximately 1MB and you will have some pairing back to do!
5. Touchy Feely Mechanics
Mobile device input is often more difficult than desktop devices that are equipped with a keyboard and mouse. Phones and tablets often have limited keypads that require switching between letters, numbers and symbols;may have small touch pads; frequently have no pointing devicerather just scroll pads or finger gestures.
Because of the limitations of the small screen and input mechanics, forms are hard to fill in, URLs are difficult to enter, switching between tabs or applications requires extra steps, punctuation requires commitment and precision counts for a lot.
When designing the page, consider that some people may be using their fingers so extra space is requires for ease of selection. Keep asks for information down to a minimum by: prepopulating fields, leveraging search capabilities, offering multiple choice, pulling information from the device like location, using QR codes/SMS, linking for URLs and finding new pages. And don’t forget back buttons and undo features! Mistakes will happens – make it easy to back out of them.
On larger screen devices like tablets, consider some more natural gesture behavior like wipes, flips and accelerometer features that incorporate movement that is already known in our daily lives and makes the experience more humane and easier to do repeatedly or quickly.
6. Context in Context
People using mobile devices typically have different interests than users of fixed or desktop devices.For instance they are likely to have more immediate and goal-directed intentions than desktop Web users, often intending to find out specific pieces of information that are relevant to their context, be it comparative prices on a TV they are shopping for or requiring specific information about schedules for a public transit bus trip they are in the midst of taking.
Because of the fact that people on mobile devices are often in situ, they are typically less interested in lengthy documents or in general browsing (though the latter does happen when filling time on the bus, at restaurants waiting for guests,etc). When you consider where people are when they are searching/using your mobile experience it will help determine some of the functions and features you will want to include to make the experience best for them. For example, add the ability to review a product after a person made a purchase, use a QR Code reader to scan a barcode for more product information, bring location or timetable information front and center on a site if that’s the most valuable features to a user.
Mapping the use cases to the mobile experiences will help ensure the user experience corresponds to the context and the user responds to the experience!
As with all digital technologies – things will continue to change and evolve. Over time, people’s expectations and the devices they are delivered on will change too. To keep up with these changes, update or tweak your mobile experiences regularly. Consistently track and measure your site/app experiences to confirm that you are meeting your goals or uncover places to improve the experience.
The beauty of mobile technologies is that it brings us closer than ever to people who want to interact with our brand, service and products. Make the most of that opportunity by putting the user’s experience at the forefront to ensure you make the most of this lasting relationship.
Ariela Freed, Digital Marketing Director, Maritz Canada
W3C Best Mobile Web Practices
Forrester Mobile Channel Strategy, 2011
Wired “Best Practices in Mobile User Experience Design”, September 2009
Mobile Websites, Tablet Apps and Hybrids: 7 Mobile Strategy Tips for 2012