 Mae'r galori yn gweithio bod yn gweld yn gweithio'r sgol, felly yna bod yn ôl yn yr adroddol yn gweithio'r cyd-fyrdd. Yn amser gyda'r ffordd gweithio? Dyn o'r gweithio'r gweithio, a fydd yn diolch. Mae'r Gwyd-degoniant yn roes. Dwi'n cael ei fath o bryd o'r cyffredigol o'r gweithio? A y gallwn ni'n gweithio'r gweithio'r gyshdownu? Efallai efallai ddim yn gwneud o'r adroddol? felly we'n gael. Let's see if I can use the ticker. Yeah. Okay, so I think it's always good to start with a classic crowd pleaser, I'm sure you agree. So, this is the legendary website, I think some of you will be familiar with it, and it's been topping the charts of the worst website ever, I think for well over a decade by now. So, it's got everything, absolutely everything. It's got animations, it's got the paisley background, it's got drop shadows, it's got music, it's got everything. And quite frankly, I would actually say that the UI of this website kind of does rock because it hats off to Ling who's actually built a thriving business on the basis of this website as a slap in the face of all of us design snobs quite frankly. So, I think we'd all agree that this website is however a bit of a mess. But I'd be interested to see what would you say there is, if you had to pinpoint one thing that absolutely doesn't work with this website, what would you say there is? If it was only one thing that you could say. Yeah, white space is one, yeah. Colour. What's he selling? Yeah, exactly. Sorry? Flow. Yeah, flow is another one, yeah. But I think there's one, all absolutely valid remarks, but I think there's one thing that is the main problem that kind of encompasses all of the other problems. So, the main problem with the design of this website is that there is too much going on. It's basically made of lots of details and I don't know what I'm looking at. So, there are also elements that we try and interpret as meaning something or belonging to the same category because they share features like for instance the pink headings. I thought, oh okay, so the pink headings are actually Spanish cars, but actually no they're not because the spider is Italian, it's also pink. So, without going too much into detail with analysing this website, I think we can agree that this user interface is not very easy to use and this is mainly because our brain tends to perceive scenes as a whole first and then interpret the details later. So, when the details are the main feature, which is exactly what happens here, our brain goes into cognitive overload and we don't like it. Also, I think it's fair to say that it would actually be easier to build a user interface that makes sense rather than try and reproduce a kind of weird magic that this website has because not all of us have the same kind of brazen genius that it takes to just build a website like this and get away with it and actually make money out of it. So, as we are mere mortals and not maverick geniuses like Ling, I think that what we would all like to do is create a user interface that leads to a smooth and easy user experience avoiding brain overload. So, paraphrasing the title of a famous book, a UI that rocks is actually a UI that doesn't make your users think and this is where Gestalt Principles come into play. So, can you see what this is straight away? Immediately? Yes, what is it? Actually, I didn't. A Dalmatian doing what? Would you say you can tell what he's doing? Sniffing the ground. I always had a shady forest because of the dotted shadows. At first sight, though, this image may seem like an agglomerate of black blobs. I think I need to learn how to hold this because it makes a difference. So, our eyes soon recognise the emerging shape of a Dalmatian sniffing the ground in a shady forest. So, our eyes and brain perceive the scene as a whole without needing to analyse the details. We can do that but we do it only later. So, we notice the details only after we've identified the outline. So, the Gestalt Theory of Vision is based on the premise that we see the whole before the details, basically. So, the Gestalt Principles describe the various ways in which we economise brain power, basically, and avoid cognitive overload. So, Gestalt is a German word that can be translated as form or shape or sometimes even pattern. There is actually no precise English equivalent. So, it's a Western theory of psychology that was created in the early 19th century in Germany, in Berlin by three psychologists called Max Vertaimer, Kurt Kofger and Wolfgang Kerler. Excuse my German. There were many more than added to it. I mean, this is, by the way, it's just an introduction that's useful to us because this is a huge kind of branch of science and so on. So, and the Gestalt Principles describe how the human eye perceive visual elements and how complex images tend to be reduced to simple shapes. And the story goes that in 1911 Max Vertaimer purchased a toy stroboscope which is, I'm told, a mechanical device that produces images that alternate and create different effects. So, because the theory that they were sort of part of at the time that was called structuralism didn't allow for that. So, they thought we better create a theory that actually does study this type of phenomenon and takes it into account. So, that's how it all started. So, according to Gestalt, when the human eye perceives a scene, it uses underlying principles of organisation so that we can understand what's before us with minimal effort. And that seems to be the sort of overarching thing that we want to make as little effort as possible. And that's the way that we do that is that we see a whole object before its component parts. For instance, when we see a car, we don't see the single bits that make the car. We don't see the wheels or the doors or the windows or the bonnet. We see the car as a whole first. And then only if necessary do we notice the details. So, the leading principle of the theory of Gestalt is that the whole is other than the sum of its parts. So, again, this means that we identify whole meaningful objects immediately and without conscious efforts like we did with a car. We do with cars or we even people. And like we don't do so easily with Ling's website, basically. So, the human eye also perceives a unified shape in a different way to how it perceives the individual parts that form it. So, the interesting thing is that many of the design principles that we follow arise out of Gestalt theory, in fact. When they don't arise out of Western art and Western art theory. I think Western is important to stress, but anyway. But that's a different story, the role that art plays in design. So, some of the Gestalt principles are more relevant to web design than others. And some are more specific, maybe more useful for graphic design rather than the design of web pages. So, we'll have a look at the sort of most important underlying ones. And then we'll have a look at the ones that, in my opinion, really help. And probably a lot of us are already sort of unconsciously or distinctively using already anyway. So, here's the dog again. So, the Gestalt principle at play here is called emergence. And again, the shape of the dog emerges. And emergence occurs when simple shapes arranged together can create a more complex image. The outline of which emerges from the scene before its details. So, thanks to this ability we economize brain power and we avoid cognitive overload. So, basically our brains is constantly bagging us not to make it think too hard. And that's what a lot of Gestalt principles describe. So, basically, let's try and do that with our users is the point. So, the main takeaway for web design from the principle of emergence is that the overall appearance of an element must always take precedence over the details. So, which is what Ling's website obviously doesn't do. So, shapes and contours are more important than lesser details. So, it really doesn't matter how cool, you know, a button looks if the users don't understand that it's a button because they're distracted by the details. So, very simply put, don't be too clever to ornate if it doesn't help your users. Now, here's another, you might have seen this image before. What animal do you see? Duck. Robert. Robert Duck. Okay, I think both camps are equally represented. So, clearly there's two images here. So, when an image can be interpreted in two different ways, our minds will alternate between the two interpretations, but we can't see the two views at once. And this, it's impossible for us to see the two images at once basically. And this principle is called multi-stability. And it occurs when an image can be interpreted in two different ways, but our mind can only see one view at once. And the interesting thing is that it really is out of our conscious control. We can't predict who will see a rabbit first and who will see a duck. And, for instance, I see the duck first and I simply can't help that. And even if now you can see both, because those of you who could see the bunny can now see the duck, but still you can't see them both at the same time. So, multi-stability in general should be avoided in web design unless you, yes, I can see your reaction. So, unless you are being extremely clever and you're able to resolve it successfully and above all meaningfully, unless it has a reason, you should really, really avoid it. So, this is a typical example of a clever design, because obviously this is animated in the real world, it doesn't do anything, doesn't add anything to the experience in any way. And if you move the mouse, actually things happen that don't particularly resolve the multi-stability and actually feel really unsafe because I don't know what's going on. However, it's just, this is a typical, something that I find personally because I come from print. So, it's typical of designers who come from print that you want to do things that look cool and that are exciting, but actually don't really help the user very much. So, this is very creative design but we need, I mean I speak for myself, I've had to learn to curb my excitement and be less clever and less, because this is, if anyone's here has worked in print, they know what's going on here and you know, it's not, I always now ask myself, before I make something look pretty, I ask myself whether it's going to be visible by everyone and whether it's going to help the user. And by the way, this is a fantastic agency and they do really, really creative work. So, it's not a judgement on their work but on this particular sort of piece of thinking. So, the main takeaway for web design from the principle of multi-stability that don't make them think once again. Avoid ambiguity or information overload in your UI. Usability tests are your friend. So, when we're too close to a design, sometimes we don't realise that some of the elements in the UI look too similar for instance. So, don't make a button look like a heading because it's just going to confuse the users or make sure that your colours are meaningful, meaningful used and so on. So, make sure that there cannot be a double interpretation. And if there's no, you know, get things tested and when there's no budget for usability tests, simply just get a fresh pair of eyes on your design. Get a friend or anyone to test your UI and make sure that there are no, there's no possibility of double interpretations. Now, if you look at the object on the top left, I think we can all agree that it's, there's a triangle there. Even though actually the triangle is not drawn, it's only implied. And the same applies to this sort of hand grenade kind of thing. There's a, I can definitely see a sphere there, but it's actually not drawn. Same with a Loch Nessie monster there. And I think that that's a fat snake around the pole, something like that. Anyway, so these are shapes that are only implied and not drawn but still we see them. Even when we have only a partial vision of an object's contour, we are able to come to a conclusion as to its shape. We can complete the shape in our mind. So, this Gestalt principle is called reification. The word reification comes from the Latin rest, which means object or thing. And it's the ability of our visual perception to create complete representation, even on the basis of limited visual information. By the way, if you look at the triangle up there, can anybody see something else apart from the triangle? Exactly. Absolutely. So, I think that here we've also got once again an example of multi-stability at play. So, you see already how Gestalt principles can, you can see two in one. So, it's Pacman as well as the triangle. This is an example of using reification and web design. This is also, there's another Gestalt principle at play here, but we all know that these are circles even though we can't see the whole object. So, the main takeaway for web design from the principle of reification is that your user's mind can feel in the gaps. So, be bold using white space as a design tool. Now, here's a face, a face that looks very different in each image. But I think that most of us know who this is. We can all recognise him because as human beings we've got the ability to recognise objects or faces regardless of the formations and variations in scale, in elastic deformations, colour deformations and other characteristics. So, in the case of a human face, even though the hair colour might change or the length or the facial hair or the inevitable signs of aging, we can still recognise them. This principle is called invariance. And thanks to the principle of invariance, we're basically able to experience the world without having to perpetually reassess a constantly changing scene. So, again, invariance allows us to minimise our cognitive efforts when we interact with the world. And again, invariance helps us to not think. So, a practical example of the use of invariance in web design is CAPTCHA, which is evil, as we all know. It's terrible, but that's where it's used. But as humans, we can read this, or almost, or sometimes not at all, but anyway. So, the main takeaway from the principle of invariance for web design is that, for now, it's the edge that the human brain has overbots basically. On the web, it's typically used in CAPTCHA. For now, it's an edge we have over at UI. So, as we've said, these are some of the sort of fundamental principles of Gesheld. Now, we're going to have a look at the most relevant ones for web design, in my opinion, and that I could fit in half an hour, because there are many and it's a big discipline. So, isolating individual elements from a background is an ability that came in very useful for our ancestors when they had to detect a predator in the field. So, and this is called the principle of figure-ground organisation, which basically is the ability to focus on one part of a scene, filtering out the elements that are not necessary to us. So, in this case, we know that the lion is the most important element in this scene, even though it's quite small, but basically it's survival. So, the most important element in a scene appears as in front of everything else, and the rest sort of blurs back, because it's not as important. For instance, on this web page, it's immediately clear to me that what I'm required to do here is fill in the form, because the form is white and really stands out against a rather busy background. So, I'm immediately able to identify it and basically I'm made to not think. It's made clear to me that I should do this because it stands out so clearly. So, the main takeaway for web design from the principle of figure-ground organisation is to make sure the most important part of a UI stands out clearly against the background. Now, sometimes when I say all these things, I think, isn't that obvious? But the thing is that it's not. I mean, it should be, but it's not always, especially when you go around the web and look at things like what? You know, you get quite confused. Also, interestingly, and actually, I just went to this super interesting talk about accessibility, and it made me think. So, for instance, when you have black writing against a white background, that's also a figure-ground organisation, basically any time that something stands out. But it made me think again how it's good to have all these tools in our arsenal and use them with a really conscious approach, because it makes you think seriously about, well, maybe I shouldn't use white text. Maybe that's too much stand out. You know, that maybe the background stands out too much. So, it's really important to consider these things. And this particular Gestalt principle is used in photography a lot. So, all the trend of using a very shallow depth of field with the subject in sharp relief and the background blur, you know, plenty of Instagram filters that do that. Now, we're getting into the so-called grouping laws that I think are the ones that we use a lot, whether consciously or unconsciously, when we design our webpages. So, the human eye has the tendency to group together elements based on certain things. In this case, we group together the elements that share certain features, like shape, colour and size. So, we tend to think that all the pink arrows pointing up pertain to the same group, whereas the white arrows pointing down, we put in a different group that probably possibly has even a different meaning or a different function. This principle is called the law of similarity, and occurs because the human eye groups together elements that share similar features. And I think that this is probably something that we apply a law or should, basically. So, for instance, on this page from the agency Studio Diva, all these different shapes of the logos of the clients that it works with are resolved really well because they all share a similar size and the same colour. So, they are unified. We immediately understand that they belong to the same group. So, if they had been left in their original colour, I think it would have reached the link effect because there would have been too much fighting for our attention and it would have been made of too many details. So, the main takeaway for web design from the law of similarity is that UI elements that perform a similar function or belong to the same group should always share one or more visual features. In this slide we see how our brain naturally perceives objects that are close to one another as belonging to the same group. This is called the principle of proximity. The human eye groups together elements that are close to one another in space. Again, this is used very often in our user interfaces, like for instance on this page where we see clearly, we immediately understand that on the top right we have the navigation which the elements are all clearly grouped together and we also see the law of similarity at play here that tells us that all belong to the same group because they share font size, colour and weight. Also, interestingly, we also know that probably there's something going on with the blog page or probably on it because it has a different colour from the other ones. So again, you can use the principles also to differentiate things because we see the law of proximity at play also in the fact that the logo sits all the way back to the other end so that means that it belongs to a different group. Again, the main takeaway for web design from the law of proximity is that make sure that elements that belong to the same group are placed in close proximity. Again, obvious. Now have a look around the web and maybe not so obvious, not all the time. In this case, we'll see how items that share the same clearly delineated regional space belong together. With the law of proximity, we probably would have thought that the dots on the left actually belong to the same group, but I think we tend to group together the ones in the white square before because there's this very, very clear regional demarcation. So this is called the law of common region and it's again very, very useful to use and to use wisely. So we apply it to many areas of our designs, often in the navigation as well. An example is here in this Facebook post where it's used in everywhere. It's used in the top because those bits mean something. It's used in the box itself, in the whole box because it's a white box against a grey background. The learn more button is the use of the law of common region and so on. So the main takeaway for web design again is make your UI easy to use by placing groups of elements within the same clearly defined regional space. Here the cuddly panda of this logo is clearly a panda even though there's some information missing, the shapes are not resolved and this principle is called the principle of closure and again it builds on the principle of reification that we saw earlier and it's when our mind supplies the missing information for incomplete shapes and even though it's used maybe a little bit more in logo design but it's also used in web design a lot for instance. If you see this box from the Guardian newspaper you can see that it's used for instance here in the categories the box is not complete but we clearly perceive the box as a box even though it's got lines missing and actually here there are quite a few more principle of gestalt at play which I would say for instance here you get figure ground organisation you get that also in the red headlines that clearly means something else that's also similarity because you make a difference so it's clearly means something else. So once you start getting familiar with it you start really seeing it at play in many different places. The main takeaway from the law of closure is that minimal designs can really help your UI by avoiding visual overload again let your users feel in the gaps and white space again very very important. The human eye is accustomed to recognising pathways and following them going with the flow as it were following paths even when the lines are not complete because here it's not complete it's dots that actually don't complete the line but we know that that's a line, a flow that we follow. This is called the law of continuation and according to it the eye perceives a path as a continuous flow and this is an example of the law of continuation at play so when we ask a Google to give us information about a walking route this is what we get we know that that is a continuous line that we need to follow even though it's dotted and I really I don't know if you agree with me but to me this is terrible because it's always the dots are on top of the name of the street so I can't read it and then when I'm out in the wild and I'm trying to read like I can't see it I can't believe that it's never occurred to anyone and also the dot that represents you is blue I mean why? I want to be yellow so that's again figure ground organisation if you were using figure ground organisation then you would make me the yellow dot and you would maybe move the blue dots that follow so I can actually read the name of the street which might be useful with that kind of thing so there are many many more Gestalt principles that apply to web design so again this is my what did I say was funny she didn't realise, no right, no mind so yeah so this is basically a basic selection as promised it's an introduction and there's much much more but I think that you can really see how I think that unconsciously we all do it if you do it consciously then I think that this kind of approach can really really really help improve that UI and actually it helps explain to the clients why the logo can't be bigger giving them actual reasons that go beyond design snobbery which is I think very very helpful and also I think that you will know now you will start if you sort of start looking at designs on the web that you see that don't work you'll be able to actually analyse why give a bit more of a reason as to why it doesn't work for you which I think is helpful above all if I had to say there was one main take away from Gestalt Psychology for web design is don't make them think that's it Does anyone have any questions Thank you I really really enjoyed the talk I wondered if there's any kind of further reading you'd recommend for any kind of like more deeper dives into Gestalt and web design Yeah there's a fantastic online learning centre which is called the Interaction Design Foundation IDF and it's absolutely brilliant it's not just for this and for generally for UX and UI is great Thank you for that excellent talk We've heard a lot at this conference about accessibility and you've talked a lot about minimal design and minimal UI and obviously there could be a conflict there between making a site work for people who are hard of seeing or colour blind and minimal design which takes away a lot of elements it seems and can make things more difficult so how do you resolve those difficulties I think it's a really interesting question because I would say that actually it's the opposite accessibility is about making things as simple as possible and that's why for me it has been such a big shift coming from a print background working for doing film posters that you have to be as complex as possible sometimes and coming to the web where it wasn't about that at all in the slightest so if I try and design with accessibility in mind which I try and do more and more and more these days I have to admit that it's not it's about making things simpler so I think that actually taking away will always make the experience easier because you stop thinking about what looks pretty for instance I have an obsession with making my links look cool really it's just something that I can spend a week and on but then I realise do something else, go skating go swimming because it's just put a line under it so I would say that it's the opposite thank you very much brilliant speech, absolutely fantastic and clearly there's a lot that I've not understood I realise a lot of it we do tend to do unconsciously where's your background in this is this from print yourself if you studied it by training I'm actually an art historian so I do know that when I started being a designer many many years ago I was applying a lot of western as like I said western art theory to my designs but actually then because of trying to get the UI better because of trying to understand and make my UX better rather than making pretty things that's when I realise I don't know how it came into my consciousness but I thought I knew about it and I realised that it starts from vision from the human eye from human perception and have you seen the the Mexico Olympics 1968 have you seen the iconography that they did it rings a bell but I can't picture it I was going to ask as well if that was Gestell or not but I'll catch up with you now I need to check any other questions right that was really good thank you round of applause again