Wednesday, August 20, 2014

Also In
March 2012:

Three Mobile Experience Musts

By Jon-Mikel Bailey

March 6, 2012

Posted in: Focus on Marketing & E-Commerce

Recently at the SocialFresh Baltimore Conference, user experience was a major focus during the day devoted to mobile marketing, and rightfully so. Though user experience on mobile is very important, it’s often overlooked.

“User experience” is an industry term that 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.

1. The mobile page loads quickly.

2. The page offers two to three clear choices specific to why the user is there.

3. 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 often will be taken to a standard web site. 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 web site, consider the following.

• Do your stats support it? Check your web stats and see how many users are accessing your site on a mobile device. The new version of Google Analytics has some great ways to measure this.

• What information would a mobile user need? Not everything on your web site may be necessary. Consider this and develop your mobile site accordingly. Keep it simple, offering only what viewers need at that moment.

Let’s assume you have done your research, and your users do need a mobile version of your site. 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 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.”

Your designer/developer should know what he or she is doing. Mobile is the new Wild West. Make sure your designer/developer knows how to build your site to work with all major mobile devices and browsers. It’s no longer as simple as knowing what version of IE your clients use.

Navigation

Navigation, which is the linking structure of a web site, is dealt with much differently on a mobile site than on a standard web site. 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, he needs to see the main choices you want him to make right away. These choices need to relate to the reason he is at your site in the first place.

If the user scanned a QR code, or used an SMS shortcode (text message) to get to your mobile page, his decision to do this needs to be validated immediately. He 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 user 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 he clicks this and ends up on your mobile landing page, what do you think he is 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 smartphone, you know how frustrating bad navigation can be.

The minimum area required for an optimal mobile link is 44 pixels by 44 pixels. 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 users 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.

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 web site. 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.

Jon-Mikel Bailey is with Wood Street Inc. (http://woodstreet.com), a web design development company in Frederick. He can be reached at 301-668-5006, ext. 8452.

Leave a Comment