carousel30: optimizing for the mobile user experience whitepaper

17
WHITE PAPER OPTIMIZING FOR THE MOBILE USER EXPERIENCE: When to use responsive design, mobile websites & mobile apps By Greg Kihlström, VP of Strategy, Carousel30 & Giuseppe Carabelli, Creative Director, Carousel30 August 2013

Upload: carousel30

Post on 19-Aug-2015

14 views

Category:

Design


0 download

TRANSCRIPT

WHITE PAPER

Optimizing fOr the mObile User experience:When to use responsive design, mobile websites & mobile apps by greg Kihlström, Vp of strategy, carousel30& giuseppe carabelli, creative Director, carousel30

August 2013

cOntentsintroduction 3

3 Ways to Address the mobile experience 5

What Are the Ultimate goals? 8

types Of Websites is a factor in Your Decision 10

cases for each Approach 11

conclusion 14

About the Authors 15

About carousel30 16

3Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

intrODUctiOn“It is far better to adapt the technology to the user than to force the user to adapt to the technology”

—Larry Marine

There’s no question that the mobile Web is increasing in usage and popularity. According to a recent Pew Internet Project study,1 87% of adults in the United States own cell phones, with 45% adults owning smart phones. This can only mean that Web traffic from these devices will continue to increase.

We’ve also seen how 2013 will be the first time tablet sales will outpace laptop sales.2 According to the Pew study, 31% of adults own tablets in the United States and according to a recent analysis by Adobe,3 Web traffic from tablets has now surpassed traffic from smartphones.

A single presentation is not enoughBecause traffic growth is steady among smartphones and tablets, and the sizes and varying formats of new devices are seemingly endless, responsive design has recently been hailed as an excellent way to address the mobile user experience.

Adding to that, recent successes, such as AOL’s claim that advertising has received a three times increase in click-through rates (CTRs) since converting Engadget and Games.com to responsive design.4 It might be enough to convince you that responsive is the only way to go.

1 Brenner, Joanna. Pew Internet: Mobile. January 31, 2013. Pew Internet.

2 Bradley, Tony. Tablets threaten laptops, but there’s more to this picture. January 9, 2013. PC World.

3 White, Tyler (Adobe). Tablets trump smartphones in global website traffic. March 6, 2013. Adobe Digital Marketing Blog.

4 Robles, Patricio. AOL bets the farm on responsive design. January 10, 2013. Econsultancy.

4Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

That, however, is a misleading assumption. While we can all agree that tailoring the user experience for desktop, smartphone and tablet users creates more engagement and can increase interactions and desired outcomes, there is a good case for the three primary ways to address mobile user experience:

1. Responsive design

2. Separate Desktop & Mobile Websites

3. Native mobile app

In this white paper we will discuss these three approaches and how/when to make the decision to adopt each. You will see that there is no single solution that fits all needs, though our goal is to show you the appropriate time to utilize each approach.

Responsive Design

Separate Desktop & Mobile Websites

Native Mobile App

5Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

3 WAYs tO ADDress the mObile User experience

“You cannot NOT have a user experience”

—Lou Carbone, Founder & CEO, Experience Engineering

There are three primary ways to address the mobile user experience. Each has benefits and drawbacks, as well as recommended times to use or avoid. We’ll discuss them below as we illustrate how different approaches are required for different outcomes.

The important thing to remember is that there is no one best solution. It is not correct to say that there isn’t a single good use case for a mobile app, nor would it be correct to say that responsive design sites are the only way to go. Each website and web application should be approached with the user experience in mind, while also factoring in the total cost of ownership.

Responsive DesignAccording to Kayla Knight’s article in Smashing Magazine, responsive design is defined as:

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.5

5 Knight, Kayla. Responsive Design: What It Is and How to Use It. January 12, 2011. Smashing Magazine.

6Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

What this means is that the website itself “responds” to the different devices and screen sizes it is accessed by.

Of the three methods of addressing mobile user experience, responsive design is the newest, but it is also rapidly growing in popularity for a number of good reasons. These include a lower total cost of ownership, easier content updates, and a degree of future-proofing against new devices and screen formats. There is a good reason why “responsive design” has been a buzzword for a while now.

