Visual Representation

This is an ideal place to explain it. This is the house that belonged to Jim Ede, who is the first curator of modern art at the Tate Gallery in London. His house here in Cambridge. He used his personal collection to explain to Cambridge students about theories of art and painting. So on his walls, we have examples like this painting by Christopher Wood of a snowy scene in Paris. So you chose this painting, but why did you choose it? Why didn't you choose a photo which seemed to be a better representation?

Sure. So there are other ways I could use technology to give us an impression of where we are. So I could use Google Earth to look at Paris, for example. Or I could come right here on Google Maps and we could say, Here we are at this house. Seems to be more accurate. Well, yes, but a map is one kind of an image of a place, and it doesn't really give you an idea of what it's like to be here.

So to some extent, he's giving you a picture of what it's like to be here. If you look at this, though, the perspective is extremely unusual. It is. It looks almost childish, in fact. But there are no real rules about perspective. Perspective as any system by which you take a two dimensional surface and use it to represent a three dimensional scene. So the camera picture that I took of you just before, that's camera lens perspective and particular distinct way. Those artists, Leonardo Da Vinci and so on, they had their own schemes.

At most periods in history, there have been different kinds of perspective. Willis was completely self-taught, and he invented his own perspective, invented it in much the same way that children do to show the things that are important and the things that interest them. In fact, this is directly relevant to something like the scene that we see on the screen of our computer. When you see the Microsoft Windows screen or the Macintosh or the Xerox star, what they do as this system does this this painting does their representations of the important things.

Some of them are memories. Some of them are ideas. And they're arranged on the screen. This shows you the things that are important. They're a kind of perspective, but not a pictorial perspective. So we need to be aware of those options, the ways that we can arrange the graphical elements and our two dimensional seem to carry different meanings. This sculpture is also a representation, perhaps as a clue. I could tell you. It's name is Bird Swallowing Fsh.

So this is a sculpture of a bird swallowing a fish. Although even that is a little hard to see. For many years, I wasn't clear which part was the bird in which was the fish. But there's a clue. Here. Here we have the bird's foot. In fact, it doesn't resemble the foot of any bird. But I can see it's a bird's foot. Precisely. It's a symbol of a bird's foot. It's completely generic. And this is telling us this shape is saying this is. This is a bird.

But, of course, there's a lot of other interesting symbolism here. For example, why is the fish... The fish actually doesn't look very much like a fish... And it comes from above. Well, yeah, that's right. This shape is like the shape of a torpedo or a hand grenade. He was working around the time of the First World War. So the fact that we have a very violent scene in which fish is looking like a hand grenade is meaningful. So visual representation is actually all about symbolism.

You could say. Absolutely. Sometimes it's done well and sometimes it's done badly. So as an example, once for a project that I was involved with, they wanted Icon to represent the button. You should click to change what you're working on. And what they did was, in English, the word “change” means modifying something, but it's also a pile of coins like this.

The icon they used on the button was a pile of coins to indicate this is the button you should use to change your work. Quite confusing. So if you don't speak English, of course that picture is not meaningful at all. So symbols are about correspondence. This is a correspondence to the foot of a bird. This is a correspondence to war and visual puns, correspondences. We can use all of these things when we design visual representations for technology. Some are good and some are bad.

It depends on what the people who are going to be seeing are displays understand. This preparatory sketch of the bird swallowing the fish. In fact, it is a representation of a very distinctive incident in Henri Gaudier-Brzeska´s life. He was sitting by the Serpentine Lake in Hyde Park in London, and he saw the actual event. He saw a bird swallowing a live fish. And the drama of that event was captured in a very small number of pencil lines in this sketch.

The water system movement that he was part of their main priority was to capture expressive movement in art. So with only a few lines, you can see precisely what it was. The dynamic that he has captured in sculpture. So this is one of the other real values of visual representation is that there were many things going on that day in Hyde Park. There were there was grass, there was sky, There was other people sitting around.

There were probably waves. There's many other things in his sculpture. There's the texture of the bronze and so on. But when we make a visual representation, it's possible to abstract away all of those things and convey simply the essentials. And this means that visual representations can be a tool for conceptualization, for analysis, and for making plans about what we intend to do. So those things also are true of technology that we use visual representations to remove the complexity of scenes

that we would see in a photograph or a visual representation.

One of the other tools you have in your toolbox for making visual design is alignment. So, let's see how you can use this in order to help you help the user achieve things. So, first of all, let's think about text. Now, what I'm going to do is assume that I'm an English speaker and I'm an English writer. And so, I have a left-to-right text that I use.

I'm also learning a bit of Welsh. And Welsh also is a left-to-right language, as are most European languages. If you come from a language which is the other way round, or if your users' are right-to-left languages, then you need to flip everything I say for the next slide or two the other way round as well. So, being aware of your users is absolutely crucial here. But I am going to assume left to right. So, for left-to-right text, then you normally want to align things to the left.

