We recently set about developing a car parking application for GotoCSP and Wembley Stadium in London, the web app had to be designed for mobile first so that people on the go could book parking quickly and easily. Here is how and why we “cut the crap” to give smartphone users what they want.
The absolute critical, but basic, features
A solid house is built on concrete foundations, so we have to get the basics right first, they have been mentioned a lot of times in many different articles, but did you really pay attention and find the tools you need to make sure they are in place? We certainly have learned a lot from getting these essentials right.
Fast Loading - Yeah, yeah, we’ve heard it before.
This “fast loading” term is thrown around a lot in the industry, and every web agency going will mention “oh yeah it will be super fast”, but what is super fast? And how do you know if you have a fast web app? Well we use Google PageSpeed tools to analyse the website against Google’s criteria to ensure it’s up to standard. Although take some of this with a pinch of salt, as Google’s own page does not score 100%!
We then test on Wifi, 4G and 3G and mark down the response times. According to Econsultancy 65% of smartphone users want a web page to load within 4 seconds and 82% expect it load within 5. Make sure that you are at least printing to the screen within 4 seconds even if rich content and interactive features takes a little longer, that way the user isn't waiting on a white screen, getting bored and possibly nodding off.
Intuitive layout that’s thumb friendly
Using a basic layout thats stripped down to essential elements and is familiar to your customers is definitely the way to go with smartphone web design. There is no point in reinventing the wheel and giving smartphone users a learning curve when all they want is to complete their task or find the information they're looking for. Here are some examples of menu placement and navigational elements that you will be familiar with.
We use this style on the Crockett & Jones mobile site as the menu drop down, giving users a real thumb friendly way to navigate to any part of the site from wherever they land in on.
On our very own website we use an expanding menu system to give access to bit more complex menu that allows users to go two levels deep within the site hierarchy. We felt this was important because otherwise users would have to do two clicks and some scrolling to get to deeper pages, whereas now its all presented immediately from the expanding menu.
If you require more options on one row you should use the matrix approach, be careful not to have anymore than 3 columns per row as things start to get tight. On Crockett & Jones we used a 2X2 grid to give mobile users instant access from the homepage to main areas of the website.
Top & Bottom
Navigational blocks that fix themselves to the top and bottom of the screen are more suited to applications in my opinion as they can be used along with icons to give users an easy way back to the home screen or to daily task screens. Facebook uses this along with off canvas elements to provide a super easy experience to its millions of users.
What layout should I use?
The layout will really depend on what the customer wants to achieve from visiting your mobile optimised website. In the vast majority of websites we work with, it will be to:
Get directions to the business premises
Find the store opening hours
Find the telephone number
Find product and price information
Make an appointment
Download an order / ticket confirmation number
Try to figure out what your customers want when they visit your mobile website and ensure that these tasks are present immediately when you load up the website. A mix of list, expanding and matrix will suit the majority of lead generation and ecommerce websites.
Top Tip: Being thumb friendly is obvious, but a lot of sites I see do this on the homepage and then seem to completely forget about it throughout the site. Make sure, at the very least, your critical customer journey is completely thumb friendly, then work from there to make the rest of the site thumb friendly over time.
Legible, readable and viewable content
Making sure smartphone users don't have to pinch and zoom to read text and move about the page is essential, that’s a barrier to goal conversion.
Ensure the smartphone experience has:
A font size suited to the smaller screen
A typeface that is rendered well on multiple devices (iPhone, HTC, etc)
Content that is scrollable with the thumb by flicking the page up and down
Images that are resized for smaller screens
Videos that don’t need a flash plugin (for iPhone users)
Downloads that can be sent to email for reading later, instead of using up data allowances (although make sure they can download them if they want too!)
Get your best and most converting content in front of your user first, give them an easy way to navigate around a fast loading site and you’re more than halfway to a winning mobile website.
In the next post on smartphone websites and responsive web design we will take a look layouts for better conversions in multiple scenarios (ecommerce, lead generation websites and others). Make sure to put 17th Jan 2014 in your calendar to view the article.