At Wood Street, we talk a lot about design, user experience, conversion, SEO, and the like. We sometimes assume that everyone is as passionate about this stuff as we are. And for the most part, our clients really are.
And even though user experience on mobile is VERY important, it’s often overlooked. User experience refers to the quality of the experience the user has while visiting your mobile site. So, how is quality defined?
A quality mobile experience means the following needs to happen:
- The mobile page loads quickly.
- The page offers 2-3 clear choices specific to why the user is there.
- The design and layout is mobile-friendly.
There is a big difference between a mobile user and a desktop user. A desktop user has a chair, a mouse, and large screens. A mobile user is on the go, has thumbs and small screens.
A mobile user will often be taken to a standard website. And while the mobile browsers will render a standard site OK, remember that this isn’t the optimal user experience for mobile. But before you rush out and build a mobile-friendly website, consider the following…
- Check your web stats and see how many users are accessing your site on a mobile device. If that number is high, you may want to consider a mobile first approach.
- What information would a mobile user need? Not everything on your website may be necessary. Consider this and develop your mobile experience accordingly. Keep it simple, offering only what they need at that moment.
But, back to quality. What does a quality mobile site look like? Let’s break our definition of quality down a bit…
Load Time
A mobile friendly site should be developed using the latest standards for HTML and CSS, minimizing what the browser actually needs to do to load the page. In other words, keep it simple.
The design needs to be clean and minimal. Photos should be optimized. Graphics should be clean and necessary. You want to utilize what’s called “responsive design.” Smashing Magazine has a great article and definition for Responsive Design…
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.
Make sure your designer/developer knows how to build your site to work with all major mobile devices and browsers.
Navigation
Navigation, which is the linking structure of a website, is dealt with much differently on a mobile site than on a standard website. The buttons need to be easy for the user to click (touch), and the choices need to be minimal and relevant.
When a user gets to your mobile landing page, they need to see the main choices you want them to make right away. These choices need to relate to the reason they are at your site in the first place.
If the user scanned a QR code, or used an SMS shortcode to get to your mobile page, their decision to do this needs to be validated immediately. They should get to this page and know right away what to do.
For example, if you have a booth at a trade show, you might consider using SMS to improve your marketing efforts while at the show. So, you have a message on your booth that says “text info to 12345 to get more information about XYX product”.
The users sends this text and receives one back with a link and maybe a short message like…
“thanks for your interest. Here is a link to the spec sheets and some video clips for this product.
– www.link.com”
When they click this and end up on your mobile landing page, what do you think they are expecting to see? Yup, a link to the spec sheet and a link to videos. Do you need a bunch of links to other things there? No.
Design and Layout
Designing for mobile is much different than designing for the web. You’re dealing with thumbs. And if you’ve ever navigated a site on your smart phone, you know how frustrating bad navigation can be.
The minimum area required for an optimal mobile link is 44 pixels by 44 pixels. This is what that looks like…
That is about the average area that a thumb needs to effectively select a link. If your links are very small and crowded together, the user will have a hard time hitting the right link and become very frustrated. This is bad user experience.
Give your links room to breathe. Make sure that the user can easily select the link they want. This will require smart design and layout, using color and spatial arrangements to offer the user the easiest navigational structure possible.
Mobile Usability
The text should be easy to read. Remember, this is a small device; you need to keep in mind that reading here is even more difficult than on a standard website. You want your content to be minimal and your fonts to be large and easy to read.
Responsive design really factors in here. Your code can go a long way to ensuring that the cross-platform user experience is optimal. In other words, an iPhone 4 user will have a similar user experience to an Android 3.0 user and so forth.
As with any marketing and communication efforts, research, planning, defined goals, and testing are required. Don’t rush to build a mobile site just because there are a bunch of mobile phones. Take your time and build a mobile experience that supports your marketing goals.
What are some good and bad experiences you’ve had with mobile sites? Let me know in the comments below.
Like this article? Why not share it? See the share options in the bar below…