The importance of visual cues
Who has ever used a drop down list? I am going to guess all of you.
Who has ever used a drop down list without that little down facing arrow? Hopefully none of you.
That little arrow is what us web geeks like to call a visual cue.
The purpose of a visual cue is to indicate functionality or ease the user with a task. Do you want your user to go to the next page? Use an arrow on the next button. Do you want your user to know they can sort a table? Use a sort arrow.
Visual cues are so important, but innovation gets in the way. Sometimes web designers want to step away from what is normal or expected and try something new, which isn’t necessary a bad thing, but when it steers away from industry standards, we have a problem. If every web designer recreated standard web controls every time they started a new project, users would not find the web such a pleasant place. It is important to learn what the common visual cues are, and stick to them! This doesn’t mean you can’t get creative, it just means your users won’t have a hard time on your site or system.
It is so important for users to be able to know functionality is available. If there is no visual cue, it will get skipped over. This can lead to decreased usability in a site or system and increased errors.
So let’s look at a little example…
If you came across this table, what would you think you could do? Would you wonder what those little + and – icons were? Would you know the table columns could be sorted? Most average users would not.
If this table contained an extensive amount of data, and there were say… 5 of them on a page. You probably would like a mechanism to expand and collapse them wouldn’t you? Well… This introduces you to the collapsible table! Great idea you say? I think not. Collapsible tables are not a standard control. This is a mash up of a table/collapsible section and an implementation nightmare. So let’s start thinking about what we can do to fix this…
The first question we ask is… What is the standard visual cue for a collapsible section? Does something like this come to mind?
This is a very commonly used icon for collapsible sections. If you want to steer from this symbol, do some research and see what else is out there, but don’t try and steer from it too much.
So let’s put this table into a collapsible section and see what it looks like.
Now we’re talking! This is clearly a collapsible section that can be expanded and hold a table. This table can be as long as you like, or even have pagination, as long as the user can hide it away, and know they can hide it away!
Now let’s move onto the sort functionality. I cannot tell you how many times I have discovered a table that can be sorted by clicking the column header. If only I was told beforehand I could do this… And guess what, this can be done so easily by using some simple icons! These are the ones I like to use (not always pink, don’t worry).
So how about we put them to practice so you can see what I am talking about!
Doesn’t that look and function so much better than that first table I showed? The user can easily open and close the collapsible section at ease, sort the table columns, tell which column is sorted and whether or not the column is in ascending or descending order. Krug’s first law of usability is ‘Don’t make me think’ and visual cues do just that. Please take some time to research what industry standards are and then get creative with that. Sometimes we want to be creative, but it’s not always what is best for the user, and they are the most important part of any web service!
No comments:
Post a Comment