And this is the most common. You'll have seen this in many, many layouts. So, the reason for that, though, is that if you're scanning text, you read left to right, and therefore you want your eyes to go down and very rapidly move down the left-hand side of that text and scan the beginning. This is partly driven by the fact, too, that you distinguish that beginning bit first. There may be contexts where the end of a sentence or the end of a title

is the most critical bit. So, you might want to reverse this. So, again, think purpose. Why is somebody looking at this line of text items? And if what they're trying to do is scan something and if what they'd like you to distinguish, which is the most common case, is the front of the text, then you left-align. It does tend to be a bit boring sometimes. So, you might want to mix it up. But if you do, and if you right-align – and I have used right-aligned text; there's occasions I've used it –

you have to know that makes quick scanning to find something more difficult. However, there might be... if the context is somebody knows the name of a film and they're trying to find it in order to choose it, and they want to do that quickly because it's about to start in a few minutes and it's a live film, you want to make that as easy to scan as possible. However, perhaps if you're just making new suggestions of films to the user and the user doesn't necessarily recognize them straight away – so, what you're doing: it's a range of things they're looking at – then it may not matter as much

whether they're left-aligned, right-aligned, or maybe center-aligned in the middle. So, there are times for special effects when you want to do that. But you have to understand then that a particular purpose, which is scanning to find something that you recognize is going to be harder.

I'd like now to distinguish two words, which sometimes you'll probably hear me use interchangeably, but actually have a subtle difference: sensation and perception. In one sense, there's the things that we really hear, and shall we say, the immediate senses. This is what in psychology is called sensation.

So with your eye, the photons actually come into the back of your eye, hitting your retina and the nerve cells, noticing those and creating a signal. When you hear, little hairs in your ear are getting wiggled by the sound and then passing that into your brain. So that is the raw sensation. That's the absolute raw sense of what's there.

However, our brains do lots of work with that. They process what are those raw sensations in order to give that sense of that feeling of actually what's there. There's a couple of examples of this you can think of. So, for instance, if you... Looking at your room, just glance at the room you're in, you'll have a sense that you can see it all, but actually your eyes dance around and builds it up slowly.

So that raw sensation at any one moment is probably that everything in the periphery is fuzzy. But you don't see that. What you believe you see is something that's sharp everywhere. Because if you ever need to know about a bit of the room your eye will glance to it and it will become sharp at that moment. So your perception of the room and your visual perception is that it's large, it's everywhere, and you can see it all. Your actual sensation is much, much tighter than you can see clearly.

Because these differ and because they are about the meaning of the world... We are *meaning-giving creatures*; we're trying to find meaning and sense in this world. You can sometimes use this creatively to create effects, but you could also sometimes get, shall we say mistaken effects because of this. And optical illusions use this very much in order to fool your eyes because your eyes are trying to create sense of the world and you can sometimes fool them.

So here's two optical illusions, both of which are based on linear perspective. There's the Ponzo one. So if you look at that picture, it's a ladder with two blocks, and it will look as if the block at the top is bigger than the block at the bottom. The reason for that is your meaning bit of your brain is saying, "It's doing, the ladder's doing this," so it's probably sloping away from you. If it's sloping away from you, then something that takes the same amount of visual space

further away must be bigger. On the right is the Müller-Lyer illusion. So the Müller-Lyer illusion is two lat[eral] lines and then two arrowheads and one has got arrowheads going in and one's got arrowheads going out. And if you look at it, you probably will see the one with the arrowheads going out as being a longer line than the one at the bottom. In fact, they're absolutely the same size and the same length.

However, your eye sees the one at the top longer because it looks a bit like the back edge of a box – so, again, in terms of perspective, if the line's going... It's like looking at the back of the box whereas the ones at the front is more like if you're seeing the front end of the box. And of course, again, your eye is saying that probably means the one on top is further away. Although it takes the same amount of distance on the back of your eye, that probably means it's actually larger. Now all that's happened, when I say "probably", you're not reasoning this out.

This is all happening tacitly, unconsciously. You've got no idea it's going on. And it's very hard, even though you know those two are the same length to actually be able to see that. Now, it was thought for a long time that a lot of us... and some of these illusions really are very basic; they're built into our – shall we say – our most primitive base being, the things that we've had for, you know, 10-20 thousand years,

probably longer as part of the way we see the world. And it was thought in particular the Müller-Lyer illusion was one of these. Something that's very, very basic. I know I found problems with this for many years because linear perspective, it's actually hard to think, shall we say, what in the wild corresponds to linear perspective. And sure enough actually, what's been realized relatively recently is that most subjects of psychological experiments are what's been called WEIRD.

