• Latest Mobile Internet Usage Statistics
• Opportunities, Limitations, and Differences Between Desktop vs. Mobile Websites
• The Importance of Context in Mobile
• Different Mobile Marketing Tactics to Engage Your Audience
• Key Differences in B2B vs. B2C Mobile Strategy

Check out the video teaser below and be sure to register today because space is limited and spots are filling up quickly. Hope to see you there!

Jegan Chen is a Sr. Strategist of User Experience at BusinessOnLine.

Bookmark to:

By Brendan Jonesrebandt

With online interactions continually on the rise, fewer and fewer activities require you to leave your home. An activity that has begun to move online is applying for a mortgage, which can now be done from the comfort of your favorite chair. No more waiting in line at a brick and mortar bank, the application process is just a few keystrokes away. However, there are still some obstacles blocking the way for online mortgage applications to be the norm. For example, some banks do not even offer an online application, such as Chase, but only tools to help you prepare to come into their bank to start an application. These tools are still essential components of the application experience, but the break between what can be done online and the need to come into a physical bank is jarring. In addition, there are security concerns and user experience issues. We’re going to look into the user experience issues by analyzing seven keys that work together to create a good experience with an online mortgage application: Clear Language, Obvious Calls to Action, Educational Materials, Calculators, Mortgage Rates, Consistent Navigation, and Progress Indicators using examples from four banks: Zions Bank, Wells Fargo, Citibank, and Chase.

1. Clear Language

Clear language, language that is understandable to a new user, is essential for driving traffic to the correct pages. Chase recently updated their mortgage starting page to provide clearer links to the user (Figure 1). The links on the page are presented in clear, concise statements. The links are broken up into two clear categories, purchasing a home and refinancing, with relevant, secondary links listed below. Each link has an unambiguous purpose.

Figure 1. Chase Mortgage Landing Page

2. Obvious Calls to Action

Users need to know where to go, or in this case, how to start their application. This is where the obvious calls to action come into play. Zions Bank uses bright orange buttons, which have a high contrast and are in multiple locations, to start their application process (Figure 2). By providing these clear calls to action, the user will be able to continue on to the application with little difficulty. The main focus of their mortgage page is the application. They even stress how you can apply for the mortgage “from your living room.”

Figure 2. Zions Bank Mortgage Starting Page

3. Educational Materials

Buying a house is one of the biggest purchases an individual will ever make, so it is imperative to have enough information available to the user about the process. Wells Fargo presents an abundance of educational links broken up into five different categories: Achieve Your Goals, How Wells Fargo Can Help You, Tools & Calculators, Manage Your Mortgage, and Related Solutions (Figure 3). Each of these categories has four different links to additional information in that category. Clearer language would make the categorization and links more useful, such as changing Achieve Your Goals to First Steps to Buying a Home, but Wells Fargo does a good job providing many articles that a potential home buyer may find useful for their current situation.

Figure 3. Wells Fargo Educational Materials

4. Calculators

In order to calculate monthly mortgage payments, whether it makes sense to keep renting or to buy, or how much a 15 year mortgage would save over a 30 year mortgage, users rely on online calculators. Zions Bank provides a very useful calculator (Figure 4). The calculator can easily be changed to meet the user’s question. In addition, the graph updates in real time so the user can see how their input affects the outcome very quickly. There is also a more detailed report available if the user would like a summarized statement of the parameters and the mortgage information broken down into monthly statements.

Figure 4. Zions Bank Mortgage Calculator

5. Mortgage Rates

The current mortgage rates available is a crucial piece of information that the user needs to find in order to decide if they will be able to purchase a home, or how expensive a home they can purchase. Citibank presents these rates as a table that extends from the “See Today’s Mortgage Rates” button (Figure 5). In order for the table to be informative, the user must also be given information on what the different terms mean. The question marks activate with a mouseover, displaying a sentence or two description of the term. Combining these rates with the mortgage calculators gives the user a good general estimate of whether they should even continue with the application process.

