Good Work Bankwest – just a few things missing…

Mar
30
2011

Bankwest * –  a local Western Australian centric bank, that has recently redesigned it’s web site. Now the interesting thing with Bankwest is that they have been slowly over time improving their site with each redesign. Making the site more customer focused and less about the bank, more about people.

This most recent redesign seems to have taken that last final leap towards a customer centric service, leaving the stuffy old school bank image behind.

Keeping it Simple.

The main thing that really hits you on the home page (see below) is that the site has been simplified. Making the Search function a key element over the site structure.   Pushing aside the minor items and focusing directly on the major functions people are visiting the site for. In this case focusing on the online banking.

Overall in general terms the site is easy to use.

The site is simple, streamlined back to the core functions, something a good number of other corporate site could do with considering.

Bankwest Site Home Page

Bankwest Home Page March 2011

It’s Not Perfect.

However it’s not all rosy, after a few minutes on the site a good number of issues became apparent.  Here are just a few.

From an accessibility view point Bankwest is failing in its legal obligation, which I find very interesting considering they are displaying an accessibility statement.

For instance the search form could have done with using fieldsets and having a label for the search field.

Looking at the source code is going to make any web professional cry.   It’s a mash of div soup with inline styling and javascript called within the body using old school methods, and not an unobtrusive script in sight.  This is a shame, here you have what is clearly a good interactive design, but it just has a poor implementation.

Bankwest Level Two Page Example of unopened menus

Bankwest second tier page example with closed information boxes March 2011

The site is made up of three tiers or levels of distinct pages styles.

A really good aspect of the site is its responsive design (not fully extended to the tablet level yet).  It fails on the ipad portrait display and rotation back to landscape.  But this really isn’t a major issue.

Also have the core of the navigation is on the left in two tiers, again breaks the corporate mold.

Accessibility and Readability

I have however noted there is no use of ARIA (for accessibility) within the site at all.  Which is a shame as using ARIA roles is really easy to implement.

I also suspect that the design team working for Bankwest are all under 35, as a lot of the visual accessibility issues would have been picked up otherwise.

One major issue is the use of text over image backgrounds. Even with the ghosted colour fills, there is still a problem with the readability of the text.

First off this is going to be hard for anyone over forty to read quickly.  Remember reading quickly is a thing we tend to do on the web.

Also people with any cognitive issues, which includes the aged, are going to have an issue reading these sections as well.

This readability issue gets worse with the smaller header and footer menus. Having a roll over background doesn’t really help if you can’t work out  what the menu item is in the first place.

Consistency and Layout

Their are a few layout issues as well with lack of space for long titles on menus. Again it seems the implementation team wasn’t talking with the user experience team, which is a little sad.

I would be interested in knowing what the usability testing outcomes were for the positioning of the online banking login menu at a lower level.  As it’s a little hard to locate.   I would have recommended the colours and design be consist through out the site. Continuing on from the home page.

Bankwest Level Two Page Example of opened menus

Bankwest second tier page example March 2011

Good with the Bad.

A good aspect is the use of the micro pages revealed via the tabs, this is a good example of streamlining the content down to minimal amount to inform the customer.

However looking at the code, these elements are hidden by a display:none. Making these hidden elements inaccessibility to screen readers. This is a major issue.  A better way would have been to clip or reduce the height of the hidden text areas.

Bankwest Level Two Page Example that is closed

Bankwest second tier page example with automatic menu closure - March 2011

Don’t Use On Hover

Another issue occurs when the screen is reduced in width –  the top menu reduces down to small sidebar.   Now the problem is this sidebar, automatically expands on rolling the cursor over the home button to the left (see above).

Not a problem you think, saves you a mouse click.

Think again, maybe I didn’t want the menu to expand, what if I have shaking hands this will make it very hard for me to use this part of the site.   Again an issue for ageing customers and the like.

Using a click would have been a better alternative.

The Happy Banking Tab.

Minor issues also result from visual confusion, for example the Happy Banking (bottom left) looks like a tab, but appears to be just eye candy.   Makes you feel a little stupid when you go to click on it, and nothing happens.

It turns out this tab expands when you save a product.   Okay that’s good, but how to I close it – using the standard X button.

But  it takes a while to work out how to reopen it!  You use the star at the bottom of the screen – yes it did take me a while to see that.

This functionality should have had two or three ways to achieve this open / closing of the hidden region, for instance using the tab itself.

Bankwest Level Three Page Example

Bankwest third tier page example March 2011

The Lower Pages.

The final tier of pages relate to the product detail pages, these are well presented with only a few minor issues, in general the design is good example of getting the lower level content right, especially if you consider these pages are the final sell of the products to the customer.

Now the star of the product pages is the credit card accounts page.  You can compare and build your own comparison matrix dynamically, this is a wonderful little tool and shows just the type of thing that is possible.

Give Bankwest some Feedback.

Now this is just a quick review, but you can also provide Bankwest feedback on their new site too.

