The Usability Blog

If you run a blog and hope to keep the content on it fairly fresh, utilising any sort of future scheduled post functionality it really important.  It means the difference between updating your blog when you’re out of the contry or not.  When using such a feature, there are certain aspects that must be clearly conveyed to the user.  With that in mind, let’s take a critical look at the current (Version 2.6.2) WordPress implementation of scheduled posts.

WordPress Post Status Options

The image to the right is a screenshot of the controls used to schedule (or backdate) a post in WordPress.  The date controls aren’t visible by default, but rather are accessed by clicking an Edit button next to the “Publish Immediately” text. This is replaced by the word “Cancel” when clicked.

An immediate problem you’ll notice is the Cancel option itself.  Being placed to the right of the text “Publish Immediately” implies that clicking it will cancel the immediate publication.  That isn’t the purpose of the option.  The text “Publish Immediately” also remains, even after a new date has been chosen (it remains after the post has been auto saved and will only update when the post is saved by the user, or published.  Many users will publish posts without ever saving them first, and as such won’t ever see the updated text).  This is completely misleading and confusing.  In short, the design leaves the user with some serous doubts as to when the post will be published, if at all.

Once you’ve selected your published date and time, you have two options.  You can either “Publish” or “Save”.  Once again, the options are ambiguous.  If I click publish, will I actually be publishing the post, or will it be published when the date and time I have chosen is reached?  Likewise, if I save the post now, with a status of “Unpublished”, but with a future publish date, will the status of the post change when the date is reached?

All entirely valid questions that could be answered with better form design.  Thankfully, Automattic are looking at a thorough reworking of the WordPress back end for the next release (2.7), let’s hope they put a little more thought into it this time.

If you’ve been on the internet today, you’ve probably heard something about Google, and a new browser they’re working on called Chrome.  As someone who’s passionate about usability, something on page 18 of their comic caught my eye.  They are talking about moving the “tab” section of the browser to the top, above the location bar.  This strikes me as odd for two reasons.

Fitts’s Law

For those that aren’t familiar, Fitts’s Law states that the time taken to move to an object is a function of the object’s size and distance.  Google appear to be suggesting that the reason for moving the tabs to the top of the browser is that they “… are the primary piece of the user interface …”.  Personally, I can’t believe anything other than the view port being the primary part of the user interface, but either way, Google are sugesting that tabs are the most important which leaves the viewport as the second.

So if you consider Google to be correct, they are, at least according to Fitts’s Law, making their browser less usable.  They are effectively increasing the amount of time taken to perform certain tasks.  Now, it’s important to remember that we haven’t even seen any screen shots of Chrome yet, let alone used it, so it’s enirely possible that Google will do something clever to offset this (although, to offset this problem as far as Fitts’s law is concerned, they would have to icnrease the size of the tabs, which would cause its own problems).  But moving tabs to the top of the browser causes other problems…

Memory and Expectations

One factor at play here is the expectation that the URL, or location, bar sits at the top of the browser with the tabs below.  People are used to it, they expect it, and anything different will confuse them.  Sorry, it’s just a fact.  And not only are they moving the tabs, but they are also moving the other interface elements.  In order to move the tabs to the top of the window, they will also have to move the location bar away from the top.  This includes common, standard interface elements such as the back, forward, stop and refresh buttons.  Moving these elements up and down a few pixels may not seem like a big deal at first, but you have to consider the ramifications fully - and to do that you have to think about muscle memory.

For the longest time, moving your mouse to the top left of your browser and clicking would take you back a page - no longer.  Now, it’s going to bring the first tab into focus.  This may seem like an easy thing for a user to overcome, but why would they?

There are enough competitive browsers out there, if they try one and they fail at a few tasks there’s no need to continue with it.  They’ll just move in to FireFox, or Safari, or Opera, or …

In Summary

I don’t want to come across as if change and innovation are bad things.  But I’ve always felt that there should be a driver behind interface change where you are changing an established standard.  Here, I don’t see it.  This smells more of a “Unique Selling Point” rather than a genuine attempt to improve the interface.

After downloading the latest version of OpenOffice.org I was prompted to register an account.  This is usually something I ignore, but seeing as I’d like to support the work of the OOo team, I thought I’d go ahead anyway.  But unfortunately, I was turned away at the first form.  Take a look for yourself.

