usabilla banking sector-2011_09

User Experience in the Banking SectorUser generated insights into the user experience of eight personal banking sites

Usabilla is a web-based usability testing tool that allows marketers, analysts, designers and usability experts to collect visual feedback on their website in a quick and fun way. Participants answer questions by placing points and notes on top of a webpage, mockup, or sketch. The results of a survey are analyzed and presented in a visual way with charts and heat maps. Usabilla's customers use these visual insights to improve their user experience and optimize their website.

Usabilla is currently in use by more than 10,000 web professionals, and globally recognized brands including Warner, EA, Discovery, LinkedIn, Disney, US Government, Sony, and Levi's.

Usabilla is a privately held company based in Amsterdam, the Netherlands. Learn more: usabilla.com.

http://usabilla.com

http://usabilla.com

Table of contents......................................................................................................Highlights 4

...................................................................................................Introduction 5

...................................................................................Testing the webpages 6...........................................................................................................A first look 6

..............................................................................................Setting up the test 7

...................................................................................Analysis of the results 8.................................................................................Navigation and ease of use 8

.......................................................................Trust and finding what you want 14

..................................................................................................Takeaways 22

Usabilla Publication - September 2011

©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 3

HighlightsDifferent prioritiesThere appears to be a divide between the priorities of users and the priorities of the banks. Information is often based not on the most frequent actions a user takes on a website, but on the services that banks want to sell.

TrustworthinessHaving an icon of a padlock next to the login and sign in fields conveys safety and security. Users automatically seem to trust sites that use these. Additionally, prominently placed banners and links that mention a security measure or program do well. Too many ads and offers on the other hand, harm the brands trustworthiness.

The panic buttonLosing a credit card is normally a very stressful experience that causes a credit card holder extreme anxiety or panic. Most of the banks in the test do not perform well on this task. The experience of losing a credit card could be less stressful for their customers with some minor webpage adjustments. Having a prominent button proves to be very effective and will result in fewer panicked calls to customer service. Our test reveals this as well: both HSBC and Bank of America sport such a button and both score very well.

Clean designed pagesCredit card pages are cluttered with information that requires customers to scan a lot of information before they can decide which credit card choice is best for them. The Royal Bank of Scotland shows this can be refreshingly different: a clean design with simple copy helps users to make good choices.

Keep it realBanks should avoid using stock photography; it very clearly irritated several of our test participants. They are smart enough to tell the difference between a real and a fake photograph. Banks should add a phone line for live customer service, and place it in a prominent position. Users made it clear that they appreciate this easy, yet very effective feature.



IntroductionEvery day millions of people deal with their personal finances on the Internet. Banks have to tie a lot of systems together to make this possible, and simultaneously ensure that other information is easily accessible. There are a lot of details for banks to cover on a website: information about mortgages, credit cards, locations, insurances, loans, and much more.We decided to test the websites of eight large retail banks in greater depth. Banks need to provide a pleasurable online customer experience by embracing the importance of usability and a good User Experience (UX). This provides an opportunity to look at the similarities and differences of a large number of banking websites that all offer the same kind of services. We utilized Usabilla tests to collect a large amount of qualitative feedback in a short period of time. This is a user test that collects the opinions of real users using real websites. This is not a scientific paper and we did not track behavior. It is instead a quick way to show what goes on inside users heads when they visit these sites. A total of 400 participants performed simple tasks and gave feedback on the websites of eight leading, large retail banking sites. The participants in our visual surveys reveal positive and negative aspects of banking sites that are easily overlooked when you only focus on the numbers.



