Fostering even a moderate level of UX design in any team or project can at times be an impossible task.

Often there are things that we do that can stifle and sometimes even oppose UX techniques we are trying to support.

In a way, it’s as if we are by accident forcing UX people to leave or just warp back into simple pixel pushing designers or worse photoshop operators.

1. No Contact with Users

   It has been said that the opinion of a UX designer doesn’t count at all, it is the opinion of the users that are the most important element of any design.

   Not allowing contact with any users really doesn’t help in the research or evaluation process.   The entire knowledge which the design is based just becomes second hand with all the issues that are associated with this.

   Any UX design has to have users engagement, often as early as possible, in fact the more the merrier.   Stop doing this and well its not really user focused, more expert or self design.  Which is okay, however its not why a UX designer is hanging around.

2. No Collaboration

   A good deal of UX professionals tend to be very sociable people.  We often joke a good way to send us over the edge is to force us to work alone with no access to our peers.

   UX people need to collaborate, talk over concepts and ideas, if only to just confirm issues.   Working in isolation will stunt their skills and abilities over time.

   Even just being forced into a strict communication structure can be an issue, as you tend not to be allowed to discuss and talk over issues that may arise.

   It’s a little like the old “throw the design” over the wall approach.  Which sadly is still alive and well.

3. No Critiquing of Design

   The ability of have any design or idea critiqued fairly, with understanding is a great tool for the advancement of a design.

   Now I’m not talking about the usual management style of, “I don’t like that”, or “That isn’t what I’m looking for.”

   The critique needs to explain why a design is good or bad, provide evidence, or even alternatives to progress the design.   Force a UX person into the situation where they are just given no direction or not allowed to improve by having their design examined and suggestions made to improve the design. Then they are just going to stagnate and get bored.

   Don’t expect someone who is bored to stick around.

4. No Space or Time to Think

   Creativity is not about group thinking or brainstorming.

   Sure these things are good for getting some ideas on the table.

   However the real creative work happens when someone is alone, focusing on the problems, the design, the issues and playing with the outcome, examining the alternatives.

   It is then at this time that someone is designing at their best, although to the untrained eye they may appear non productive.  This is when those crazy ideas are found.  To do this they need the time and space to focus to be alone, not easy in the cubical city that modern management loves so much.

   Our obsession with having people appear productive is just plain cost ineffective.

   Having people doing mindless tasks just because we need them to appear to fill their hours of the work day is just an inefficient use of their resources.  It’s an old school industrial workhouse ethic that we just need to loose.

5. No Time to Iterate

   There is nothing worse than having the first generation of an idea or interface go into production.

   Particularly when you know that will a little more time, sometimes just a few hours, the interface could have been iterated and improved on.

   However the budgeted time is just too short so the first round of concepts becomes the final one.   I have seen this happen time and time again.  It really is very sad and everyone (except the client) knows it’s not their best work.

   In the design world being able to fix issues, correct assumptions and design mistakes is required to find the perfect design.   Design isn’t a precision art where the right interface can be found by following a formula.  It takes iterations, time to craft the perfect UI.  We have to allow for this time.

6. No Failure Allowed

   Design is very much about failure, especially UX or product based design, as you really want to fail as many times as you can and improve things as you go.   All those failures are just minor issues compared to what would happen if they were encountered after a product was released.

   So we have to find them and fail a little in the design process.  This is normal.

   It’s often not the fault of the designer as to why the product or interface fails.   After all we can’t expect every person to be masters at their craft and be able to see perfectly into the minds of the audience.

   Personalisation of failure, instead of taking it back to the fault of the design and looking for a solution, is the outcome.  We know it’s wrong, but still it continues, make mistakes in mockups or draft wireframes just isn’t allowed.

7. No Designing

   If you ‘re employing a designer, be it on contract, as a client, or in-house, the best thing you can do is let them design.

   After all isn’t that what you are paying them for.

   Just driving the design and it’s direction from a management stand point will generally get you poor results.   Think about it are you allowing people to really design or are you dictating the design to them and they are just software operators.

   Designers usually love constrains and a tricky problem, but if you restrict the playing field too much and they can’t  design, you may find they have just decided to move on.

So that’s my short list, a few things to consider, I’m sure we have all worked in those environments or unknowingly caused them.

