You are on page 1of 73

Creating A Marketable, Effective Mobile Website

Want Happy Customers? Create A Marketable, Effective Mobile Website!! Jennifer Brower, PMP March 16, 2012

1

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Our business goal as creators of mobile web applications is… To present information quickly and efficiently in a manner convenient to the user - making them loyal, happy customers as we are enter early into the mobile market!
In this presentation, Let’s explore…

What customers want?
How do we deliver it? How about site design?

2

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

What Do Customers Want?

3

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Expectations of Young Mobile Users

mBlox Survey - 4000 mobile users ages of 18-24 in the US/UK
  

9 out of 10 young adults spend 5-10 hrs/day using gadgets Under 1/3 would like promotions sent via smartphone and tablet ½ say it is ―extremely important‖ to be able to opt out of such promotions

―With 2012 largely being seen as the advent of mobile commerce, this research helps validate the huge revenue potentials for brands and an appetite by consumers for mobile marketing.‖ - Michele Turner, Chief Marketing Officer, mBlox Google – mobile devices were used for 41% of Super Bowl Ad searches during the game Brands need to be careful about how they target mobile users/information gathered
   

30% wanted offers nearby 2/3 don’t want the brands knowing their whereabouts Over ½ worry about credit card theft ½ worry about signing up with phishing websites

(Source: Laird, S. Mashable. February 22, 2012)

4

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Laird, S. Mashable. February 22, 2012) 5
Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

IMPORTANT: Mobile/Web Technology Is DYNAMIC!!

What’s hot today is sold on eBay for parts in a few years.
6

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Mobile Demand Is Growing… FAST!
Mobile commerce will top $6 billion by the end of this year (2011) and is expected to reach $31 billion by 2016. (Forrester Research, Inc., ) Factors driving the phenomenal growth are:

Increased acceptance of mobile phones as a must have item,

Improved infrastructure
Advances in device utility Overall market penetration and the hype around the iPhone

Applications like Angry Birds, Netflix, GPS Navigation, News Sources

Mobile technology is a potential money tree!

(Source: Compuware. July, 2011)

7

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Mobile Demand Is A Money Tree!
Examples…

eBay recorded close to $2 billion in sales on mobile devices in 2010 — expects close to $4 billion in 2011. Google mobile ads are now over a $1 billion business worldwide. Amtrak attributes 2% of its revenue to mobile — $32 million — and notes growth is staggering. Marriott Hotels averaged mobile sales of $6 million per month in 2010 – up 100% from 2009. ASOS’s (U.K.) mobile revenues topped £1m in the U.K. during December — double the retailer’s expectations.

1-800-Flowers.com tops $1 million in quarterly m-commerce sales — up 9,900% from same quarter in 2010.
Worldwide, mobile commerce should hit $119 billion in 2015, according to ABI Research. Despite the upbeat forecasts, a large number of businesses are in the planning or early deployment phases of their mobile strategies, but consumers want to connect on mobile devices today.

(Source: Compuware. July, 2011)

8

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

It’s A ―One Web‖ World

Users are demanding superior web experiences and highly satisfying, convenient, on-the-go mobile site speeds regardless of their mode of access – smartphone, iPad, laptop, etc. Most mobile users expect to make sacrifices in terms of content depth and feature-richness in exchange for the convenience of anytime, anyplace mobile Web access. One thing mobile users won’t sacrifice, however, is speed. Mobile service performance impacts business results Mobile users expect quick, anytime, transactions that work flawlessly. This isn’t surprising because mobile users often use their devices for urgent needs like checking flight status, confirming reservations, comparing price options, and making appointments. Urgency heightens their expectations for speedy downloads. If you fail to meet their need for speed, you may pay a steep price by not building brand loyalty!

(Source: Compuware. July, 2011)

9

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Compuware. July, 2011)

10

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Mobile Web and App Experiences Are Disappointing Users

2009 - Compuware had Equation Research conduct a study of mobile users’ expectations and how they characterized their mobile web experiences.
Key takeaway in 2009: the mobile web was disappointing users who had high expectations for mobile web performance and little patience for poor performing sites.

Key Takeaway when repeated in 2011: Expanded the study to include global mobile users, and mobile users’ expectations and experiences for mobile applications.

IN the next slides, let’s look at the Compuware study findings for 2009 and 2011…

(Source: Compuware. July, 2011)

11

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Study Findings: User Expectations of Browsing Experience

Users expect a web-browsing experience on a phone that’s comparable to what they get on a home computer Mobile users’ expectations continue to increase. They expect websites to load as quickly or faster on their phones as on their home computers or laptops. Users’ expectations for sites loading faster on their mobile phones than on their home computers or laptops increased significantly from 12% in 2009 to 22% in 2011. Consumers want this…

But feel like they get this…

Are we building brand loyalty??

(Source: Compuware. July, 2011)

12

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Compuware. July, 2011)

13

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Speed Is Crucial When Accessing A Website From A Mobile Phone

Nearly 60% of web users say they expect a website to load on their mobile phones in 3 seconds or less
74% are willing to wait 5 seconds or less for a single web page to load before leaving the site. 50% are only willing to wait 5 seconds or less for an application to load before exiting the site. However, according to Compuware benchmark data, today 77% of top companies across multiple verticals have mobile page load times of more than 5 seconds. China and India have the highest user expectations for how sites and apps should work on their phones and will not hesitate to voice their concerns.

(Source: Compuware. July, 2011)

14

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Compuware. July, 2011)

15

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Compuware. July, 2011)

16

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Speed Expectations By Country

