To get you started in this brave new world I decided to just quickly write down the basic readings and resources I would recommend. Enjoy!

Books

• Design Professionalism (http://tinyurl.com/yzwsbug)
• Adaptive Web Design (http://tinyurl.com/5tdufty)
• Responsive Web Design (http://tinyurl.com/3fupe7s)
• HTML5 For Web Designers (http://tinyurl.com/4nh2ejt)
• CSS3 For Web Designers (http://tinyurl.com/6ev62sl)

Resources

• FireBug Firefox plugin (http://tinyurl.com/69o8339)
• WebDev Toolbar Firefox plugin (http://tinyurl.com/5vz36r4)
• HTML5 Boilerplate (http://tinyurl.com/2udokbm)
• CanIUse.com (http://tinyurl.com/2ajfddo)
• PPK CSS compatibility table (http://tinyurl.com/dhn2mt)

Advanced resources

• Book: Pro CSS for High Traffic Websites (http://tinyurl.com/5ujvjd9)
• Book: Secrets of the JavaScript Ninja (http://tinyurl.com/myw6t8)
• Responsive Images .js (http://tinyurl.com/3hg7zhg)
• Book: Even Faster Websites (http://tinyurl.com/kssx5o)
• HTML5 boilerplate DOCS (http://tinyurl.com/6a66yrk)

People seem to have a naif believe that digital technology (from now on technology) will solve all our problems. Of course there are numerous examples of where technology acutally helped us a big deal. Bad at spelling? Automatic spell check to the rescue. Too much accidents on the road? Just install an auto pilot for cars. A certain amount of people don’t pay for there public transport ticket? Set up digitally controlled perimeters around all public transport entries and have people check in with a chipcard. Need more overall control of the masses? Invent Cyberdine…

The challenge I see in this trend is that most of the technological solutions nowadays are not drawn up by people with in depth technological knowledge and experience. Few would see a problem in that. And I can understand since I learned (from working at a consultancy firm) that management does not need to have in depth knowledge of the issue they’re deciding on, as long as they have good advisors.

Technology is inhuman

But the big difference between decisions and planning on a social level and the same on a technological level is that technology is inhuman. Where most social decisions can be brought back to some sort of situation that one has experienced herself. This is not possible with technological decisions. Since technology is an invention of a distinct group of humans. It is not something that we inherently know of. It is not something, like talking, walking, loving, thinking, etc. that comes to us naturally. Or even something that we come into contact with so often and naturally that we make it our own.

The construction of technology is something that has to be learned. It is something that takes effort and interest to get a grips of. And only when you actually get your hands dirty with constructing your first technological entity, then, and only then, will you understand what dependencies, abstractness, challenges and unexpectedness it comprehends. Only then will you be able to start wrapping your head around it.

Technology is pure creation

At the same time this hands on experience should install the notion that what you are doing is pure creation. Making something out of nothing. All that the existence of technology brings is the possibility of creating things that are not there (yet). It is in it’s purest form where we humans, take over from evolution. And no matter how small or big the technological creation is that you embark on, this realization is nescassary to start getting a grips on what unexpected consequences you might set in motion.

I would even be so bold as to state my believe that for people who have never touched code it is not possible to understand the matter. Schema’s and abstract explanations will never be able to incept the understanding of the nature of technology as writing code yourself will. Therefore understanding the possible implications of technology is almost but impossible for such a person.

Technology is magic

One of the big problems with technology is that of  sir Arthur C Clarke’s third law: “Any sufficiently advanced technology is indistinguishable from magic“. With this law also comes the assumption that technology is flawless. How else can it be? Have you ever seen a magic trick go wrong? Seen the maid actually being cut in half? Seen the elephant not disappear in front of the crowd’s eyes? You will probably have to answer with ‘no’. Because magic is flawless. And because of the phenomenon of Clarke’s third law this property of flawlessness is also contributed to technology by those who are no ‘code magician’ themselves.

But, you see, the big difference with a magic trick is, that technology is not rehearsed. It evolves as it is being used. It is created while it grows. It is learned while it creates. There is no magician who is in full control of ‘the trick’. It is a pure, unlearned, uncontrolled , unrehearsed form of creation. Of evolution.

The human flapping his wings

There is, however, another part to this difference. In the case of technology ‘the trick’ is never created and performed by just one individual. His part is always part of a bigger whole. Most of the whole unknown to the rest of the whole. In effect technology is a fractal. It is a chaotic system and we humans are the butterflies.

The problems that we are trying to solve with technology are real problems. And the technology we are trying to create for solving them are real solutions. But these solutions are still human created solutions. Humans who make mistakes. Humans who perform ‘the trick’ for the first time, unrehearsed, unpracticed, unpredictable.

Technology projects run out of time, out of budget and cause bigger issues then they were supposed to solve because we are fooling ourselves that we know ‘the trick’. Or at least the ones that are doing the actual creation must know ‘the trick’. But when the ones, who do not know what it actually is to perform ‘the trick’, to create magic, are the ones that make the plans and the goals for what ‘the trick’ should magically do, then the distance between reality and magic is too far. The magic is being steered by a naive kid who thinks the magic can solve all its problems. Flawlessly….

Conclusion

I guess my reason for writing this article is to point out a couple of things:

• technology is not magic
• technology is manmade, and thus never flawless
• you need to have created technology to understand technology
• technology does not solve our problems without creating new ones
• technology creation is a chaotic system, and we are the butterflies…

• 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!