 Thank you. There are some seats here in the front as well. Welcome everyone. So I will be talking from the things that never change. So I will be talking about the fundamentals of cognitive psychology. And I'll be drawing some lines towards how we build websites today. My name is Simo Helsten. User name is Simo Hel. Sometimes with dash fi in some places where the username was already taken. I'm a full stack developer at Druid in Finland. And I have a bachelor's degree in computer science from Helsinki University. I did some master's degree studies there as well on usability and some other stuff. And I studied human-computer interaction at Tampere University. That's part of my degree also. This year I've been taking part in Drupal UX team. And I've been following Drupal accessibility issues also. And I'm also currently the treasurer of the Finnish Drupal Association. At home we have three dogs, four cats, a spouse, and a daughter. And it's actually also an interesting topic, the canine and feline cognition. But we're not talking about that today. So what to expect from this presentation? So I'm not a psychology major. I study computer science. So I have a more like a hands on approach to the topic. So I'm not so well versed in cognitive psychology. So this presentation is more or less a beginner level presentation on cognitive psychology and kind of an introduction to the topic. So most of what I present here is something that is available in various psychology textbooks. So this stuff is readily available in a lot of different literature. I'll be pointing out some examples where the theory of cognitive psychology resonates with web usability, accessibility, or front end technologies. But we have limited time here. So I won't be going into very much detail here. And unfortunately part of this presentation has very limited accessibility because it deals with visual perception through examples. So this won't be accessible, unfortunately, for everyone. So I have five parts in here, and part one is called what never changes. We are what we are. The Greek philosopher Socrates had the same nerve structure that today the chess master, Greg Kasparov, has. So in 2,500 years there is not so much that has changed. The tennis champion Serena Williams has similar for the receptor cells that the first known Olympic champion Coroibos had 2,800 years ago. So we are working with very, very old hardware. So the written history is very short time for evolution. Anatomically modern humans emerged around 300,000 years ago, and by that time our large and highly developed prefrontal cortex started giving us the power to process the things we sense in quite advanced way. So one of the things that differentiates us from other mammals is our highly developed prefrontal cortex. But what has changed over the millennia is how and what we do in our daily lives. So we have hardware, but we also have software. We have certain brain structure, certain kind of cells in our head. In our eyes we have photoreceptor cells, certain types of photoreceptor cells. And we have certain types of auditory nerves. And this is something that dates back to 300,000 years. And actually in the recent times our brain size has been slightly decreasing even. But then we have memory processes that is something that it can be developed. We have problem solving skills that are affected by how we live our lives. What kind of problems we face. And that's something that's very much different from ancient Greek or from Stone Age. And then there are different kinds of learning methods that we can use to improve our cognitive skills. But of course there is much variation between different people. So not all people have the same kind of senses. Not all have the same kind of brain structure. But that kind of variation has been existing also for a long time. So how do we study the mind? How do we know how our brains work? How do we see things? We have always been interested in cognition. So 500 years before counting of time in Greece there was a person called Almasion of Croton who was the first non-human to dissect bodies and the first one to connect human mind to the organ brain. And the first well-known writing on the topic of cognitive psychology, most specifically about attention, was Sense and Sensibilia. Sensibilia written by Aris Tutel in 350 before counting of time. And it could be claimed that if Aris Tutel would be alive today, he would understand web success criterion 2.2.4 that kind of a discusses about how interruptions can change our focus. Because the topic is there, it's only applied to the web. So the knowledge about cognition has accumulated over time. So in 1890, William James, I think it was in the USA, identified that we have both kinds short-term and long-term memory. That's something that we still believe. So there's a different short-term and long-term memory. And around the same time in Germany, Wilhelm Wundt used introspection to study human cognition. In the early 20th century, originating from Germany, there was Gestalt psychology that documented many of the current facts we use when we talk about human perception. So different kind of principles. And in 1912, in the US, John B. Watson founded behaviorism, which is kind of the other side of the coin to introspection that's studying external reactions. And behaviorism dominated US psychology circles until the 50s. In 1956, started something called the cognitive revolution. So there was a group of academics who started combining psychology, linguistics, computer science, anthropology, neuroscience, and psychology into what we call cognitive psychology today. So I mentioned introspection and behaviorism. So those are two different ways of studying or trying to understand how we think. So introspection is kind of trying to figure out what I am feeling, what am I thinking, how do I react myself to this thing. And it's something that is something that is done in kind of a more or less systematic manner. And behavioristic study is kind of the opposite. So it only focuses on the external behavior of how someone reacts and kind of records the behavior of the subject. And in a way, we have these two ways of looking at usability and accessibility today. So for usability and accessibility, the expert reviews are kind of ways of doing they are done by introspection. So the expert follows a certain set of instructions or starts a certain method and tries to identify what are the problems or issues with usability or accessibility. And there, to keep it, it's kind of important to keep those different kind of heuristics and different methods so that the result is not too subjective. And for user testing, the tester observes the test subject. And that's kind of very much a behavioristic study. So recording like the person did this at that time and keeping track of what was done and then counting how many times. So that kind of external behavior. Of course, usability testing also includes interviews. Can include. So valid results for behavioristic study require good experiment setup and well-defined tasks and good representation of the subjects. So this is also something that comes up with Drupal when we discuss, let's say, UX team weekly some issues that we think, or we agree, we have consensus that this is something like this. And we should recommend something this to be in a certain way. But then we always think, but do we have user data to support this? So we are a group of experts or experienced people doing evaluation, and then do we have data? So it would be very nice to have access to all the user data all the time. But the cognitive psychology was born in a revolution. And it was kind of a revolution against strict behavioralism. And the key goal was to apply the scientific method to study the human cognition. So the idea was to have interchanged between psychology, linguistics, computer science, anthropology, neuroscience, and philosophy. And there was some important publications at that time that are kind of valid even today, at least in some parts. So George Miller's The Magical Number 7 plus or minus 2. So that's something that most people who are doing usability know that kind of as a Miller's rule or Miller's rule. And there was Noam Chomsky's Syntactic Structures and Wooler Knaizer's Cognitive Psychology. And in the late 70s, even if there was interchange between different sciences, it wasn't always so that they all interact together. So neuroscience didn't so much discuss with philosophy or computer science didn't so much discuss with anthropology. There is also different kinds of... So I'm talking about that image there. Maybe the print is a little bit small, but it's kind of connects, which were the kind of connecting sciences. There is also a different and maybe more recent versions of that diagram. So what cognitive psychology studies is human intelligence, language, perception, attention, memory, thinking, conclusions, and learning. And that scientific method defines that we should have description of behavior, prediction of behavior, determination of the causes of behavior, and explanations of the behavior. And if you're interested in detail how to study this kind of cognitive psychological behavior, there's this quite detailed article, Experimental Design in Psychological Research by Daniel J. Leviting. Don't know how that's from 1999. And in cognitive psychology, I think my feeling is that much of the cognitive science publications explains how our minds work on average. And this is something that usability benefits from and user experience benefits from understanding the average users. But when we start focusing on accessibility, we need to understand the extremes. So there is a little bit difference in which publications to read if you're focusing on usability and user experience, or if you are focusing on accessibility, because accessibility needs those extremes. And there are also studies about that, but they are not always included in textbooks. And one example is that Miller's Law, the magical number seven, that it's not a strict law. It's not like laws of physics. It's something that's more like idea that we usually are working memory remembers can handle seven items, plus minus two. So it's this average. So there are people who have cognitive disabilities and who are not working with that seven plus minus two and who have different ways of handling their attention. And for this, there are supplemental cognitive accessibility guidelines that go beyond WebCag two requirements. So that's also something if you are working on cognitive disabilities, that's something that you can look into. And next part is how we perceive the world. So what we see and what we perceive. So normally, we have two eyes. We see everything in three dimensions. And our eyes have a two-dimensional retina that receives the image from the three-dimensional world. In our eyes, we have the receptor cells that are rods and cones that convert the image and pass it via optic nerve to our brain. Our brain interprets the image into recognizable object, something we can understand. So if we have binocular vision, we have a 3D perception. But with computer screens, we usually have two-dimension images. So we don't have to think so much about three dimensions. So in our eyes, we have different receptor cells for different colors. So according to the trichromatic theory, we have three different types of cone cells that resist different wavelengths of lights. So it's good for blue light, one that is good for green light, and one that is good for red light. So RGB. Blue cones that register short waves are clearly distinct from the green and red cells. So they are located on different part of our eye. So on the outer rims of the retina and green and red are in the center of our retina. And the trichromatic theory is complemented by opponent process theory that deals with opposing colors. And it's kind of complementing theory. We have two ways of perceiving our surroundings. So it's top-dime and bottom-up processes. So bottom-up process starts from sensory input, what we see or hear. So the environmental stimulation creates sensation. And we process that in our brain. And then we create, like we create this identification or recognition of what there is. But there is also the top-down process where we have expectations, memories, and knowledge that affect how we see things. So we kind of build from our expectations. And since we have the top-down process, we must respect the conventions and past experiences and expectations because they affect how the user tries to use the thing we have created. So if we create something that is very new, very bright idea, very, very good, but if the user is expecting it to behave differently, then it's because of that bottom, from that top-down process, those expectations. Now, the next part is, I go through different Gestalt principles that are called figure-ground similarity, proximity, continuation, closure, symmetry, and order, and good figure. And then there is some later additions that are also called Gestalt principles, but they are not from the original. It's called common fate and the common region. So these are things like how our brain processes, kind of like processes, those sensations, how we interpret things. So this figure-ground is two ways of seeing. So on the left picture, you can either see that, you can either perceive that so that it's kind of a different way of perspective. So the top part is the bottom square or the top part is the square above. And in the second one, you either see two faces or you see kind of a chandelier or where you put candle or something you drink from or a vase. Then similarity is something that shape or color makes your mind to group things. So on the left image on similarity, you can see three groups of black dots or three groups of white dots. And you don't so much pay attention into like vertical groups of dots. Then the proximity principle is that if you group those same six by six dots into groups, then you perceive them as vertical groups instead of horizontal groups. Like on the right picture. And it's also known that proximity often overrides similarity in our brain. So if we would have those black dots in those right picture where that's grouped into three groups, then we would still see three groups instead of groups of black and white. Then another principle, Gestalt principle is continuation. So I have two colors there, red and blue. And our brain usually interprets so that the lines are like there is one line that consists of two colors because it looks like it continues. So that's the principle of continuation. And another principle is closure. So filling in the gaps. So when we have those circle and rectangle that are not complete, so in our mind sees them as complete. Also when we have those three black packments, our brain can see a triangle inside of them. And also when we have those, what are the kind of cones, black cones there, our brain usually tells us that there is a ball inside there that has spikes on it. So that's a closure. Then another principle is the principle of symmetry. So we prefer to see symmetrical objects. So where we have the image where we have blue and gray, we tend to see those gray things as the things that are drawn there and that blue thing as a background because of the symmetry and asymmetry. And the next principle is good figure. So we complement simple shapes. So if we have overlapping red and orange square like in the top left picture, we think of them as two overlapping squares. Instead of the pixels we have on the screen because if we separate them, then we have that kind of angle shape and square, but instead our brain thinks that it's overlapping squares usually. Then we have that same region principle. That's basically it's a special case of proximity. So we have one group that would be following the rule of the principle of proximity, but as we draw those boxes around those groups, then our mind understands that the ones inside the same box, they go together. And then there is this common fate. Let's see, that's kind of something that usually it's connected to movement. Yeah, so those things that move at the same time, they are considered to be of the same group, even if they are in that group, they are kind of random in there, but because they move at the same time in the same direction, we consider them as a one group. Another thing that we have is constancies. So our brain tries to keep these constancies. So there's color constancy, size constancy, shape constancy, and lightness constancy. And there are maybe some different kinds of constancies or something that could be grouped here. So such as looking at 3D objects from different angles, we still recognize it, but we don't usually have 3D objects on computer screen. So the color constancy is something that our brain tries to understand what the colors should be like. So the two pictures there, we have the papers, the papers the person is holding in his hand, they are of the same color on the image, but because the background image is different shade, our brain tends to see those pictures differently. So the color values of the papers, like the colored papers is the same, but most of us see them differently. Also we have size constancy. So when there is a perspective drawn into image, we tend to think that the images that are further back on the perspective are in real life bigger, even if they are the same size. So on that image, the yellow lines are exactly the same width, but without those red dots, red lines showing on the image, we tend to see, tend to perceive that the upper yellow line longer than the one in front because we try to fix our perception because of those railroad track perspective. And then we have shape constancy where we can understand the shape of object from different angles, like we know that door is a rectangle. So if we see that it's a door, if the image we receive in our eyes, it's not like flat rectangle, then even then we kind of understand that it is a rectangle from a different angle. And then we have light constancy. So here on the image, we have one square that is marked A and one that is marked B. And the square A is exactly the same shade of gray as the square B. But because it's the square B is placed inside like that kind of shadow thing, then our brain makes us think that it's different color. And because we expect it to be a lighter than that dark chess square A. Also, our expectations, memories, and motives affect how we see things. So we can't see what we expect to see. So that's a very popular old image. So you can either see, if you expect to see what is called in the literature, old woman facing front, you can see old woman with a like large nose and large chin looking forwards wearing a scarf. But if you are expecting to see what is called in the literature, a young woman, you can see a person with like dark hair looking and the eyelashes showing a little bit and looking backwards. So you can look at this in two different ways. So it's called young woman and old woman in the literature, but kind of not always the best way to describe a person. And then there is another theory that we understand some things based on geometric, basic components. So that on the image, we have those components called geons. That one of them is cylinder, one of them is box, one of them is kind of this curved thing. So those objects can either make up a suitcase or a mug. So that's one theory of how we perceive things. And then another things we can sense is sensing audio. So that's a different way of sensing, different nerves are involved. And also it's processed in a different part of our brain. But I'm not talking so much like not in this presentation because of time I'm talking about audio. So it's also audio is quite important thing because there are screen readers and stuff like that, but also videos and it's not something we have time to talk now. So what we do with all the information we have in our mind. So we have like a, we have attention. So we need to focus on some things and we really all kinds of stimuli all the time. And we need strategies how to decide which of them are relevant. So we can focus on one thing at a time or we can use selective attention or try to multitask dividing our attention. And there are different theories on how we use attention to process the sensory information through different kinds of filters into our consciousness. But there are different theories. One of the theories is broadband, one of them is triseman and then there is dodge and dodge. But I'm not going into detail. One task where we use attention is visual search. So if there is one object that is different from the others in one aspect, we can quickly identify it from a group of objects. So we can immediately see that there is one blue circle there and this can be done processed in a parallel mode in our brain. But then when we need to search something that has a combination of features, then we need to do processing serially and then it takes more time, it's more difficult. So trying to find the blue circle from a picture that has red circles and blue diamonds, it takes more time, it is processed differently. In our memory, we have different parts. So we have sensory memory, we have working memory and we have storage memory. So it's kind of, we have RAM storage and buffer. So we have explicit memory that is things that we consensually remember and we have implicit memory of things we know how to do. So this implicit memory also guides when we use websites that we are very familiar. So Drupal admin UI, just go there, click, it's there, there, here, click this, click this. So it doesn't go through all the processing because we know where to move our hands. And then we have that sensory memory that is a brief buffer between working memory and our senses and we keep forgetting from each of the memories. So working memory can be maintained like about 20 seconds and working memory is something that we usually process in groups of seven plus minus two and grouping things in our working memory. We can extend how many things we can handle at a time and or kind of using different kinds of taxonomies. And then also we keep the working memory in coordination by repeating things internally. And we process visual and phonological information in different parts of our memory. And then we also have episodic buffer that kind of connects our working memory to our storage memory. And we store memories as a semantic net and so it's, in semantic net we have nodes and they are connected to other nodes, true node references. So this is kind of how our memory works. And the next part is what can we do with what we know now? So we have different kinds of conventions on how things work and these conventions are important. And this is something from Jakob Nilsen and Huala Ranjha. So they have listed a set of things that why we need conventions. So we need to know, we need to stand us to ensure that users know what features we expect, what the features look like, where to find the features, how to operate them. So these kind of basic things, conventions. And some conventions were never really planned, they just kind of happened. And it's not always the best thing to have best idea to do things, but sometimes not always the best idea wins and users can get used to kind of bad solutions or good solutions. And sometimes we need to improve things, to improve user experience and then I think we shouldn't try to make too many changes at the same times, but when we do changes, when there are good changes, then we need to try to do it so that we can get them to be the new conventions, to change the conventions, not just do one thing at a time. So we can't reinvent the wheel, but we can design special bikes for specific purposes because our minds work in a different way, but we can try to create new ideas how to do things and create, make them into conventions. So one of the things that was kind of a, it's correlation, but not a cause, it's the default blue color on the links. So that's kind of a convention and we know that blue light is perceived differently, it's different wavelength, it's received in different part of our retina and it's blue colors affect cognitive performance in certain ways, so there is some research, but that was not based on so much on research, it's more like an intuition, choosing that according to what we know why it was blue. It was kind of, it was, we had limited color palette and it was something that was practical. So even there is something, might be something inherently special, in passive in blue links, it's more like correlation instead of deliberate choice. So one of the Gestalt principles was the good figure. So where we fill in gaps from what we see and what we think there is. So tabs kind of use that good figure principle. So we only see that tabs, but we kind of fill in that there is also the content there. We just don't see it, but we know it's there. That's something that our mind creates. And grouping things is something that is actually something, so that's kind of important to keep in mind when we have these different sizes of viewports and we can resize the window. So these are actually two examples using CSS Grid and very simple one. And on the left one, we can see that the items are grouped AD, BE, CF, but in the same code, when it's narrow, the grouping goes horizontally ABC, DE, F. So this is the grouping, like the proximity principle. So common fate is something that takes place in animations. So we can use animations on the website and we can also connect things to each other using animations, but we need to be able to sync the animations and that's not always easy if we want to use animations to create groups. So that's the common fate principle. And like for instance, in some lazy loading things, there is this loading image that shows that these items are in the same state. We should avoid too much styling to create, like to create similarities. So here I have images of one of them is a text field and one of them is a button. So which one is which? Because there are like, the styling is similar, too much too similar. So we should keep different elements instead of creating similarity where we don't want it. And also for text fields, it's important to have variation because it's kind of a, because of our experience and expectations, it makes this more comprehensible. We can understand what goes where, what we expect. So it helps us to like understand the form better. And also we can quite safely notice style input elements with color. And this also can create unwanted similarity between different elements. And also this is something, and because we can vary the size of the viewport, then we can end up with situations where there is connections between elements where we don't want to. So here is one kind of page with accent color. And we can see that it's kind of a, if it's all green, kind of only one accent color used for content and that input, then it doesn't really help that accent color. That's something that's kind of could be used with print. And in print, we often use accent colors from images or photographs, so different accent colors in different places. But for web, that's not a good idea. And also the as, but here is another example. The colors aren't so nice here, but here I used different accent color to get away from the similarity of color. And also used that put those boxes that are not always so nice looking, but to create kind of this same container principle. So it's a very, very simple things we can do. And when using color, of course, we need to also bear in mind that the color combinations need to be accessible in different kind of color modes, so in normal and in high contrast modes. So whether beautiful or ugly or just conveniently at hand, the world of experience is produced by the man who experiences it. So this is a quote by Ulrich Neisser, one of the kind of architects of the cognitive revolution. Thank you very much. Thank you. I think you will be there for questions somewhere around here. Yeah. Okay. Thank you for coming. Yeah. And the next thing I'll go, one of the things I'll go to see for sure is that how Drupal 10 will make you fall in love with Drupal theming, because if we know these things, how we see things, we might want to know how to put them into practice really nicely.