Usabilla banking sector-2011_09

User Experience inthe Banking SectorUser generated insights into the user experience of eight personal bankingsites

Usabilla is a web-based usability testing tool that allows marketers, analysts, designers and usabilityexperts to collect visual feedback on their website in a quick and fun way. Participants answer questionsby placing points and notes on top of a webpage, mockup, or sketch. The results of a survey areanalyzed and presented in a visual way with charts and heat maps. Usabillas customers use thesevisual 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 brandsincluding Warner, EA, Discovery, LinkedIn, Disney, US Government, Sony, and Levis.Usabilla is a privately held company based in Amsterdam, the Netherlands. Learn more: usabilla.com.

Usabilla Publication - September 2011 Table of contents Highlights......................................................................................................4 Introduction...................................................................................................5 Testing the webpages...................................................................................6 A ﬁrst look ...........................................................................................................6 Setting up the test..............................................................................................7 Analysis of the results...................................................................................8 Navigation and ease of use .................................................................................8 Trust and ﬁnding what you want.......................................................................14 Takeaways..................................................................................................22 ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 3

Usabilla Publication - September 2011 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 onthe services that banks want to sell.TrustworthinessHaving an icon of a padlock next to the login and sign in ﬁelds conveys safety and security.Users automatically seem to trust sites that use these. Additionally, prominently placedbanners and links that mention a security measure or program do well. Too many ads andoffers 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 holderextreme anxiety or panic. Most of the banks in the test do not perform well on this task. Theexperience of losing a credit card could be less stressful for their customers with some minorwebpage adjustments. Having a prominent button proves to be very effective and will result infewer panicked calls to customer service. Our test reveals this as well: both HSBC and Bank ofAmerica 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 ofinformation before they can decide which credit card choice is best for them. The Royal Bankof Scotland shows this can be refreshingly different: a clean design with simple copy helpsusers to make good choices.Keep it realBanks should avoid using stock photography; it very clearly irritated several of our testparticipants. They are smart enough to tell the difference between a real and a fakephotograph. Banks should add a phone line for live customer service, and place it in aprominent position. Users made it clear that they appreciate this easy, yet very effectivefeature. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 4

Usabilla Publication - September 2011 IntroductionEvery day millions of people deal with their personal ﬁnances on the Internet. Banks have to tiea lot of systems together to make this possible, and simultaneously ensure that otherinformation 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 toprovide a pleasurable online customer experience by embracing the importance of usabilityand a good User Experience (UX). This provides an opportunity to look at the similarities anddifferences 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 oftime. This is a user test that collects the opinions of real users using real websites. This is not ascientiﬁc paper and we did not track behavior. It is instead a quick way to show what goes oninside users heads when they visit these sites.A total of 400 participants performed simple tasks and gave feedback on the websites of eightleading, large retail banking sites. The participants in our visual surveys reveal positive andnegative aspects of banking sites that are easily overlooked when you only focus on thenumbers. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 5

Usabilla Publication - September 2011 Testing the webpagesA first lookWe selected eight banks that provide personal banking services. These banks deal directly withcustomers and offer services like saving and checking accounts, debit cards, credit cards, andmore. 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, andDeutsche 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. Everyhomepage has a clear header with the logo of the bank on top and a horizontal navigation, andeach homepage has than five navigational elements. There is a login button or form on everysite 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 listswith 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 eachbank. 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. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 6

Usabilla Publication - September 2011 Setting up the testWe 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 ﬂow of the navigation. Inaddition 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 presentedthese 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 importantfeatures. Testing trust and what features that can be improved will give us valuable feedbackwith points and notes on the way as to how users perceive these sites. The other tasks aremore concerned with the navigation of the sites. We measure the time it takes for people toﬁnd 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 were400 participants in total.You can see a sample test here. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 7

