Quality, quality, quality

This is the second in an occasional series of blog posts on Mobile Banking. Last time around I introduced the importance of mobile. This time I examine some of the issues surrounding user interface design - and the message is about quality.

Getting the basics right

There is no better way to describe the unique context of mobile than Ivo Weevers in this article on designing mobile for performance:

"People use their mobiles to enhance productivity, comfort and pleasure, everywhere and at anytime: waiting for the bus, walking on the sidewalk, checking which platform their train leaves from. Mobile applications need to focus on a core utility, and they need to be fast and reliable in order to be valuable in those environments....Users quickly notice software that is slow or likely to break (whether because of downtime, crashes, etc.), and this impairs both usage and brand perception. Users expect an app to be fast and responsive. If it’s not, it will get poor reviews, low ratings and low adoption numbers."

Focused function, easy to use on the go, extremely high performance and reliability are the critical factors that make or break a mobile app's reputation. Because users get to vote on your app in the app stores, a failure to pay attention to these items rapidly results in bad reviews and a heavy brand reputation impact. This reputation impact is a serious business issue - so although some of the points discussed here are often considered IT issues, they are in fact very much business issues in today's digital world.

Banking apps that need to contact the server to refresh data between screen navigations, as most do today, fail this test immediately because the navigation becomes slow, laboured and unresponsive. Instead, apps should download and cache data for the whole session such that each screen navigation relies only on that local cache rather than a round-trip to the server. This might seem obvious, but many first generation apps don't take this approach because they are relying on back-end APIs, a server architecture and design assumptions built for web-oriented Internet banks. The design to constantly download data from across the network is unnecessary and brought about through expediency. Moving to a mobile app with caching on the client requires a new set of server APIs that are designed to bulk-deliver content when the app starts up, rather than rely on page-by-page calls to small sets of data one at a time. Not only does this mean new APIs but it also changes the profile of access to the server that needs to be understood and tested to ensure acceptable performance. Despite the extra cost involved, it's the only way to match user expectations.

Interface Quality

On many modern mobile devices the user has effectively been trained to expect an extremely high quality of user experience. Apps routinely display amazingly high quality graphics, smooth sliding, animation effects and coordinated audio feedback. It's now expected that an iPhone app will incorporate animations and Apple has successfully and actively promoted this to its developer community. In some respects, dull utility apps are now taking on some of the interface characteristics until now reserved for games. Banks that fail to compete in this new world risk perpetuating an out-of-date image and disappointing their customers. As a result, interface design needs to reflect user expectations, not replicate web-based designs. Any iPhone or iPad user can tell you that a good app looks and behaves nothing like a web site - multi-touch gestures, smooth-sliding interfaces and highly tuned navigation are the order of the day. Any thoughts of user interface design or code reuse between web and mobile apps should immediately be put to one side - these are very different interface styles.

Apple's Human Interface Guidelines make some very good points about branding. You may or not be a fan of the company, but they do know a thing or two about design.

"Incorporate a brand's colors or images in a refined, unobtrusive way. Branding is most effective when it is subtle and understated. People use your application to get things done or to be entertained; they don't want to feel as if they're being forced to watch an advertisement...For example, displaying a second, persistent bar at the top of the screen that does nothing but display branding assets means that there's less room for content. Consider other, less intrusive ways to display pervasive branding, such as subtly customizing the background."

So why do so many banking apps stick a hulking great logo at the top of such a small screen that dominates everything? Subtle it isn't. Effective it isn't either, it just looks tacky and devalues the brand you're trying so hard to promote.

Good design becomes so critical in the app world because customers can and do vote on your apps in the various app stores and this is now a very public brand issue. No bank wants to see its brand dragged through the mud with 1-star reviews and derogatory comments. Thus, understanding that mobile brands like Apple, Flipboard and Google set the user experience bar that banks must meet is a critical. The evidence is that these are lessons that still need to be learnt. Today, even large banks are heavily criticised in many app store reviews and on social media. The lessons of design, quality and performance are absolutely critical to meeting customer's expectations of what an app should be.

Mobile device support

It's easy for a non-mobile-native person to misunderstand the importance of seemingly trivial details, but in this new open app-store-reviewed world the tiny details get noticed and commented on. The much discussed 'Apple bounce' is a good example (the way lists bounce when you scroll to the end). I've sat in discussions where the importance of a smooth bounce was questioned, as if it were silly to think it important. However, such details get noticed by users. A failure to adhere to the norms and expectations of a given mobile OS (not just Apple) leads users with a strange feeling of a lack of quality and amateurism.

Owners of different mobile OS's will have subtly different expectations of UI behaviour based on the norms of their platform. There are marked differences between those platforms and it's often important to incorporate them into your app so that it feels more 'natural' to the device's owner. For example:

• Graphical elements in iOS tend to be rounded off. Glassy-smooth scrolling and bounce effects are the norm.
• In Android the icons and graphic elements tend to be more angular and squared off. Glassy smooth scrolling may not be so important. Bounce effects are being transitioned to Google's new 'blue glow'.
• Blackberrys tend to have smaller screens with correspondingly smaller graphics.
• Windows Phone has an entirely different and unique style characterised by large stylish words, 'live tiles' and bright colours.