Mobile WebsiteMobile websites were the first solution to the mobile “problem.” Until responsive design was possible, they were the only real option to have a good mobile user experience, unless you recreated your website as an app. Doing that, discussed later, can lead to greater costs and management time than the responsive solutions, but as we’ll see, there are still many good reasons for making one.

A mobile website is designed specifically for mobile devices. In many cases, this means that it is made to perfectly fit a smart phone form factor, using font sizes, buttons and other navigation that are more appropriate for touch screen usage than a traditional website.

In most cases, content strategy for a mobile version of a site is significantly different than that of a desktop version of a site. The mobile site is a pared-down version that includes content and features that are geared towards the usage needs of someone who is accessing through their smartphone.

Many times, tablets are not shown the mobile version of a site. In cases where there is only a desktop version and a mobile version, tablet users are treated more as desktop users because of the extra screen real estate that a tablet has. From the same Adobe study mentioned earlier, we know that tablet users also spend 54% more time on websites than smartphone users. This means their behaviors more closely mimic those of desktop users than phone users.

Mobile AppThere’s no question that mobile apps are popular and, given their continued growth, there is obvious demand for them. As of January 2013, there were approximately 775,000 apps in the Apple App Store, versus 650,000 six months prior.6 That being said, there are good reasons behind when you should create an app versus a mobile or responsive website.

A mobile app is, and should be, treated differently than a responsive design website or a mobile website. While there are several apps that are simple recreations of an organizational website with basic content and little to no interactivity, this is not best practice and should be avoided for several reasons.

6 Costello, Sam. How Many Apps Are in the iPhone App Store. April 30, 2013. About.com.

7Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

Mobile apps are most successful with a single purpose, or at most two to three, which are best performed in isolation, rather than surrounded by a full-featured website full of content and other items. They also have the ability to better access mobile phone-specific features like camera, GPS, address books and other items (though Web browsers are gaining here as well in a few areas).

Mobile apps are by far the biggest investment. In most cases, each version of an app (iOS, Android, Windows, Blackberry) requires a mostly separate (sometimes completely separate) codebase. You are essentially investing in several products, not just a “mobile app,” with individual maintenance needs as well as the need to propagate design and content changes when decisions to change or upgrade are made. Simpler apps can use frameworks such as PhoneGap or others, but in many cases, these apps do not have enough phone-specific features to truly justify being apps vs. mobile sites or responsive design sites.

8Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

WhAt Are the UltimAte gOAls?

“People react positively when things are clear and understandable.”

—Dieter Rams

While the purpose of this white paper is to talk about enhancing the user experience for mobile users, there are countless other types of goals that your website or Web application have within your overall marketing and customer strategy. While we acknowledge they exist, we won’t be discussing those at this time. They are, however, absolutely necessary to factor into your decision for how to proceed.

The goals for increasing the user experience for mobile users can be plentiful as well, but here we’ve outlined a few:

• Increase conversions from mobile users

• Increase views of content across mobile devices

• Increase mobile advertising views

• Increase repeat usage of your Web assets and cross-device usage through content optimization

While this is from a general perspective (conversions could mean anything from product sales, to event attendance, to online fundraising or email signups), the overall user experience enhancement goals are usually similar.

What differ more dramatically are the goals and strategies that would influence the decision to use one of the three ways to address the user experience. Some of these include:

• Target specific activities and users

• Manage time/cost associated with Web properties

• Provide a consistent experience across desktop and mobile vs. tailored actionable content

We’ll talk more about these and how to apply them to your decision a little bit later in this white paper.

9Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

Other factors to keep in mind are the current usage behaviors of your audiences. For instance, if you are convinced a native mobile app is the best solution for you, and 99% of your traffic comes from iOS devices, you might want to first make an investment in that platform, rather than invest in developing your first app on two platforms.

Take a look at your Web analytics and get a good sense of the popular devices, content and other factors that would weigh into your decision. These can also include how many unique users are visiting your Web properties from multiple devices. Going into your decision armed with data will be very helpful and assist you in making an informed decision.

10Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

tYpe Of Websites is A fActOr in YOUr DecisiOnJust as goals vary based on the organization, campaign or audiences, the user experience needs vary greatly depending on the type of website that you are optimizing the mobile experience for. While there are many varieties of websites, we will discuss a few below in order to better set the stage for how to make your decisions.