Figure 5. Citibank's Current Rates

6. Consistent Navigation

Between best practices, learned conventions, and usability heuristics, users have come to expect that the navigation, especially for filling out a form, should be consistent and straightforward. Citibank does a good job keeping their navigation buttons consistent throughout the online mortgage application. The buttons always have the same function and appear in the same location. In addition, the buttons are spatially mapped to their function, with Previous being on the left side to go back, and Submit on the right side to go forward (Figure 6). There are also arrows paired with these words which are associated with the direction of moving through the application. Cancel is differentiated from the two directional navigation buttons in color, size, and placement. Users would be unlikely to accidentally click cancel in its current location.

Figure 6. Citibank's Online Mortgage Application Navigation Buttons

7. Progress Indicator

When filling out a form, especially one as detailed and time consuming as an online mortgage, users have a much better experience if they know what to expect and where they are in the process. Providing information to the user on their progress and the different steps involved is invaluable for users when deciding whether they have time to fill out the application now, or whether they would rather go into a bank to fill it out. Wells Fargo provides a more informative progress indicator than others, but still falls short (Figure 7).Their process is shown to consist of four main categories with several steps per each category. This information is provided at the top of each page and is clearly visible. They check off the step once you have completed it, highlight the category and step you are on, and keep it to one page per step. They do not inform the user of how many steps fall under each category though until after the user has begun the first step in that category. There is also no description of each step or category, and they do not give an estimate as to how long the process will take.

Figure 7. Wells Fargo's Progress Indicator

Summary

To have a good user experience, these seven components must work in conjunction with each other. The mortgage rates must be visible so that the user knows what to enter in the calculator. The language should be clear so that the user can find the informational material they are looking for with obvious calls to action so they know where to go. The navigation must remain consistent on the forms, which also must show a progress indicator. By ensuring that all seven of these components are included in the online mortgage application process, the user will be able to apply for a mortgage online effectively, efficiently, and have a good experience with the process. This will be one step closer to moving the mortgage application process to a primarily online service.

Bookmark to:

“Show me the price!” Online shoppers browse through e-commerce site and look for the numbers. How you show your price might not be the most important factor that drive your online sales, but it certainly has impact on customers’ purchase decision making process. We reviewed multiple e-commerce sites and found ten most often used ways of showing price. In the following sections, we’ll go through them one by one.

1. Ebay: Plain

The price is shown as is. No decorating, no sugarcoating.

2. Zappos: Bold and Loud

The price is shown with a much bigger font size and a brighter color to allow customers see it easily.

3. Amazon: How Much You Save

The original price is crossed out and the current price is shown with a different color and font size to catch customers’ attention. The exact amount and percentage that customers can save is calculated and presented.

4. Apple: From

“From” is used when there are different prices as customers choose different customization, such as color or size. The lowest price is shown to customers with “From”.

5. Twelve south: From To

The price changes as customers choose different customization. Instead of showing the lowest price with a “from”, the complete range of price from the lowest to the highest is shown.

6. Bestbuy: Our Price

Adding “our” to price creates a personal touch: We are the only one who offers this price.

7. Overstock: Today’s price

Adding “today” to the price encourages customers to take action right away: this price is only available today.

8. Jcrew: Subtle

Jcrew’s price is somewhat hidden in the product description. There is no emphasis on the price in anyway. How the price is presented fits the company image.

9. Hollister: Now and Was

Current price is shown together with the old price. It allows customers to see the price difference.

10. Cellarthief.com: Other prices

The page lists regular retail price, lowest online price with shipping, and the price that Cellarthief is offering. It allows customers to see all possible options. However, too many price options might confuse customers, and leave them wondering: which price is the one you are offering?

Summary

We reviewed various e-commerce sites and discovered 10 different ways of showing price: plain, bold and loud, how much you save, from, from to, our price, today’s price, subtle, now and was, other prices. Each way of showing price has its own strength and weakness. Depends on what kind of message that you want to send to your customers, you may find the way that works for you best.

