Kind regards,
Rein

• 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

Hi Julius,

very interesting how you came to be the first and ever fastest writer on my blog But welcome and thanks for the extensive reaction. I will try and give feedback as fully as I can.

I think we are on the same page, only we name it differently. For instance, you say that all design is the same. It all has the same kind of decisions to make to come to a design.

This is true. But on a very abstract level. The model I drew up does not show this layer because I only focus at the field of Interaction Design. But you could think up a layer under the “Basic Knowledge” layer in the model. This would represent all overall “Design Knowledge”.

However, to get to concrete solutions and designs, I think it is necessary to specify. Designing for Interaction needs a certain specialization as does Graphic Design, Industrial Design, etc.

Saying you are a designer is true for everyone on some level (as shows the new IKEA campagne ;). But in that sense everybody is a bike mechanic (you mend your own bike, right?) and a stylist (you buy your own clothes, right?) and a …

Of course we all know something about anything. But for professional application of these skills one needs to know more then just a bit.

Just because you know how to use a knife and sometimes sow your own clothes, doesn’t make you a surgeon. First you will have to have general knowledge of the body (be it human or animal). Then you need to build knowledge on the toolkit at hand (the knives, the stitching techniques, etc). And from there on you can choose to specialize.

This is the same for any other field. And therefore for Interaction Design it is no different. Of course you can choose to be generalist in the field (like a house doctor). But you can also choose to specialize in a certain field (hart surgeon, or plastic surgeon).

Continuing the example of the surgeon, in that field there is knowledge available of over thousands of years (http://en.wikipedia.org/wiki/Surgery). Techniques and tools have refined and specialized over and over again. Enabling surgeons with more and more knowledge and understanding of the human body. Thinking up new techniques, cures and tools.

Interaction Design has been around for only as long as there has been computers. Which is about, give or take, 50 years. It should be clear that there still is a lot of discussion to be done to really get to the core of things on this field.

In order to be able to discuss, there has to be something to be discussed. In that sense, saying that Interaction Design is like any other design, is a great first step for a discussion.

Why this distinction? Well for the time that I have been involved in the area of Interaction Design (which is about 4 years now) I have come know at least one thing for sure. There is still a lot of uncertainty about what Interaction Design really is.

During my Interaction Design study for instance at the Higher School of the Arts in Utrecht there have been lots of discussions about what you would be doing or would have to know if you were an Interaction Designer.

Almost everybody had a different opinion. Even the teachers told time and time again that ‘Interaction Design is really broad’. So you couldn’t really say what Interaction Design was. Everybody would find their own way in it.
As for most of my co-students, well it varied from an Interaction Designer being pretty much everything in the digital field (programmer, designer, developer, project leader) to the traditional arts (theater, painting, etc).

I always objected to that approach towards Interaction Design “it’s really broad so you can become pretty much anything”. In the beginning I didn’t really know why, but something just didn’t feel right. How can a study be “pretty much anything”? And especially a study like Interaction Design about which in articles on the web and more and more books there seemed to be very a specific description.

I figured it probably had something to do with the fact that school wasn’t the “real world”. The world were real world products had to be designed and build. Were you had to make decisions. So if I would do my intern I would finally find peace and understanding. People there would know what Interaction Design really was.

Well, that turned out not to be true. Most of the people I talked to described an Interaction Designer as someone who “knows a lot about and works with Flash and actionscript” or didn’t really know either.

During this search for answers and more clarity on the matter I started reading more and more articles, blogs, websites and books. Trying to come to a specific core.

Form this search I have found that Interaction Design can be spoken about in (at least) two layers.

• The underlying basic knowledge within Interaction Design
• The (specialized) practicle fields of application of Interaction Design

The underlying basic knowledge within Interaction Design (IxD)
This is the part of IxD that covers the goal, basic knowledge and general competences of IxD:

• goal: “defining and designing the behavior of artifacts, environments, and systems, as well as the formal elements that communicate that behavior” so that the end user will be able to achieve her goals without feeling stupid (Cooper, 2003).
• basic knowledge: human psychology (gestalt, mental models, way finding, etc)
• general competences: user research, flowcharts, wireframes, basic interface principles.

These are what I would call the basic competences an Interaction Designer needs. Since this part has been already explained in ways that are way better then I will be able to, I recommend you read the article “So You Want To Be An Interaction Designer“ at the Cooper website or, even more elaborate, the book “The Inmates Are Running The Assylum“. The part of IxD where I want to put my dime in the bag is that of the specializations.

The (specialized) practicle fields of application of Interaction Design
About the basic knowledge and competences of the IxD field a lot of people have written. And it seems that by now that part has pretty much settled. It seems to me that the people in the field (no matter what specialization) seem to agree on this part of IxD.

But still in conversations it seems that they don’t. When listening carefully you discover that both parties are much more close than seems at first hear. Most of the disagreement in conversations about IxD comes from the lack of distinction between the ‘basic knowledge’ and the ‘specialized field knowledge’. Simply said, even though an interface on the web is as much an interface as one on a mobile device, different aspects have to be taken into account for each.

The interface on the mobile device for example, will be most probably be used for short, low-level tasks. Whereas the interface on the web will most likely be used for longer periods at a time with a broader reach of application. This means that even though both interfaces will be designed with the use of gestalt theory, user testing, etc. (basic knowledge), the way and the intensity in which these will be used will be different for both (ignoring the fact of them being to different projects even without the difference of platform). What works with a web interface doesn’t need to work with the interface on a mobile device.

Concluding
What this means is the following. When talking about the field of IxD it has to be clear about which layer we are talking (basic or field) and if it is about a (specialized) field we need to make clear what field it is. Following we need to be very careful in trying to compare solutions of IxD across specializations. As said, they might translate very well, but then again they might just not. This doesn’t mean that either of the parties involved in the conversation is right or wrong. It just means that a solution has its limitations within a certain field of specialization.

Since my IxD highest interest (at this point in time) is in the web as software interface (Garett, 2003) the solutions, questions and problems I present on this weblog are first and foremost concerned with that specialization. In this way I hope to discuss these items and in the first place help move forward that field of specialization and IxD as field in general. In the second place I hope the articles, solutions and discussions will also be of value to the other IxD fields of specialization.

Enjoy, and please feel free to join the conversation.

Bibliography

Cooper, Alan and Robert Reimann. About Face 2. 0. New York: Wiley, 2003.

Garrett, Jesse. The Elements of User Experience. Indianapolis: New Riders, 2003.

So if you want to know more, check it out. And don’t forget to check back for when the blog is really live!