An Online Banking Site - Website UX Review

UX Expert Paul Boag has a lot to say about the website for Íslandsbanki (islandsbanki.is), one Iceland's main banks. He addresses the flaw of promoting its brand over the services it offers and demonstrates how it violates some fundamental usability principles in favor of novelty. He concludes with some tips for improvement that don't require a major overhaul.

Transcript below.

Topics covered in this video: Design patterns, Main navigation, Designing for mobile.

---

Transcript

Hello, my name is Paul Boag, and you're watching First Impressions produced in conjunction with the lovely people at Balsamiq, who, each week, send me through a website to look at. I open the website and give my first impressions. This unedited video series is an exploration of different websites to see what we can learn and how we can improve our own websites.

So let's dive straight in with today's website. Okay, so this is it. Well, the first thing to say is I loaded this up in a browser just a few moments ago before we recorded this video. And the immediate problem that I had was one with performance, the website took an age to load and I think this is an often overlooked usability hurdle that we, you know, developers care deeply about performance and rightly so, but as designers and website owners, we don't give it as much attention as perhaps we should do.

But actually, if we do a quick search on my own website, and we bring up this article that I've written on performance, you can actually see how incredibly important performance is. A one-second delay in the load time of your website can lead to a 7% drop in sales and 11% fewer page views. Not only that, but 79% of users who are dissatisfied with performance are less likely to buy from a site.

Again, and 44% will tell their friends that they had a bad online experience. So performance matters. And that is one of the problems that this particular website immediately suffers from out of the gate. Just to put those performance issues in context, you might notice that for the rest of this video, there's actually lip sync problems with my audio.

I discovered that this was actually being caused by the website. The website was demanding so much processing power from my top of the line iMac that it actually was stopping me recording audio as well. So you can only imagine how poorly this website will run on some lower end devices, such as mobiles.

But let's set that aside. Let's have a look at the website and see what we find. Okay, well, I have to say, immediately, I'm not actually sure what these people do. Tap and pay, investing in education, daily operations, and then it's showing a load of exchange rates and news.

So is it some kind of educational thing, or is it corporate advice? I honestly couldn't tell you. Right, the right focus can be a game changer when it comes to mastering objectives.

A few simple rules will set you on your path to success and help you to exceed even your own expectations. Nope. Still no idea what they do. They really lack plain English. One of the fundamental things you need to do when you arrive on a website is make it blatantly clear what you do.

Of course, it depends on how someone arrives on this website. Maybe if they're already aware of this brand, then they, you know, they might not need to have it immediately explained to them, but if they're coming via a search engine, they will. The imagery doesn't really help very much. Maybe some kind of...tap and pay.

I mean, this makes me...feels like some kind of agency website, some kind of team shot thing. I...ah, what's this written vertically down the side, "online banking." So are they a bank? That would make sense, Island Bank.

Yeah. So it looks like it's some kind of bank. Ah, there's a menu bar here that I didn't spot. Let's talk about that just briefly, if we may. You know, I understand the navigation takes up a lot of screen real estate and so on mobile I completely understand hiding navigational elements way under a hamburger menu.

And unlike many people, I'm not as negative about hamburger menus, because I think they're becoming a convention that people understand now, certainly on mobile, but I'm not so sure about on a desktop application where you've got a lot of real estate. And actually, navigation helps to orientate you, it helps you to understand what the website is about.

It helps you to grasp the basic, you know, scope of the website. You may remember from last week, if you watched last week's video, which was a legal aid site, essentially the first thing I did was look at the navigation in order to orientate myself as to what the website was about. So maybe this will help.

Let's have a look. Okay, wow. It's a full screen rollover. Now, this makes it much clearer. Savings, loans, cards. Those are the kinds of things you expect from a bank. So yeah, now I'm much more clear on what I'm looking at here.

So there we go. We've got a lesson to learn here that navigation helps explain what the website is about. We can also learn that one of the first things you need to do on every website is make it blatantly obvious what that website is about. So we've got a bank.