Bookmark to:

For marketers out there, the first big question to ask is “Do we go mobile or not?” At the end of the day, it has to make business sense.  If the determination is to move forward, a mobile strategy needs to be put in place before any execution takes place. As part of this strategy development, marketers have to watch their current websites closely, research how your customers use it, listen to any feedback they have, and then make decisions based on solid research.

The first step is performing an analytics audit on your current site and determining how much of your website traffic comes from mobile devices. If there is a substantial portion of visits coming from mobile devices, then it’s time to start thinking about going mobile. By not creating a website specific for mobile, users will continue to access your main website through mobile phones and will struggle through the web pages that are designed for a desktop computer. Because of the limitations of mobile and the small form factor of devices, they will get frustrated when they can’t find what they are looking for or can’t do what they want. This bad user experience will reflect negatively on your business and users will simply go to the competition who has implemented a robust mobile presence.

After the auditing step, it is time to do more research and investigation. A simple survey or questionnaire will help marketers get firsthand information about their customers. Questions to ask include: what mobile devices users are they using, how often do they use the mobile device to access the site, what kind of tasks do they perform on your site with a mobile device, and when and where are they using the site. Such data will help you gain a deeper understanding into the current mobile potentiality of your site and what content to provide.

With all the data found from the site auditing and firsthand research, marketers should have a good sense of whether going mobile is a good decision for your particular business.

The Next Big Decision: Developing a Mobile Website or Application, or Both?

After the decision of going mobile is made, now comes the next decision, developing a mobile website or developing applications? There are several considerations that marketers need to pay special attention to in making this decision.

The first factor is the choice of platform and development redundancy. Usually, apps are developed on multiple operating systems in order to obtain a greater reach of users on a wide range of different smartphones. For mobile websites however, users with different mobile devices can have similar experiences so there is no need to develop multiple versions for different operating systems.

The second factor is discoverability. App stores usually have a large number of applications so it can be challenging to rise above the clutter and get your app noticed. In order to rank higher in the app stores and attract users’ attention, a marketing investment needs to be made after the apps are developed. However, once the app is downloaded and installed, users can access them on their mobile devices without having to go anywhere. For mobile websites, users can find them by using a search engine or directly typing the URL of the mobile website in the address bar. There is no download or installation needed, but similar to website discoverability, search engine marketing efforts might be required in order for users to find the site.

The third factor is upgradability. Applications are difficult to maintain and upgrade once they are downloaded. Every new release requires going through the approval process of the app store that you are selling your app in. Users also need to go through the downloading process once again to get the most updated version. On the other hand, a mobile website can be updated without any action from a user.

The fourth factor is the necessity of an Internet connection. Most apps allow users to use it on the device without an Internet connection while mobile websites require users to be connected to the Internet. If you offer a tool that users can easily use offline and there is no need to connect to any external web links, an application might be a good choice. If the service you offer requires real time updates, it might be optimal to go the mobile website route.

Summary

Going mobile is a big decision. By understanding the multiple layers of the mobile user experience your strategy and tactics will become much clearer. Extensive research into your current website analytics and your customers will further enable you to execute the right tactics and create a mobile presence necessary to achieve your business and marketing goals. While every Marketer will need to make their decisions based on their own situation and available resources, the approach to understanding the multiple layers of the mobile user experience and your target audience needs applies to all.

Bookmark to:

Compared with traditional cell phones, smartphones allow users to stay connected on the go. They come with more fashionable industrial designs, bigger screens and higher resolution displays. Features of smartphones include but are not limited to: touch screen, high megapixel camera, GPS, and more gaming and entertainment options. Smartphones enable users to do a wide range of activities, such as communication, entertainment, personal information assisting and managing, and social networking. Of course, you can still use them to make phone calls, but what a smartphone offers goes far beyond just a phone.