A form with both Register and Sign Up buttons

So do I want to “Register”, or “Sign Up”?  I think I want to Register, and having the check box to accept the terms and conditions is something you’d typically see when initially registering, but it would appear I need a password, which implies I need to already have an account.  Hmm.  I think someone needs to look at this, I bet it’s causing them to lose registrants hand over fist.

If you are running a site that requires membership, one of the key tenets is that you make the user aware of their current status, and what is available to them.  For example, if they need to log in to access certain features, make them aware of this.  eBeay, however, appears to forget the user’s state, leading to confusion as to whether you are logged in or not.

If you’ve previously logged in to the eBay site, but are not currently logged in, you are greeted by name.  merely by greeting you by name, eBay is implying that you have entered their site in a state that allows them to identify you.  This, typically, means you are logged in.  There are very few sites that greet you by name unless you are signed in.

Along with this greeting is the suggestion that if you’re not the person mentioned in this greeting, you should sign in.  The implication is, if you are the person ebay is greeting, you don’t need to sign in.  You only need to sign in if you’re not this person.

These two factors, combined, give the overall impression that you are signed in.  However, clicking on any of the links that require you to be signed in (e.g. Buy, Sell, My eBay) you are taken to the Sign In page.  You clearly aren’t logged in, and the eBay home page has got your state wrong.  You are not in a “Logged In” state.

This approach by eBay ultimately results in a surprise to the user, something you generally want to avoid at all costs.  The expectation is that if you are logged in, and all indications point to the fact that you are, you do not need to log in again.  In general, users understand that you have to sign in for certain services.  But, given the current ability of web sites to keep you logged in for a number of days or weeks (a facility that eBay themselves offer), it’s extremely important that users know where they stand.  What state they’re in.  In this regard, eBay fails.  It creates confusion, breaks standard conventions and surprised uses.

I had the misfortune of driving a Vauxhall Zafira last week.  I say misfortune because it just isn’t a particularly good car (read some owners reviews, I found it unstable at motorway speeds, plasticky inside and very hard work to get up to speed.  Not awful, but there’s MUCH better out there.) and I didn’t get to choose it as it was sent by the hire company.  Aside from it’s other failures, it would appear that Vauxhall/Opel just haven’t given any thought to usability.

Take, for example, the image to the right (click to enlarge).  There are three methods of controlling something with hugely cryptic labels, a wheel and two buttons.  Can anyone tell me what these actually do?  The wheel controller looks like it moves something, in an arc, from left to right.  The top button looks like it makes some sort of box explode while the bottom box looks as if it causes another box to grow wheels.

I’m all for using metaphors to improve usability, but in this case they just haven’t been thought through.  We’re used to arrows indicating that radio stations will be cycled through, and triangles indicating that volume will be adjusted, but these buttons don’t exhibit the same level of logic (or historic use).

I’ve driven a number of Vauxhalls as hire cars over the past few years and have found the usability of the controls to be universally awful.  In addition to the controls on the steering wheel, you’ll also notice some oddities when using the radio, particularly when trying to manually tune a radio station.  It seems to switch, for no apparent reason, between scanning for stations and manually incrementing the frequency.  The indicators also behave in a strange way.  Pushing them up switches them on, pushing them down just changes direction.  You have to rely on the car knowing when to turn them off, which it isn’t very good at.

It’s been suggested by someone else who drives a Zafira occasionally that these buttons have something to do with the optional phone integration.  If this is the case, and I honestly don’t know, then I cannot understand why they avoided the normal phone metaphors, such as an icon that actually resembles a phone.  And for what it’s worth, out of the numerous people I know who have driven new Vauxhalls, every single one of them have looked down at the buttons and wondered what they do.  Surely if Vauxhall had bothered to test the interior controls for usability, they would have picked up on this.  And while this may not be a big issue when deciding whether or not to buy a Vauxhall, it does leave a bad impression.  The general consensus is, if they can’t get this right, what else are the going to fail at…

Overall, I genuinely think that usability in websites and web applications is improving.  But every now and then I stumble across a site that completely bucks the trend and manages to provide a truly shocking user experience.  One that ensures that I, and many others, will never use their service.  Today was one of those days.

