Uxability

A view on the world of web design, UX and usability

Archive for category User Interface

Button placement on Forms

Nov 16

Posted by Sam K in Design, Forms, Usability, User Interface | 4 Comments

I’ve been reading a number of great articles on forms recently – covering things like general layout and inline validation (Luke Wroblewski seems to be the world authority on forms – most of his advice seems well worth paying attention to). But I’ve been looking at something recently and I’m wondering how best to implement it, namely the positioning of the buttons for submitting a form.

I have a simple, linear search form with "Search" and "Clear" buttons. Automatically, I would have considered laying it out like this:

Simple Form - default layoutLet’s set aside the accessibility argument of whether form labels should appear above fields – I’d like to consider the buttons here. There’s no requirement for multi-language support, either.

I can think of a few reasons why this is unfriendly. Firstly, all the form labels are right aligned and if a user is tabbing down through each of the fields their focus will suddenly jump to the left when they get to the buttons. Secondly, is there enough of a distinction between the "Search" and the "Clear"? And whilst from the text it’s clear which is the call to action, is it as obvious visually? Well, no, not really. Thirdly, how necessary or common are clear/reset buttons these days? Because it’s a separate topic, really, let’s assume we’re going to persist with the "Clear" button.

My first thought was "What about moving them to the right?" Like this…

form-opt2

So I’ve flipped the buttons around and shifted them over to be inline with the right-side of the fields. I think it’s a little more intuitive but it doesn’t deal with the spacing issue nor the intended call-to-action.

Colours are a potential way of differentiating but it will a) set a precedent in terms of styling throughout the application and b) I have an accessibility requirement so colour to convey meaning is a no-no.

I think it’s a little bit of an improvement, but should I go with it or can I do anything else with it?

How about…

form-opt3

The "Search" and the "Clear" buttons are totally separated and (to me) it’s clear that the search is the main call-to-action – and that’s probably what we want. If a user is tabbing down through the fields the tab out to the button will be naturally followed.

The clear button is there and can be used, but I hope it comes across that it’s not something we really want users to be getting too involved with.

Now I appreciate that the all of my reasoning is pretty subjective. I don’t have any research I’d be keen on to get some thoughts and opinions about this particular question – are any of my three options go-ers, or have I missed the best-practice approach completely? Any other suggestions?

Tags: , , ,

The Best User Experience for Everyone

Nov 11

Posted by Sam K in User Experience, User Interface | No Comments

So one of the most important tasks for me in the past has been to ensure that all visitors to my site (or web application) have as identical an experience as possible. So, irrespective of what browser or operating system or hardware they come with, my site/application will be essentially the same. Clearly, this particular goal is not the way to go anymore.

Ultimately, every website or web application which comes to the table with this particular requirement is immediately hamstrung by the pain that is known as IE6. There are loads of campaigns being waged all over the web to get this ancient fossil killed off. But, as Microsoft have gone on record to say, that won’t happen until formal support for Windows XP ends.

Settling for this way of life is not very progressive nor enhancing. So why not take advantage of Progressive Enhancement?  I’m guessing that in reading this blog, you’re familiar with the notion, but in case you’re not, it boils down to developing a baseline of services and functionality that is available and accessible to every potential end user. Then, you can build richness, additional tools and functionality on top of that which become available to those users who may have a setup capable of taking advantage of it. Cool… And OK, I’ve majored on IE6 – and that’s wrong because the concept is much more than that – but the idea of progressive enhancement is becoming quite attractive. You may have a requirement for high-end accessibility and support for the likes of Lynx.

As the web development world moves on to HTML5 and CSS3, it seems insane to overlook the wealth of great things that are included in these specifications and stick with something that will ensure the biggest audience. Why not do both and give all your users the best that you can offer them in their environment?

I’m looking forward to doing some investigation into the best way to promote and implement progressive enhancement in sites and applications, and perhaps looking into whether any of the off-the-shelf products (e.g. ECM, Content Management, CRM, etc.) that I use regularly in my work are paying attention to this subject.

Tags: , , , ,

UX when using a product

Nov 4

Posted by Sam K in Design, Usability, User Experience, User Interface | No Comments

The world of web-based user experience design is a fascinating one. And some of the places you can go creatively to ensure that users of your site get the most of it can be amazing. But, what about those situations where you deliver a solution based on one or more products e.g. WCM/ECM, shopping carts, wikis, etc.?

I suppose this post is most inspired by my own experience of the WCM world. Invariably, you will be building your site (intranet, extranet, website, whatever…) on some platform or product which immediately introduces a level of restriction in terms of what you can do with the user experience. CMS applications tend to be filled with tools and components to make it easy to present common types of content e.g. static content, blogs, polls, forums, document libraries, membership management, etc.

By using these in-built components, you’re automatically tying yourself to the user experience as governed by the CMS vendor. And, having seen numerous CMS frameworks – from open-source to enterprise scale £10,000s-per-licence – sometimes that’s not a good thing at all. Some of even the more expensive tools of the market give such a poor, unfriendly user experience.

Yes, you can do a certain amount with styling, and on occasions (depending on a customer’s requirements) bespok-ing a certain piece of functionality may make more sense than using whatever comes out of the box. But what is the best way to handle those situations where the CMS product provides all that is needed but with a user experience that, for want of a better word, sucks?

Very, very few customers would be pleased at having to pay an expensive licence for a set of tools only to be told that you’d recommend re-writing some of them in a better way (at additional cost). There’s always the possibility of feeding back to the product vendor to suggest UX improvements or changes, but that rarely gets you too far as most vendors will have their own roadmaps and priorities.

There are a number of factors that will impact the best course of action here.

  • Your relationship with your customer;
  • Your relationship with the product vendor;
  • Your knowledge of the product;
  • Your ability to apply changes/improvements in a cost-effective way.

There will obviously come a time when a compromise of some description has to be made. If you can persuade your customer to trust you in terms of your advice and to pay for the work you suggest needs done (by promising – with confidence – a return on that investment), that would be a good result.

But, I feel it’s more likely you’ll have to accept that the customer will make a decision on behalf of their users and take the user experience/usability limitations as they come.

If you haven’t got the wealth of persuasion skills necessary, what’s the best way to make the most of the UX elements when delivering a product-based solution where the out-of-the-box user experience is not what you’d like it to be?

Tags: , , ,