The modern web isn’t the same as it was. What started as a giant information repository has now taken on the role of a fully fledged platform allowing humans to interact and carry out tasks in ever new and improving ways. As the web dominates more and more aspects of our lives there is now, more than ever, a real need for progression and improvement in the user experience (UX). More and more sites are waking up to the reality that the experience of their users is one of the biggest factors in securing vital conversions. But where can we look for inspiration. Where can we see positive progression in UX that we can take forward to the web?
A recent conversation about the importance of a simple user interface on a mobile phone got me thinking about how lessons learned from mobile UIs can be translated over to the web in an effort to improve the user experience in our web sites and web apps.
To help me illustrate my point, lets look at something we all do every day yet probably give very little thought to; texting. The goal of texting, obviously is quick, simple communication between two or more parties. The most vital thing is the recipient receiving and actioning the message. Everything that leads up to that instant is purely secondary. Every key press, every option, every menu and nested menu and every error that must be corrected is a step further away from the user achieving the goal. It’s the same with anything. The outcome of a task is what’s important, not the process of performing the task.
UX theory tells us that the processes we go through in accomplishing a goal should be as quick, simple and pleasurable as possible. Often, especially for mobile devices, this means making these processes unnoticeable, seemingly invisible creating a truly goal-orientated user experience.
This kind of “the destination is more important than the journey” approach to the user experience can, and should be brought forward into the modern web. The gap between users setting out to achieve a goal and actually achieving it should be closed. In doing this, we web designers can learn a lot from mobile phone UX. Here are three ways that mobile phones can inspire your next user experience design.
1. Quick, obvious links for the most common tasks.
To see this done well you need only look as far as the iPhone. Having pretty much scrapped the traditional nested menu structure of many mobile operating systems, Apple have given us a phone that simply has a desktop with apps on it. The user can then re-arrange these one-tap shortcuts and even “dock” the most common four so they are never more than one click away.
In order to translate this practice to the web we must take a closer look at our calls to action. More specifically the gap between the user initially clicking the call to action and them successfully completing a conversion. The fewer steps after the initial click, the less obtrusive the process becomes. A great example can be found at mozilla.com Check this out:
The home page and call to action.
One click later.
Mozilla have identified that the majority of visitors to mozilla.com are there for the sole purpose of downloading the latest version of Firefox. As such they have made this as quick as it is possible to be. One click completes the site’s part in the visitor achieving their goal.
2. Error prevention and correction.
With more phones opting for a touch screen keyboard the need for error prevention and correction has never been greater. Users can no longer feel the physical buttons so they are prone to more mistakes. This has caused OS makers to step up their game and implement live, in-line error correction and prevention. See the iPhone:
When translating this to the web you’re essentially just talking about forms. Form validation is of paramount importance to UX. Modern enhancements such as jQuery tool tips to help with blank or invalid field inputs and also live, inline validation will only improve this further.
As a designer/developer your aim is to make sure as many users as possible complete the form successfully in one pass as possible. Any amendments they are forced to make are barriers to the goal. This is, of course all the more important if your site uses long forms such as the ones on price comparison websites. Speaking of price comparison sites, check a few of them out! Some have had recent redesigns and exhibit some really nice validation tricks.
3. Assess what is truly necessary, ditch what isn’t.
A common mistake mobile phone manufacturers make is shipping their phones with over-crowded busy home screens. You know the ones… those ones with those god awful widgets all over the place; a giant analogue clock, a music player which displays regardless of weather or not music is playing or headphones are connected, daft weather report animations and floating image slideshows. Thankfully manufacturers are starting to see the error of their ways and only relevant, useful things find their way onto the screens.
Unfortunately the web isn’t as quick to ditch useless bloat. Often, due to either a clueless client making silly demands or a careless designer pandering to them, useless copy/widgets/images/features make their way onto sites. This can really harm a site’s UX on two levels. First it can look terrible and have a negative effect on the user’s initial opinion of the site and second it can easily draw the user’s attention away from real, genuinely useful UI features. Check out this example:
Here we see a sidebar that has been pretty much destroyed by useless features. Not only do they look tacky, they nearly bury the all important search field. Users, particularly first-time users may very well rely on an effective search field but if they can’t find it due to worthless bloat it could leave them frustrated, or in the worst case cause them to leave and not return.
Taking this further.
Now, more than ever it is important to seek out new ways of improving the overall experience of your users. As such it’s growing ever more important to carry out some form of usability testing to see how well your site or app is received by your target audience. Also, look around you. If you see a situation that provides a bad user experience and you can think of ways of improving it, think about how that solution could translate to your website or app. It could make more difference than you would think.