Now, but we're being asked to search for something, okay? Wow, these people really are liking their kind of overlays and slide ins and stuff like that. They're building more of a web app than a website and that certainly has its place. But I would worry a little bit about that for mobile.

And the reason that I would worry about it mobile is because I suspect this website is relying heavily on JavaScript and JavaScript is quite intensive and a lot of mobile devices choke on it and I regularly see it not loading particularly well and if people have got a poor connection as well.

So you may well have some accessibility problems around the website not loading. It probably also explains the performance hate that I saw when I first loaded up the site. Sometimes simple is better. This website so far is trying to be clever that's how it feels, you know, it's trying to be different and edgy and things are flying in and it's very interactive and very rich.

And that absolutely has its place don't get me wrong. You know, if it was an agency website, for example, that's trying to impress, trying to show off, absolutely. For a bank however, I'm not so sure it's the right place. Right, so I'm being asked to search on so I want a current account. Let's see what that gives us.

Okay, foreign currency stockpiled in 2018. Really? That's the first result we're going to show someone if they've got a current account? I'm not actually seeing how to open a current account. Right, so search has failed me.

So search, you really...with search, you can't just use the algorithm you need to actually looking to make sure that it's, you know, on common search terms like open a current account or something like that, that you're floating the most relevant results to the top even if you have to do that manually because it's so important that the user is getting good results.

Most search on most websites sucks and if you're going to emphasize it this prominently then that definitely needs to, you know, needs to work really, really well if that's what you're saying people should rely on. Okay, so let's follow through that task that I said I want to do.

So I want to open a current account. So that's failed me. Let's go to our main navigation. Okay. Well, I'm not...so I can see savings account. Oh, here we go, accounts. Start saving today, okay, perhaps they don't do a current account to be fair to them.

So what I'm going to do is let's go back to the homepage, how do I get back to the homepage? So I was about to click on the logo, yeah, normally does it. So let's go savings account. Hey, so that's why I didn't find current account, fair enough. We'll let them off for that, then.

Okay. So start saving today. Yes, that's what I want to do, right? Choose the right savings account. I want just a straight...what's the difference between a savings account and regular savings? Okay, I'm confused. Oh, it's going to tell me below.

So we've got nine products that match savings accounts. General savings, that's what I want. Now, we're down to three products. I quite like the way that updated. I know I said I didn't like fancy stuff earlier, but that's quite slick. And it highlights it here which is good because we're not seeing any change over here. You see the problem?

Yeah, okay. So that's good. What's regular savings? Let's click on regular savings. Right, start regular automatic transfer. I don't want automatic I want to apply.

How do I apply for this? Okay, well, that's not really helping me very much. So I want the savings account, instant access savings account. Yes, so we've got apply, wonderful. The whole navigation to this feels a little bit convoluted because we've got...at least it's not breaking the back button with this fanciness, now that's good because I want to apply for a savings account, okay?

That's the kind of mental process that you've got, right? So to apply for a savings account I need to click once on the main navigation, I need to click...it's highlighted savings automatically so I need to click accounts. Then I need to work out which type of savings account.

It's not explaining to me the difference between these different savings accounts, right? So I'm slightly confused as to what the difference is, but we're going to go for an instant access. I don't know whether that is the right savings account for me at the moment. So I feel like I need to actually have some help at this level to help me select the right product for me rather than just all of the different results being returned.

I know it's telling me here, but I feel like I need a bit more guidance, right? And again, with these regular savings, I'm not really sure what the difference is because you're expecting me to read all of this text in order to work that out and even click through to here. And then we're not seeing an Apply button here. So I'm very lost on the website and I'm quite confused and overwhelmed. So I think you need to hold people's hands, maybe a lot more than the website is currently doing.

I also feel like that the call to action to apply for an account, whatever that account is, is pretty buried. And almost you need at the very top level a "join our bank" option, and then it guides you in that way it takes you through a wizard that will say, okay, you want to join us, great.

What kind of accounts do you want? Because somebody might even want multiple accounts. That's not that unusual. So there's that kind of aspect as well. And none of that, none of that is explained on the homepage. There's no big call to action, there's no highlighting of the products they offer. So the homepage is failing to orientate users to what the website's about, it's failing to show the products and services that you're offering, it's failing to show your call to action.