Testing the webpagesA first lookWe selected eight banks that provide personal banking services. These banks deal directly with customers and offer services like saving and checking accounts, debit cards, credit cards, and more. We selected the biggest banks in the United States, United Kingdom and Germany: Royal Bank of Scotland, Bank of America, Barclays, Chase, Citi, Wells Fargo, HSBC, and Deutsche Bank. These banks all offer similar services and are comparable in class and size.Looking at the eight homepages, it seems they share a lot of common design patterns. Every homepage has a clear header with the logo of the bank on top and a horizontal navigation, and each homepage has than five navigational elements. There is a login button or form on every site for easy access to the secured digital banking area.All of these sites are really busy and contain a lot of information. Every bank has numerous lists with links, panels with offers, fine print and other elements. To better test how people find their way around, we also looked at the credit card page of each bank. We chose the credit card page simply because every bank offers one.

All the mentioned elements are easily distinguishable in this screenshot of the Chase website.



Setting up the test We asked users to perform the following two tasks on the homepages of the banks:

‣ You want a meeting with someone from your nearest bank about a mortgage. Where would you click?

‣ Which elements make you trust this bank? Please explain with a note.

Due to the amount of information on the site, we decided to test the flow of the navigation. In addition to the aforementioned tasks, we asked another question on the homepage:

‣ You want to see information about credit cards. Where would you click?

Following this task, we showed the credit card page of the bank. On this page we presented these two tasks:

‣ Imagine your credit card has been stolen. Where would you click?

‣ What would you improve on this page? Please explain with a note.

We now have a nice mix of questions that also includes subjective tasks about important features. Testing trust and what features that can be improved will give us valuable feedback with points and notes on the way as to how users perceive these sites. The other tasks are more concerned with the navigation of the sites. We measure the time it takes for people to find things, and see if the things they deem important are presented in a clear manner. We asked participants about only two banks in the same test in order to avoid a learning effect, and thus made four tests with two banks each. Every test had 100 participants, so there were 400 participants in total.

You can see a sample test here.



http://participate.usabilla.com/18049733274e71f6e688e6f/preview

http://participate.usabilla.com/18049733274e71f6e688e6f/preview

Analysis of the resultsNavigation and ease of useYou want a meeting with someone from your nearest bank about a mortgage. Where would you click?

To see if our participants could navigate their way around the site, we started with a question that allows more than one correct answer. We do this because a user can set up a meeting with someone from their nearest bank through customer service, through the 'mortgage or 'borrow' menu items, or by finding out where the nearest bank is so he or she can go there in person. We counted all these choices as correct.

Time (s) Performance (%)

RBS

Chase

Barclays

Citi

HSBC

Wells & Fargo

Bank of America

Deutsche Bank

0 25 50 75 100

42

61

75

78

82

83

89

93

26.4

16.0

14.5

13.1

12.8

10.6

9.1

8.9



The following table offers an overview of how the eight banks scored on the task: You want a meeting with someone from your nearest bank about a mortgage. Where would you click? We calculated the ranking for each bank (lower scores are better) by assigning the same weight to the time to click and the accuracy of the click. For example, Chase scored three points by ranking first in accuracy and second in time.

Bank Rank: Time Rank: Accuracy Total points

Chase 2 1 3

RBS 1 2 3

Barclays 3 3 6

Citi 4 4 8

Wells Fargo 6 5 11

HSBC 5 6 11

Deutsche Bank 8 7 15

Bank of America 7 8 15

Barclays has the easiest and best scoring solution with a nice ‘Nearest Branch’ link placed at the very top of the page, next to other ‘practical’ links like the one to the mobile site. It is unobtrusive and easy to find.

Barclays features a ‘Nearest Branch’ link at the top of the site, which is easy to find



You want to see information about credit cards. Where would you click?

This question measures an easy performance task. We asked people where to click if they would like to see more information about credit cards. We measured the time needed to click on the page, and if it was correct or not. We had already identified the buttons and elements that lead to the credit card information page.The chart shows the time to click and the success rate.

Time (s) Performance (%)

Chase

HSBC

Barclays

RBS

Citi

Wells & Fargo

Deutsche Bank

Bank of America

0 25 50 75 100

27

87

91

92

93

94

96

96

17.0

4.7

6.3

3.5

3.1