An estimated 172 million smartphones were sold last year, which was a 24% increase from 2008. What’s driving the industry forward? The ever improving mobile user experience is the key.

When users are interacting with a smartphone, they either have a good or bad user experience. There are multiple layers of the mobile user experience. Each layer of the mobile user experience deals with a different circle of players and each layer affects the end users’ experience on a different level. In her 2006 paper, Virpi Roto discussed her understanding of the multiple layers of mobile usability: the hardware usability, the browser usability and the usability of the websites that mobile users are browsing. Because the mobile user experience has evolved significantly since 2006, an update to the three layers is in order: the hardware user experience, the operating system user experience, and the mobile site/apps user experience.

The first layer of the mobile user experience is the hardware that users directly interact with. This layer of user experience deals with the sensitivity of the touch screen, the size of the screen, the design of the button set, the size and shape of the device, and the length of the battery life. It also includes how fast the network is, how quickly a video can be loaded, and how vivid the picture color is when users are browsing photos. In addition, industrial design and the internal hardware technology such as video and image processing speed greatly impact on this layer of user experience.

The second layer of the mobile user experience is the interaction with a mobile operating system. Functions of a mobile operating system include: whether or not apps can run in background, background notification, push mail, multi-touch interface, capacitive screen support, stereo bluetooth, flash support in browser, data tethering capable, mass storage mode, video recording, turn-by-turn navigation, copy and paste, universal search, MMS messaging, webkit browser, and an app store experience.

The third layer of the mobile user experience deals with individual mobile applications and mobile websites. Considerations in this layer include: Are the tasks prioritized for mobile use? Is the workflow or navigation easy and intuitive on a mobile device? Does the information architecture follow the way users understand the site? Is the mobile website simply an abbreviated version of the full site or does it have special consideration of users’ context and environment of using a mobile device?

The First Layer: Handset Design and Network Technology

Handset manufacturers include big names such as Nokia, RIM, Apple, HTC, and Motorola. Each of these handset makers develop and target their products with a specific market segment in mind. For example, Droid made by Motorola has a bold design and sharp corners, the Apple iPhone’s slick design and high-end branding make it a fashionable accessory while RIM targets the corporate and business audience with a full keyboard for email use. Through extensive market research, the handset manufacturers know these types of characteristics are appealing to certain market segments.  Recent advancements in mobile hardware include higher resolution screens which provide a richer viewing experience and superior game experience– features that cater to users who are gaming enthusiasts or heavy watchers of video on their mobile devices. As you can imagine, the kind of smartphone you have tells a lot of about what kind of person you are.

In terms of network technology, CDMA is the dominant standard in the U.S while GSM is the standard in Europe. WCDMA, a hybrid of GSM and CDMA, is growing rapidly as many GSM operators migrate to WCDMA, which is a more advanced technology. The advancements in the network allow users to get quicker access to the internet and other data services. In Stephen Wellman’s article about Google’s mobile user experience strategy, he talked about three types of mobile users: repetitive now, bored now, and urgent now. The “repetitive now” users use mobile devices to check the same information repetitively to get live updates. The “bored now” users use mobile devices to kill the couple of minutes that they have while waiting in line or sitting in a train. The “urgent now” users need to find a specific piece of information or complete certain tasks using the mobile devices in a limited period of time, such as check in a flight or find a hotel. No matter if users are simply bored, or they are eager to check live updates, or they need to do something urgently, they can use the mobile devices to achieve their goals.  With the increase in text, video and music downloads and overall data usage, the network technology is important for many mobile users.

The Second Layer: The Mobile Operating System

Operating Systems contribute substantially to the mobile user experience. Mobile operating systems include Symbian, Android, Microsoft Windows OS, iPhone OS, Blackberry OS and the Web OS from Palm. Although most of the mobile operating systems act similarly on the fundamental level, they are different in one way or another. For example, the iPhone OS 3.0 doesn’t allow multiple apps to run simultaneously but the Android does. With a clear business oriented focus, the Blackberry OS enables easy integration into company internal email systems and remote management of devices but is inferior in other aspects.