By "WEIRD", it's White, Educated, Industrialized, Rich and Democratic. So basically, think of US psychology students as subjects of most psychology experiments – or British ones for that matter. So you actually end up with a very select set of people

for which we believe everything is true of. And of course, actually that turns out not to be true. Crucially, an awful lot of things which appear to be very fundamental psychological effects turn out to be *cultural*. And crucially, this thing about the Müller-Lyer illusion is one of the ones that is not the same. So if you have a... there is a relatively small number of experiments where this is the case, but there are some experiments that have been done with people who have been brought up in

the middle of forest jungle environments, but without built straight lines, concrete and brick structures. And when that's the case, the Müller-Lyer illusion doesn't work. They see the two lines as the same length. This is a learned effect that's happened from childhood, where because you live in a built environment, you end up with particular illusions. So these are partly about sensory perception, but perception is based partly on

– shall we say – built-in parts of your brain. But also the culture in which you live changes the relationship between raw sensation and perception. So, you know, optical illusions can fool you. However, actually, if you think about it... So there's the kind of optical illusion like Müller-Lyer, but also you've probably seen those trick photographs where you think something's bigger than it is

or you see something and it says, what's this? And you've got no idea. And then there's some small tweak and it's zoomed out and "aha, of course". Now the interesting things about those is partly it's a perception thing that your eye can get fooled. But they're often deliberately chosen at a very unusual eye position. So you may take a photograph of something so that certain things line up, that then make it confusingly look like something else. And you only have to perhaps move your head a little bit.

You know, if it was a real thing that you were looking at, you would move it, you would move your head. And suddenly it would all make sense. Our perception systems are designed for the real world. They're not designed for static images on screens. We've learned to deal with them – I said culture comes in here. So our brain is trying to make sense of this all the time. And that can sometimes mean you can get these optical illusions that can be confusing. But also that can work to our advantage because we're trying to make sense.

So this is something you can think about in design, both things that can go wrong, but also things that can go right.

Gestalt principles are principles of human  perception that describe how we group similar   elements, recognize patterns and simplify  complex images when we perceive objects.   - So, Gestalt principles — sometimes called  Gestalt laws — are simply a way of thinking through   Gestalt psychology — 'Gestalt' just meaning 'form', is how we're making sense of a visual field. These are ways of parsing out what things mean within a visual space. Gestalt relies first and foremost on the understanding of a visual field and the ability to create

what are called *figure/ground relationships. So, figure/ground relationships are sometimes called 'positive space' and 'negative space'. So, I'm going to talk about them as figure/ground, because when we look at something like this visual field of rectangles, it all looks the same — that is right now our ground. But the first rule of figure/ground relationships is that discontinuity creates figure. So, by changing one thing here, by creating that discontinuity, that draws our attention,

that becomes the thing in which we are focusing on, and that is really essential, because this can manifest through the Law of Similarity, by which visual similarities are read as being more related. And we can do this through color; we can do this through shape; we can do this through size. So, we read these things as being more of a group. Proximity works in a similar way wherein the actual visual or physical proximity of things relative to each other tells us that these are also read as a group.

There's the Law of Continuation, by which our eye wants to follow a particular line. And so, when we read this visual, we don't read it as two lines which have met in the middle and made a hard turn. We read this as two lines flowing over each other, and that's because of continuation. And all of these things — Gestalt principles —  influence hierarchy, informational grouping and readability, and they become essential for understanding both concept and content.

The way in which we talk about the psychology of color also fall into the category of human invention, if not fake news. And unfortunately, there is very little research about how the brain actually responds to color. Most color psychology, quote unquote, “facts” are not based in science. And to understand our responses to color, it's crucial

to look at three different ways color affects our psychology. The first is our biological response. And we do know a bit about how we respond biologically, for example, to red objects. They inspire fear and sexual desire in scientific studies that have been done. We also know some things about how we respond biologically to blue light. It can help us with everything from seasonal affective disorder

to issues with our internal clocks to problems with concentration. The second is our cultural response. For example, in the West, blue is by far and away the favorite color and yellow, the least favorite color. But if you move to the East, yellow climbed to the top of the charts. And these differences have to do with different cultural associations with various colors. And the third is our personal association with color.

So if you happen to have gone to prison and were put in a pink cell, you probably have a pretty negative association with pink. But if you had one of your best nights of your life in this beautiful pink restaurant, you probably have a very positive association. So don't be fooled by claims like peach increases the appetite or green calms you or yellow uplifts you.

These might be true for some people whose personal, cultural and biological responses line up to support these claims, but test a different group of people across the globe or even in the same family, and you might find completely different results. It's not to say that color doesn't affect people. It of course, affects people. And often it's the same color can affect people all at once.

For example, if you put a group of people in a fluorescent yellow room with yellow floor walls and ceilings, I'm sure that group of people is going to feel something. But whether everyone in the room feels the same thing for the same reasons is at this point very hard to prove.