Three-quarters of global mobile users expect a website to load as quickly or faster on their mobile phone versus their computers.
Almost half (46%) say that websites load more slowly on their phones. In most countries, website load time falls short of users’ expectations. Website load time expectations are highest in China and Germany. 75% of mobile users in China expect websites to load in 3 seconds or less and two-thirds are only willing to wait that long.

Almost three-quarters of mobile phone users in China will wait no more than 5 seconds for an application to load on their phones.

(Source: Compuware. July, 2011)

17

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Compuware. July, 2011)

18

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Issues Abound Accessing Mobile Websites and Applications

Almost the same number of mobile web users (57%) experienced a problem in the past year when accessing a website as in the 2009 study (60%). 47% had problems accessing an app on their phones. More than half of mobile users in all countries experienced problems accessing a website from their mobile phones. Fewer mobile users had issues loading an app on their phones, but in China, 7 out of every 10 users’ experienced a problem. Slow load time is cited as the most common issue experienced when accessing a website or application. Slow load time and crashed sites were the top issues for both websites and applications across all countries. But applications crashing, freezing or receiving an error message were more prevalent issues.

(Source: Compuware. July, 2011)

19

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Compuware. July, 2011)

20

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Poor Mobile Web Experiences Impact Your Business

The large majority of mobile web users are only willing to retry a website (78%) or application (80%) two times or less if it does not work initially.
35% are only willing to retry a website once or less while 43% are only willing to retry an application once or less.

Nearly half of mobile web users are unlikely to return to a website if they had trouble accessing it.
57% are unlikely to recommend the site. Mobile users in China and Australia are the least likely to return to a problematic site. Australian users are much less likely to recommend a site where they encountered issues.

(Source: Compuware. July, 2011)

21

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Compuware. July, 2011)

22

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

(Source: Compuware. July, 2011)

23

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Meeting Expectations

Mobile is exploding - gaining momentum as a source of revenue and leads, and marketers are paying attention as consumer adoption of mobile continues to grow. However, companies need to understand how their customers are accessing and using mobile in order to capitalize on every single interaction. Mobile device capabilities have exploded in the last two years, but unfortunately mobile device performance hasn’t kept pace. Delivering fast, reliable mobile experiences is critical for businesses seeking to take advantage of the opportunity provided by increased mobile access.

When evaluating the quality of the mobile web experiences you deliver? Ask yourself:
• Is your website performing to mobile users’ expectations? • Are your third parties delivering the performance and availability you expect? • Do your mobile sites and applications perform as intended across the devices and networks your customers use?

As the novelty of the ―anywhere web‖ wears off, users want mobile websites and apps that perform. Businesses that embrace the mobile opportunity, offer the most usable features, and provide the fastest, most consistent performance will emerge as mobile leaders in their category. (Source: Compuware. July, 2011)

24

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Summary of Key Findings

Mobile users’ expectations for mobile website speed continue to increase. 71% of global mobile web users expect websites to load as quickly, almost as quickly or faster on their mobile phone compared to the computer they use at home – up from 58% in 2009. However, almost half (46%) said websites load more slowly on their phone.

Nearly 60% of web users say they expect a website to load on their mobile phone in 3 seconds or less.
74% are willing to wait 5 seconds or less for a single web page to load before leaving the site. 50% are only willing to wait 5 seconds or less for an application to load before exiting. 57% of global mobile web users had a problem accessing a website in the past year and 47% had a problem accessing an app on their phone. More than 80% of mobile web users would access websites more often from their phone if the experience was as fast and reliable.

(Source: Compuware. July, 2011)

25

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Summary of Key Findings - Continued

Mobile users do not have much patience for retrying a website or application that is not functioning initially — a third will go to a competitor’s site instead. The majority of mobile web users are only willing to retry a website (78%) or application (80%) two times or less if it does not work initially. A bad experience on a mobile website leaves mobile web users much less likely to return to, or recommend, a particular website. Nearly half of mobile web users are unlikely to return to a website that they had trouble accessing from their phone and 57% are unlikely to recommend the site.

Since we want to give the consumer what they want to build brand loyalty, these points are crucial to remember when working with our clients!

(Source: Compuware. July, 2011)

26

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

B2B Mobile Strategies
Our team works with B2B development. Here is a presentation that I found online describing B2B mobile marketing strategies. This information will help describe mobile marketing with a B2B focus!

Click Here to view

the B2B Mobile Strategies Presentation

27

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Now that we know that consumers value speed and useful applications… Let’s consider how to create a marketable, effective mobile website/app that attracts loyal, happy customers…

28

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Want A Gift of A Loyal Customer? Make A List… Check It Once or Twice!

The first step in taking advantage of mobile devices is to think about every possible place where your business has a chance to help meet the needs of potential customers:
     

Viewing an ad Browsing the web Walking into a store Visiting an auto service center Meeting you at a networking event Talking to a friend

Once a list of places is created, compare the list with the ―fab five‖ mobile interactions on the following slides to see which of them can help win a sale and create a good consumer relationship. Developers, particularly during story gathering sessions, should keep in mind the needs of the end user. (Source: Arnold, J. Entrepreneur Magazine. August 9, 2011)

29

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Fab Five Mobile Interactions To Keep In Mind – Cont.
1. Mobile Commerce - If someone is ready to buy at the point of interaction, have available an immediate mobile purchase and payment. Point them to a mobile website when ready to buy right away. You can offer a speedy customer experience and strike while the iron is hot by pointing people to a mobile website for a fast web-based purchase, or by swiping a customer’s credit card from anywhere using a mobile device and a mobile payment service.

