This is the first in a two part look at mobile web design. In part 1, I focus on three current ‘big guns’ of mobile web applications and look at how they solve the problems of mobile web application design by getting to the point. In part 2 I’ll get practical and run through a series of steps to design a small sample mobile eCommerce site, applying what was learned in this article.
“Good interaction design focuses on what people want to know, do and feel”
– Stephen P. Anderson
Mr Anderson’s words are wise when applied to the realm of interaction design in general. When applied to mobile, they’re gospel. On a mobile device, getting people the information they need fast is a necessity. Letting them do the most important things in the easiest way is paramount. And since the mobile phone is the most personal device someone owns, making users feel good about what they’re doing will have them coming back for more and more.
So what? Why does good design on a mobile matter?
Since picking up an N95 last year and gaining access to a sufficiently usable interface to the Internet on my mobile, web applications tailored to mobile devices have added to the wheres and the whens that I use the Internet. I can now check and organise my email while walking to the office. I can watch YouTube videos on my phone. I can check my Twitter feed and post messages to it in real-time. And I can catch up with my friends on Facebook. The common theme: I use the mobile-version of these websites on my phone to keep up-to-date while I’m on the go.
Why do I use the mobile version? It’s pretty simple. On a phone, full size websites suck. Back when I used devices with smaller screens such as earlier Nokia and Motorola phones, web browsing was a novelty at best. With a bigger screen and a more advanced browser, the N95 provides enough screen space to have a reasonable web experience, but not if the page has been designed for a full size desktop web browser. Even on the iPhone, which does a really good job of being able to zoom in and out of portions of pages, browsing full-size sites is more hassle than using the iPhone native versions of sites.
As web sites and web applications become more advanced, there will be a greater need to provide versions that are specifically tailored to mobile devices. There’s something of an emotional attachment that’s hard to explain with services that provide good mobile experiences. Using mobile-tailored sites on a phone just feels right. Sure, Twitter’s a really simple application and the full version is usable on a mobile web browser. But there’s something almost luxurious about the sleek, pared down mobile version, where everything just fits on the screen and feels like it’s been designed to be viewed that way.
I’m going to take a look at a few of the mobile sites that I use every day and give a few reasons why I think they’ve succeeded in providing experiences that I keep coming back to.
Case 1: GMail
As I mentioned above, GMail is the first site I check on my mobile daily. I check it when I’m walking to the office to catch up on any mails that might brief me for the day ahead. The GMail client works both with standard GMail accounts and GMail for your domain. I check three email addresses and have bookmarks for each, and cookies allow me to stay seamlessly logged in to each. I use GMail to browse my messages, archive, delete or report spam and sometimes I use the reply and compose features if I need to send an email urgently.
GMail keeps the interface out of the way on the home screen of its mobile site. The home screen on GMail mobile provides access to all the significant email browsing and management features I need. I can browse emails and threads, send, receive, delete and organise email, all very simply with a minimum of fuss. The most important parts, the messages, are given priority at the top of the interface and other actions, such as “Archive”, “Report Spam” and “Delete” are further down the page. This is a sound approach since 80% of the time I won’t need these features as I’ll just be checking and reading mail.
GMail gets to the point by displaying emails first and getting the rest of the interface out of the way.
Case 2: Twitter
I usually check Twitter next and use its simple browsing features to catch up on the latest from the people I follow. I’m able to nip in and out of other people’s feeds too, as well as update my status on the site.
The Twitter home screen cuts to the chase: a status update form followed straight by the latest updates, with simplified interface elements. Twitter is a simple application that allows users to post short messages telling the world what they’re doing and having short conversations with other users.
Even the desktop web application has very few features. The mobile version has even less. Providing the very basic interaction with their system is something that the Twitter mobile application does very, very well. The interface is simple and clean and allows for the two main functions of Twitter: status updates and feed browsing. Unlike with GMail, a lot of the time I log on to the Twitter mobile interface to update my status. Accordingly, the status update field is at the top of the home interface, with the feed below it. The feed is also satisfyingly lengthy with the 20 most recent status updates: a good example that the amount of content doesn’t have to be too limited on a mobile device. The pain of clicking through to another page is often far greater than a little bit more to download upfront and being able to scroll through content.
Twitter gets to the point by allowing a quick, simple way to post status updates and by giving a generous listing of friends’ status updates.
Case 3: Facebook
My next daily stop is on Facebook, where I check to see what my friends are up to, keep up to date with wall posts and send and receive Facebook mails.
Like Twitter, the facebook mobile application exposes simple features and lists first. Unlike GMail and Twitter, Facebook has a much greater feature set to pare down in their mobile offering, and I feel they’ve done quite a good job of it. Like Twitter, they’ve assumed (correctly, in my case at least) that the majority of mobile users will want to update their status first and foremost. They then prioritise the three most recent status updates, friend requests and news feed items. A little further down the page, recent wall posts appear if they’ve been posted in the last few days.
Facebook is a hard one to call, as the breadth of their features is so great, but I feel they’ve done a good job of finding and highlighting the crucial few features and relegating the less important ones somewhat.
Interestingly, Facebook is the only site of these three that provides a top navigation bar: a useful, tidy way to deal with the many features while still promoting the important ones.
Facebook gets to the point by choosing features that people will most likely to want to use while on the go, and providing a simple, tidy interface to access other parts of its extensive functionality.
It only matters if it rocks
One thing all these three applications have in common is this: the interface is stripped down to a bare minimum, leaving easy access to the most important features of the application.
All three sites also use CSS to prevent against blandness. Neither GMail, Twitter nor Facebook look generic. They are very simply branded at the top of the screen with colourful logos (GMail for your domain even allows you to upload your own logo, if you wish). GMail uses very effective colours, padding and borders to separate messages out in the email list view and uses coloured links and backgrounds effectively within email threads to separate message content from headers and the interface. Twitter makes simple use of colours and rules to separate out messages and to show simplified message timestamps. And again, Facebook uses simple colours and rules to divide out content within the page and to separate out the content and the interface.
All three sites give an easy way to access the full version of the site. One other thing that I appreciate about these sites is that they all offer a link to view the full version of the site. Modern mobile browsers are fully capable of displaying the full versions of sites – even sites chock full of javascript and interactive behaviours. Sometimes, when the mobile version isn’t quite enough, it’s good to click on the “full version” link to use the site to its maximum, even if it doesn’t feel right and even if it’s a bit more hassle; sometimes the pain is worth it, and it’s useful to have the option.
None of this is necessary, but promotes a feel-good atmosphere while using the sites.
Strip your software, but keep its pants on
Exemplary as they are, GMail, Facebook and Twitter don’t get everything right all of the time.
One glaring omission from the Twitter mobile version is the lack of a “replies” feature. One of the most important aspects of using Twitter is engaging in conversation with other people on the service. If you can’t see who replied to you, you can’t engage in that conversation. It strikes me as a very odd omission, and very much not one that has been left out because it’s not possible to display it on the mobile version.
It’s all about a balance. Google has left out a huge amount of personal settings and customisation from their mobile client. In fact, the “Settings” page is completely absent from their mobile interface. But that’s just the trick: while I’m on the go, I want to use the most important features all of the time, and the less important features some of the time. But there are some features that I’ll simply never use while I’m on the go.
One last thing I’ll say about mobile interfaces is the choice as to whether to provide the mobile version of a site automatically or not. Both Twitter and Facebook have no auto-detection – a visit to www.facebook.com or www.twitter.com will direct you straight to their full sized sites. GMail, however, defaults to the mobile version of their email client, with the option to switch to the full version. The automatic defaulting to the mobile version’s not really the issue. My preference is that the mobile version be displayed automatically, but that’s just me. What’s really important is that there’s an option to view the full version of the site. Like I said above, there’s often a case when you need the full functionality, and a link to the full version is simply very useful.
In brief
- Decide on the most important aspect of your service. If it’s information, like news, or a blog, take your visitors to the information fast. If it’s an action, like updating a status, give them a quick way to achieve it.
- If you have a large feature set, cut it down to the minimum Cut out the extras of your application and let the mobile version focus on the important bits. If a user needs to change settings or make large changes, they can use the desktop version.
- Don’t skimp on the amount of information on pages. Sure, it’s a mobile device, sure it’s a small screen, but if the information is relevant and in a continuous stream, scrolling is much less painful than loading a new page.
- Provide a way to access the full version of the site. Mobile versions are great, and by design don’t have a full feature set. Sometimes it’s worth the pain of loading up a full version of a site on the move. The option should always be there.
It may still be early adopters like me that use the Internet on a mobile device as a way of life. But it’s the lessons learned now that will remain true when the mass market adopts mobile Internet as their way of life. With mass market adoption, it will be the sites that are built with simple principles in mind that prove to be successful. It will be those sites that best get people what they want to know fast, what they want to do efficiently and all while leaving them with a smile on their face.
Now that I’ve picked apart GMail, Twitter and Facebook, I feel I’m ready to apply the techniques that they have employed to keep their mobile sites simple, focussed and usable on small screen devices. In Part 2 I’ll run through building a small sample eCommerce site, taking what was learned from these three sites and applying similar techniques.
