Design like it’s 1999

Simon Dogger is a product designer. He designs all kinds of physical products. Simon is not really a computer guy. Like most people probably, if he doesn’t have to use his computer, he doesn’t use it. One of the things he wants to do with his computer every now and then is to use the online archive of Dutch documentaries, 2Doc, both for fun and for his research.

When I visited the 2doc website for the first time with the intention to browse the archive, I took a quick look at the site, and without too much delay I found a promising link in the navigation that I clicked on.

An image of the homepage of 2doc.nl

For instance, when we click on the option Thema’s, we are presented with a drop down menu with the options to browse the archive via themes, makers and locations.

A dropdown showing three options to browse the archive

And when we pick themes, we are presented with this nice and easy page with a nice list of meaningful themes. From there on it’s pretty straightforward to find a specific documentary, or to be surprised with the various films that Dutch television has produced over the years. It is an incredible archive.

A clear overview of the themes that the 2doc archive uses

Back to Simon

For Simon things are a bit more complicated. Simon is blind. When Simon visits this website, every single item on the page is spoken out loud to him by his screen reader. And not just the content of the item is spoken out, its meaning is stated clearly as well. For instance, a link to Themes will be pronounced as themes, link. And a heading for the section with new documentaries will be pronounced as heading level 2, New documentaries. I created a little tool to visualise this:1

A visual impression of the extra words that some screen readers speak, compared to the original website on the left.

As you can see, there’s more content on the page for screen readers.2

When the page loads the screen reader gives Simon some extra information about the page, so he can orientate a bit. It tells him how many headings there are (79) and how many links (149).

A summary of headings and links

One hundred and fourty nine links. And one of them is the one Simon is looking for. I’ve watched him trying to find a link to the archives. The screenreader started reading elements, one by one. Navigation! List! Six items! Home, link! Documentaries, link! To him, every link, and every item on the page seems to be screaming: I am the most important thing on this page! With every single link he has to wonder if this is the one he’s looking for, or if it is one of the other 148 links. I think the image where I show the extra content that screen readers add to the page doesn’t visualise the audible experience well enough. I think this next image does a better job of showing the difference between the visible and the audible experience.

A page with an overkill of screaming green letters splattered all over the page, with the original homepage on the left.

Simon quickly gave up. He simply cannot use this site. There are too many things on this page. And there are too many semantics he doesn’t understand.

I made a redesign for him. It’s pretty simple.

A comparison between the original website and the one I designed for Simon

The homepage says:

I’ll keep it short. On this page you can browse the documentaries via: Themes, link; makers, link; locations, link.

That’s it. This enables Simon to browse the archive and use it for his pleasure and his research. Simon was amazed. While he had tried many times before, he had never found these three thematic entrances to the 2Doc archive.

When I showed this design to Yuri Westplat, a colleague of mine and very experienced UX designer, he exclaimed: this is what websites looked like in the nineties! Where did we go wrong?!

Yuri seems to agree with me that there may be something wrong with our current conventions and that it might be a good idea to follow the second Exclusive Design Principle, which says that we should ignore conventions.

In this case ignoring conventions resulted in the very first website that’s not a horrible experience for Simon. I’m not sure if this design is the ideal form for each and every person though. It could be there’s a sweet spot somewhere between the extreme emptiness of my version, and the obese original with its 80 headings and 150 links. Coming up with a website that’s fine for all stakeholders needs further research.

This is a nice example of how easy it is to make something usable for someone like Simon. But it doesn’t really go beyond the usable. There is no personality in it, and we didn’t really explore other possible solutions. In the next chapter I will tell about the invisible animations I made together with Hannes Wallrafen. In this project we went beyond the functional by working with both identity and nonsensical ideas.


  1. Vasilis van Gemert. The Screenreaderizer. Bookmarklet. Github Page. Visited on January 3, 2019. vasilisvg.github.io/screenreaderizer/  ↩

  2. When I counted on the 4th of January 2019, there were at least 418 html elements that have some semantic meaning which gets spoken out loud by Simon’s screen reader.  ↩