If you have any I missed, just pop them below.

Times have just got to change. I’m a little sick of living in a world that is regionalise into sales and licencing zones for no real reason besides to restrict sales due to some arcane money grubbing corporate policy.

What makes matters worse is people building experiences that highlight this and rub our face in it time and time again!

I regularly buy music online from various places, I tend to favour non DRM music, or if I can buy directly from the artist which is even better – I don’t like iTunes much at all.

Now eMusic, which I use, have recently redesigned and tweaked their user interface  towards a very strongly  recommendation engine based sales model.  Now I have no issue with this at all, in fact I applaud it as a welcome change, as it’s always good to discover new music.

It’s Very Simple

After you have signed in, eMusic knows your country of residency as it’s in your billing profile, they also know your likes, dislikes and  previous purchases.  Which is good as all this leads to a better browsing and recommendation experience.

Or so you would think.

Below is the home page of the eMusic site after I signed in.   It shows you a selection of “New and Noteworthy” albums.

Now seeing as eMusic knows so much about me, I would expect the selection to be tailored towards my tastes; and yes it is, at least a few of the albums on the home page are of interest.

However despite knowing so much about me, eMusic goes and destroys the entire experience by not allowing me to purchase ANY of the albums recommended.   Due to licensing restrictions in Australia.

Here I am, wanting to purchase an album, but I can’t.   To make matters worse eMusic decides to wave a large flag in my face, screaming, “HA HA you can’t buy this”…

Changing the Approach

Now what would it have taken to exclude the albums from being recommended.  Emusic you already know they are “Not Available” due to my being in Australia, as we can clearly see this on the screen (above).

So just exclude the items “Not Available” from the query, really it’s not that hard.  Just show me the “Available” high rated or new albums.

A recommendation is a waste of time if I can’t purchase it.

Maybe eMusic just wants me to move a few clicks away and download the music for free.

You know I try and support and do the right thing by the musicians, but sometimes the paper pushers just get in the way and destroy the experience.

The model and experience is broken, they need to change.

I don’t mind completing surveys, I even do those phone surveys.  Having working with several different marketing teams and conducted countless UX information gathering surveys over the years.  I can understand the difficulties of getting a good response from people. So I don’t mind taking the time to complete the odd survey.

Still I have to wonder sometimes if the teams behind the surveys are really understanding their audience that is completing the survey in the first place.

A few weeks back our fence was blown over in a storm.   We put in an insurance claim, it was processed, and we got the fence repaired.  No issue, good service all round.

Then I get an email request to complete a customer satisfaction survey from my insurance company.

What is Dissatisfied

The survey seems very standard. Besides being inaccessible in parts if you only use a keyboard.

All was good until we (partner and I) complete a question that asked us to rate the service from 1-10 (10 being outstanding).  We gave them a 7.   The survey responds asking why we were dissatisfied.  We weren’t.  We just rated 7/10.   Not perfect, but not dissatisfied by our ranking.   But the survey consider the rating of 7/10 as dissatisfied as it changed the questioning to suit.

This assumption, that if it’s not a 9 or 10 then the customer must be displeased, doesn’t in anyway take into account the personalised rating scale of the customer.   We may never give a score of 10 or 1.  We could be very happy with a score of 7/10, as we were.

Lesson to be learnt here is that you can’t assume that a 7/10 or even 6/1o indicates a negative emotion or dissatisfaction from the customer.   This type of survey  gleans towards a negative bias or an over inflated towards the extreme positive.

Now that was a minor issue compared to the next one.

Doing the Likert Scale

The presentation of a Likert scale question is never easy.  A UX professionals we are always looking for a new way to present a question or interface without promoting any bias.

However when we were presented with the following question.  We both starred at the screen for a good minute before we could jointly work out what was required.

What you are meant to do, and it took us a few goes to work this out, is drag the card (on the left) to the response boxes (on the right) and drop them there.  They then appear as a box with text in within the response area.

There are a number of issue with this interaction:

• It’s very different to the traditional layout, it was completely outside what we were expecting.
• Initially you can read the page question as “How would you rate your experience in terms of:” Answer – “Extremely, Very, Reasonably…”
• You may ignore the small help text “Please drag each item to a category”
• You may ignore that card completely
• There is no indication as to what an “item is” or what a  ”category is”, they mean the card or questions and the possible answers (on the right).
• The process of reviewing or moving categories isn’t as smooth as it could be.
• There is bias to dragging the cards (items) to the responses (categories) at the top of the page.
• It’s only usable with a pointing device.
• I just don’t even want to think about the accessibility of this.
• I still don’t know what the “+” buttons on the responses do.

Yes it’s fine when you workout what to do. But most people aren’t they concerned about the survey and are likely to leave if the question layout breaks a mental model.

Overall it just seems to be a fancy “cool” javascript insert, that frankly should have been killed off or tweaked to make it usable.

This is a classic example of a new interaction technique not being the best delivery method.  Sometimes the cool tech is just not the best way.

Now the concept is still valid, but it just needs a little more refinement, and maybe a little proper user testing and it would be an innovative interface.

Still sometimes I do wonder if these insurance firms employ anyone to consider the user experience of their customers.

I get asked this a lot. “What are the best UX books to read?”

In true UX tradition my answer is depends.

It depends on your experience as a UX practitioner, your experience with scientific research methods, psychology, interaction design, user interface design, product or visual design and your level of communication skills.

Still having a list of starter books would be handy.

Yeah sure others have their lists from the likes of Will Evans, Paul Seys and Nick Finck however some of the books on these are either too complex (for someone new to UX) or take way to long to get to the point. Bit like this post.

So here is a list of books I would pick as the must read UX books.

The UX Book List

• The Elements of User Experience: User-Centered Design for the Web by Jesse James Garrett
• A Project Guide to UX: For user experience designers in the field or in the making by Russ Unger and Carolyn Chandler
• Undercover User Experience Design by Cennydd Bowle, James Box
• Thoughts on Interaction Design by Jon Kolko
• Designing the Obvious: A Common Sense Approach to Web Application Design by Robert Hoekman Jr.
• The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity by Alan Cooper
• A Practical Guide to Information Architecture by Donna Spencer
• 100 Things Every Designer Needs to Know About People: What Makes Them Tick?  by Susan Weinschenk
• Simple and Usable Web, Mobile, and Interaction Design by Giles Colborne
• Measuring User Experience by Thomas Tullis, William Albert
• Understanding Comics: The Invisible Art  by Scott McCloud
• Business Model Generation by Alexander Osterwalder

More Specific Methods and Techniques Tuning

• Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests by Jeffrey Rubin, Dana Chisnell
• Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules by Jeff Johnson
• Web Form Design by Luke Wroblewski
• Mental Models: Aligning Design Strategy with Human Behavior by Indy Young
• Card Sorting: Design Usable Categories by Donna Spencer
• Prototyping: A Practitioners Guide to Prototyping by Todd Zaki Warfel
• Search Patterns: Design for Discovery by Peter Morville, Jeffery Callender
• Communicating Design: Developing Web Site Documentation for Design and Planning by Dan Brown
• The Essential Persona Lifecycle: Your Guide to Building and Using Personas  by John Pruitt , Tamara Adlin
• Information Architecture for the World Wide Web  by Louis Rosenfel, Peter Morville
• Designing Social Interfaces by Christian Crumlish
• Tales of the Field: On Writing Ethnography by John Van Maanen
• Remote Research by Nate Bolt,  Tony Tulathimutte
• Content Strategy for the Web by Kristina Halvorson
• Storytelling for User Experience by Whitney Quesenbery, Kevin Brooks

Let’s Get a Lot Deeper and Serious

• The Myths of Innovation by Scott Berkun
• The Design of Everyday Things by Don Norman
• Heuristics and Biases by Thomas Gilovich
• Design Meets Disability by Graham Pullin
• The Accidental Taxonomist by Heather Hedden
• Doing Anthropology in Consumer Research by Patricia L. Sunderland, Rita M. Denny
• How the Mind Works by Steven Pinker
• The Back of the Napkin: Solving Problems and Selling Ideas with Pictures by Dan Roam
• Predictably Irrational: The Hidden Forces That Shape Our Decisions by Dan Ariely
• Living with Complexity by Don Norman

So what are your killer must have UX books, I’m sure they are few that are different to the list above.

I was killing time, waiting, doing the Dad’s Taxi thing. While I waited, I was catching up on Twitter, on my phone, plus reading the various articles from my stream.