2. Mobile Discounts - Sometimes getting people to make a buying decision is as simple as offering a little extra value in return for acting immediately. Instead of promoting a coupon or discount offer to the masses, make customers feel special by asking them to request an exclusive discount at the point-of-sale via a mobile device. For example, you can use a mobile text-messaging platform to enable mobile text coupons and then ask customers to text the words "your company coupon" to your short phone number (known as a shortcode). When they text-in, the system responds instantly with a coupon or discount offer just for them.
(Source: Arnold, J. Entrepreneur Magazine. August 9, 2011)

30

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Fab Five Mobile Interactions To Keep In Mind
3. Price Comparisons - One of the ways people are using smartphones is to compare prices at the point-of-sale to make sure they are getting the best deal. Offer a mobile site or digital brochure that compares your products to the competition you select for comparison. Ask people to scan a barcode, text-in, or visit selected mobile sites to compare prices and online reviews. 4. Stay In Touch/3rd Party Apps - If customer isn’t ready to purchase, the next best thing is lowering the cost of marketing to that person in the future. Ask people to join text-messaging list, email list, or follow on Facebook from their mobile device while you have their attention as an alternative to making a purchase on the spot. Enhance your site with useful apps like Google maps and analytics. 5. Snap & Share - Even when your products or services aren't the right fit for your prospects and customers, they probably know other people who would like what you offer. Ask people to use their mobile devices take a picture of your product or advertisement and share it with friends who may be interested. Offer to extend any discounts or special offers to the friend or colleague so the person referring you the business has something to offer their friend. (Source: Arnold, J. Entrepreneur Magazine. August 9, 2011)

31

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

How and Why To Use QR Code Marketing

One of the latest &most useful forms of marketing called Quick Response (QR) codes. A specific two-dimensional code, readable by a dedicated QR bar code reader, camera phone, or smartphone. An old technology that is on the 21st-century marketing hot list for reshaping the bar-code system to make it more interactive. The code consists of black modules arranged in a square pattern on a white background. The encoded information that an end user can receive might be text, a URL, or other data. It could even be the URL for a Facebook fan page. The medium was developed to allow content to be decoded at high speed. After they've scanned a bar code, send the offer via this code. Entice prospects to explore further by offering QR codes on brochures, cards, or storefront. When consumers scan the code with a phone, they interact with company from the first point of contact -- a vital step for connecting people with your brand. A relationship is built and the end user has been brought into your circle of influence. (Source: Hall, S. Entrepreneur. July 8, 2011)

32

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Five Steps To Get Started With QR Code Marketing
Step 1: Decide where to offer the code - on a poster, direct mail piece, or a product. Include it on invitations and business cards. Make it easy for prospects to access. Step 2: Determine what the message is & what is being offered. What action will they take once they land on the website. Do you want their email address, them to like a fan page or engage by answering a question? Offer specials or discounts. Put the code on a product linked to an online site to place an order. Step 3: Create your code. There are hundreds of sites that offer QR code creation services. Step 4: Brand and market QR code. Consumers should receive the information quickly and take action right away. Draw in prospects with free and discounted items. Step 5: Track progress. Plan analytics to measure the number of scans or another activity by the hour or day, as well as type of device used for the scan. If using a URL for QR code, make it one specific for this campaign and then track it with Google Analytics. (Source: Hall, S. Entrepreneur. July 8, 2011)

33

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Don’t Do This! Top Five Mobile Marketing Mistakes
For the past few years companies big and small have repeated the same mobile marketing mistakes. Save some time and money by learning from where they've gone wrong. 1. Mismatching content with mobile messaging  Text messages, QRcodes and emails are all great ways to reach mobile device users with links to content such as websites, videos, downloadable apps .

Don’t waste time and money targeting mobile devices with a marketing message unless every part of the experience - from message to response -works on all mobile devices that may engage in the campaign. Don’t turn off your users by sending a Windows 7 user a text message with a link to an iPhone application or scanning a QR code leading to a website that requires people to endlessly scroll, zoom and type is a literal turnoff.

Web developers should use device detection to serve up different versions of your website. (Source: Arnold, J. Entrepreneur Magazine. October 14, 2011)

34

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Don’t Do This! Top Five Mobile Marketing Mistakes Cont
2. Building an app without a plan to promote it – With over 500,000 apps available between the iPhone, Android and Blackberry app stores, app needs more than a listing and a few ratings to be noticed by your prospects or customers.

Devise a budget to promote apps with mobile advertising, emails, text messages and traditional ads. Promotions shouldn’t end when you get someone to download and install your app. Remind your customers to use your app regularly. Plan to advertise any updates and new features you release. Have a strong business case for developing your app in the first place so you can justify all the development and advertising costs. (Source: Arnold, J. Entrepreneur Magazine. October 14, 2011)

35

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Don’t Do This! Top Five Mobile Marketing Mistakes Cont
3. Too much targeting - Mobile devices are capable of tracking and collecting all kinds of nonpersonally identifiable information that can be useful for targeting and personalizing your marketing messages.

Don’t focus on what could be done with highly personalized marketing messages, it’s a mistake to do that without thinking about whether it should be done. Cost-effective messaging requires some degree of scale. Targeting individuals or very small groups reaches a point of diminishing returns as more time and money is spent trying to customize each and every message for every possible personal scenario. Do ―just enough targeting‖ or JET. To use JET, use the data collected from mobile campaigns to create marketing messages for groups of prospects and customers with similar characteristics. (Source: Arnold, J. Entrepreneur Magazine. October 14, 2011)

36

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Don’t Do This! Top Five Mobile Marketing Mistakes Cont
4. Ignoring the potential of your voice

