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):

Backend processing

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!

Frontend processing

This is easily done, if you have used correct markup for your table (thead and th’s for defining the header-area, and tbody td etc to define the content-part. Check out this for more info). There are a great amount of javascript-scripts dealing with this issue, although they have their shortcomings. The main functionality of these are to attach javascript-events to the text in the table-headers, and make them sort the table on the corresponding column – pretty straight-forward and as expected. πŸ™‚

The problem, though, is best imagined through an example: Let us say you have a search-form, which search through an database of articles. The result is in return displayed in a table, with columns for title and creation-date. The searchresults are also grouped in pages of 20 rows each, so to view the next 20 results you’ll have to click on the neat little “page 2”-link. Let us now stay on page one, and click on the “creation-date”-header to sort the results after date of creation. The problem here is that your javascript will (usually) only sort the current page, because – of course – it doesn’t know about the remaining pages. This issue is avoided using backend-processing. It is obviously also possible to work around this, but as a default behaviour – this is usually the result.

“Skip-intro”-links

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.

Perhaps not exceptionally relevant for websites yet, but I do think that as more and more content-heavy applications are being developed for the web, it is something to look into. I’m working on a JavaScript-solution to this and will post about it a little later. Keep following πŸ™‚

Related links

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?
Be Sociable, Share!

One Comment

  1. […] article is about my solution to an issue/request mentioned in my “Usability-tips for your application (Part I)” regarding highlighting corresponding table-rows when keys are […]