Organizational WebsitesIn most cases, responsive design is going to make the most sense for an organizational site. A responsive site will most likely cover 95% of organizations’ mobile and tablet needs. It is also future-proof (as different screen sizes come out) and platform-agnostic (plays nice with Apple, Android, Windows, etc).

Generally, this is the way we approach mobile apps as well. There has to be a very strong case that involves phone-specific features that cannot be accessed by a browser, or must involve very specific user actions—otherwise a responsive site makes the most sense.

Web ApplicationsThis may not be the case with your web applications, however. Many times an organizational site is a great fit for responsive design and a very specific web application can translate well to a mobile site or even an app, though the latter requires the development and maintenance of separate codebases for each mobile phone platform you want to support (iOS, Android, Blackberry, Windows, etc).

Other Types of WebsitesOf course, there are several other types of Web properties, including campaign sites, games, and more. The same management time and cost considerations apply to both. User experience considerations also apply, though in specialized cases such as games, there may be additional constraints and or costs to either making them responsive or porting them to multiple platforms.

11Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

cAses fOr eAch ApprOAchAs previously said, mobile user experience is not a one-size-fits-all approach. There is a good case to be made for each approach. Here is how we at Carousel30 generally approach things.

Case for a Responsive SiteA responsive design is going to be the most cost-effective solution of the three, though there are some limitations in showing/hiding information on a per-device basis.

• The same set of content should be viewed across all platforms, though you want it to be formatted and optimized for each device. Major content differences across platforms are not needed or desired.

• You need a site that works for a wide variety of audiences and users, as well as platforms.

• Long-term cost of ownership and maintenance is a major factor in your decision.

Case for a Separate Desktop and Mobile SiteThere are cases when the content presented to users on a desktop site needs to be presented very differently on a mobile device. There are many possible reasons for this, but most of them point to the need for a separate mobile website. This scenario requires more time and effort on the content management front, and depending on the CMS used, may even require two separate Content Management Systems. Thus, this scenario should be approached with caution, as in some cases it can create double the work managing the site.

• The content should be different on each platform (desktop vs. mobile), not simply reformatted per platform.

• Unique features are available for one platform that do not apply to the other platform.

• Resources are available to maintain two separate sets of content.

• There is a strong need for mobile phone usage (not as much of a requirement for tablet users).

• At least 50% of all traffic is coming from mobile devices.

12Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

Case for a Mobile AppA native mobile app gives users of smart phones and tablets direct access to very specific functionality. The best use of an app is not a recreation of an informational website, since the maintenance of those can best be performed through a Content Management System. Mobile apps are best when they perform more singular functions and allow users to bypass a lot of the extraneous links and information present on websites.

• There is a limited set of functionality that the user interacts with.

• Phone-specific functionality or features are needed to fully use the site or application.

• There is a singular goal for both the user and the maker of the app, for instance: purchasing tickets, consuming one type of content, viewing media, or playing a game.

• Push notifications are beneficial to the user and make for a better user experience.

13Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

Pros and Cons of the Three Formats

14Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

cOnclUsiOn“Design is not just what it looks like and feels like. Design is how it works.”

—Steve Jobs

If the last few years are any indication of the next few years, we can only assume that many new devices, screen sizes, mobile browsers and other technologies will continue to emerge and further segment our audiences and users.

Choosing a mobile user experience strategy requires careful consideration of the various dimensions we’ve discussed in this white paper. As stated previously, there is not a single solution that works in all cases, nor is there one that is the sole future of mobile experience.

By staying true to your goals and audience engagement strategy, you can then factor in other things such as cost of ownership and usage profiles to determine the best approach. If there is anything that is certain, we know that platforms, devices, screen sizes and user needs will continue to evolve. The best solution is one that keeps this in mind while balancing your user and organizational needs.

15Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

AbOUt the AUthOrsGreg Kihlström

Greg is the founder of Carousel30, a strategist, and creative director who has received numerous awards and honors, including Webby Awards, ADDYs, American Marketing Association, iMedia Connection Agency Award, Summit Creative Awards, and others after 15 years of experience in the advertising industry. He has been published in best-selling books by Rockport Publishers and Crescent Hill Books and industry related magazines such as Communication Arts and Graphis, has exhibited work in galleries around the country. Greg has been featured in Advertising Age,

