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.

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 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:

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

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).

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 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.

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 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.

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

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.

Join the discussion

  • Peter Heery
  • #

Hey Vasilis, interesting approach.

In usability studies with screen reader users, I’ve observed in documents with lots of links it can be difficult for people to find what the call to action is (for reference, there’s a similar thread on a webaim mailing list https://webaim.org/discussion/mail_thread?thread=7685).

I proposed a new attribute that can be added to a link to help give it relative prominence to the other link in the document – you can read this at https://github.com/w3c/aria/issues/559#issue-222003196

  • Vasilis
  • #

That would be so handy. With such an attribute you could write a script that removes everything but the important actions.

On topic? Friendly? Excellent!