I mention only some of the more obvious items that differentiate the platforms, but the point is that the UI norms and expectations of users differ between devices. It's important to be aware of this and to incorporate that uniqueness where appropriate in order to avoid a visual jarring between your app and the device's native style that might unnerve users.

Varying interface design between devices might imply a high cost of supporting apps on different devices. However, this picture is representative of similar statistics I've seen at other western banks. For some reason there is a difference between the public headlines of device sales (where Android leads the pack) and actual usage stats (where Apple takes a decisive lead). Some thoughts on the difference between reported sales stats and actual usage can be found here. Regardless of the actual relative figures, its probably the case that there are really only two platforms you need to focus on: Apple and Android.

A sound mobile banking strategy can be formed by providing a basic 'mobile web site' that supports a wide variety of devices together with a supporting 'premium' app experience for iOS and Android. The web gives coverage across devices and apps provide a premium experience for the more popular devices that you choose to target.

There's no substitute for pulling the stats from your own banks website and seeing what your customers want though. One thing is for sure: Attempting to target an overly wide variety of devices for apps - blackberry, symbian, windows, iOS, android, etc will almost certainly result in a lack of focus and design compromises in an attempt to be 'all things to all men'. Apps are about a special experience and that takes effort and focus. In an age when customers get to vote on what they think of your efforts in the app stores, trying to cover all devices might not be the best strategy. Simplify and focus.

A discussion on device support wouldn't be complete without mentioning the dreaded native v html technology debate. Simply put, each device has its own technology for apps, so you need to build a different set of code for each device being supported. HTML-based apps promise an ability to build once for all devices, but there are drawbacks.

For example, scrollimg and animations tend to be a little slower. It's usually possible, as a user, to spot that an app was built with HTML technologies. The signs might seem minor, but the fact that a customer can detect the underlying technology is not a positive. It makes it much harder to get a high-end user experience and Facebook famously tried and failed with this approach.

HTML-based apps might work in less critical environments, where the cost savings are more important and a pixel-perfect high-end user experience isn't so much of a focus. But apps in the public eye from large consumer-facing organisations might not be able to afford any compromises. This is an area of sometimes intense technical debate - whatever choice your make, ensure you are following a strategy that meets your business and brand objectives, not the opinions of a technologist!

New interfaces

One aspect of mobile design that shines through in mobile design is the re-imagining of interfaces. Even the dullest of utility apps like a unit converter can receive a makeover that transforms it from dull utility to perfectly formed machine that delights and surprises the user. Tapbots belief is that they are building:

"utility robots...Our applications are easy to use, focused, and lots of fun"

Why shouldn't banks be the same? If a unit converter can look like this

then surely it must be possible to apply equal imagination to banking apps?

Looking at banks, we see the view of the bank statement still central to the user experience. Fair enough, seeing a record of your transactions is an important aspect of banking. But why does it still have to look like a ledger from the 1800's? What about displaying a horizontal timeline on which vertical bars representing transaction size are overlayed, with annotations for the detail? The user could simply swipe the screen from side to side, scrolling over the timeline. There are many engaging ways in which this data can be displayed that would provide the visual ques that customers need to make sense of such complex data in their busy world. For something a bit more whacky, how about coloured balls where their size represents transaction amount and colour the spend category? For another radically different user interface, this time for stock data, take a look at Stocktouch. There are many ideas that could be applied to presenting transaction data in radically different ways. All it takes is a little bravery and a lot of imagination!

For those a little more conservative than myself, do not fear! This brave new world of flashy graphics does not need to replace your ledgers, it can complement it. A ledger view in portrait orientation, transforming to a more exciting graphical view when the device is rotated to landscape orientation (using the orientation sensors to detect the change automatically) could be the answer. My point is that the world is our oyster here - there are many possibilities to surprise and delight, bounded only by the creative minds involved.

A key aspect for designers is inspiration. Very little design occurs in a vacuum. It's why the trendy offices of designers tend to have design classics littered around. To get an idea you need other ideas to spark off of. Luckily there is an enormous number of resources that aim to provide that inspiration and design reference points with mobile. As banks look at mobile banking, they need to open their minds to new ideas and let the creativity flow!

Summary

Design quality, imagination and responsiveness are absolutely critical in the mobile app world. Don't place enough focus on these aspects at you peril. Customer expectations only increase and banking apps sit on a smartphone with other apps that demonstrate extreme creativity and slickness - so banks need to adopt new ideas and compete with the very best mobile apps in order to impove their brand reputation and win consumer respect.

Many banking apps today lack some of the typical app qualities that many users expect. Improvements need to be made across the industry. Some of my pleas for improvements would include:

• Cache data so that users can move between screens without delays due to network access.
• Pay attention to user interface "fit and finish" in ways you've never done before - be maniacal in your obsession for quality!
• Be clear about who your users are and which devices you really need to support - it's probably only two mobile OS's - simplify and focus.
• If you're not going with a platform's native development capabilities, make sure you understand the implications of your technical choices and the trade-offs involved. There are no free lunches, the compromises are real.
• Break with convention - be playful with the user interface, display data in new ways. Don't simply replicate an 1800's ledger.

Done well, a good mobile app can make a huge difference to brand reputation - why compromise on anything less?

Posted with Blogsy