Website Magazine, Web Designer Magazine, The Washington Post, and Voice of America. He has also judged renowned design competitions around the country. Greg frequently speaks at global industry events and has led panel discussions at such events as Internet Week New York, Internet Summit, Mid-Atlantic Marketing Summit, Digital Capital Week and the Virginia Tech Conference on Social Media and Tourism in Italy. He is a regular contributing writer to iMedia Connection, a leading online publication for the digital marketing community. While at Carousel30, he has worked along with many top brands, on a number of campaigns, including AOL, AARP, Ben & Jerry's, Geico Direct, Miller Lite, MTV, Starbucks, The Nature Conservancy, TV One, and Washington Wizards. He is Vice President on the board of directors of the DC Ad Club — the premier organization in Washington, D.C. for the advertising industry, where he is also serving as a mentor in the Club's Career Catalyst program and has served on the ADDYs and Communications Committees for the past two years. He serves on The Trust for the National Mall's Communications Advisory Committee along with a group of marketing experts from agencies around the country. He is also an active member in the American Marketing Association, the International Academy of Visual Arts, and the Art Directors Club of Washington, DC.

Giuseppe CarabelliGiuseppe Carabelli brings more than 12 years of creative and strategic experience to the team at Carousel30. Prior to joining the company, he worked in Milan as the Interactive Art Director for Leo Burnett, one of the most renowned advertising agencies. In the U.S., he has worked as Art Director and as Interactive Marketing Consultant for several digital agencies, and for international clients and startups. He has experience working for clients including FIAT, Nokia, Disney, Coca Cola, Kellogg’s, AstraZeneca, McDonald’s and Proctor & Gamble, and has also worked on a $4

million dollar re-development of AstraZeneca’s Italian website, where he helped balance design creativity within the boundaries of the BroadVision platform. He also led the design and development team for a redesign project for Haier Europe, and oversaw a $2 million integrated campaign promoting Kellogg’s Frosted Flakes cereal and product line via print, mobile and website engagement. In the entertainment vertical, he worked with McDonald’s, Nokia and Coca Cola on the launch of Disney-Pixar’s movie, Finding Nemo, by supporting the design team in creating a successful online game and promotional website. He has also provided consulting services for a variety of organizations, most notably, EcoFusion, an agency geared towards eco-friendly businesses, in creation of a pitch to secure funding for the launch of the Green Video platform Empivot.com. Giuseppe also brings experience from Ecendant Interactive, the digital side of Fraser Wallace Advertising, a nationally renowned ad agency that caters to the real estate and food & wine market verticals, where he was a user experience, design and strategic asset for the company, culminating in a variety of MAME winning campaigns for builders such as Engle Homes, Bowen Homes and NVR. Giuseppe's international experience gives him a perspective on creating strategic design solutions for everyday interactions.

16Optimizing fOr the mOBiLe USer eXperienCe

A CArousel30 White PAPer

AbOUt cArOUsel30Carousel30 is a digital agency that focuses on building audience engagement and conversions for top brands. Our diverse team translates business objectives into digital strategies that incorporate websites, mobile apps, social media marketing, email marketing, display advertising, and other efforts.

Since our founding in 2003, we have had the opportunity to work with and help grow our clients’ businesses, while leading the digital marketing industry as it continues to mature. We've worked with top brands around the world, including Toyota, AOL, Geico, CQ Roll Call, The Nature Conservancy, United Nations, National Audubon Society, AARP, MTV, and more. We consistently provide clients with engaged audiences and tailored experiences that connect them to the people, brands, causes and products they love.

As a full-service agency, our offerings include:

• Digital Strategy

• User Experience

• Creative

• Technology

• Digital Marketing

Carousel30 is headquartered in Washington, DC. More information is available on our website at: http://www.carousel30.com

Washington, DC (headquarters)105 S. Columbus St.Alexandria, VA 22314 (703) 260-1180

Carousel30.com

facebook.com/Carousel30

@Carousel30

linkedin.com/company/Carousel30