You know what is becoming a real pain point.

Non responsive designed web sites. The ones that don’t scale well on mobile devices, sadly they are still the norm.

Especially news and information sites.

Why is it the information on these sites being the major selling point and yet it seems to be very hard to access on a mobile device. it’s not like mobile is new.

It’s got to the point when I follow a link to one of these sites and it becomes to hard to read I just abandon the article.

Change is Required

Now in the early days of the mobile web, a few years back, I would put up with this.

Sure I could get reasonable rendering of a page. But you know its just too small to read effectively.

So you zoom in and play the silly game of rescale the page just right so you can see the content area filling the screen. Being careful not to touch those damn banner ads.

Well I’m sick of this!

I just want to get on the site read the information and go. Not spend half my time realigning the page so I can start reading the site. How hard can it be, we have the technology.

After all I’m the one in control here. If your site is just making to too hard to read on a mobile then why should I bothered staying.

Interconnectivity is the Key, not the app

The key here is being able to interconnect and link information sources in a way than I can browse a stream of information, conversation and the like that I am interested in and can read with ease.

Not articles that has been selected by some marketing focused editor on some mobile app.

Just like the social network is about me. So the information sources on the web need to be about me.

Yet people are in love with apps. They are the savior of the universe, or so we are being told. This has refocused media outlets to the mobile app space, instead of first looking at their web sites.

Present the only way to truly interconnect information is via the humble hyper link, the backbone of the web, with a little RSS thrown in for good measure. Not a handful of mobile apps.

Mobile Apps just fail in this area as you can’t really, at present, link information sources between them. Unless they act as an aggregator like FlipBoard.

Given this wouldn’t the web be a better delivery medium for information sites than the silo of an app.

I Want My Web, My Way, Now.

There you go media, news and information sites you are on notice.

Your apps are a waste of time, they are just dead silos of information. They are not an excuse to not format your web sites for the mobile web.

You need to go back and stop playing in the app sandbox and get into the wilds and fix your web sites, make them usable, readable on my mobile device.

Or I’m just going to look elsewhere.

I do wonder how the mainstream deals with this issue.

As a web professional and an avocate for inclusive design (web accessibility) I have often wondered why organisations are so obsessed with using PDF documents on web sites as opposed to HTML based documents.

After all PDF documents don’t do accessibility as well as HTML pages do.

Given the ease of use of most modern CMS you would consider web page creation and editing would be as easy as authoring a word document.

Now I have a good idea why my clients use PDFs over HTML, especially government agencies, but I don’t have the community wide picture.

So I asked Twitter – “Why do you use PDF over HTML?”

I got a bit of a response.  Now this survey and its (200) responses aren’t that scientific, they are multiple tiered and are as expected, full of statistical analysis holes. Still the results do give us a glimpse as to why people use PDFs.

Now there is no primary reason as to why, but more a mesh of several supporting rationals.  They are in order of preference:

1. Preserving the Print Format

   The requirement to have the onscreen visuals appear the same as the print version was clearly the leading reason. Out stripping others by two to one.

   This is really understandable when you are dealing with documents having a complex print layout. It seems CSS print styles just don’t cut it. To the point that sometimes having a different style layout for print, for a web page, can be a bit of negative user experience (however that’s another topic).

   Documents that have been through a visual design process of a print production team seem prone to this requirement. Yes the content is the primary focus here,  but sometimes the way it’s presented can be just as important in communicating the message.

2. Encapsulated Format

   Being able to save and transfer a document across platforms was important as well.

   People are looking for a medium that doesn’t require complex software, that will maintain the layout, images, typeface and all the content as one encapsulated package.

   Try saving a web page for use later, it just fails in so many ways, and a MS-Word document – well that needs MS-Office for the most part.

   PDF is the only one left standing as an encapsulated package, it’s also cheap to read and produce as well.  Issue is it’s not that portable in reality – take the issues displaying or saving a PDF viewed on the web using a mobile device.