So it you think it’s cool or trash, go tell them.   Big ups for Bankwest being open and taking on board the customers views.

Now I’m not expecting Bankwest to even read this post,  be nice if the relevant people did; as this information has been provided to help them improve.  Consider this a little free professional feedback from someone that works in the area of user experience, interface design and accessibility on a daily basis.

Oh and Bankwest if you want to discuss this with me, you  can contact me at radharc.

* – Disclaimer I am a Bankwest customer, however in many ways that makes me very critical of anything Bankwest does.

Tags: , , , , , , , ,

3 comments

  1. Hi Gary,

    Fantastic article. I’m glad to see that you like the site and you’ve definitely raised some valid comments. Hopefully I can clear up a few of your concerns.

    Form field labels:
    From what I understand with form fields a label isn’t required if the field has a title attribute on it. In fact, it is recommended to use a title attribute over a label if the label is just going to be positioned offscreen anyway.

    Inline JavaScript/CSS:
    As with any huge enterprise scale front-end implementation, there will be some inline javascript/styles based on what comes out of the WYSIWYG editors and default CMS implementations. The majority of JavaScript and CSS on the BankWest site is actually in external files and is unobtrusive.

    Readability above images:
    I do agree with your concerns about the readability of some of the menus on the large images and it really depends on the individual image as to how much of an issue this can be. With clever choice of images this wouldn’t be as much of a concern.

    Content Layout:
    Regarding the layout of content, I think it’s less about the communication between UX and Implementation team, and more about ensuring the content and headings are meaningful and fit the allocated area.

    Login panel:
    With the login pane, 80-90% of people who visit the homepage login directly without looking at anything else, so a very prominent login box is a much nicer user experience, and it’s giving users exactly what they are looking for. On the subsequent pages, there is much less focus on logging in, and more about the content, so the change in design to make it less prominent is deliberate.

    Collapsed Left Navigation:
    With the left menu being collapsed, only 25% of users would see this. This is because stats we have seen recently indicate that 75% of people on the web are using 1280px or wider screens (largely thanks to it being the default width of laptops and 19″ monitors now). Also, the rollover was tested with a large number of users of all ages, and feedback was unanimously for a rollover rather than a click, as it wasn’t expected

    Footer tab:
    I agree that the decorative tab in the footer can be a little confusing, which is why the chevron points to the link in the footer when the tray is open.

    Comparison Tool:
    Glad you like it, its definitely something that we’re proud of, and something I’ve wanted to see on a banking website for a long time.

    Hopefully that addresses some of your comments, and I hope you keep enjoying the site.

    Damian

  2. Hi Damian

    Thanks for stopping by and leaving the detailed comment. Sharing the details of your testing the the logic behind some of the design is always helpful, especially to your peers.

    It’s interesting with the footer tab, I didn’t even notice the chevron, mind you in my experience people never use a system the why you intended. That’s why I have found that have two or three ways to achieve the same thing is a good idea.

    On locking people to a supposed monitor size, this is assuming you expect people to be only using laptop or desktop computer. Things are changing in this area. People are accessing services from there mobile devices from smart phones to tablets. The age of the desktop is dying.

    The readability aspect is bad.. very bad in fact. This is an issue I would be looking at. To the point that you can’t find information that is there. Now if Bankwest is going after an under 35 age group then this is fine. But I suspect they don’t want to segment their audience at all. I don’ think even clever use of the right pics will help in the long term.

  3. Gary,

    My comments about the new Bankwest website are much less analytical than yours. I freely admit that I’m making them on quick “first impressions” basis.

    The first time I saw the site, the overwhelming impact was of the bright yellow smiley face costume in the photo on the Home page. In fact, quite seriously, it took me a few moments to figure out what I was looking at. My next thought was “What has this got to do with banking?”.

    It looks like the Home page of an advertising agency website and you will understand that I do not mean that as a compliment.

    Finally (probably only a matter of seconds, but on the web that seems like forever) I realised there was a navigation menu on the left-hand side of the screen. Nice and clean and simple, so I clicked on “personal” and there was another great big grinning sunflower/smiley face thing occupying valuable web page real estate where I’d expect to see useful information.

    Likewise, clicking on “about us” produces a lovely sunset picture of the Swan River, which tells me nothing about Bankwest. Oh, wait a minute, there are some links to “welcome to bankwest”, “in the community” etc., way over on the left again.

    How hard would it be to put the elegantly simple navigation menu for the top-level pages where people can see it quickly and easily? How many of the bank’s customers will be irritated by those huge feel good photographs that contribute nothing towards helping them perform tasks or find information?

    Putting white text over light backgrounds is just nuts, even with the colour fills.

    I do find it less confronting on my laptop screen than on the twin 22” monitors I use at work. On the smaller screen the left-hand nav becomes relatively larger. With the twin monitors, I find my eye falls more naturally on the left-hand navigation when the website is on the left-hand monitor.

    James

Comments are now closed, move along, nothing to see here.