In this series of posts about “mobile web application development strategies’, we will discuss about ‘advantages of mobile web platform, strategizing for mobile web, initiating a mobile web project’ and much more will be added as and when possible.

To begin with, we will understand how mobile web is promising.

Advantages of Mobile Web platform:

Anywhere-Anytime information access:
Unlike conventional desktop-based computing, mobile web has surpassed the limitation of immobility. With mobile devices, users can access information anywhere, anytime when they are in the cell phone connectivity coverage area or using a WI-FI hotspot.

Wireless Internet Connectivity:
Users are now having access to internet on their mobile devices or accesses internet through their mobile devices.

Leveraging Application / Device capabilities:
Services / Applications now can take the advantage of in-built capabilities of mobile devices, like clicking on a phone number can help users to call the respective number with no hassles involved.

Geography-based Content Delivery:
Location-based technologies are enabling the end-users to receive the content based on the location. Such localized content delivery mechanism is helping users to get the desired content with minimal efforts, which leads to a better user experience and benefits to the respective service provider as well.

Strategizing for mobile web:

When an organization decides to design a website or an application targeted at mobile web users, they need to consider several factors like:

• Why should we make / create a mobile web application?
• Does the content delivered on mobile devices make sense for the TG? Is it really adding value to their usage?
• What kind of content can be made available online? Do we deliver useful content?
• We have a very powerful flash-based website. Should we create a similar application User Interface (UI) for mobile devices as well? Will it work across multiple device profiles?

Precisely, before we start working on a mobile web application, we must be aware of all aspects like advantages and limitations the mobile web platform has and also about how to leverage this platform for an organizations’ and end-users’ advantage. We must be clear about ‘whether creating a mobile web application can really add value’ to the respective website as well for the end-users / TG.

As this is a series of posts, we will continue with “Initiating a mobile web project” in the continuing post.

A great navigation is intuitive, easy-to-understand, and easy-to-use and ideally, should not need some plug-in to be downloaded to use navigation. For example, a site navigation is designed using Flash and no alternative way of navigation is not provided, can you imagine how miserable an experience a user can have who doesn’t have flash installed on this machine?

So, we must design sites to good navigation to make the website or an application successful in terms of end-users’ experience while using our website / application.

Below given are some of the points which can help us design a better navigation that helps users to use your site:

1. Navigation Placement:
Make sure that the navigation is placed at an easily visible location, so that the users don’t have to “guess” or “search” for it.

2. Place important things on high:
Keep the important things on the top area of the page, preferably in the first half of the page. Such significant information should get displayed first to the user.

3. Banner Blindness:
As Wikipedia describes it – “Banner blindness is a phenomenon in web usability where visitors on a website ignore banner-like information.

Make sure that you don’t put any content above the ad banners as users are tend to ignore all the content that’s displayed above ad banners. Make sure especially that navigation is not placed above such banners, as ‘navigation’ is very important & should not be ‘lost’.  [Read more about "Banner Blindness"]

4. Avoid being unconventional:
Designing website navigation in an ‘unconventional’ way to make the site stand out from the crowd is NOT a good method of navigation design. It becomes difficult for the users who are now quite used to the general web design practices of designs, navigation & such other generic functionality.

5. Ideally, an easy way to come back to homepage, like a HOME link should be always there:
Homepage being core of any website, a back-link to the homepage should always be there. Also, it is very much possible that user might have landed up on your website through some search engine or have come directly to your sub-page / inner page, a “home” link always helps them to come back to the homepage of your website.

6. Keep the navigational elements consistent across the website:
Make sure that all the links & navigational elements are kept consistently on the same place as there have been anywhere else, in terms of links, styles, etc. User can find them easily anywhere in the site.

7. Design it to ‘load fast’:
Do all your design & development by considering a user having low-speed internet connections. Make sure that your all your site’s HTML, CSS, Flash components (if any) loads faster,  so that users do not leave the site quickly even before it loads as they may not be ready to wait or may switch to your competitor’s site.

8. Quality as against to Quantity:
Internet users like minimum options & clicks to get the desired information. Create sub-sections & sub-categories to help the user to “navigate easily & locate the required content easily & quickly”.

9. Browser-Compatibility:
There is multi-browser application scenario.  Do compatibility tests for your website before it goes live on major browsers like “MS Internet Explorer, Mozilla Firefox, Netscape Navigator, and Opera” & check if the look & feel as well functionality of JavaScript used in the site is working well.

10. ONLY essential stuff in the navigation:
Non-core Information like “Privacy Policy, Terms of use, even Contact Us (in most cases)” should not be in the main navigation & can be placed in the “bottom menus” zone.

Also read:

Navigation Design for Mobile Web – Best Practices