4.6

4.3

3.2



The following table offers an overview of how the eight banks scored on the task: You want to see information about credit cards. Where would you click? Again the rank was calculated by assigning the same weight to the time to click and the accuracy of the click (lower scores are better).


Chase 2 1 3

RBS 1 4 5

HSBC 4 2 6

Citi 3 5 8

Barclays 5 3 8

Deutsche Bank 6 7 13

Wells Fargo 7 6 13


Note: Users on the Bank of America site have to hover over the ‘borrow’ button to see ‘credit cards’ that makes the option hidden and hard to measure. While we believe this is not a good design practice, the low score should be seen as an outlier.

RBS and HSBC both offer a clear link in their header for information about credit cards. Other sites have a more obscure link that results in a decreased accuracy and longer response time.

The webpage of HSBC has an easy to find link in their header navigation



Your credit card has been stolen. Where would you click?

Losing your credit card can be quite stressful and requires instant action. It is important to help customers find the information they need at the moment they need it the most. Our tests revealed that only two of the banks offer a link that specifically states that people can report a lost or stolen credit card, and only HSBC features it prominently on their website. It comes as no surprise to us that HSBC scored the best on this task.

HSBC

Citi

Chase

RBS

Bank of America

Barclays

Wells & Fargo

Deutsche

0 25 50 75 100

52

80

81

81

86

86

87

87

16.1

22.6

30.1

15.4

16.7

15.3

16.6

12.9



The following table offers an overview of how the eight banks scored on the task: Your credit card has been stolen. Where would you click? Again the rank was calculated by assigning the same weight to the time to click, and to the accuracy of the click (lower scores are better).


HSBC 1 1 2

Chase 2 2 4

Citi 5 1 6


RBS 6 2 8

Deutsche 4 5 9

Barclays 8 3 11

Wells Fargo 7 4 11

The other indicator of success on this task seems related to a clear link to customer service or other contact options, in combination with the absence of confusing links. A negative example is RBS, where you can find a link that says ‘contact us’, one that says ‘credit card security’, and one that says ‘your card’.

The ‘lost credit card’ link on HSBC and Bank of America



Trust and finding what you wantWhat would you improve on the credit card page?Participants were very vocal on how the credit card pages of the banks could be improved.

Lost credit card linkThe one thing that was mentioned the most by our testers was the absence of a link for customers to “Report a lost or stolen credit card”. The task Imagine your credit card is stolen. Where would you click? came directly before this question/task, so users were already primed and noticed the missing link.This is not to say that the missing ‘credit card stolen’ link is something that cannot be improved. Most banks could benefit from adding it and making it easy to find.

“I am not impressed with the ability to find where to call for a stolen credit card. I would probably try to look this information up on a smartphone and I would need it to be very visible” — Barclays Bank’s page

“I actually can’t find where I should go to report a lost or stolen credit card… That’s why I clicked on “Services”. A quick link to report a stolen card should definitely appear in the Cards section” — Deutsche Bank’s page

“The ‘Lost or Stolen card’ link is definitely not visible enough. It took me around five minutes to find it, and I think it should be presented in a much more obvious way” — HSBC’s page

Notes on the Citi page on the absence of a ‘lost credit card’ link



ClutterThe most sensible comments from our participants have to do with the amount of clutter all the bank sites have on their webpages. Most sites make finding what you want needlessly difficult. A lot of the time there is too much copy, and sometimes there is no search bar. A selection of notes on this:

“This search bar should be made available at the top of the page. If a customer is new to this bank, they can find comfort in being able to ask a question, rather than reading information that may seem confusing to them” — Barclays Bank’s page

“Too long of a page” - “Too much on the page” - “Too much text” - “Hard to find stuff” - “I would probably never look at the bottom of this page”“Put information into columns” — Barclays Bank’s page

“Make the page less busy. Too much stuff. I need fewer choices with drop down menus” — Citi Bank’s page

