This is the presentation given on Wednesday 24th June 2009 to the Perth Branch of the Silverlight Developer and Designer Network. The slidedeck isn’t going to make much sense without the transcript below. Just be aware of that if you are slide deck with out following with this transcripts.
Let’s ground this a little and get real before we even start.
To often we design web sites and applications with a limited amount of information and specifications as to what is really is required. It’s a fact. Let’s not stand around and pretend otherwise.
Designing and developing it this type of environment can be hell. Sure I can talk about how to overcome this issue and pass on a few techniques that could assist you.
But what happens when you have got almost all the information you need and things still go wrong. What then – what are the solutions?
Let’s step back away from the web and desktop applications for a moment and consider an average couple, Simon and Maria. They are a loving young 20 somethings. They both have jobs that they don’t really aspire to. Yet still they battle on to save for those overseas trips and such. And just like you and me they get to experience life and all around them, the ups and downs.
Maria and Simon have learnt, just like you and me, that buttons in the real world go off and on. They turn on the stereo. Stop things dead and sometimes they just silence the screaming.
So why does it have to be any different on the web. Why do they have to put up with buttons that just don’t look like buttons at all. You know the ones. They are just impossible to even find out that they are buttons visually. And when you do find out, well you just aren’t that sure what they are going to do. You are always thinking they could – delete the page, make you start over or destroy the world. You are just never that sure.
Really a button should “look” like a button and be labeled as such. Not some arty thing that no one can’t find or even work how they work. Applications and the Web are functional things they have to work or they are just waste of space. Crazy arse buttons are for an art gallery.
However we break our own rules here too. Even if we have buttons that look like buttons as they should. With the maturity of the web the previous experience of people like Simon and Maria really needs to be considered. Just like in the real world they have learnt from childhood what a button is and how to use it. We have learn that the power switch or light switch (which is usually unlabeled) turns on a appliance on the plug socket or the light in a room. Previous learned experience has taught us this.
Same with the web we now have expected instances of button types and iconography that have been ingrained into our common web cultural knowledge, as to have expected outcomes. For Example (and there are many more):
- RSS feed
- Shopping Cart
- Navigational Directional Arrows
In all these cases we know what to expect from the button type or icon. Yes they don’t look like buttons, but the symbolism behind the message works for us.
So in this case we break a few eggs… Still a button should be a button. But the omelets form the eggs does taste nice.
Tools, Functionality and Bears
Back to Simon and Maria. They both use multifunctional tools like the Leatherman. Nice handing tool, bit like a modern Swiss army knife. Has all sorts of gadgets and things hanging of it that are designed for various functions. Such things as a knife, a pair of pliers, screwdriver, nail clippers, and maybe even a coffee maker.
Still besides the great multifunctional of the Leatherman, Simon and Maria still use single functional tools such as knives.
I can understand this, knives are cool. You can cut bread with a knife. Cutting bread with Leatherman is possible, but hey it’s just too hard. A knife makes a single clean cut.
A knife is also really handy when you are faced with the odd suburban random Bear attack. You know the story – you are walking down the street and suddenly in board daylight and this massive Bear out of nowhere attacks you. If you have your trusty kitchen knife you are fine. But handling a Bear with a Leatherman – I don’t think so.
The multifunction tool like the Leatherman can cut things sure, but not that well. Also it’s not that good for locks or fences is it.
On the other hand a pair of bolt cutters is ideal for the odd fence and padlock cutting. It’s also a great accessory for late night “shopping”.
So despite the great multifunctional components of Leatherman, still Simon and Maria prefer to use a Single function tool like a knife. A knife just does the one single job, but it does it so well.
So why do we insist on having these multiple function web sites and applications that are just not doing one core thing well at all. They are constantly presenting us with various different functions all over the shop. Never really doing anything that well, remaining forever average.
Is it that we enjoy having a world of mediocrity where things are always dull and the same. Are we that budget aware that average, a score of C+ is the best we can be bothered with.
Why don’t we have single function applications? I know on the web with the use of APIs this is starting to happen. But still in Intranets and the like all I see are these massive over weight corporate spaghetti code fest. What gives?
Applications that do the job well and just interconnect with other single functional applications to make a suite of online applications aren’t that hard to design and code. In fact they are often easier to build. Think back look at how the MS-Office package started. Word was just for word processing. Excel was just for spreadsheets. Now look at the bloatware that it has become. Sure those two applications still do their core functions, but they also do a lot more. Things we often don’t really want in the first place. It is just endless marketing bloatware.
What we need to focus on when we code and design applications is to keep it simple.
Do one thing and do it well, shine at being the best application for that function in the world. Let’s have a little less applications that make me coffee, and comb my hair all before morning tea time.
We need to just focus on the core of the application or web site and translate that into a core message.
Okay that sounds good, in theory, but what do you do when you have lots of demands by your boss or client.
Simple – there is still only going to be a certain number of elements that are important or the core of the application at this point in time.
So like the ATO (Australian Tax Office) have done, we just focus on those elements as required.
By the way, you think you have an issue with functionality and information retrieval. Just take a moment to think about what it would be like to be in the shoes of the web team at the ATO. Still with all those issues they are just focusing on the core issues of the day.
And Now For Forms
I hate forms in real life; I can get bet you hate them too, as does Simon and Maria.
Forms are the bane of our life. I approach them with dread; they are often poorly designed and put together usually by something with no experience in the art of form design. More often than not the lowest level sectional officer gets the form design job, based off the chook scratching of some Director.
Guess what it’s the same on the Web. Yeah you’re not that surprised. The people in charge of web design project seem to have this burning desire to replicate the paper world based world with no consideration for the web.
Now I’m not going to rapid on about forms, I’m sure you are all experts a form design. But I am going to just point out a few things that people love and hate.
So why do forms suck so much.
Well usually it’s simply because of the sheer size of the form. It’s just too big… Frankly it scares the crap out of us. We look at it and think, okay there goes the next few hours of my life on this endless form.
A simple solution to all this is to just have a good look at the form. In most cases it can be segmented into functional or information related areas and you could slice it up onto separate pages.
Yes that is making the completion process longer or is it…
Consider Amazon.com, do you remember how many steps there is to in the process to buy a book once it is in the shopping cart. Is it 4 pages, 5, 7, 10…
Well really it doesn’t matter. Not at all, not one little bit!. Why? Well because of one simple factor – as long as we are seeing that we are progressing towards out goals and they are still in sight then we are usually happy.
The one exception here is a 35 page survey, mind you if you building a survey beyond 2-3 pages, expect a failure. But that is another issue, there is specialized approach to online survey forms that 90% of the surveys on the web just ignore.
It’s all about Confirmation Candy
We all love candy. The sweet tooth takes us all – we want – we lust over candy. Some would even kill for it.
Well in the world of the web, it’s the same. We love getting feedback, the visual candy the sweet and the sour type that lets us know that we are on the path to salvation that final form completion nirvana.
Giving these simple instant visual cues of positive (tick) and negative feedback (cross) let’s feel good or at least wanted for our progress through a form; even if we get it wrong.
The use of these elements is become now so common place that when they don’t appear on a web form, one really does start to question the validity of the form itself.
So why aren’t we using this instant feedback and error message technique on desktop applications. Usually at best we just get a beep or the field goes dull red.
Speaking Nicely to People
Forms are not just about the sweet and sour confirmation candy, they are also about talking nicely to people and making sense.
Take this case from Bankwest’s online banking facility. You would expect to that if I by accident put a dollar sign in the amount field it the application would have been nice about it and just removed it for me.
Well it is a bank… they have to be a little anal.
Still what would it have take to do that, code wise., not much at all.
Similarly with credit card fields, would it be that hard to filter out the spaces or dashes when you submit the form, instead of making the user do it.
It gets better. I like Bankwest, I’ll let you into a little secret they have invented a time machine, yeap it’s “Back to the Future with Bankwest!”
If you make an internal account transfer on certain days it seems that if you put in today’s date, it tells you that you are in the past or the future! Wow – I wasn’t that aware I had time traveled. Again – another error message, that will a little care could have been corrected. Clearly the system was not really independently user tested.
You know I hate stupid error messages that aren’t friendly and considerate.
What we should be doing is not leaving the error messages to the development team.
The marketing people, the copywriters, should write them. Funny thing is in the real world I can’t see that happening, can you.
Playing Hide and Seek.
Sometimes you know we make things too complex, when a simple solution would have helped.
Take this Linksys router support site. Nice design, overall UX makes me think these guys are professionals and know their stuff. Until you start the game of find the download link for the drivers.
I expected it to be under the drivers section on the page – but no you have to select a version then the driver will appear.
Still then you have to hunt visually for the correct link, as it’s the same colour as other page text elements. Finally you find the download link.
Simple things to fix, but for the sake of a “clever interface” the UX is lost.
Also, what if I don’t know the version or can’t find it… didn’t think of that one.
It’s all Confusing - Stepping beyond the problems
Yes it can be a little confusing. But what we are talking about is the fine detail. The things that make it a average experience to a mind blowing one.
This isn’t rocket science. It’s just thinking about the people using the application, and being considerate.
Still after you have you application perfect and it’s delivering the best user experience it can. You can still have issues. You may not be getting the conversions and sales you want. Well it maybe a few simple things that are not helping.
Are you considering AIDA – that’s number of design rules you can follow on your interface:
- Attention: get the users attention and make them feel wanted.
- Interest: now you need to spark interest in people quickly, showing of your best aspects.
- Desire: you have to spark the desire of the user for your product; this is usually a totally visual sell in most cases
- Action: finally give the user an action point that they can progress to, somewhere they can take the page to the next step.
Also consider the Gutenberg rule. Basically this maps out a thing we call reading gravity (in the western world). It tells us that people tend to end up with their eyes hovering in this Terminal Area (see below). Of course this enforces the reverse F patterns we see in eye tracking.
Still at the end of the day your application needs to be good experience at any cost. Sure you can make it average if you like, if the budget in time or dollars is just not there.
However trust me on this one, people like Simon and Maria will just consider you a roadblock and will work around you. Remember in the PC verses Mainframes conflict of the mid 80’s. The accountants brought PCs into the workplace as the Mainframes where not providing in their arrogance the needs of the corporation. Hence the mainframes became a roadblock, and the users removed it.
Don’t under estimate your users ever. They aren’t stupid people; they are just like you and me. If they are forced to use a bad system, sure they will pay lip service to it and develop their own system with the tools they can gather around them. Things will appear to be well and good, with no issues that management will see. Except in reality your users have just reworked the system to make it usable if you will not.
In summary it’s easy to remember
- Streamline the focus of your application or web site
- Segment any forms or procedures that are too long.
- Simplify things down to its core functionality
One final thing whatever we build it’s not for you or me for but for them, the unseen users.