Don’t get excited about the wide variety of rich media and communication experiences available through mobile devices. Remember that many mobile devices can make it easy for your customers to touch or click a phone number to call your business. Put your phone number in all emails and on all websites and social media sites and use jQuery. Use emerging technologies like mobile instant-messaging and chat to quickly connect to a prospect or customer.

(Source: Arnold, J. Entrepreneur Magazine. October 14, 2011)

37

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Don’t Do This! Top Five Mobile Marketing Mistakes Cont
5. Taking privacy concerns lightly

Don’t neglect industry regulations and best practices for collecting, using and securing personal information. Ask your customers for permission before collecting personal information. Publish a privacy policy. Refer to Mobile Marketing Association's Code of Conduct.

(Source: Arnold, J. Entrepreneur Magazine. October 14, 2011)

38

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Mobile Marketing Association Code of Conduct
The Mobile Marketing Association believes that strong consumer privacy standards are essential to the success of mobile marketing. Code of conduct has 5 categories: • Notice – Mobile Marketers must give notice that data is being retained

Choice & Consent – Mobile marketers must ask and obtain consent to communicate with the user. There must be an opt-in/opt-out process.
Customization & Constraint – Limit communication only to what the consumer wants. Security – Mobile Marketers must implement procedures to protect data. Enforcement & Accountability – The MMA keeps members accountable.
(Source: MMA. Code of Conduct. July 15, 2008)

• •

39

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Keep In Mind When Creating A Quality Mobile Website
• The web as we currently know it (and therefore build it) has primarily been accessed from the desktop.


Current trends indicate this is about to change.
The ITU predicts that in the next 18–24 months, mobile devices will overtake PCs as the most popular way to access the web. If these predictions come true, very soon the web—and its users— will be mostly mobile. As often happens in times of rapid change, we have no idea what all this really means. What we do know is that at the moment, the solution to our problem appears to be a mobile website (or possibly a responsive one). The problem is that we still consider the mobile web a separate app and not part of the ―One Web‖ Consumer experience. Not just separate from the existing web, but different enough that it can be easily quantified as a series of products, capabilities, form factors, or behaviors. Transition to a primarily portable web will take time, and may involve a collection of sites, apps, and other platforms working in unison to serve our users in ways we can still barely describe. During this time of transition, it’s important to remember the relationship and trust built around our desktop sites.

(Source: Reiger. March 15, 2012)

40

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Keep In Mind When Creating A Quality Mobile Website
• • • • • • Until a time when all content flows effortlessly from one context to another, users will continue to frequent whichever experience makes sense to them at that time. Some will prefer your desktop site as it offers familiarity. Others may not find what they need on your mobile site. Some may be redirected to the desktop as—ironically—the mobile site doesn't work on their device. Others may access your desktop experience from a tablet-sized device, and choose to do so because (despite poor usability) it still ―feels better‖ than a scaled-up mobile site. And many will simply dip in and out, accessing one site or the other depending on which device they have on hand, or which URL someone sends them in a tweet or an email.

The important thing to remember is that—for the foreseeable future—these behaviors are the new normal (except the bit about your mobile site not working on their phone…you need to do something about that).

(Source: Reiger. March 15, 2012)

41

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Tips For Designing A Quality Mobile Website
Already in the midst of a mobile redesign?? These tips will be useful, as they illustrate the many ways that designing for multiple screens, manipulation models, and capabilities should challenge your assumptions about the way you design for the web.

1. Lighten up • Each kilobyte on your site should add value. Period. And if this logic is good for small portable screens, there’s no reason it shouldn’t be good for larger ones (or any other context where users have to wait while things download).
• Users assess value in many ways, so this doesn’t mean serving a lowest common denominator experience to all who visit. It merely reminds us that we can no longer presume to know how much time or bandwidth a user will have. This realization comes at an inconvenient time given that our sites are now fatter than they’ve ever been. Since 2003, the top 1,000 websites have more than sextupled in size. And in 2011, the average website was a staggering 25% heavier than in 2010.

But page weight isn’t the only issue. Every graphic, style sheet or script causes an http request, reducing the speed at which your site loads. This includes http requests from handy third party services such as analytics, font hosting, ad services, and the many widgets, ―Like‖ buttons, and assorted social objects we liberally sprinkle around our sites.

(Source: Reiger. March 15, 2012)

42

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Tips For Designing A Quality Mobile Website
2. Let them choose • Don’t prevent mobile users from accessing your desktop site. If you offer a stand-alone mobile site, it’s perfectly acceptable to detect and redirect mobile users to that URL. Just don’t presume they will stay there. Unless you’ve managed to translate all desktop content, features, and functionality to smaller screens, your users will move from one site to the other—and if they don’t, consider that a sign that one of the sites may not be providing the value you (or they) expected.

When users choose to drift from one site to the other, make it simple for them. Ensure the path is discoverable, and where possible (this is important!) ensure the link to ―desktop‖ or ―mobile‖ doesn’t simply lead everyone back to the home page. If equivalent content doesn’t exist, consider providing a friendly and useful error page that includes suggestions for alternate content.
Remember that the paths users travel indicate the content they want to see. Your can use this data to inform your mobile strategy and ensure the most popular content is available to everyone.

(Source: Reiger. March 15, 2012)