Usabilla Publication - September 2011 Analysis of the resultsNavigation and ease of useYou want a meeting with someone from your nearest bank about amortgage. Where would you click? Time (s) Performance (%) 8.9 RBS 93 9.1 Chase 89 10.6 Barclays 83 12.8 Citi 82 13.1 HSBC 78 14.5 Wells & Fargo 75 16.0 Bank of America 61 26.4 Deutsche Bank 42 0 25 50 75 100To see if our participants could navigate their way around the site, we started with a questionthat allows more than one correct answer. We do this because a user can set up a meeting withsomeone from their nearest bank through customer service, through the mortgage or borrowmenu items, or by ﬁnding out where the nearest bank is so he or she can go there in person.We counted all these choices as correct. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 8

Usabilla Publication - September 2011 The following table offers an overview of how the eight banks scored on the task: You want ameeting with someone from your nearest bank about a mortgage. Where would you click? Wecalculated the ranking for each bank (lower scores are better) by assigning the same weight tothe time to click and the accuracy of the click. For example, Chase scored three points byranking 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 15Barclays has the easiest and best scoring solution with a nice ‘Nearest Branch’ link placed atthe very top of the page, next to other ‘practical’ links like the one to the mobile site. It isunobtrusive and easy to find. Barclays features a ‘Nearest Branch’ link at the top of the site, which is easy to find ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 9

Usabilla Publication - September 2011 You want to see information about credit cards. Where would youclick? Time (s) Performance (%) 3.2 Chase 96 4.3 HSBC 96 4.6 Barclays 94 3.1 RBS 93 3.5 Citi 92 6.3 Wells & Fargo 91 4.7 Deutsche Bank 87 17.0 Bank of America 27 0 25 50 75 100This question measures an easy performance task. We asked people where to click if theywould like to see more information about credit cards. We measured the time needed to clickon the page, and if it was correct or not. We had already identiﬁed the buttons and elementsthat lead to the credit card information page.The chart shows the time to click and the success rate. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 10

Usabilla Publication - September 2011 The following table offers an overview of how the eight banks scored on the task: You want tosee information about credit cards. Where would you click? Again the rank was calculated byassigning the same weight to the time to click and the accuracy of the click (lower scores arebetter). Bank Rank: Time Rank: Accuracy Total points 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 Bank of America 8 8 16Note: Users on the Bank of America site have to hover over the ‘borrow’ button to see ‘creditcards’ that makes the option hidden and hard to measure. While we believe this is not a gooddesign 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. Othersites have a more obscure link that results in a decreased accuracy and longer response time. The webpage of HSBC has an easy to ﬁnd link in their header navigation ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 11

Usabilla Publication - September 2011 Your credit card has been stolen. Where would you click? HSBC 12.9 87 Citi 16.6 87 Chase 15.3 86 RBS 16.7 86 Bank of America 15.4 81 Barclays 30.1 81 Wells & Fargo 22.6 80 Deutsche 16.1 52 0 25 50 75 100Losing your credit card can be quite stressful and requires instant action. It is important to helpcustomers ﬁnd the information they need at the moment they need it the most. Our testsrevealed that only two of the banks offer a link that speciﬁcally states that people can report alost or stolen credit card, and only HSBC features it prominently on their website. It comes asno surprise to us that HSBC scored the best on this task. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 12

Usabilla Publication - September 2011 The following table offers an overview of how the eight banks scored on the task: Your creditcard has been stolen. Where would you click? Again the rank was calculated by assigning thesame weight to the time to click, and to the accuracy of the click (lower scores are better). Bank Rank: Time Rank: Accuracy Total points HSBC 1 1 2 Chase 2 2 4 Citi 5 1 6 Bank of America 3 3 6 RBS 6 2 8 Deutsche 4 5 9 Barclays 8 3 11 Wells Fargo 7 4 11The other indicator of success on this task seems related to a clear link to customer service orother contact options, in combination with the absence of confusing links. A negative exampleis RBS, where you can ﬁnd 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 ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 13

Usabilla Publication - September 2011 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 forcustomers 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 primedand noticed the missing link.This is not to say that the missing ‘credit card stolen’ link is something that cannot beimproved. 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 ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 14