I heard a radio advert for a new service called webuyanycar.com.  The theory is that they will buy your car from you direct, to save you going through the hassle of advertising and sorting out a private sale.  So, being curious as to how a service like this would actually work, I checked them out.  Now I wished I hadn’t.  Quite simply, it’s one of the least usable sites I’ve ever come across.  Poor layout, badly worded copy, buggy forms, unclear graphics, this site has it all!

So taking it step by step, let’s see where they go wrong.  Firstly, you have to enter the registration number of your car.  Once you’ve done this you get presented with a drop-down box where you select the year.  The button next to this field is labelled “VALUE MY CAR”.  This is misleading as there are a number of steps required before you actually get the value of your car (which, by the way, was at least 30% lower than current realistic market value).  When creating a multi-page or multi-step process, it’s key to keep users informed as to how far they are through the process.  Suggesting it’s near to the end, and then not fulfilling that expectation results is a high number of abortions mid-process.

The next step in the process is identifying any damage on the car.  This is done through a flash object (as pointed out in the comments, this isn’t a Flash object, it’s actually Javascript mixed with image maps).  I defy anyone to look at the Damage Assessment Tool’s interface they have chosen and tell me which end is the front of the car.  In fact, I believed that the right hand side was the front because of the shape of the headlights.  This isn’t the case.  There are tool tips when you hover over the section but these are badly formatted and buggy.  All in all, if you have to record any damage, it’s an absolute chore and very hit and miss.

Once you’ve added any damage, you then get to the screen which requires your personal details.  I’ve added a screenshot of this screen to the right, just so you can see what it looks like in FireFox 3.  Note that FireFox 3 is currently in the “Release Candidate” stage, meaning that it’s not entirely ready for mass consumption (although once a software project reaches release candidate stage, typically only defect fixes are included and features are not changed).  FireFox is the world’s second most popular browser, used by about 25% of Brits.  As you can see, it’s horribly broken.  To make matter worse, even if you can figure out what fields require what information, you get random validation failure messages (for no apparent reason) that don’t seem to be attributed to a specific field (because the layout is too broken to figure out where they are supposed to be positioned).  And as the icing on top of the cake, the submit button doesn’t appear to work in FireFox.  So even after battling through badly designed and horrendously implemented forms, you can’t get a valuation in the end anyway.

One other oddity you’ll find regards the privacy policy.  As with most websites that require personal information, they will try and sell it unless you tell them not to.  Yet look at the wording for the option.  This was obviously written by someone who either doesn’t understand the fundamentals of web form design, and what the different input types do, or doesn’t understand basic English.  But most likely both.  The first thing you’ll notice is that it says “Click Here”.  “Click Here” is appalling when used as the text for a link, it’s an abomination when used as part of a form.  You’ll also notice the ambiguity is introduces.  If I click there, I’ll deselect the check box.  Usually these are opt-meaning I would want the check box checked.  And what if I click there, forget, and then click there again?  No doubt my details would be winging their way to all and sundry before I know it.  Quite why they can’t just clearly state whether that element of the form needs to be selected or unselected in order to achieve the desired result is beyond me.

This truly is one of the trend bucking sites I touched on in the introduction.  Considering this is primarily a web based business, launching with such a clearly under-designed, incompetent, not-fit-for-purpose website could be a huge mistake.  if they can’t handle something as simple as a web form, how on earth am I supposed to trust them to buy a car off me?  Not a chance.  One of the worst user experiences I’ve had in a long time.

Everyone keeps telling me that web applications are the future.  The flexibility they afford, combined with the always connected nature of our digital lives certainly lend credence to this view.  I, however, am not so certain.  From a usability point of view, I keep on seeing hurdles, walls that application vendors are putting up that prevent me from truly loving these web apps.

The latest I’ve tried is Buzzword, a web-based word-processor from Adobe.  At the moment this is a Flash application, but all signs point to it being ported to Adobe Air, the OS independent (in theory) development platform.