Drop Down Menus – Usability

Do provide your suggestions / insights that can imprve the way we design navigation.

This has also lead to the growth of online sales. E-Retailing has grown up a lot since then and has identified several factors of success when it comes to retailing online.  You can visit sites like Amazon, 1800Flowers, Dell, officedepot.com to see how they are doing good business online.

To build a successful e-Retailing (e-commerce) experience, it needs to consider several factors like products, website’s visual design, technical architecture, and user-interaction, content, offers, brand value in the market, banner advertisements. They all build a seamless experience for the end-users, which converts website surfers to online shoppers (lead conversion).

In such an environment, Information Architecture plays a vital role, without which a seamless user experience is difficult, leading to lost customers who could have been converted. However the visual design is appealing, technically it is robust, but without thoughtfully developed information architecture, an e-commerce site is about to fail. For example, if the shopping cart design is not done with a process that suits the end-users mental model, they will leave the conversion process midway and the e-commerce site will loose a lead.

Shopping cart design is one of the most crucial parts when it comes to conversions. An effective shopping cart can be designed which matches the user’s mental model and try to apply these insights with core information architecture rules like navigation design, nomenclatures, labeling consistency, along with visual design aspects like consistent screens for enhanced user experience. Using usability testing methods or prototyping tests at initial stages, like Eye-Tracking or Heat-maps or rapid prototyping, you can understand where the users are entering from, where they are making exits, what’s confusing them and what kind of responses they expected from the application?

Being a core part of any e-commerce application, a Shopping Cart needs to be designed effectively. In the absence of an effective shopping cart, the whole application might fail to generate revenue by not converting users into shoppers.

Rules for Effective Shopping Cart Design:

1. Build a clear, clutter-free user interface
Easy to use application interface

2. Avoid multiple windows and pop ups:
No add-on scripts that slows down browsers and confuses end-users

3. Display Product Shipping costs upfront
Clarity in the costs shown increases trust

4. Customer Support to be prominent
Humane touch is embedded and enhances the reliability factor by making users felt that there is someone at the other end.

5. Design effective forms for Shipping and Billing processes with clear labels
Redundant forms which forces end-users to input the same information repeatedly and leaving the site soon.

In the continuing post, we will discuss more about some design strategies that help improve the effectiveness and conversion rates for such websites.

References:
Read more about US Retail E-Commerce at: http://www.emarketer.com/Reports/All/Emarketer_2000492.aspx

23% of the consumers who applied online for a financial product would not have opened the account at all if there wasn’t an online application.“  Forrester Research, March 17, 2008

Bad usability can cost you a lot!

If your bank’s website or an e-banking application does not match the user’s mental model, he will get frustrate and may stop using the application or reduce the usage by using alternative channels to do the same transaction which will increase other costs for the banks, like customer support phone calls, branch-based support & more, which ultimately leads to a bad ROI for the banking website or application. This lost business could account for a big amount for the bank.

Research shows that 50% of prospective customers registering for online banking leave the website before signing up, mostly due to several issues like difficult navigation, problems faced in completing online forms, security concerns and also understanding content and feedback / error messages.

Users like those sites which matches their mental model to maximum possible extent. Such sites, especially Banking website, needs to concentrate more on usability rather the visual pleasure, as these are meant to do business, not to entertain the end-user with funny videos.

Banking websites generally have 3 core areas in which they need to concentrate a lot:

1. Static Information Page / Brochure-ware (Type of Accounts, how to open a savings account, features, etc.)

2. Online Applications for Banking services (Apply for a Savings Account Online, Apply for Credit Cards online, etc.)

3. Transactional Applications (applications like e-Transfers, Online Bill Payments, etc.)

We will discuss some of these issues which end-users faces while using either of these application areas.

Issues in banking applications’ user experience:

1. Improper, inconsistent navigation design (that makes users’ life difficult while using the website.

2. Visual designs & elements used improperly, that has no visual connect with its own parent or sub sections.

3. People like to search! Websites with bad search engines built-in create a bad user experience for the users.

4. Usage of technical jargon / heavy usage of banking terms with no explanations makes users’ life tough.

5. Badly designed forms (design in terms of usability and accessibility). Also, a feedback and error message which doesn’t look like error messages makes it difficult for the user to identify ‘what happened now’.

6. Users may prefer to save the form which they filled in to complete it later. Incapability to provide such assistance to the user may result in to the lost customer. Also, steps not clearly indicated keeps user unaware of how much is still left and may simply close the browser before he proceeds to the next page.

7. Bad transaction flows (that includes unnecessary steps or information that’s really not required or is of no use for bank to capitalize on).

8. Accessibility issues for people for visual / cognitive impairments.

In the next post, we will discuss more about how we can help ourselves by helping end-users. I would request you to submit your obeservations and comments on the same.

Here, we will discuss something about the “design factors for mobile web applications”. As we have already discussed, there are several limitations. You can read more about limitations here!

Following are some of these guidelines which needs to be considered while designing mobile web applications, so that it can deliver its best on multiple platforms in almost same way it is intended to. Ultimately, mobile web apps are intended to deliver quickly , on-the-move!

Design Factors for Mobile Web Applications:

1. Semantic Markup:
The way we design our code for conventional desktop-based web is NOT the same when it comes to the “mobile web”. The capabilities of the devices and the browsers it contains, has major impacts on the way content gets displayed.

So, ideally, you should use a “clean & semantic” markup to make your site display in almost the same form on all the devices, without major difficulties for the end-user. If the code isn’t clean & semantic, the website may not look the same on all the target devices as it is expected to be & may create usability issues for the end-users, motivating them to leave the site as soon as they want.

Clean, semantic markup is a ‘foundation to the usable mobile website’.

2. Separate Content from Presentation factor:
Typical mobile web users are more keen on the information they like to see on the mobile websites, as their browsing behavior is mostly ‘information seeking behavior’.  For such users, presentation is secondary, as compared to ‘content being primary reason’ behind the mobile web browsing.

Users are using web on their mobile devices, generally for their immediate needs, like locating the nearest café or a Bank ATM available in the closest proximity. For such users, functionality or the content is more important than anything else.

Considering this, along with a clean & semantic markup, a clear segregation of “Content” and “Presentation” is required. We can enable websites to reach users faster, with clean, valid markup and CSS for the presentation purpose.

3. Alternative Content – “ALT” tags:
With more of ‘information-seeking behavior’ along with ‘pay-for-bandwidth’ scenario, users may not prefer to download images on their mobile browsers, as it saves download time & money for them. Such factors makes us prefer to provide an alternative content for all the images used across the website.

Providing an “ALT” tag makes the application more useful for those who have disabled “load images”. In any case, for mobile web or desktop-based interfaces, you MUST provide the alternative content, to make your application “usable”.

4. Form Fields – Labels:
Filling up form fields in the mobile browser is bit tough as compared to  conventional desktop-based website forms. Entering information in the form field without knowing what it should be filled with, is literally impossible for the end-user.

So to assist users, like ‘ALT’ tags for non-text content, form fields also needs to have “label”, that clearly defines the form field and instruct the users about the information required in the respective form field.

5. Navigation:
Unlike desktop web, navigation elements on the mobile web applications are generally an “adaptation”, that suits mobile web environment at its best. Navigation design for desktop web and mobile web has different design considerations.

Do not repeat the complete navigation on every page & reduce the links and keep only those which are relevant.Also, provide other ways to navigate the website, such as “Access Keys” and tap the hardware capabilities if you know the TG & their devices.

6. Use Heading tags – H1, H2, ….. :
Devices have their own browsers & they render the same sites differently. In such cases, styling given to the text / content on the pages may not actually display as you desire.

In such cases, heading tags like H1, H1, H3…..can help you to make the important headings, text to stand out & helps users to read the content effectively – as they tend to have a ‘scan-through’ behavior.

7. Environmental Factors & Color Contrasts:
Designing websites for mobile devices has several considerations, including the environmental factors, such as lighting conditions. When someone who is using the application the day-light, he may not be able to use the application effectively, if the right color contrast is not created in the application design.

Mobile Web Applications - Design Factors: Mr. Movie homepage

Mobile Web Applications - Design Factors: Bcwebwise mobile edition homepage

Note: Compare these two screen-shots. Readability is higher in the 2nd screen-shot of BC Web Wise – mobile web edition homepage.

You can view this complete presentation on SlideShare.net at: http://www.slideshare.net/vishalvaidya/mobile-web-application-design-factors

If you can bring in some more ideas here when it comes to mobile web application design & its usability, I would be really happy! Please post your comments / suggestions.

1. Make sure that basic controls are always available!
   Make sure you place basic controls to navigate on the site, such as “back to home, back to search results” & relevant ones.  Use contextual menus if required & only if they are assisting the user (preferably limited to 2-3 short links). In most of the cases, though devices / browsers has a ‘back’ button option, it is advisable to include a back button on every page.
   

   Usability for Mobile Web Applications

2. Environmental Factors:
   Imagine, using a website / application which has saturated or dark-colored interface in a bright light conditions! If you do, you will not be able to see the interface clearly & the application usefulness may reduce. So, you should know the users & their possible environment in which they may use this application and you have to design the site accordingly. Such factors like lighting conditions does affect the visual design affecting the usefulness of your application in such environments. Note: Compare the above screen shot with other examples shown in the presentation. Readability is higher in other screen shots.
   

   Usability for Mobile Web Applications

3. Mobile-device-friendly visual designs / layouts:
   Visual designs for mobile sites / apps, unlike for desktop browsers, are different in terms of layouts (no landscape preferably as most of the device will render the sites to suit to portrait form), usage of graphical elements (to be kept viable to optimize the download speed & to reduce the data usage for being cost-effective for the end-user). Precisely, you need a quite different & sensible visual design (keeping in mind the brand elements, etc.) for mobile applications as against the conventional desktop-based websites, to optimize the user experience.
   

   Usability for Mobile Web Applications

You can view this complete presentation on SlideShare.net at: http://www.slideshare.net/vishalvaidya/usability-factors-mobile-web-apps-usability-factors-0209

Please post your comments & suggestions! Thanks!!!

NOTE: All the mobile website screenshots shown are owned by bcwebwise. Copyright © 2009. Bcwebwise. All Rights Reserved with Bc Web Wise.

Though, it’s ‘always-with you’, ‘personalized’ way to access internet, it has several limitations. Let’s understand the limitations of the mobile web application environment:

Limitations:

• Screen ‘Real Estate’ issues: resolution limitations as compared to desktops / notebooks / netbooks.
• Browsers: Various browser renders site differently on different devices.
• Hardware limitations: Processor speed, RAM, ROM, Form factor
• Expensive Data Usage: Data usage charges may be heavy.
• Connectivity issues: Bandwidth, Network reach.
• Limited Interaction possibilities: Less-friendly pointing device.

We can ‘enhance’ the user experience of web on mobile, by following certain guidelines, to overcome limitations as much as possible.

While we design the site / applications that’s suits best to various mobile devices / browsers / connectivity aspects, we MUST consider several ‘factors’ that contributes to a better ‘mobile web user experience. Ideally, we should follow as much as of these guidelines, so that the site / applications designed for mobile-specific environment becomes more usable. Better the user experience, more the successful application would be!

Here we start…

1. Address users’ requirements as ‘quickly’ as possible:
   Generally, users are accessing the web on mobile for their immediate needs, for e.g. locating the nearest cafe or finding the closest Theater or for a short-spanned entertainment.  In Such users, “quickness” makes a lot of difference, time being a ‘crucial’ factor. In such cases, understanding the users’ immediate requirements & assisting them to fulfill them quickly enhance the experience of your application.
2. DO NOT repeat the navigation on every page:
   Screen “real estate” is very valuable & precious when it comes to mobile devices & so, needs to be used wisely. Mobile devices have varied screen sizes. For such various but limited screen sizes, what gets delivered upfront, “above the fold”, does make a difference.  DO NOT repeat the main navigation on every page, as it pushes the content down, generally “below the fold” making it inaccessible for the user. Also, make sure you place it on the homepage as that being an entry point to the site.
   

   Usability for Mobile Web Applications

3. Make user inputs simpler:
   Entering text on a mobile phone can be more painful than on a conventional desktop-based input mechanisms. Make sure your design allows the users to input the text in an easier way. Allow them to choose by selecting an item instead of manually entering the text (as it’s even more error-prone). Also, use the markup to assist certain features in the content. For example, a Telephone number displayed can be used to call the particular no right from there itself, instead of copying the phone number or manually entering it on the dial pad.
   

   Usability for Mobile Web Applications

4. Indicate clearly what is selected:
   Mobile phones generally have lesser cursor control, as the pointing device is either joystick or the directive buttons on the phone. But, even these controls may not work as desired as sometimes choosing the selection can scroll down the page if the control is not selected properly. So, indicating what’s selected is another important factor so that user doesn’t get frustrated by selecting something wrong which he didn’t intend to. Show the selected link by highlighting it with different color or something similar & viable. Some browsers has built-in mechanisms that automatically indicates when a user is on a certain control or link in the page.
   

   Usability for Mobile Web Applications

5. Inessential stuff to be kept out:
   Provide only essential & relevant information on every page. User’s generally pay for all the content they see on their devices & so, for them, any inessential data downloaded is a pain, because THEY have to pay for the content they never wanted to see & gets frustrated. Reading habits would also vary from desktop to mobile device. Content designed for mobile web also needs to be crisp & to the point, as the users will not be interested in reading any typical junk on their devices which they are not interested in & have to pay for it.
   

   Usability for Mobile Web Applications

There is more for this usability for mobile web applications.  In the next post, I will explain some more points which are important for mobile web applications  & its usability.

I would be happy if you can post your comments / suggestions which wil help us to enhance our approach to mobile web development. Kindly contribute!

Updates: read 2nd part of this post