It's all...this website feels like and I feel terrible saying this because somebody's put a lot of work into it. But it seems like it's all fluff and no substance, right? It's fancy design, it's showing off, it's not actually helping me to complete the tasks that I want to complete.

Now, I do want to caveat that, right? I really admire anyone that decides to submit their website for me to review like this because it's very easy from the outside to rip a website apart. And this is actually the fact that this website is like this is probably no reflection on the design team that's worked on it, right? There are all kinds of factors at play when a website is produced, and it's very rarely is ever one person or even a handful of people who are responsible for a website failing.

Often it's a combination of factors. So it may be that they're working with the branding that's been given to them by a branding agency, which works great. You know, these kinds of images might work great on a billboard ad to grab people's attention, but they're not so appropriate on the website. It might be that some senior manager somewhere decided that they wanted to be edgy and different, right?

Stand out from the crowd. So I'm not criticizing any one person, but I feel like this website has gone too far. It's become all about being hip, and trendy, and attracting, you know, the digital natives, and the millennials, and those kinds of people at the cost of fundamental building blocks of usability, right?

I'm all for being different. I'm all for making a design stand out from the crowd and being engaging. But you've got to build in layers, right? You've got to get the fundamentals right first. And I actually wrote an article on this as well. I know I'm mentioning my posts a lot today and I apologize for that. But if you've ever heard of Maslow's hierarchy of needs, actually, I took that principle and applied it to websites and getting this kind of priorities straight.

So we're all familiar with Maslow's hierarchy of needs, but what about on a website, right? So at the moment, this website is right at the top. It's trying to be persuasive, and personal, and relevant to the audience, and you know, all of those kinds of things. But it's failing to be accessible at the moment, its performance is poor, it probably chokes on mobile devices, although I haven't tested that, right?

It's failing to be relevant, right? It's not actually answering or helping me do the tasks that I want to do on this website, right? You know, it's not telling me what I want to know, how to open a current account, what kind of accounts you offer, etc. It's failing to be usable, because there's, you know, the navigation is complicated, and I'm confused by the different products etc.

And each of these build on one another, so if you're operating at this top level, but failing to get these bottom ones in place first, then the website is going to fail. It doesn't matter how persuasive or how personal and engaging it is, if it's not usable, if it's not relevant, and if it's not accessible, it's going to fail.

So how do you fix this website? Well, the first thing I would do if I was in these people's position is I would replace this top section with a very clear statement of who you are and what you offer. Second, I would introduce this navigation so I can at least see these top level of navigation instantly on the page, right?

And I think this is a really important thing that we can learn from this, right? Yeah, this website, to some extent is failing, right? But that doesn't mean you have to throw everything out and start again, okay? Too often, we do that. We go through these boom bust redesign cycles. Instead, what we do is we improve what we've got.

And there are actually quick fixes that can be done to make things better, right? One quick fix, show your navigation. Two quick fix, make sure that this is replaced with a description that this is a bank, make it clear it's a bank, you know, replace these blocks, which I still don't understand what they are with these are the products that we offer, right?

We've got things appearing and disappearing. Search suddenly swings in for no apparent reason when I've gone partway down the page. Take this stuff. I mean, that's a usability nightmare, trying to kind of crane your head round, just make it horizontal. Don't be different for the sake of being different. Just making those small changes would dramatically improve the website.

So a huge thank you to the guys that have put this website up for me to review because, you know, I know I've been a little bit harsh, and I apologize for that. But I think as a result of your willingness to put the website out to the world, it's enabled us to highlight some real key issues that everybody can learn from.

Issues about the need for good performance, issues to make it clear what your website does and what it offers, how to deal with navigation in a way that is accessible and helps orientate people. We've learnt some valuable lessons as well about getting our priorities straight with our website and making sure it's accessible, and usable, and relevant before we try and get clever.

So your willingness to put your design out there has enabled all of us to learn and ultimately, that's what it's about. So thank you so much. Thank you too for watching this video. But until next time, goodbye.

---