Optimized Structure For Mobile Banking Webpages

Posted on July 2, 2013 by

Banking industry allocated significant investment in mobile platform and experts are still analyzing how the entire process is useful for the community. Larger banks with enough resources to establish an online presence want to give customers flexible, easy and secure access to their accounts. There have been different opinions on mobile banking, as users are not comfortable with managing banking accounts using mobile devices.

Despite rapid innovation in the mobile technology, many web designers still copy UI patterns for desktops when building mobile banking sites. In many cases, these patterns are unsuitable for mobile space. Fat fingers, divided attention and very small display require different thinking when designing mobile banking webpages.

Using Drop Downs

Drop downs are widely using in mobile banking interface as they are easy to use and can accommodate a wide range of options without taking too much space. Assuming that customers need to handle less than four options, drop down menu work quite well on platform with restricted screen real estate.

Standard drop down usages on iPhone’s interface use no more than three options in a single drop down. In many cases, blindly adding twenty options into a single drop down is a knee-jerk reaction to desktop-style Web interface.

Some mobile banking webpages use short codes to save spaces, such as CC1, SAV and CHK. However, having to remember these codes when working with mobile banking interface is a far cry from common experience with Google Search and YouTube. To ensure easier experience with mobile banking, web designers may need to use separate page for each task.

Using Separate Pages

A more user friendly alternative for listing options with drop downs would be separate pages for each mini task, in which designers can safely show more options without overwhelming users. Apple states in its guideline for iOS developers that they should consider using separate pages instead of opting for drop down with very large number of options.

These are benefits of using separate pages instead of drop downs bloated with so many options.

  • Platform-independent user experience
  • Flexibility in choosing font and layout
  • Optional text wrapping
  • A dozen or more options on the page while maintaining comfortable scrolling

In its simplest form, the task of sending a specific amount of money to a recipient requires only four separate pages.

  • Define the “From account”
  • Define the “To account”
  • Define the amount of money
  • Verification page

This process should work well for simpler tasks and the entire flow can be completed in only a few steps. Web designers should also consider using the breadcrumb pattern to show customers where they are and how many more steps remain. Breadcrumb can improve user experience immensely and enhance the design pattern well.

Unfortunately, like many things in this world, nothing comes for free. The original idea of using separate pages for each mini task is to make it easier for users to accomplish something. Nevertheless, once it takes more than six pages to complete a single process, web designers should consider whether the flow has gotten too long. There’s also a possibility that users won’t be able to distinguish between required and optional steps. With this method, each step seems to have equal importance and web designers need to use different layouts to distinguish between required and optional steps.

Some mobile banking mobile websites dispense entirely with separate verification page as the login password itself acts as a verification mechanism. But, designers should still append separate verification page if security is considered as the highest priority over usability.

One obvious problem with separate pages method is that editing is a bit harder than layout with multiple dropdowns. Instead of forcing users to go through the whole flow again, web designers should provide a way to let consumers jump to any of the previous pages and then return to the last page. One way to do this is by using clickable breadcrumb elements.


As a whole, even mobile banking webpages shouldn’t be complicated and web designers need to anticipate low-end devices with very small display and customers with fat fingers. Less complicated designs are guaranteed to perform much better in demanding mobile environment. For many web designers, the task of designing mobile webpages for banking tasks can be one of the most useful exercises. In many cases, simply duplicating mobile banking methods for desktops is the worst solution and yet this is one thing that many web designers typically gravitate to.

Designing mobile webpages requires different thinking style and designers should be aware that with touchscreen displays, it takes an extra tap to enter data on dropdowns and fields. Consider using different pages for each mini task and look for options to remove. If possible, cut down on the number of webpages customers have to go through to complete a workflow. This will increase user experience, improve security and reduce input errors. Last but not least, repeated user testing should be the core of any mobile design work and designers should test for any possible combination.

Author :

  • Editor