3. Easier to Publish

   Easy of publication is another core reason. To creative a PDF is often just a simple process of saving a document.

   This is easy and within an existing business workflow.  So it’s understandable that it appeals to the vast majority of people.

   To publish it to a web site you just create the link in the CMS, and upload the document. Set and forget, no need to worry about the layout working or not.

   Contrast this with the list of issues using a CMS editor to create a web page.

   You usually create the document in MS-Word and have to cut and paste it into the CMS editor, this causes layout issues. Or you have to use some weird keyboard/process gymnastics to get the layout reproduced right or worse have all the formatting disappear and have to reapply the lot.

   Then you have to put the images in separately, scaled down for the web, and allow for those accessibility tags.  After all this there still maybe layout issues with the page design.    It’s just a nightmare.

   Clearly the web publishing process has a long way to go.   Maybe this is an area some of my fellow UX colleagues could look into?

4. Existing Hardcopy Documents

   Duplication of existing hardcopy documents is also another core reason.

   When you have an existing hardcopy document, you really are only duplicating the distribution and availability of the document to a web medium.  You are just presenting the document to a wider audience that those that can collect it from your offices.

   The use of PDF with its layout preservation and encapsulated package is the perfect solution for hardcopy duplication.

   In this case people also stated that they tended to only used PDF for duplication exisiting hardcopy documents.

5. Other Reasons

   The following are minor reasons people stated for use of PDF documents over web pages.

   • Duplicate HTML Content

     A low percentage of people indicated they presented everything as web pages, but also allowed for user driven server side generation of PDF documents as required. Or they just  duplicated all the static PDF information available as web pages. Use of both formats was equally weighted in this case.

   • Providing More Detail

     Others, using the semantic structure of the web, presented summary information on topics at the high level of a site as web pages moving down to specific summaries on mid level web pages and PDFs as the final low level detailed pages.  This is a very typical government model of information communication.

     I suspect while  this may not be prefect, it harks back to having a secondary reasoning for the ease of publication of the detailed information.

   • Interactive Forms

     Despite Adobe pushing PDF forms only a very small number of people even referenced using PDF forms. Sure normal hardcopy form duplication was mentioned. But the use of interactive PDF forms was left to a minority.

   • Low Usage Document

     Just like the use of PDFs for detail pages, documents with a low usage also where seen as more cost effective delivered as PDFs.

   • Web pages not a formal document

     This was a very interesting comment.

     It seems that the very volatile nature of the web page doesn’t make it a highly considered  paper replacement.

     Where as PDF’s, which are just as volatile, maybe because they come from a process close to the formal document are seen as more formal, stable.

     Interesting perception.

   • DRM / Security

     Contray to what publishers and the legal department may tell you;  the use of PDFs to enforce DRM or any type of security is very low on the reasons to use PDFs.   In fact I would presume the usage of security features of  PDF documents is generally low . Which in a way is a good thing – accessibility wise.

This rounds off the reasons to use PDFs over web pages for content delivery.  Still I hope that this continued PDF madness does ease up a little.

However I fear we will not be seeing this real soon, until web publication and print styles become as easy and effective as PDFs.

If you work with a client long term or are part of their internal team chances are you will see a number of redesigns of a site.

Over the years I have come to question why we constantly redesign things every few years.  It’s usually a change in directional branding, a  facelift.  As if a website is just a fashion accessory that must be changed as the trend of the season passes by.

Problem is to often I see the same mistakes being made time and time again.   The same old issues reoccur, as the central cause; lack of audience conversation and engagement is ignored.

All the corporate knowledge of one design is often thrown away as the new design comes in.   Resources are wasted as we rebuild and redesign the same old wheel, just this time it will a green with a pink flavour.

Business Fashion Take

Now I can understand why sometimes you need to seriously redesign the visual elements of a site:

• It gives a clear break from the mistakes of the past
• A distinct rebranding or look allows for a change in attitude
• Modernisation of the look and feel to match the latest trends
• Allowing for a reworking of a site to make it more flexible to future changes
• Take advantage of the latest technology
• Allow for integration of secondary service like social media
• Take stock and inventory of the site and review it’s direction

However just consider the audience for a moment.

Audiences Fashion Take

A good deal of the time the audience and users of a site are not on the same page as the business:

• Major changes are a pain, you can’t find anything
• Confusion over changed branding
• Apprehension over use of new technology
• Fear of breaking elements of the site
• Loss of previously saved information

The Alternative – Transforming Design

What we need is an alternative to the endless and costly redesign process.

A redesign should be realigning the site back to the core values of the business and requirements of the audience.    In the old  days of web design this would mean a complete redesign.