“The constant use of the words “Credit Cards” make everything kind of blend together” — Citi Bank’s page

“This is an overflow of information” — HSBC’s page

“I would change the general structure, because now you can’t see the benefits of the different cards and the most space is used by a nearly useless picture” — Deutsche Bank’s page

“It feels really busy. Maybe hide some of the info below the note until you click on what you want to see” — Wells Fargo’s page

One of the many ways our participants respond to the cluttered pages - HSBC



The Royal Bank of Scotland stood out nicely because of it’s fresh layout.

“Good structured site, no suggestions for improvement”“Does a good job explaining the features, but I’d like the option for a side-by-side comparison”“Nothing, it is clear, not too much information on page, not clogged up, makes it easy to read”

Royal Bank of Scotland’s layout stands out nicely

The abundance of notes we received on how cluttered the pages are should give banks pause for consideration. There is so much information that a logical structure seems hard to construct. Techniques like card sorting should be used to let users determine a logical data structure.

Treating prospective and existing clients just the sameBanks also have a problem that is closely related to the negative impact of cluttered pages: mixing the content they use to cater to existing and prospective clients. Participants assumed the role of customers, just as they did in the previous task where they were asked to report their stolen credit card. This made them realize that using a site as a customer is a totally different experience from using the site to locate or apply for a new credit card. A selection of the notes on this:



“Clearer information on where existing card holders can find information. This seems very focused on just attracting new customers” — Deutsche Bank’s page

“No idea where to click for general info, help with selecting or just info about my own credit card” — Deutsche Bank’s page

“Only focused on new business”“Page is obviously selling and not supporting current customers” — Wells Fargo’s page

A note on the Deutsche Bank site

Impersonal copy and designOur participants repeatedly stated that many of the sites convey an impersonal feeling.

“Seriously? Some random irrelevant stock photo of a blond white woman is the focal point of the entire page? Distracting, stupid, takes up too much space” — Chase Bank’s page

“The page needs to have more options for personal attention from a banker. Right now it is very impersonal. User’s need a “click here to talk to a representative” somewhere on the page to know that if they are overwhelmed help is just a click away” — Chase Bank’s page

“Many times people want to speak with a person and get live customer service. I would make this more prominent. Customer service is extremely important for credit card holders” — Chase Bank’s page

Banks should avoid using stock photography. It very clearly irritated a number of test participants who are smart enough to tell the difference between a real and a fake photograph.



What elements make you trust this bank?Trust is a key factor for creating a successful user experience on the Web in general. This goes double for banks, of course given the nature of their business. Pages that are credible can change attitudes by making users feel comfortable when interacting with the website, and change behaviors, such as registering information and completing transactions.To quote B.J. Fogg, our favourite expert on changing human behavior:

To increase the credibility impact of a website, find what elements your target audience interprets most favorably and make those elements most prominent

We found out what elements make people trust a bank, and what elements distill best design practices. We introduce the best practices below as they relate to aspects such as the brand, information and transparency, and more.

The brandLet's start with the obvious. Participants who already know a bank and recognize the brand, already trust the institution. An example of this can be seen in the responses to the webpage of the Bank of America.

“Bank of America has been around for decades. Their longevity helps me trust them”“The fact that it is bank of america is trust worthy because of it’s reputation. And all things that are said about it. And that they have a really secure site is a number one thing to me”

Note on the Bank of America brand

Citibank assures people of its trustworthiness directly in its tag-line, which is noticed:

“24 hour access - they never sleep. Good motto”“Citi never sleeps. I can reach someone whenever I need them”



Bank of America also state they offer 24/7 support. RBS gives a more personal touch with the tagline ‘here for you’ and a section ‘help us help your community’

“I like companies that give back to the community”

Information and transparencyHow a bank displays privacy and security related elements greatly affects its levels of trust. Information about privacy and security that is placed at a prominent place does well, while it is hardly noticed when putting it in the fine print. Some notes:

“Secure sign-in makes me feel more confident about accessing banking information online” — Deutsche Bank’s page

“There are a number of ways to contact the bank on the page, which also makes the bank trustworthy” — Wells Fargo’s page

“They have placed information about privacy and security as a main item on the front page rather than small print somewhere” — Bank of America’s page

This is another indication that they want to insure their customers are safe. They include this link on the main page of their website. — Bank of America’s page

The Wells Fargo page displays prominent links to information about fraud protection



Participants are also successfully primed by explicit statements to inspire trust with texts like ‘Fraud Prevention’ and ‘member of the FDIC’, like on the webpage of Chase:

“They have a program to prevent fraud, that is trustworthy”“I feel my money is protected because FDIC insures them”

Chase also has banners with information on how to keep your account secure. This creates the feeling that the bank and its clients are jointly responsible for security, and it works well.

Chase shows of it is a member of the FDIC and has banners with tips on how top keep your account secure



Miscellaneous elementsLittle details that caught the participants’ eyes and inspired trust included lock icons and alerts around the account buttons.

“Signing in and it also shows a lock icon indicating that this online banking is safe” — Bank of America’s page

“The security lock means that I won’t be hacked when I log into an account” — Citi Bank’s page

“The bank uses a good security system” — Citi Bank’s page

Padlock icons on the sites of Bank of America and Wells Fargo

Even though we did not ask for elements that were perceived as untrustworthy, we received some feedback on how banks don’t offer testimonials and how advertisements, offers, and gifts appear to be a little sketchy.

“Does a trustworthy bank need this kind of advertisement?” — HSBC’s page

“Would like to see more testimonials!” — Chase’s page

The MacBook Air on display on the HSBC site



TakeawaysPeople have different reasons to visit the website of a retail bank. Most of the time, they are already customers and want to look up some practical information, or they are interested in additional services the bank has to offer. In general, the sites we tested do a poor job for most of the user scenarios we tested in our case study. Banks overload users with too much information, which makes it difficult for them to make a choice. This is what we anticipated at the beginning of this test, and it rings true when you look at the feedback from our participants.

Aside from being cluttered in general, the sites seem to have priorities that are not necessarily aligned with those of their customers. This is of course, inevitable at times for a commercial institution such as a bank since most customers want practical information, while the banks also want existing or potential customers to buy (additional) services. The commercial content however, does not need to distract the user to such an extent that the whole experience of visiting the site turns sour. The user test to find the way to the nearest bank and credit card page both revealed that there is a lot of room for improvement. Banks can turn to usability research methods like card sorting to figure out more logical ways to structure their site when there is too much information that needs to be displayed in a logical manner.

One aspect that tested similarly across all of the tested sites is the level of perceived trust. Banks need to be trustworthy, and in general they are. The brand of most banks is recognized and trusted immediately on visiting the site. The banks work hard to create a brand consciousness and keep it consistent through various means of communication. Banks reassure that visitors’ data and assets are safe by explaining which security measures they take. Having a prominent padlock icon adds to this sense of security, which is why a large group of the participants noticed them. It increased their sense of trust.

We tested the credit card pages because all banks provide them and the services each bank offers for credit cards are roughly the same. It provided interesting insights into general design issues, but it also provided a more specific piece of advice: banks could greatly improve their customer service a lot by simply putting up a 'help! I lost my card!' link on their site. It is not only practical, but also reassuring for customers who have not been in that situation before.

Finally, we suggest that banks should be more real. It puzzles us a bit that there are still companies that get away with using stock photography of shiny happy people in a call center. Companies underestimate the intelligence of their users if they believe they will not notice. Our participants suggested several different ways to improve the sometimes cold and disorganized nature of many sites, such as adding phone numbers, links for live support, and tools for locating the nearest bank.



usabilla banking sector-2011_09

Business

usabilla publication

user test

usabilla tests

good user experience

stressful experience

large retail banks

credit card choice

priorities of users