Last week I ran into the redesigned website of the NS (Dutch Railways). At first glans I must say it’s very nicely done. The style is kept pretty much the same as the former design. But it appears that some updates have been done in the area of usability. Since unfortunately I don’t have any screen shots of the older design I’ll have to do this by head. But what I seem to find changed are the following:

• The travel information is displayed in a new format
• The user can change the font size
• The user can have the planning read out (for blind visitors)
• And there is a sort of tagcloud for words that other people searched for

Now of course I did a little review of these new features and I would like to share some of my findings/opinions with you.

Figure 1. Travel information

The travel information in a new format
After you type in your “from” and “to” station on the homepage you are brought to the travel information. This page is split in to two parts:

• the left part contains the different travel options you have, with the departure time counting up (Figure 1, part 1)
• the right part is where the travel details are displayed for the selected trip on the left (Figure 1, part 2)

Completely coherent with the newly found web2.0 paradigms, the travel details on the right load without a page refresh. Something the old design did dot. Judging from what happens after the click on one of the travel options, I assume that the designers were a bit uncomfortable with this new technique. Struggling with the question if users would notice this visually “silent” refresh of content they decided to better be safe then sorry.

Why do I think this is so? Well, when ever you choose a new travel option, the box with travel details on the right flashes yellow. Very effective, I must say. It draws ones eyes directly to the new content. But also not very subtle. In a visual way it is like after every click the box is shouting: “Hey!!! Look at me!! I have new content!!“. Now I don’t know about you, but I don’t like to be shouted at. For this reason I would like to present two options that would be more subtle, and clear on what happened.

Improving the visual connection of choice and details
This option (maybe even combined with the progressbar which I present alter in this article) would be the most clear solution. In the current design the two parts (travel options and travel details) are only connected in a low visual way. The selected option and detail are both yellow when selected. But for two reasons I don’t find this creating a sufficiently clear visual connection between the two parts:

• the selected travel option is filled yellow, where the details part only has a yellow border (Figure 1) implying two separate visual zones
• the selected travel option is not connected with the travel details (they don’t touch)
• so if a new travel option is chosen it is not always clear if the travel details belong to the new selection or that they are a “left over” form the former selection

In my redesign I would propose to have the two parts (Figure 1, parts 1 and 2) connect. In this way the travel choice is always directly related to the travel details on the right (Figure 2).

Figure 2. Travel info redesign

The good ol’ progressbar
This would be the easiest to implement and kill two birds with one stone. Being:

• it would not have the “shouting” quality of the flashing yellow box
• it would signal when loading not just when loaded

The later being interesting because the user would want to know if something IS happening just as much as something HAS happened. The flashing yellow box only signals that something HAS happened (new content loaded). But if the loading takes long, there is no way of telling whether something IS still happening.

Figure 3. Travel info redesign + progressbar

Changing the font size
As Jacob Nielsen writes, letting the user change the font size of the website is a very good step for improving your websites overall usability. Since designers are not typical users (and browser behavior is still not adhering to one standard) it makes perfect sense to let the user “tweak” the site to her needs.

Figure 4. Change font size on the site

Trying this feature out made me reconsider the foolproofness of it though. Enlarging the font immediately broke up the design of the site (Figure 5). The left part (travel time choices) started moving over the right part (travel details). With the biggest font size, the left part was actually covering part of the time on the right. The fixed width of the site now prohibits the user from taking full advantage of this feature. Actually making the site less useful when the fonts are changed.
When this occurs you could still make the font smaller again to restore the design to be readable. But I would think there was an important reason why you changed the font size in the first place…

Figure 5. Biggest font breaks design

My advise
As I wrote before, letting the user change the font size when necessary seems good practice to me. But then the site design should be fluid enough to support this. Meaning: the whole site design should be able to adjust to the changing font size, without reducing readability/usability.

Having the planning read out
On the top of the page there is a link that enables (blind) users to have the site/planning read out to them like an integrated screen reader. I would think this is a very interesting addition to the site. Although I would expect blind people who surf the web to already have a screen reader. But maybe for when you are at a friends house and want to check the train times without your reader this might be a handy tool.

Figure 6. Read out page

Trying it out, I found that the technique is not yet perfect (for instance it also reads out “picture” when coming across a picture). But that is still inherent to the fact that HTML is was not designed with the possibility of screen readers in mind. For now I would think this is a good step in helping to support users with blindness. But by no means am I an expert in web design for disabilities, so I would be very interested to hear from someone who is.

The tagcloud
At the bottom of the page (also very web2.0) a tagcloud is added. The cloud contains keywords other visitors of the site searched for. The more searches of a certain word the bigger the fontsize.

I’m not sure what the added value of this cloud is in the context of this site. Other than it being a fresh look at the old fashioned FAQ. Where the regular FAQ mostly is static in nature (set up by the designer/owner of the site) this FAQ would actually be representative of “Frequently Asked Questions”. I would say a nice extra, but no more then that.

Figure 7. Tagcloud