We now have “easy to use” template based CMS, use of rapid design frameworks for responsive design with a solid but very flexible multiple platform interface.   This gives us a lot of freedom and the ability to make wide ranging minor changes as we go.

Sure you can still plan and design the concepts for a redesign in one go.

But the key here is to roll them out in stages or as a slow piecemeal redesign of elements of the site.  Any design needs to be adaptable, flexible and agile to the responses.

Combine these minor deisgn changes with A/B and preference testing and you can very easily determine which direction is the better in terms of usability.

This will result in a slow change of a site overtime, they can be fully qualified as soon as they occur.   You can expect that over a year a site will morph from one design to another.

A kind of gradual morphing, transformation.  A transforming design.

The Advantages

There are distinct advantages to using a transforming design process:

• The budget is spread over a greater time period,
• There is a easy acceptance from the users,
• Rapid and responsive to issues as they arise,
• Rebranding can be rolled in slowly and morphed to a new direct as required,
• Sliding integration of older marketing campaigns with new ones.

Something to consider using transforming design, instead of the usually slash and burn redesign.

When you use an interface it’s the little things that help make it either a pain or just outstanding.

Sadly, too often we have to put up with the bad interfaces.

In light of this I will from time to time be producing a few articles focusing on specifics of bad interface design and implementation practices.

First one off the ranks is date fields and calendar pickers.

This interface element never really seems to work the way you want it to.  Making the overall experience very frustrating.

Date Format

To often you will see the required format for a date field indicated (dd/mm/yyyy).

Now this is good in that you now know which way to put the day and the month, but that’s about it.

What if you want to put in a date as – 1/5/11 or maybe 1.05.11 or 1-12-2011.

All of these are valid notations for a date.  But for a poorly designed website they produce an error message.

How easy would it be for a developer to just allow for these other formats.

Or better yet allow for a freeform written date as well like - 1st May 2011, Nov 2 2011, or 21 December 2011.

Again a little more work on the programming side of things,  but the ease of use would be outstanding.

Commonwealth bank online form showing restrictive date format use.

Restricting the Input

If you really must restrict the input then take a look at the airline industry.  They will often use select lists of the possible dates, this makes it easy to pick the date from the list without any confusion, still not as fast as typing in the date however.

An example of restricting the date field format without pain.

Forced use of a Calendar Picker

Now I can understand that calendar pickers are great idea when you aren’t sure of the date in a relational sense.

However there is nothing worse than being forced to use a calendar picker to fill in a field, especially when you know how to type in the date, you even know the date in question.

Yet it’s assumed you need assistance to find the date.  This is like escorting an able bodied person across the road.

It’s a very bad idea to treat your customer as idiots.

Activation Buttons for Calendar Pickers

The way we active a calendar picker needs to be obvious.  However too often the way they are designed is with no consideration for the general community.

The activation buttons can be way too small, obscure or just make us unsure what they do.  As is the case in the calendar picker from the Public Sector Commission.

PSC calendar picker launch button, indicated by arrow, very obscure as to what they all do.

Launch Window for Calendar Pickers

It’s very important a calendar picker is launched  nearby to the date field it will populate.

From an accessibility view point it is extremely critical a new window is NOT launched for a calendar picker.  As this will disorientate the screen reader or maybe invisible (off screen) for a screen enlargers.

However it seems time and time again we are seeing calendar pickers launch in new windows, often over on the other side of our screens.  Often to get lost below the windows we have open.

In this modern age of web development why can’t a modal box just appear within a page in the right place.

Calendar pickers, shouldn't use a new window.

Clear Large Buttons on Calendar Picker

When you use a calendar picker you want it to be very clear what those arrows on the picker are for.  Do they move the month back and forwards a month, year or a quarter.  If there are multiple buttons what do they all do.  The intent of the buttons needs to be very clear.

Never assume for example that you know the two arrows together means back/forwards a year .

Still even if you a have the buttons labeled well, you need to ensure they aren’t too small to use.    Sure the 20somethings building the site might be able to use them, but can the site’s audience.

Use of larger buttons and dates on the calendars  would make it easier for the ageing members of the community to use the calendar picker too.   The example below is just a little too small.

Example of good navigation, however the buttons are a little small.

Smart Logic

