Flipping Things

A visual, scrolly essay in which Vasilis van Gemert explains why he decided to turn the inclusive design principles on their head.

As a kid I wondered what the back of paintings look like. Can I see the back of this ox-alien on the back of this painting?

Alas, most pictures are rather boring from behind. I could have concluded as a kid that it is not interesting to flip things. But I didn’t.

It’s worth exploring what things look like from the other side. Flipping things triggers the imagination. It could be that the actual result is boring, like this example here. But thinking about what it could have been may very well be exciting. The possible results are what it’s all about.

For instance, what does the incredible trompe l’oeil painting of the reverse of a framed painting[1], that Cornelius Norbertus Gijsbrechts painted around 1670, look like from behind? Is it boring? Is there a naïve child’s drawing on the back? Or, more logical in a way, did Gijsbrechts paint a portrait of me on the back? Then maybe, more practical, is there a mirror on the reverse of this painting?

Flipping things professionally

Where do you start with a redesign?

Recently Vitaly Friedman has been talking about the redesign of the Smashing Magazine website a lot. During a talk at the University of Applied Sciences in Amsterdam[2] he explained that it’s necessary to turn things on their head if you want to make a lasting impression. Most websites nowadays look the same. They follow similar interface patterns, and even the look and feel is often comparable. If you want to stand out in a highly competitive world, Friedman argues, you have to make sure people remember you.

One way to do this is to forget the idea that you shouldn’t make users think[3]. If they don’t have to think, Friedman says, they don’t remember you. This doesn’t mean you have to fill your sites with dark patterns and complicated hurdles. Instead Friedman tries to make Smashing Magazine more memorable by adding small details that may seem nonsensical at first, but play nice with the personality the site is reflecting.

Most website redesigns start with the homepage. Many people think this is the most important page, so it seems logical to start there. Friedman did not start with the homepage. The homepage, he argues, is a result of all the details, the identity, the tone of voice, the look and feel of the rest of the website. Since the focus of this redesign was so much on the identity, he started with writing the copy for the error messages for form fields. In most web projects these messages are an afterthought at best, but Friedman explained that this is one of the places where a clear vision of identity is most needed: what do you say to a customer when something goes wrong, and how do you you say it? This is the difference between a returning client and somebody who goes shopping elsewhere.

Flipping principles

According to Alla Kholmatova there are good reasons to flip things around. In her talk about design principles at CSS Day in Amsterdam[4] she explained that reversing the principles that your competitor uses can give you insights into where there’s room for innovation. This is what Friedman did. By focusing on the identity, instead of just focusing on the content, he made a website that stands out in many ways.

Kholmatova went on to explain that flipping design principles is a good way to test their validity. If you can imagine someone else working with the reverse principle, it is valid. For instance, if you want to know if be relevant is a valid principle, you try to imagine if someone else might try to be irrelevant. While many companies are indeed irrelevant, it’s probably not printed on the walls in their offices. On the other hand it’s easy to imagine two competitors, one of whom is bold, while the other prefers to be understated. Be bold is a good, clear principle, and be relevant is not.

This is exactly what I did in an early stage of my research: I tested a set of inclusive design principles[5] by flipping them. These reversed principles evolved into the set of exclusive design principles I’ve been working with ever since.

  • Consider all contexts
  • Be consistent
  • Prioritise content
  • Add value
  • Study situation
  • Ignore conventions
  • Prioritise identity
  • Add nonsense

Flipping principles

Some of the original principles don’t seem to pass a literal flip-test. Yet, by taking some liberties in the flipping process, these became to be most valuable for my research[6]. A literal reversal of adding value would be to remove value. But instead I changed it into add nonsense which turned out to be a handy tool that can transform a common idea into an innovation. And instead of turning the principle prioritise content into something like forget content I changed it into prioritise identity, which forces designers to think about the personality of everybody involved.

Study situation

I asked a group of students to design a website for our minor web development. Usually such a website would be designed with familiar web design patterns for common forms of interaction, like a mouse, or a screen. But in this case they’re designing only for Marijn, who I asked to join because he uses his computer in his own particular way since he is motor disabled. They observed closely how he uses his computer and came up with some interface experiments. These range from a crazy way to type letters with a numeric keypad — which turned out to be surprisingly useful — to experimental ways to go through lots of interactive elements on a page. Many of these attempts failed, as was to be expected, but others made it to the final product. These tailor made interactions are not just pleasurable for Marijn, but may very well enhance the experience of common web users as well.

Apart from being unique for Marijn’s situation, the students also actively ignored common best practices. Which is what the next principle is about.

Ignore conventions

During a design challenge I organised[7], one of the teams came up with the idea of a new kind of layout for the web. Right now, they argued, most websites are boring and they all look the same. What if instead of looking like they do today, they would all look like a simple grid, with each cell containing one single action. The web would still look boring, but at least this way Marijn could easily navigate through websites using the joystick on his wheelchair.

Here’s a more gripping example: Recently I observed Simon Dogger, a blind designer, while he was trying to use the web. The most basic tasks — like transferring money or ordering groceries — were extremely hard, or even impossible to do. One of the things that struck me while I observed Simon is that the common visual patterns that we use, like a navigation on top of every webpage, made no sense at all to him. It would be interesting to make prototypes of custom design patterns exclusively for Simon, like we did with Marijn.

Prioritise identity


Photo: Gitta Schermer

Two teams at two different design challenges came up with the idea of a device that could describe a room to Larissa, a blind student[8]. Instead of secretly whispering the observations into headphones, they decided to let her guide dog speak the information out loud. While this may seem nonsensical at first, it does open a few welcome possibilities. For instance, the dog could tell people who want to pet it that alas, this is not allowed. Now all of a sudden we have to think about the personality of the dog, the combined personality of Larissa and her dog, about tone of voice. A talking dog could break the ice in awkward situations. At the same time it might be awkward if a happy chatting dog walked into a funeral parlour. This idea definitely needs some prototyping and some finetuning.

Add nonsense

Without the explicit question to add nonsense these examples wouldn’t have existed. The dog would be replaced with headphones, the idea of replacing something boring with something else that’s boring wouldn’t have passed the test, and the idea to type letters with the numeric keypad would not have been investigated further.

A saturated, light orange rectangle — not wide at all and of average height — on a rather unsaturated, light magenta background.

The same holds true for a script I wrote a few years ago that translates colours to human readable text[9]. At first it seems nonsensical to speak out colours to people who are blind: people who cannot see don’t know what colours are. But there are many forms of blindness. Some people do see colour, others remember them. This script is being used in a tool a student of mine is developing that tries to figure out the visual mood a the website someone is visiting. This idea started out as a rather nonsensical plan to turn websites into a 3d printed object, but is in its current form growing into a welcome addition for blind people for whom all websites all sound the same: an emotionless reading by the synthetic voice of their screenreader.

I started this visual essay with the trompe l’oeil painting of the reverse of a painting and I wondered what it would look like from behind. Charlotte Gran of the Statens Museum for Kunst in Copenhagen, Denmark was so kind to send me the high resolution image I was looking for. I’ll leave it up to you, dear reader who has managed to scroll down this far, to decide if the reality of flipping this painting is as interesting as the little thought experiments about it