One of the most beautiful interactive charts I have ever seen is Gapminder World 2006, which merges impressive data visualization technology with human development statistics.
This chart allows you to compare worldwide statistics such as population, % of women in the workforce, and poverty. The two axes can be changed on the fly, and on mouseover each country or geographic region is highlighted. There is even a timeline with a playback feature that shows an animated progression of the chosen statistic over time, such as a depiction of the falling birth rate from 1960 to 2000, or the rise in Internet usage. The chart can even be superimposed on a world map for a different perspective.
The Gapminder.org website also offers printable versions of world statistical charts such as education, life expectancy, and HIV prevalence.
I recently started using Tortoise SVN (Subversion) to get a handle on version control in a multi-programmer project. Subversion is a Good Thing—you know, subvert the dominant paradigm, just like we learned in college.
However, I was having trouble getting Subversion and Dreamweaver to play nice. You see, Subversion places a “.svn” directory inside each of the directories that you commit to the repository. This contains the files that keep track of your versions. But if you publish to the web straight from Dreamweaver, the .svn folders go too. The only way I could think of to prevent this was to manually cloak each .svn directory, which needless to say is a huge pain.
Blog search to the rescue! Josh Buhler.com pointed me to a Dreamweaver extension that automatically cloaks all .svn folders in your website. After you download the extension and install it with Extension Manager, there will be a new choice under the Commands menu: Cloak SCM Directories. Easy!
Recently I had the task of designing an online data collection form that included a “top three” question. This question requires the user to choose three favorites, ranked in order of preference, from a long list of options. The user can only choose one item for each ranking (i.e. there can’t be two items ranked #1).
Designing this is tricky, especially if the list of items is longer than one screen (more than 20 items). If the contents of the list are known entities (for example, product names that the user is familiar with), data entry would become faster once the user has filled out the form a few times. For a new list or a list of lengthy items, however, the task has more usability issues.
I worked out three different approaches to desiging this question, each using standard form elements: radio groups, pull-down lists and text fields. Advantage and disadvantages are given after each example.
1. Radio groups
Example:
Advantage: With radio groups it’s easy to restrict the user’s choice to one first, one second, one third. It’s easier to scan and visually compare items, especially those that are sentence-length or longer.
Disadvantage: If the list is longer than one screen, the ease of scanning is reduced.
2. Pull-down lists
Example:
1st Choice:
2nd Choice:
3rd Choice:
Advantage: Saves a lot of screen space. Easier for the user to verify her choices at a glance before submitting.
Disadvantage: If the list is very long, or the list items are longer than a few words, scanning inside a pull-down can be very difficult.
3. Text entry
Example:
Beaujolais
Burgundy
Cabernet
Chablis
Chardonnay
Fume Blanc
Gewurtztraminer
Montepulciano
Petit Syrah
Pinot Grigio
Pinot Gris
Pinot Noir
Riesling
Rose
Sangiovese
Sauvignon Blanc
Shiraz
Syrah
ZinfandelAdvantage: The user can see the ranking directly next to each item.
Disadvantage: There is too much room for data entry error, even with form validation rules.
Generally I prefer option #2—pull-down lists—because they take up the least space on the page. For a list of sentence-length items, however, radio groups are probably best. You could also create a list of abbreviations to represent long items (such as paragraphs), but this requires the user to take the extra step of interpreting the abbreviation before evaluating it.
Ultimately, the question should probably be written differently in order to avoid the cognitive overload of prioritizing a long list. But, as we all know, the designer doesn’t always have that option, hence the task at hand.
If a visitor to your website has downloaded the Google Toolbar and uses Firefox to view your site, form fields with common names (First Name, Email, etc) will display in yellow. To circumvent this design snafu, place the following in your CSS:
input[type=”text”] /* To keep form fields consistent */
{
background: #FFF !important;
}
This doesn’t impact the functionality of the Google Toolbar, it just ensures that the fields in your form don’t take on funky colors.