Usabilla Publication - September 2011 ClutterThe most sensible comments from our participants have to do with the amount of clutter all thebank sites have on their webpages. Most sites make ﬁnding what you want needlessly difﬁcult.A lot of the time there is too much copy, and sometimes there is no search bar. A selection ofnotes 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 ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 15

Usabilla Publication - September 2011 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 nicelyThe abundance of notes we received on how cluttered the pages are should give bankspause for consideration. There is so much information that a logical structure seemshard to construct. Techniques like card sorting should be used to let users determine alogical 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 assumedthe role of customers, just as they did in the previous task where they were asked to reporttheir stolen credit card. This made them realize that using a site as a customer is a totallydifferent experience from using the site to locate or apply for a new credit card. A selection ofthe notes on this: ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 16

Usabilla Publication - September 2011 “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 siteImpersonal 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 pageBanks should avoid using stock photography. It very clearly irritated a number of testparticipants who are smart enough to tell the difference between a real and a fakephotograph. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 17

Usabilla Publication - September 2011 What elements make you trust this bank?Trust is a key factor for creating a successful user experience on the Web in general. This goesdouble for banks, of course given the nature of their business. Pages that are credible canchange attitudes by making users feel comfortable when interacting with the website, andchange 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, ﬁnd what elements your target audience interprets most favorably and make those elements most prominentWe found out what elements make people trust a bank, and what elements distill best designpractices. We introduce the best practices below as they relate to aspects such as the brand,information and transparency, and more.The brandLets 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 ofthe 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 brandCitibank 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” ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 18

Usabilla Publication - September 2011 Bank of America also state they offer 24/7 support. RBS gives a more personal touch with thetagline ‘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 ishardly noticed when putting it in the ﬁne 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 ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 19

Usabilla Publication - September 2011 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 thefeeling 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 ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 20

Usabilla Publication - September 2011 Miscellaneous elementsLittle details that caught the participants’ eyes and inspired trust included lock icons and alertsaround 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 FargoEven though we did not ask for elements that were perceived as untrustworthy, we receivedsome feedback on how banks don’t offer testimonials and how advertisements, offers, andgifts 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 ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 21

Usabilla Publication - September 2011 TakeawaysPeople have different reasons to visit the website of a retail bank. Most of the time, they arealready customers and want to look up some practical information, or they are interested inadditional services the bank has to offer. In general, the sites we tested do a poor job for mostof the user scenarios we tested in our case study. Banks overload users with too muchinformation, which makes it difficult for them to make a choice. This is what we anticipated atthe 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 necessarilyaligned with those of their customers. This is of course, inevitable at times for a commercialinstitution such as a bank since most customers want practical information, while the banksalso want existing or potential customers to buy (additional) services. The commercial contenthowever, does not need to distract the user to such an extent that the whole experience ofvisiting the site turns sour. The user test to find the way to the nearest bank and credit cardpage both revealed that there is a lot of room for improvement. Banks can turn to usabilityresearch methods like card sorting to figure out more logical ways to structure their site whenthere 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 recognizedand trusted immediately on visiting the site. The banks work hard to create a brandconsciousness and keep it consistent through various means of communication. Banksreassure that visitors’ data and assets are safe by explaining which security measures theytake. Having a prominent padlock icon adds to this sense of security, which is why a largegroup 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 bankoffers for credit cards are roughly the same. It provided interesting insights into general designissues, but it also provided a more specific piece of advice: banks could greatly improve theircustomer service a lot by simply putting up a help! I lost my card! link on their site. It is notonly 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 stillcompanies 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. Ourparticipants suggested several different ways to improve the sometimes cold and disorganizednature of many sites, such as adding phone numbers, links for live support, and tools forlocating the nearest bank. ©2011 Usabilla B.V. - Some rights reserved - All trademarks are the property of their respective owners 22

http://www.marketingfacts.nl	332
http://www.scoop.it	33
http://paper.li	15

Usabilla banking sector-2011_09

by E-Commerce News on Sep 30, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 380

Statistics

Usabilla banking sector-2011_09 — Document Transcript