43

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Tips For Designing A Quality Mobile Website
3. Consider the journey Studies suggest social networks now reach close to 70% of the worldwide internet population. 66% of Europeans log in to social networks every day. A large portion of this traffic comes from mobile. Twitter and Facebook already receive 30–50% of their traffic from portable devices. Ideal scenario: Mobile user discovers a product and posts a link to it on Facebook. The user’s friends click the link and access an appropriate product page—regardless of the browser or device. The product is awesome and some purchase it on-the-spot. Others click ―Share Me‖ link. These problems are common but are far from insurmountable. A bit of awareness, a bit of testing, and some refactoring are often all you need to significantly improve the experience for these users: • • • • • The mobile URL doesn’t redirect to an equivalent desktop URL, so desktop users are redirected to the desktop home page or mobile users are redirected to the home page (because they’re using an ―undesirable‖ browser). Some mobile users reach the intended product page (yeah!), but it renders poorly. A small percentage of these users favorite the URL to view it later on their PC. Some mobile users reach the product page, click ―Share Me,‖ take the time to compose a message, but abandon the product when they find the ―Share Me‖ form broke on their device. Other mobile users open the link in a web view within a native Facebook app. They reach the correct page but a product video begins to auto-play, crashing the Facebook app. Some mobile users reach the intended product page, click ―Buy‖ but can’t get past the login authentication because it’s in a modal window that doesn’t load correctly on their phone.

(Source: Reiger. March 15, 2012)

44

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Tips For Designing A Quality Mobile Website
4. Don’t presume Don’t presume your site works on mobile devices. In a recent study, 61% of users said they were unlikely to return to a website that they had trouble accessing on their phone. That’s an awful lot of missed opportunities so take the time to test. Don’t presume everyone is using the best or latest device. Always check your analytics. In the UK, a typical site may receive 60% traffic from iOS, with the remaining 40% spread between 70 Android devices and half-a-dozen Blackberries. Also consider that the iOS traffic may include multiple versions of iOS, at least two different screen sizes, differing pixel densities, and greatly varying CPU power (Have you ever tried to run a CSS animation on an iPhone 3G?). Don’t presume the latest device is the most powerful. Android devices are particularly deceptive. Smaller and cheaper ($60-$100) Android devices are gaining in popularity. Manufacturers differentiate each product by carefully balancing features and materials. One device may have an awesome qwerty keyboard, but a slower CPU. Another may have the latest version of Android, but a less responsive, lower-spec display. Unless you consider their implications, these device characteristics may define the experience far more than you do. Don’t presume everyone will have a touch screen. Close to 30% of touch devices currently support an additional manipulation method (often a keyboard or trackball). And although many feature phones now sport a touch screen, the arrival of Smart TVs is set to unleash a whole new generation of indirect and proxied manipulation models.

(Source: Reiger. March 15, 2012)

45

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Tips For Designing A Quality Mobile Website
5. Mobile users don’t do that With the internet in their pockets, users are no longer compelled to use the web only when a computer and a broadband connection are available. Instead, studies indicate an emerging pattern of frequent, short bursts of web use throughout the day. The length of these sessions vary, and are often related to time of day, user intent, and screen size (tablets being most popular for longer sessions). These new and decidedly varied behaviors clash with the traditional ―mobile user‖ persona—a person who is primarily on the go and would never think of engaging in complex tasks on their device.

For each person who surfs erratically on a smartphone while dodging shoppers at the mall, there is another surfing for three hours on the sofa while watching TV, or while stranded in an airport using WiFi. A growing number of users are also choosing mobile as their primary internet access point.
It’s therefore not surprising that to mobile users, any web content is fair game—even if small screen usability is dreadful. While some users may bail when faced with poor usability, it’s important to remember that those who persist—spending 30 minutes painstakingly completing a travel insurance application on an iPhone—are the very people you want to keep happy. In spite of the pain, they’ve proven they truly want to engage with your brand.

(Source: Reiger. March 15, 2012)

46

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Tips For Designing A Quality Mobile Website
6. Know your materials Buy some devices. You cannot plan, design, and build for this new environment based on extensive desktop testing coupled with a few tests on the boss’s iPhone, and an emulator. Desktop browsers cannot help assess your site’s performance (or lack thereof) as they will almost always be more powerful than a mobile counterpart Modern emulators can get you closer than the desktop browser, as they provide a reasonable facsimile of common screen sizes, and (hopefully) offer the same browser (and browser versions) you will find on a device. They are however equally powerless to convey any hardware or performance related aspects of the experience. Users will experience your content over an operator network. Testing a site on the desktop using (your super-fast) Wi-Fi network won’t reveal the real-life experiences users face with dodgy coffee-shop WiFi, mobile network latency, or operator proxies and transcoders. Test on an actual ―held in your sweaty palm‖ device is awesome. Each time you test on a real device, with a real touch screen, real keys, and real user settings—you will learn something. Each thing you learn will help you design, plan, test, and budget more effectively the next time around. With frequent testing, you can also better determine which key browsers or devices are missing from your collection, thereby ensuring each new device purchase is money well spent.

(Source: Reiger. March 15, 2012)

47

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Tips For Designing A Quality Mobile Website
7. Put content first In a world where each kilobyte must add value, each piece of content must surely do so as well. Wasting people’s time is no longer an option—users are but a click away from stuff made by another.. In a post-PC world, it’s therefore hard to imagine a scenario where prioritizing content will not be the key to marketplace relevance. This will include: • prioritizing content over chrome, • removing unnecessary clutter and distraction, • ensuring your content is widely accessible, • ensuring links resolve gracefully regardless of platform, and • delivering future-friendly markup that embraces whatever new context or container the world may throw at it. It may also mean re-evaluating old assumptions about what makes content truly relevant—be it the look and feel, the editorial, the context, the structure, the metadata, or maybe the API. Start today! The future may be unpredictable, but the opportunity is too big to pass up. Don’t get caught in the trap of ―waiting for the big mobile redesign‖ to improve the way you engage with your audience on the web. Creating a future-friendly online presence is not a line item in next year’s budget. It’s not about building a mobile site, or a responsive site. It’s about ensuring the relevance of your communications in an increasingly diverse and demanding environment.

