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, for his research.
When I visited this site for the first time with the intention to browser 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.
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.
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.
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 screenreader. 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 tried to visualise this:
As you can see, there’s more content on the page for screenreaders.
When the page loads the screenreader 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).
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 all 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 screenreaders 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.
Simon quickly gave up. He simply can not use this site. There are too many things on this page. It’s a haystack where the needle looks like hay.
I made a redesign for him. It’s pretty simple.
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?!
I’m not sure if this design I made for Simon is the ideal form for each and every website. It could be there’s a sweet spot somewhere between the two paragraphs and three links of my version, and the 80 headings and 150 links of the current version.