Usability-tips for your application (Part I)
There are a exponentially growing amount of applications being developed. Some of them vanish at an early stage, while others grow to be quite (and sometimes extremely) popular. What really dazzles me is how sucky many of them (both the popular and the unpopular ones) are regarding how they deal with user-interaction. I’m not an expert in user-interaction-design, but as a user of quite a lot of applications (both web and desktop), I do know when something feels cumbersome or just wrong or missing. About a year ago, I started to write down some of those situations having ambitions about writing something useful. I started writing the headline “1000 or so tips for your application”, so although I still have quite some way to go to reach that goal ( 🙂 ) I figured I’d rather start writing about what I’d already got and take it from there!
Keep in mind that, as I’m kind of an web-guy, I’ll mostly keep things related to the web, but much of what I’m going to write about is easy transferable to the desktop-applications. And I will also encourage you to mention issues you’ve encountered as a comment and help me finish my list.
In this post I’ll go through:
- Make tables sortable
- Make sure “Skip-intro”-links are visible at once, even before the flash is loaded.
- When working with tables, make sure a key-press highlights the first, closest matching row.
Making tables sortable
In short – what is the use of organizing tabular data in tables, when you don’t/won’t enjoy the full power of it? When coming to using tables on the web, it should really be up to the UA’s to implement such features, but until then you’ll have to do it yourself. There are mainly two solutions to this case (on the web, that is):
Your table-headers are links, with parameters to be sent to the web-server, where your script than sorts the listenings (assuming you have your data in a database-table or an array/hash-table), and then output the correct result. The query-string sent to the server will probably look something like this: “field=name&dir=desc”. The script will then sort the results while taking the parameters into account, and then return a nice dataset ready to be rendered in html. The downside of this approach is the extra requests to the server and the loading time, which in turn will make the user have to wait. We all know that that’s not good you bad boy!
While this is an issue I come across quite often, this is also the the situation with one of the easiest solutions. The situation: There is this super-fancy site, with an even more super-fancy intro (usually in Flash), to really show off how cool this site really is. And – as this super-fancy-site-intro-flash is quite heavy with regards to loading images, animations and sound-effects – they also have to have a status bar to indicate the progress of loading the intro. All in all fair enough, and the solution for those of use who doesn’t feel like watching this intro and really just want to get on with the real content, is to give us an “Skip intro”-link which in turn will send us (hopefully) directly to the main-site.
So the followup-question is “Where do I place this link?“, which basically has two answers (and only one of them are actually good): Inside the flash-animation (usually with s a getURL-call), or as an HTML-link located somewhere around the intro (above, underneath, left, right, or even diretly onto it (behold the the magic of CSS) ). The good solution here is to locate it in the HTML as an anchor. This is for several reasons: It’s fetchable for search-engines (allthough some SE’s by now know how to read swf’s), and it’s in reach already before the flash is loaded. On the other side, the worst solution was by someone who had the link inside the flash, and only visible after the progress bar was finished. Great!
In short: place the “skip intro”-link in the HTML-code, and keep it visible as long as the intro is running.
Highlight corresponding cell/row on key press
This is another tip related to tabular data, and are often directly related to the sortable-part. When working with tabular data, and selecting/sorting a certain column, and pressing a key, ie. the letter “B”, please jump directly to the closest matching row.
In short: If the user presses a key, make sure to highlight the corresponding row, depending on which column is highlighted/sorted on. If the user presses “B” and the table is sorted on surname, jump to the first row with a surname which starts on “B”. If there are no rows with matching surname, then highlight the closest matching one. I.e. the first starting with “C” etc.
- tablesorter – a jQuery plugin
- table-row-highlighter.js – My prototype of abovementioned functionality
More to come
I’ve got plenty more to come in upcoming posts, and would also very much like your input on especially the discussed issues as well as proporsitions for coming cases.
- Does entry-highlightning on tables after key-press have anything to do with the web?
- How can this be implemented in a good fashion?
- What other magic is reasonably to accomplish with neatly marked up tables?