Buzzword is a perfect example to point out the problems I have with web applications.  It manages to provide a fairly full featured word-processor in a web browser yet falls over when it comes to fundamental usability.  The best place to start is the Log In form.  When you load the page, a blinking indicator is flashing in the “email” field.  These indicators usually indicate the current position of your cursor, an indication that if you start typing, it will appear there.  Except in this case, it’s not always true.  Depending on how you selected the window, and what else you’re doing in the browser at the time, you may not be able to immediately type in the field.  You have to click in the field first.  I wouldn’t normally complain about having to click in a field before typing, but when there’s an indicator in the field that should tell you that your cursor is already active in the field.

To make things worse, you can’t reliably tab through the fields.  If you type in your email address and press the tab key, you’re taken to the “remember me” check box, not the password field.  These aren’t the only problems.  I can’t use my usual method of scrolling, which is my ***ALL TIME NUMBER ONE*** annoyance when it comes to flash, instead I have to click the little arrows.  I also, for some strange reason, can’t use my delete key (well, technically it’s fn + backspace because I’m on a MacBook).  It just inserts a hyphen instead of deleting anything.  Very annoying.

Suffice to say, in terms of usability web applications have a long way to go.  Considering it’s taken this long to begin to get people using the web effectively, to then go and break the conventions those people are becoming used to is a crime punishable by boiling one’s toes.

Bootnote:  There are other, more fundamental usability issues with Buzzword that I haven’t covered here as they go beyond the “Breaking Established Conventions” theme of this article and into the “Are you sure you user tested this” theme of a future article.

I was keen to download and try out the latest FireFox release today.  I’ve been using the beta versions of Release 3 since the first release, and I’ve been pleased with the clear progress being made with each release.  The “Release Candidate” typically means development is stablising, with a focus more on bug fixing rather than feature development.  So in many ways this release is the closest we’ve seen yet to the final version.

One of the interesting new features in FireFox 3 is the site identity dialog.  It’s a clever idea and should go a long way to boost people’s confidence when using the web.  If it’s used.  Essentially, it gives the user a quick way of getting further information about the website they are connected to.  It’s an extension of the padlock principal, which has been used to indicate a secure connection for a number of years.  As well as just showing the padlock, an extra section is added to the address bar that displays the name of the site.  Or to be more specific, the owner of the secure certificate.  Clicking on this new section produces a pop-up containing some site details.

There’s a problem.  When you download FireFox 3 Release Candidate 1 and run it for the first time, you’re presented with a page that triumphantly proclaims

“Find out who you’re talking to by clicking on the website icon.”

Except this isn’t strictly true.  In fact, even clicking the site icon (favicon to the rest of us) for that page doesn’t give you any information.  This concerns me on two levels.  Firstly, this new feature is meant to build confidence in the user.  If you are thinking of giving personal information to a site, you can click its icon to get some additional information that will inform your decision.  Except this isn’t really the case.  Site information is only displayed for secure sites.  And while this may help if you’re handing over your credit card number, it’s unlikely it will help you where a site requests some personal details, these are rarely secure and therefore won’t be displaying any useful information.  The second thing that worries me is the implication cast upon sites that don’t supply information.  It’s certainly implied that if you don’t supply information, you have something to hide.

I think some more robust language should be used within this pop-up.  Something that makes it clear that in the vast majority of cases not supplying site information is perfectly fine.  I’d love to see this feature become truly useful to users, and it wouldn’t take much work.  All that needs to be done is a rewordoing of the dialog box, making its purpose and implementation completely clear in non-technical terms.

By the way.  I’m assuming that the site information is only displayed for secure sites.  There’s very little documentation on the Mozilla website regarding this feature.  If what I’ve said above isn’t true, it’s more a damning indictment on the lack of documentation than anything else.

I’m a huge fan of Google Reader.  Without it, I’d be drowning under the thousands of blog posts and news items I receive every day.  However, there are some usability oddities.  Take, for example, the screen below.

(Click the image to see full size)

It’s quite simple really.  Google reader doesn’t seem to know how many unread items I have.  The left hand column says 9, the top of the central column says 6 while the bottom of the central column says 30.  Three different numbers, and confusion reigns supreme.

It’s easy to say that this is a one off, but it happens with alarming regularity.  It seems as though when you refresh the view, only certain parts refresh.  Perhaps the worrying thing about this is that there are operations available to the user that claim to be performed across all the available items.  But if I mark all as read, how many items am I actually affecting?