Comments on: Best Practices for 6 Common User Interface Elements

By: Emlak

Emlak — Wed, 03 Mar 2010 10:22:44 +0000

wow. i love this post. thanks for the tips. i do agree that the link can be of any colour other that the traditional blue, but that colour should be in contrast with the overall text and it should be the same throughout the site. And never use that colour for anything else other than links

By: Walter

Walter — Sun, 22 Nov 2009 18:02:19 +0000

90 degrees…. fixed, thanks!

By: Louis

Louis — Sun, 22 Nov 2009 09:49:10 +0000

Matt, thanks for the comments.

Number 2 – The red graphics that I include are usually for the benefit of those who “scan” the articles, not for those who are reading. And you’re right, “45 degrees” is a mistake; I’ll send a note to WDD to correct that.

Number 6 – Everything that’s red is a link on the example site. I wasn’t discussing the “current page” indicator, but yes that is also red. I don’t see that as a problem at all, since those are also links.

Also, I wasn’t discussing accessibility in this article, I was discussing principles in usability for average visitors. For general usability, I personally don’t think underline alone is enough. I like a contrasting color better than underline alone, but as I pointed out, the best way is to use underline plus color, which would solve both usability and accessibility concerns.

Thanks for the feedback.

By: Mkk

Mkk — Wed, 11 Nov 2009 15:00:57 +0000

Here are useful designs for the search element:
http://graphicriver.net/item/15-stylish-designs-of-search-input-field/65821

By: Makenzie Marineau

Makenzie Marineau — Tue, 10 Nov 2009 19:59:20 +0000

Very helpful and great ideas for those who need a little extra help when making their websites convenient. I run into a lot of issues with, especially local, business websites that don’t understand these concepts of design and reader accessibility. Thanks for the great post.

By: Jordan Foutz

Jordan Foutz — Tue, 10 Nov 2009 18:23:47 +0000

I was just on a LinkedIn discussion board and there were several people sounding off on possible culprits for increased cart abandonment rates. I would say everyone could benefit from each point cited in this post. I’ll definitely consider these points in the future.

By: Amanda McNeill

Amanda McNeill — Tue, 10 Nov 2009 04:44:00 +0000

Nice article! Good basic info. I agree with Laura, above. I think there should be some kind of rollover or color change on buttons to indicate they are doing something.

If you’re interested in usability tools you may like this article from Website Magazine http://bit.ly/32mqlQ. It reviews usertesting.com (which I am affiliated with) and several others.

Amanda

By: logolitic

logolitic — Mon, 09 Nov 2009 18:01:22 +0000

very nice post, thanks

By: lucideer

lucideer — Mon, 09 Nov 2009 17:42:36 +0000

@Matt #29
Colour blind users typically see “less” colour, as in can distringuish a smaller range – i.e. two different colours can look the same to them. For example, purple and blue may look indistinguishable, dark shades of colours may be significantly MORE difficult to distinguish from black. To make things more complex, there are also different forms of colour blindness, meaning different people can have different issues seeing different colours – deuteranopia affects a completely different colour range to tritanopia.

If you are using text-decoration:none, it’s at least advisable to use :hover{text-decoration:underline;}

On the other hand, anyone with colour vision issues can use user stylesheets to aid visibility, so it might not be the most major of issues.

By: Matt

Matt — Mon, 09 Nov 2009 14:37:20 +0000

Ok good points but not sure I agree with the examples:

For number 2 – I’ve got perfect eyesight yet it’s not easy to see the ‘indicator’ that more content will appear. You appear to have fely the need to indicate exactly what we should be looking at with a big red circle… if what you were showing was that clear it wouldn’t need highlighting – compare that to item 1 (the search box) no need to show us where we should be looking. So I think the principle is sound but the example isn’t! Also whilst i’m on this one that rotation is 90 degrees not 45 – “the arrow is rotated 45 degrees”.

For number 3 – Same issue with the red arrow for the 2nd example. Personally i’m not a fan of Google’s method either (though this is totally subjective) I’d rather see the indicator that something is happening appear either where it is happening or next to where I just clicked that caused the action.

For number 4 – just use amazon. I suspect that anyone buying anything online is most likely to have had experience on amazon (if not their first experience), no need to cause users to try and relearn stuff (unless your site is informative and not sales based).

For number 6 – Erm in that screenshot am I to take it you were on the ‘Home’ page – why is that red in the links – is it always that colour? Does it indicate that red links are links I’ve visited? Is the date a link?

Now for some apparent contradiction – @comments #23 and #28 (though this is really a question) Are colour-blind users unable to see colour versus black and white or is it just that they may see 1 colour as another i.e. where we see red they see green – but in that case they still see a colour that is different from the main body text. Yet I still agree that an underline is the definative indicator of a link (in fact I tend to use :visited{text-decoration:none;} to remove underlines from visited links but will also change the colour.

Also I’d suggest trying to aviod using the 3 default colours on links to have a different meaning (blue=link, purple=visited, red=active). Strange/confusing(?) to use red as a standard link colour?

Enjoyed the read and agree with the concepts – perhaphs just not the example implementations.

Matt