(Source: Reiger. March 15, 2012)

48

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Mobile UI Design
A typical mobile device user spends 90 percent of his/her time using just 10 percent of the device functions, thus the 90/10 rule. These handful of activities are conducted repeatedly during standard usage of a device, and how well it performs them is vital to make a user feel good about the gadget. User experience is a major contributing factor to the success (or failure) of a mobile device in today’s highly competitive marketplace. That experience begins forming as soon as the device is removed from its box (OOBE), and evolves over the first few weeks to determine the user’s overall perception of how good a purchase was made. Handheld devices are very personal in nature, and the user interface (UI) plays a large role in how well a gadget is received in the market. A good user experience (UX) is crucial to get a good customer reception, and the 90/10 rule can go a long way to insuring a favorable reaction to any mobile device. The 90/10 rule is based on if a gadget doesn’t grab the user’s affection right from the OOBE, it has a good chance of being returned for another device that feels better while used. While the hardware design often attracts the buyer, it is the UX that keeps them. (Source: Kendrick. February 18, 2011)

49

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Mobile UI Design
Manufacturer must correctly determine the 5 or 6 functions for a given device that the typical user will spend most of her time performing. Make these activities simple to perform, intuitive to a fault (no instructions required) and bullet-proof. That means these most-used activities never fail during standard usage. The 90/10 rule is a large part of the formula that Apple has used for years, and it’s garnered them an outstanding reputation with users - why Apple’s customer loyalty is so high; Apple correctly determines what matters and what can be added later. Gadgets designed with the 90/10 rule in play are invariably perceived favorably by the new buyer. The device simply works as expected, without frustration and right from the get-go. The user feels it was a good purchase and will likely recommend the device to others as a result of the good UX. Once a product has been released following the 90/10 rules, the rest of the functionality can be added (or perfected) later. The key is grabbing the customer’s loyalty through a great OOBE, and then adding functionality with other functions. (Source: Kendrick. February 18, 2011)

50

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Introduction: • • Web application technology reduces the cost of creating multiplatform applications. Developers can create applications that run on mobile platforms that differ in development technology, user interface style, input mechanisms, display form factor, size, and resolution. To design applications that are easy to use, and that integrate well across diverse platforms and devices, you need to consider several factors beyond conventional web applications and native mobile applications.

Let’s explore the usability challenges of the mobile web, and provides several best practices for designing mobile web applications.

(Source: Lentz. IBM. July 26, 2011)

51

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
UI diversity is intentional. Platforms must differentiate themselves to claim a share of the market. Though the resulting diversity of products is necessary for competitive improvement, it creates challenges for developers and designers who are creating applications and websites for these devices. To create applications that run natively on multiple device types, development teams need: • • • • • Skills in diverse development technologies Knowledge of capabilities of a vast, continually changing array of devices Knowledge of differing UI style conventions and standards Multiple programming and cross porting efforts Expensive multidevice and multiplatform test efforts
(Source: Lentz. IBM. July 26, 2011)

52

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Why Use Mobile Technology? • • • • • Mobile web technology provides a more cost-effective way to develop applications that are usable on a variety of device platforms. JavaScript libraries such as Dojo Mobile, jQuery Mobile, and Sencha Touch, mobile UI developers can "write once, run anywhere." Developers don't need to learn different frameworks for different platforms, or redevelop or port applications to each supported platform. Users will also benefit from the zero-install nature of web applications. Application deployers benefit by not having to worry about supporting users running on different versions of the same application.

(Source: Lentz. IBM. July 26, 2011)

53

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Designing quality mobile web applications has its own set of complications. 1. Mobile user interfaces are essentially a new paradigm for user interaction due to: • • • • • • Smaller form factors Touch interfaces Acceleration sensing Orientation awareness Pervasive animation Simulations of physical behavior

2. Because a web UI should run on any device regardless of the its size, form factor, or feature set, designers must consider more variables when compared to designing a traditional desktop web application.

(Source: Lentz. IBM. July 26, 2011)

54

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Usability Challenge: Display Size Variable • • • • • Compactness can enable a device to be used just about anywhere, but it can also work against many aspects of usability. A small screen limits the information that can be legibly displayed. While designing, text and images can quickly consume the limited screen space, causing a trade-off between content and user interactions. Smartphones are small, and tablets are in the range of netbook to laptop size. Mobile web application designs must scale to handle the wide range of displays without appearing cramped at the low end or stretched at the high end.

(Source: Lentz. IBM. July 26, 2011)

55

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Usability Challenge: Input Variable • Many popular mobile devices use touch and gestural input. While touch input can be intuitive, it is relatively imprecise. Touch targets, such as buttons, must be fairly large and widely spaced in comparison with the mouse and pointer style input in conventional installed or web applications. On phones, constrained screen sizes, coupled with large interaction targets, result in fewer controls per panel. Fingers and hands also obscure much more of the screen on a UI than a mouse pointer icon. Because mobile web applications are inherently cross-platform, the input characteristics of different types of devices also must be considered. Some mobile devices have a physical keyboard, some have only a virtual keyboard, and others have both. Some Blackberry devices use a touchpad for pointing, selection, and dragging. Both Blackberry and Android devices have dedicated, but differently ordered, physical buttons for various navigation actions.
(Source: Lentz. IBM. July 26, 2011)

• •

56

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Usability Challenge: Operating System Diversity Variable Three of the most important UI design differences driven by operating systems are: navigation design, control implementation, and visual style. • Navigation- To move the user through views, iOS uses gestures and widgets. The home button on the bezel is also used to close applications and navigate out of folders. Control implementation - iOS relies heavily on software UI control features, such as virtual buttons. Users interact with widgets by touch, with the single exception of exiting an application or folder. Visual style - Each platform defines its own visual style through color themes, icon styles, metaphors, and widget rendering. Platform themes establish user expectations that user interactions in the application will follow platform conventions.
(Source: Lentz. IBM. July 26, 2011)

57

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Usability Challenge: Performance Variable • • JavaScript performance is improving, mobile devices still performancechallenged. They use less powerful processors and must contend with lower network bandwidth compared to laptops and desktop systems.

(Source: Lentz. IBM. July 26, 2011)

58

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Use A Toolkit • Libraries, toolkits, and frameworks are work-savers. Using a standard UI component library can save an enormous amount of development and test time that can be spent on low-level design, coding, handling browser differences, testing, debugging, and maintenance. Quality UI component libraries also improve ease of use by ensuring that commonly used controls look and behave as expected. The Dojo Toolkit version 1.5 introduced basic mobile UI features. Version 1.6 and the version 1.7 Beta cover the UI control features and interactions typically found on native applications. The WebSphere® Application Server Feature Pack for Web 2.0 and Mobile includes the Dojo Toolkit version 1.7, along with several useful application services and Diagrammer visualization features.

• •

(Source: Lentz. IBM. July 26, 2011)

59

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Design Responsively The primary design challenge for mobile web applications is: How do you create positive user experiences for an application that appears on screens measuring from a few inches square up through tablets, laptops, and devices using large displays? The goal of response web design is to make each website or web application appear as if it were designed specifically for each device and browser on which it's displayed. Perhaps the responsive web should be called the "more responsive web," because the web has always dealt with issues of displaying content in un-maximized browsers and on monitors of varying size and resolution. The smaller sizes and diversity of mobile devices has simply raised the ante. Responsive web implementation relies on the use of CSS, media queries, and JavaScript to adapt the presentation of content to devices. Media Queries, a subspecification of CSS3, lets you associate a different style sheet with different media or display characteristics.
(Source: Lentz. IBM. July 26, 2011)

60

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Design Responsively Continued Responsive layouts - Well-designed responsive content automatically adjusts its layout to fit the size and orientation of the device. Reformat multicolumn layouts to a single column layout when the device screen size and resolution become too small to support multiple columns. iPad applications sometimes exploit the familiar left pane navigation – right pane content pattern, as shown below. This works well in large format screens but does not scale down to smaller, phone-sized devices. Tab rows pose another concern for responsive design. A problem can arise with web applications that follow the tabs on bottom convention because the browser and application tab rows will end up stacked. Placing the meta tag < meta name="applemobile-web-app-capable" content="yes" /> in the HTML header of a mobile web application will suppress browser artifacts when the user adds an application link to the home screen. (Source: Lentz. IBM. July 26, 2011)
61
Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Design Responsively Continued Responsive widgets - Because devices differ in the physical controls that are present, software buttons that would otherwise be redundant with physical buttons on Android and Blackberry devices should be hidden when a web application is viewed on these devices. The size of widgets is another consideration. Because displays vary in resolution (pixels per inch), mobile UI design guidelines are often expressed in physical size units. Minimum recommendations for touch target size vary between 7 mm and 10 mm square (these sizes are in the ranges of 36 – 52 pixels square for the iPad 2, and 90 – 128 pixels square for the iPhone Retina display). The minimum space between targets should be around 1-2 mm.

(Source: Lentz. IBM. July 26, 2011)

62

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Design Responsively Continued Responsive content - Reorganizing content sometimes isn't sufficient to handle the range of display sizes. Usage patterns differ between smaller and larger devices. Small devices are most suitable for brief and focused interactions; large devices are suited for longer, more intensive interactions. For example, a weather application on your mobile might contain geolocation-sensitive status on current and upcoming conditions. A desktop web version of the same application might provide more content on weather history for this and other locations, news articles or videos on weather events, and so forth. Text content can be scaled down by displaying only the most important material. Images can also be responsively scaled for large and small devices. The simplest approach is to allow the image to rescale itself, but there are performance implications. Provide thumbnail images that zoom in on touch when viewed in a mobile device but are displayed full-size on a desktop browser.
(Source: Lentz. IBM. July 26, 2011)

63

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Recycle designs for a better experience Exploiting UI design patterns facilitates ease of use for two reasons. • By definition, a pattern is a proven solution to a common design problem. Some patterns are proven by formal usability testing, and others through the "natural selection" of designs. Over time, unusable designs will be abandoned and better designs will be copied. Because patterns are common design practices, they're familiar to users. Pattern-based UIs will usually require less learning by users. While these pattern libraries don't provide design guidance, they can serve as a design inspiration while helping you design UIs that leverage user experience with other applications.

(Source: Lentz. IBM. July 26, 2011)

64

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Let users choose Two primary differences between mobile and traditional computer devices are pointing precision and ease of typing. In both cases, traditional computer interfaces are superior to mobile device interfaces. Touch input interfaces provide less tactile feedback and are imprecise. Typng speed and accuracy on mobile devices are poor when compared to performance on full size computer keyboards. Sometimes the virtual keyboard pops up and obscures much of the view. Recommendations: • • • • When possible, let users select options rather than requiring them to input text. Give the user adequately-sized targets for touch interactions (10 mm square). Provide auto-completion or filtering of selection lists to minimize typing. Use the rich input type capabilities of HTML5 to provide the optimal virtual keyboard for the input (text, numeric, phone, date, time, or URL) to avoid the need for users to manually swap keyboard screens to access infrequently used characters.
(Source: Lentz. IBM. July 26, 2011)

