Usability Is A Must In Browser-Based Mobile Banking

Version 1.0 / 11 November 2004

Table of contents

• Introduction
• Business case for usability
• Banking on the move: Case Meridea
  • How it all begins
  • Usability pitfalls and salvations
• Getting out of usability debt
• References

Introduction

Today an increasing number of people spend their days traveling and working outside the office. Even if they don’t work, they still need to take care of a certain number of errands outside the home, such as banking. Often they don’t have a computer at hand. Mobile banking solutions provide users with a service that enables them to transact their financial business irrespective of time and place. By using their mobile phone browsers, customers can request their account status and make banking transactions wherever they are, whenever they choose. From the financial institution point of view, mobile banking has enormous potential for the future. It offers a convenient method for mobile users to manage their finances while on the move.

Back to top

Business case for usability

There are some similarities and many differences in mobile application use depending on the different browsers and devices. The noteworthy differences between domains should be taken into consideration, especially usability-wise, when developing browser-based mobile enterprise applications. Obviously, mobile users must deal with the limitations of mobile devices: smaller viewing areas and limited input. Most Web sites are written for, and tested exclusively on, desktop computers, which have large color monitors. Screen size is the key factor affecting mobile application usability, and in order to scale the application UI according to the platform, developers must take into account different screen resolutions.

Basically, browsing mobile content and applications is easy and cost efficient if Web standards have been taken into account when producing the original Web pages — a standards-compliant Web site at its best is accessible with all devices and by all users. Working in a mobile domain may generate problems at times, and there are security issues to pay attention to as well, but most of the pitfalls can be avoided with careful planning.

Back to top

Banking on the move: Case Meridea

One mobile and web-based enterprise solution provider, a Finnish company called Meridea, was founded on the concept of enabling financial institutions to offer genuinely customer-oriented services through multiple channels. To this end, Meridea has developed a complete software package for banking and investment which can be used through a similar user interface regardless of the device, either by mobile browser or a Smart Client-based application. Smart Client solutions provide users with a possibility to work even when they’re not online and make the connection only when necessary. Two usability-oriented mobile application specialists from Meridea, Esa Kankaanpää and Timo Londen, shed more light on actual mobile application development, especially from the usability point of view. Their comments and explanations are presented below.

How it all begins

The basic product development process at Meridea is iterative, following a traditional cycle that begins with a requirements analysis, upon which the UI and navigation design will be based. The process moves forward through several cycles of paper prototyping, until finally the product is built. Screen and navigation usability is tested throughout the product development lifecycle. While usability specialists at Meridea perform the majority of testing, people from different fields may also be used to ensure a wider perspective.

The mobile application development process is similar to normal Web-based application development since the main goal and biggest challenge is to keep familiar elements, such as content and various functions, intact. Thus, it is not always possible to implement new use cases or more effective action models. Also, technical limitations might force a compromise in application solutions. Smart Client solutions are fully scalable in that they can be used in Series 40, Series 60, and Series 80 devices. However, at the same time, for example, the different wider screen size in Series 80 devices cannot be taken advantage of without significant changes in the user interface logic. Due to the limited screen size, the focus of mobile service development must be on how the actual content is presented. (Left picture: An example of Smart Client-based mobile banking: browsing payments)

Usability pitfalls and salvations

While the biggest overall problems have been on the technological side, limited screen size poses the greatest challenge to usability. Typical examples of these challenges include a payment form with selections and text areas, and a list of transactions that normally requires showing data in columns. The basic solution has been to divide the content onto multiple pages and build a linear, step-by-step navigation: for example, when users are paying a bill, they first choose the account, after which they navigate to the next page to fill in additional information. Mobile browsing application development would benefit from having even more information about general user interface components and how they can be applied to different devices — a good example is a drop-down menu, which can be tricky even on basic Web browsers. Some help was gained from emulators, but they were not always considered reliable enough.

(Picture above: Examples of browser-based mobile banking: viewing asset sum and accepting payment.)

The responsibility for usability has been mainly in the hands of experts at Meridea, so the user interface specialist has been involved in both application development and implementation stages. This iterative user interface design method has enabled problem solving even during the implementation phase. Testing has been conducted in internal inspections, where outside users have also been involved. In particular, the results have been used to clarify application implementation, as well as in other stages that require technical input. Nevertheless, user experience feedback has also been collected with regard to content and visual layout. Feedback is gathered frequently and the results are examined carefully in order to develop the Web application UI - the mobile browsing solution will eventually follow the same iterative custom.

Back to top

Getting out of usability debt

Following basic usability guidelines, with a mobile-use context in mind is a good foundation for designing applications for mobile browsers. Web-standards-compliant pages ensure that content can also be accessed on mobile browsers. A few simple design steps will improve usability and accessibility for both Web and mobile users:

• Design applications for mobile use. Consider the types of situations where the device will be used. The content of the service should fulfill the needs of the target user group in different countries and cultures and be optimized for the most common tasks. Make the structure easy for novices but don’t forget the power users.
• Remember the small screen size. For example, minimize the need for horizontal scrolling and avoid using long, complex words.
• Invest in navigation usability. Provide an easy-to-use user interface built around a consistent, easy-to-learn navigation model. Keep the navigation model consistent throughout the service and avoid creating a service that is too "deep."
• Keep the user task flow fluent and be reasonable with image use. Support the user’s natural task flow and don’t allow large images and data tables to slow it down. If images are necessary, minimize the image size, specify image height and width attributes, and use alternative text (the alt="" tag) on them.
• Provide informative feedback for user actions. Provide proper feedback for user actions and for error and problem situations. If problems arise, users should be informed what to do next. Errors can be prevented by explaining the format of expected input and by marking mandatory fields.
• Use efficient and valid markup. If specific effects are desired, use cascading style sheet (CSS) to control the layout and format elements, such as text and colors. The use of external cascading style sheets is also more informative and minimizes code size.
• Avoid frames. Frames are difficult to handle on a small screen; if possible, avoid using them.
• Avoid pop-up menus. Pop-up menus are confusing especially in Series 60 devices because they fill the whole screen and are opened like a new page.

And last, but definitely not least - perform usability tests. It is always a good idea to perform a usability test for a new application. An overly complicated user interface, or one that requires too many steps to access or enter data, can make an application useless. Users who have not been involved in the design or development of an application tend to notice potential usability problems that are often not obvious to those who are too familiar with the design. And it's a good practice to use testers who represent future end users. Thus, before launching a mobile application, make sure that the intended users test it in a real-use context. Bringing in an advocate for “the people who do the work” can help enterprise software teams develop more clearly targeted designs. Understanding and listening to the people who will be using the product is essential for usable software of any kind.

Back to top

References

Enterprise Applications User Experience Library: http://www.forum.nokia.com/usability

Top 10 Usability Recommendations For Enterprise Applications: http://www.forum.nokia.com/usability

S60 Platform: Designing XHTML Mobile Profile Content: http://www.forum.nokia.com/browsing | Documents

Browsing On Mobile Devices: http://www.forum.nokia.com/browsing | Documents

Quick Guide To Optimizing XHTML Mobile Profile Services: http://www.forum.nokia.com/browsing | Documents

Back to top

Print the document