The Third Layer: The Apps and The Mobile Sites

Mobile applications (apps) are software applications that are either pre-loaded on mobile devices or downloaded to the devices by users. Mobile applications can enable functionality that they normally would have with a full website on a desktop computer. Users generally have to download or purchase such applications from various application stores based on the specific phone operating systems. Application developers oftentimes need to develop the same application across different platforms and distribute them across different stores in order to gain a larger audience. Such stores include the Apple’s app store, Andriod’s app market, Symbian’s Ovi store, Palm’s app catalog, and Windows’ marketplace.

Developing a mobile website is the alternative way to go mobile. Users don’t have to download or purchase anything from the store. They access the mobile website on their smartphone the same way users access the website on the Internet: by typing the URL of the mobile website in the address bar or search the site using a search engine. Mobile websites usually feature slimmer design and less visual content to cater to the smaller screen of mobile devices and generally only time and location crucial tasks are incorporated in these mobile websites. Unlike mobile applications, mobile websites can be accessible via all operating systems without customization.

Going mobile is a big decision. By understanding the multiple layers of the mobile user experience your strategy and tactics will become much clearer. In my next blog, I’ll talk about strategies and methods marketers should look into before jumping into the mobile world.

Bookmark to:

1)      Your design is like the interior decoration of the house. Your wireframe is the structure of your house. A wireframe is essentially a blueprint of your website. Imagine an architect waking up one day and says “let’s build a house for you!” without any blueprints or strategic planning? Wireframes are not only the blueprints of your website, they provide strategic direction for many elements such as interior design as well as future direction or layout of your house.

2)      Your furniture is like the content of your website. Depending on how many pieces of furniture you have, the architect will design the layout of the website based on the content inventory. The way you lay out a website differs when there are 500 products versus 5 products that must be put in one page.

3)      Requirements gathering with real users are crucial in every website build. Imagine building a house and after it’s constructed and polished, the family moves in. Two weeks later, you receive a call from the family informing you that you made a beautiful 3-story home without any elevators. One of the primary family members is in a wheelchair and you failed to interview the family to understand their needs. This would be the equivalent to building your website without talking to your users. To find out AFTER you’ve rebuilt the website that your users actually needed something very crucial that you did not think of is not the position you want to be in.  Not only will you have frustrated users, it could have a significant impact on your bottom line.  This is why user feedback during  the discovery & elaboration phase is essential.

4)      Correctly categorizing your navigation is similar to putting the right furniture in the right rooms. You would probably never put a toilet in the middle of your kitchen so why put content that might not be suited for a particular category?

5)       Lastly, painting your house is similar to the branding for your website. Choosing the right colors will bring out the right brand you would like to present to your audience. Make sure you use the paint for your house wisely!

Bookmark to:

The usability labs in particular are essentially a 15 minute session with either myself or Jegan, where we’ll take a look at your website and provide you with tangible take-aways that you can get started on right away. Many previous attendees have left these labs, as one conference organizer put it, “glowing.” I’m glad that after my one-on-one sessions with them, they are grinning face-to-face instead of crying (which I haven’t done yet to any attendee luckily).

In the session, we take a cursory look at the organization of your website, the content available, as well as the aesthetic value. We take a deeper look at your homepage to as well as your destination pages to really understand where the usability problems exist. Are you sending users to dead ends? Are your error messages clear so users can fix the problems? Are your forms user-friendly? This is really your chance to take advantage of the information you’ve learned in conference sessions, and apply it to your current online initiatives with the help of Jegan or myself to guide you through it. Follow the links below to sign up for the conference and a free online marketing performance lab today. See you there!

Register for OMS Today for a 25% Discount

Sign-up for a Complimentary Online Marketing Performance Lab

Not planning on attending OMS San Diego this year? Sign-up for a free Virtual Usability Lab today!