Any calendar picker should follow the business logic of the application or form it’s supporting.

For example if you are dealing with a reporting function you generally don’t need to be able to navigate future dates.   If there is a restriction to 60 days in the past, then this needs to be implemented into the calendar picker as well.

A little smart logic can go an long way.  For example of you are using a  start and end date, once the start date has been picked, restrict the end date to being after the start date.

Yes all this seems logical, pity it’s not being done.

Example form for report generation, but future end date is possible

The Key to it All

To often people are being forced into series of rules or procedures that just go against the way they normally think and operate.

This should not be happening. We aren’t operating in the age of 3270 green screen terminals and mainframes. The interface should not be restricted.

The reason for all these problems are happening comes down to:

• Lack of any interaction design at the beginning of the design process.
• Lack of thinking through the way real people are going to use the system.
• Lack of real users (not developers) testing a system.
• Lazy development, taking the quick easy way to build an interface.
• Designing and building for easy development, not easy use.

So next time you are implementing or designing  a calendar picker or date fields, take a moment and think about how people will use it, not the way you want it to be used.

There seems to be a trend of late to take the minimialisation of interactive design to the extreme. Now I’m all or minimialisation and making user interfaces simipler.

You know making an interface streamlined to just the solid functionality of the interaction and no more.

I have been noticing a very frightening tread. In an effort to make things more usable, we are designing interfaces without the very functions used to support usability in the first place.

It’s a bit like stripping back a breakfast of toast and coffee to just a single shot, in a paper cup and plain crustless white bread. Yes it’s eatible, but where are little extras which make it a plesant experience.

Sadly with the removal of usability functionality the component of the accessibility quotient of a design also takes a very large if not fatal hit.

Streamlining an interface isn’t a simple task of just removing a few things, it’s a pain staking process of failure after failure as we tweak the interface, slowly taking it back to its core functionality without removing usability.

Even the best interface and interaction designs had a hard time doing this.   So why are just removing things with out any thorough.

Some examples of critically removed elements would be:

• Any helper prompts from a form.
• Any indicators for which feids are required, especailly on complex forms.
• Field lables (names) themselves, especially on the username password pairs for login feilds.
• Keyboard highlighting on form fields when navigating with a keyboard.
• Grouping of fields on complex forms into like chunks, even if progressive disclosure is used.
• Completely removing all word based labeling from buttons, leaving only confusing iconography.

Why is this happening. Well I can’t say first hand why, but I can damn well draw some conclusions.

1. Deleting Usability

   The visual design is compromising the usability. You know all those extra elements (as mentioned above) well they can often look ugly and clutter a page, so from a design view they just need to go, or be hidden. Afterall we want to make things simple and neat.

2. Following the Leaders

   There is a misguided following of the interactive design and usability principles. Too often younger or inexperienced designers will follow the trends that they see on mass, without real regard or thinking of the implications of what they are doing. They just see some wanky “big name” designer doing it, so it must be right. Often the truth is it isn’t at all.

3. Misunderstanding

   Yes they may have read a few blog posts on minimialisation or discussed it second hand with a few other misguided designers. But overall what they should be doing is spending a little time on some professional development, read some of the authorittive some books on the subject, attend a few UX conferences. Get to understand the topic in full.  Practice it, test the outcome, fail, fail, fail and learn from the failure.

4. Testing

   Test with real people. Yes I know it’s obvious. however testing with the auidence of the interaction you have designed for will reveal very quickly the issues. Of course the testing has to be conducted correctly without any bias.  Script testing will not cut it at all.

5. Only Good Reviews

   To offen they will look towards “their peers” on some designy forum, which will just back slap them and tell them they are awesome. Being told something is great, is well nice. But frankly in order to become a better designer you need to know what is wrong as well as what is right. You need to get a fair review of your work. This is the fault of the communtiy and a core of various backslapping designers.

In a way these designs aren’t bad. Just lacking in understanding of what those small details are they have stripped away.

They have their heart in the right place, but in reality it’s as if they where desiging sites with CSS with an old school table layout. They are just lacking the bigger picture.

So if you are in this school or think you might be.  I’m not having a personal go at you.   As a designer you need to leave your ego at the door and think only for the betterment of the design.

All I want you to do is stop and think.

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 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 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 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 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 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.