65

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Stay close to home • Tiny displays and large human fingers mean that navigation elements and content must compete for room on mobile device screens. Consequently, content and navigation must often be presented in separate views. Deep navigation becomes tedious and taxes user memory. Like most aspects of mobile device design, navigation should be simple. When possible, navigation should be kept to two or three levels. When navigation exceeds two levels, make sure there's a convenient way to return to the application "Home" view. On iOS devices, it will likely mean providing both a virtual home and back buttons in some views. When accessed by Android devices, these buttons should not be displayed because physical back and home buttons are provided.

• •

(Source: Lentz. IBM. July 26, 2011)

66

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Be graphic • • • • Mobile UIs are usually graphical. An application with appealing graphical design will be preferred over applications that are textual in nature. This may be simply due to aesthetic qualities, but well designed, highly graphical UIs usually offer many practical benefits as well. Good graphic design communicates simplicity and engages the user. Rich visual control affordances can efficiently "tell" the user how to interact with the device. Statistical visualizations can usually provide more information that is more easily grasped than verbal or tabular descriptions of data.

(Source: Lentz. IBM. July 26, 2011)

67

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Avoid mobile web UI design pitfalls Doing nothing Mobile web browsers will display many web applications without modification. Using an unmodified web application on a smartphone knows this can be merely annoying to highly frustrating. Complex web applications are simply not suited for small displays, imprecise touch interactions, and low network bandwidth. Ignoring performance Poor performance not tolerated by users. The usual advice for keeping native mobile applications simple is especially true for mobile web applications. Large images, page loads, and other server fetches impact performance and provide opportunities for users to notice response lags. Misapplying creativity Take care when introducing novel interaction techniques, idiosyncratic icons, and visual treatments in mobile application design. Users will understand how to use applications that look and behave similarly to other applications that they use. Unnecessarily inventive interactions and styling increase the likelihood that users will need some form of assistance.
(Source: Lentz. IBM. July 26, 2011)

68

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Best Practices For Designing A UI For Multiple Devices
Mobile Web UI Best Practices: Avoid mobile web UI design pitfalls Continued Relying on help As described earlier, mobile applications tend to be used intermittently in brief interactions with crisp goals. This type of engagement means that users are less tolerant of having to learn how to interact with the device. Application use should be so intuitive that no help is needed. This is true of all UIs, but interacting with help content is seen by users as an additional task that stands between them and their goals. When a mobile web application is so intuitive that help UI and content isn't needed, there is less code and content to download to the device. Ignoring browser interactions By definition, mobile web applications run in mobile web browsers. As with the desktop web, the browser presents an additional layer of user interface around the web application. And, again similar to the desktop web, navigation issues arise when the user has access to navigation controls inside the application as well as in the browser. When possible, run your application in kiosk mode and provide all necessary navigation inside of the application.
(Source: Lentz. IBM. July 26, 2011)

69

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Questions??

70

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Bibliography
Arnold, J. (August 9, 2011). Five Ways To Win A Sale Using Your Customer’s Mobile. Retrieved on December 21, 2011 http://www.entrepreneur.com/article/printthis/220123.html Arnold, J. (October 14, 2011). The Top Five Mobile Marketing Mistakes. Retrieved on December 21, 2011 http://www.entrepreneur.com/article/printthis/220514.html Compuware. (July, 2011). A study of consumers’ mobile web and application expectations and experiences conducted by Equation Research on behalf of Compuware. Retrieved on March 15, 2012 http://e-commercefacts.com/research/2011/07/what-usrs-want-frommobil/19986_WhatMobileUsersWant_Wp.pdf

71

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Bibliography
Hall, S. (July 8, 2011). Five Ways You Can Get Started With QR Code Marketing. Retrieved on December 21, 2011 http://www.entrepreneur.com/article/printthis/219959.html Kendrick, J. (February 18, 2011). Mobile UI Design: Obey the 90/10 Rule. Retrieved on February 23, 2012 http://www.zdnet.com/blog/mobile-news/mobile-ui-design-obey-the9010-rule/1019 Kerley, C. (January 11, 2010). B2B Mobile Marketing:10-Step Starter Guide for Integrating Mobile Into The B2B Marketing Mix. Retrieved on December 21, 2011http://www.slideshare.net/ckEpiphany/b2bmobile-marketing-10step-starter-guide-2882873 Laird, S. (February 22, 2012). Marketers: What Mobile Users Will and Won’t Put Up With. Retrieved on February 23, 2012 http://mashable.com/2012/02/22/mobile-marketing-infographic

72

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.

Creating A Marketable, Effective Mobile Website

Bibliography
Lawson, B. (March 14, 2012). What Users Want from Mobile, and what we can re-learn from them. Retrieved on March 15, 2012 http://www.brucelawson.co.uk/2012/what-users-want-from-mobileand-what-we-can-re-learn-from-them/ Lentz, J. (July 26, 2011). User Interface Design For the Mobile Web. Retrieved on February 23, 2012 http://www.ibm.com/developerworks/web/library/wa-interface/ MMA. (July 15, 2008). Code of Conduct. Retrieved on December 21, 2011 http://www.mmaglobal.com/files/codeofconduct.pdf Rieger, S. (March 13, 2012). The Best Browser is the One You Have with You. Retrieved on March 15, 2012 http://www.alistapart.com/articles/the-best-browser-is-the-one-youhave-with-you/

73

Internal | Jennifer Brower CI/BCC-NA | 16/03/2012 | © 2012 Robert Bosch LLC and affiliates. All rights reserved.