See you there!

Bookmark to:

The BOL team participated in a successful beach clean up at Ocean Beach on Saturday, September 19. (yay!)

After our hard work, the team decided to find a place to relax. Once we found a spot, we opened the doors and walked in, only to be greeted by one of the staff, “We’re closed! The light’s not on!”

Not having a clue what the staff member was saying, he came to the door and double-checked the light he was referring to:

Apparently the “OPEN” sign doesn’t mean that the restaurant is open. The people at this restaurant must believe that it’s a learned convention that the restaurant is only open when the light that borders the sign is lit. TeamU disapproves!

Bookmark to:

1. Orion House B&B
This bed and breakfast site fares well when it comes to accessibility. This site not only utilizes a lo graphic / version of the site, it has skip links as well as mobile versions. The site is pretty to look at but highly accessible when the images are turned off. Check out their accessibility page as it details all of its extensive accessibility features.

2.Chef Seattle
It seems pretty random that a site such as Chef Seattle would focus on accessibility but they make it clear that they redesigned with accessibility in mind. Their site makes use of dynamic font sizing (using ems instead of fixed pixels) and ensuring the website works in even 800×600 resolution. Not only that, their site is highly informational and makes good use of graphics that enhance the information, not detracts from it.

3. The White House Website

Even though the White House website has to be accessible per section 508, it didn’t have to be monumental as setting a gold standard for accessible websites. From the successful implementation of a non-flash marketing showcase to ensuring sure every image has an alternate text, this website is one of my favorites.

4. The BBC

The British news network focuses many of its efforts on accessibility. Even though this is an information rich site, it gives many display options for its users to choose a comfortable browsing setting . On top of that, a huge section of the website is dedicated to educating about accessible design. They even created an accessible news reader for those who want their news quick and easy. A footer sitemap also makes it easy for screen readers to jump deeper into the site without much hassle.

5. Mozilla Firefox Website

Mozilla employs many of a well designed accessible website: big fonts, text links that are descriptive, as well as a skip to main content link (yes, even if your website fits above the fold, a skip link is needed since screen readers do not “see” folds). However, the one thing it doesn’t have is an “Accessibility” page that describes its efforts. Although such a page similar to the other 4 previous websites is needed, it is definitely a good way to ensure users know they are being kept in mind during the web design process.

Bookmark to:

Last month, we had the Skittles Social Media Experiment. At least in that case, I could see what their goal was.

Cheetos.com

This time, I happened across the Cheetos.com website. I saw the commercial for Giant Cheetos on TV, and wanted to see if they were for real. The reason being that I love Cheetos, and how could you go wrong with a GIANT Cheeto?

Supporting Browsers

First, the site is completely in Flash, and it took a minute to load on our T1 connection. After that, you’re greeted with a carousel looking thing with a bunch of TV screens on it playing video clips. At first I could not click on anything, and I realized the site only works on Firefox… no IE7 or Chrome support. When I re-opened it in Firefox, it “worked”, but that’s really a relative term.

Occasionally, a clown will walk by, a marching band will march across the screen, a man with Cheeto nunchucks will perform on screen, or a masked wrestler will scream. Um… okay.

Navigation / Interaction Controls

The internet, of all places, is where a lot of people have short attention spans. The reason being is users visit most website with a goal, and only in certain situations for leisure. It is important to provide intuitive controls and allow users to navigate easily and focus on your messaging, products, and content. The main problem with a lot of these types of websites like Cheetos.com, is that they are introducing new ways (often unintuitive) to navigate and interact. Do you want users to consume your content, or spend time trying to learn how to get to that content? Usability is often sacrificed on these type of websites.

It turns out the site is mostly a collection of games. The only mention of a “Giant Cheeto” is the “Giant Cheetos -Pet,” which doesn’t give me the information I was looking for. Ultimately, I give up after a couple minutes, which is probably a couple minutes longer than most visitors will spend on this site.

Bookmark to: