Introduction
In this Tip I show usage of a usability technique that can be called “a Listbox/Grid/Table with increased height of a current row”. Here is an example (someone’s application I met occasionally) of how it looks like:
Such a technique, in my opinion, improves usability and readability of List Boxes, Grid and Tables in certain situations.
Below I show why and how I used it in a real desktop product I developed some time ago.
Unfortunately, I cannot give the exact screenshots of the application I worked on (it belongs to my Customer). So I show usage of the technique in a simplified Microsoft Silverlight demo here -
http://files.rsdn.ru/44022/JoannaDemoPage.html.
An Original GUI
Some time ago I developed a desktop application. One of its screens initially looked [schematically] like the following:
This Form displayed results of some search operation.
In a typical scenario a user browsed them in the Found items listbox, selected one of the rows and clicked the Action button.
Improvement of the Original GUI
After the 1st version of the Form was used for some time, I started thinking – how to improve its usability?
In a typical scenario a user had to work with a quite large count of rows in the Found items listbox. This was caused by the fact that the mentioned search was a “fuzzy” one – it was bringing a lot of items that were “similar” to a search query. So a user had to spend some time reading through [sometimes dozens] of rows in the Found items listbox before finding a proper item and clicking the Apply button.
To make user’s work more comfortable I decided to use the following trick: to increase height of a currently selected (i.e., one that is located beneath a cursor at the given moment) row. Of course, this increase should affect the text font height too:
It makes user’s work more comfortable: a text of font size, say, 14 is “more readable” in comparison to font size 11. The larger font size of a selected row helps a user to concentrate on the selected row – one he/she is interested in at the given moment.
You try this yourself on the http://files.rsdn.ru/44022/JoannaDemoPage.html Silverlight application.
Implementation
The Tip contains sources of the http://files.rsdn.ru/44022/JoannaDemoPage.html Silverlight demo (as a MS Visual Studio 2010 project) attached .
As you can see, the implementation is trivial. The “increased” height is on 33% larger than the initial one.
Of course, usage of the technique is not limited by Silverlight only; it can be applied to any GUI that has Lists/Grids/Tables with “current row selection”.
