Affordances and their role in access

Hello all, welcome back to our course on digital accessibility and today we'll discuss a very interesting topic which is called affordances. Those of you who have studied design probably are familiar with this word and we'll also try to understand their role in access. So let us begin with the origin of affordances. So originally it was proposed by uh a psychologist named James Gibson in the 1970s to denote action possibilities provided to the actor by the environment. In the late 1980s popular designer called Don Norman I'm sure you might all have heard his name. uh he's a pioneering design thinker and uh his book which is called design of everyday things is quite a popular book and very readable. Uh if you've not heard of it or if you've not um read this book please I recommend you to read it. So in the late 80s uh Don Norman took advantage of Gibson's um um idea about action possibilities provided by the actor uh provided to the actor by the environment and uh suggested that these can be called as affordances and can be taken advantage of in design. So what is the meaning of that? When we say that the actor or the user gets cues about how to act or how to react, how to use a product by the product itself, that is something which is called an affordance. So as a designer if we can build in these affordances or call for action in the product design itself then it makes the life of the user very easy because those call to action aspects are very much visible and they can interact uh with um the call to action aspects of the product in a very easy way and thus increasing the usability ibility or accessibility of the product. So if for instance you would like to take an example if we look at a door latch we immediately understand how to operate it right. So just by looking at the handle you can understand that that it is supposed to be pulled or pushed down or depending on that. So basically the handles which are shaped like this they are meant to be pushed down. Handles which are shaped like this they p supposed to be grabbed and pulled. Right? So this is that the by by design itself the product is telling the user how to interact with me. So this aspect Don Norman suggested in his books and his theory that this can very well be used by designers in order to make products more usable and more interactive. So this is strong strongly resonated with the designers concern about making possible uses of their products immediately obvious. Right? So these cues if they are built in the design then it is obvious just by looking at the um product to the user how to interact with it and thus it saves time u uh flattens the learnability curve to a great extent also helps in adaptability easy adaptability of the new product or technology for the user. So handles etc some of the easy examples but we'll also in later part of this uh session we'll also talk about how digital accessibility and the aspects of digital accessibility use affordances in order to make themselves more affordable more accessible. Soon the concept came to play a central role in interaction design and human computer interaction and we learn how it happened and in what aspects it can enhance accessibility. So norman's affordances p uh actually what it means is that the perceived properties that may not actually exist right so uh what what it means that the properties are uh basically uh affordances are properties which are visible or perceivable by the user but may or may not actually exist. This part we will discuss we will discuss further what is the meaning of actually existing or not existing but at least it is perceivable right suggestions or clues as to how to use those properties they can nomundances can be dependent on the experience knowledge or culture of the actor so we As designers can also take uh inspiration or um clues from the existing cultural or knowledge or experience or familiarity of the our user themselves in order to take advantage of affordances. So just another example in this case. So for example in uh in Indian culture we know that the color um red is considered as very happy or very festive color etc. Right? However on the other hand in uh western cultures it is considered as a dangerous or the color of a demon etc. Right? So then that is why if you see all of the um um you know affordances related to closing or negativity or um uh wrong uh tick marks are always uh colorcoded in green. Wrong answer is always colorcoded in red. So there is is a very strong cultural correlation uh um be behind this and uh the designers of those software applications made use of it very uh nicely. Uh so this use of affordances can make an action either very difficult or very easy. So how it can make it difficult that also we will discuss in further slides. Of course, how it makes it how it makes an action easy that we are trying to understand somehow that it helps us to understand how the product is supposed to be used just by looking at it. So that is why it makes it easy. So why do we need to use affordances? So good designs are always intuitive. What is the meaning of intuitive? Intuitive means that you are drawing as a designer you are drawing on the intuition of human behavior. You are drawing on the natural instincts of humans. So that and understanding the psychological aspects, the cultural aspects, uh what they like, what they dislike, what they find familiar, what they like to do, what is easy for them and then uh tailoring it into your design in order to make it intuitive or just making it obvious to use. Right? So that is something which is the what is the meaning of intuitive. So let us again take a uh take uh an example. So if we look at this image what do you think this is? So this is a image of a stereoscope designed in the 19th century. None of us might have actually seen this product in reality. But if you are handed over this product today, will you be able to understand how to use it? Can you guess? Probably yes. Right? It looks like a VR headset. It needs to be placed in this part. It has two holes. Something to be looked at for two for the two eyes. So basically, you hold the handle. There's one handle. You hold it like this and you u hold it in front of your eyes. So it covers your eyes like this. So the design itself is able to tell you that this is how it is supposed to use even though you don't know what a stereoscope does. Even though you don't even know how to you know actually what to look for once you act you are inside it. You don't know uh who was homes. You are not living in the 20th century. In fact, we are alive almost 200 300 years after this uh product was invented. But this is the beauty of affordances because they are catering to the natural human instincts and that is why human instincts don't suddenly change in two years. So that is why we are able to just by looking at the picture by looking at the product we are able to understand how to use it. So similarly as I said it looks similar to a VR headset of the 21st century which is almost born after 200 250 years uh after this product and they also are using similar affordances and just by looking at the design you know how to wear it you know how to put it on you know what to do with it. So the the summary is that affordances appeal to innate human understandings. So this is another example of a very interesting uh door knob actually. So it's like as if the person there's a person trying to shake hands with you but it's almost funny right. So let us try to understand what are affordances and what are the different types of affordances and how it can make um users life easy or difficult. So affordances are properties of objects which show users the action they can take in order to interact with it. And user users should be able to perceive affordances without having to consider how to use the items. Right? So perceive we think uh make sure that you um emphasize on the word perceive. Why we are using perceive and not see again and again? Because the word perceive caters to a multimodality interaction. perception is valid for an audio perception, a video perception uh or you know other sensorial perceptions. However, when you say see, it is just visual, right? So the word perceive is uh uh a bit broader and that is why we are saying it may be sometimes visual cues. It may be sometimes audio cues as well. It may be tactile cues. It may be some alfactory cues which alactory or like uh smell related cues which invite you in a in some way so that you are able to navigate and find uh a a so and so restaurant inside some specific crowded gully. So uh all of those uh are related to perception and that is why we are using the term perceive and not see. Now coming to the types of uh affordances. So the first is perceivable, the second is hidden and the third is false. So let us one by one try to understand what is the meaning of each. So perceivable affordance is something which you the user can perceive see or hear or whatever modality is engaging but they are able to sense it right they are able to perceive it and uh it is also directing them to an apt action. Hidden affordances are uh that there is an affordance, there is a cue but it is not perceivable directly. It is not perceivable um without any effort. It is not perceivable uh just by itself. Right? So it may be hidden. So we'll take some examples of hidden as well. And then there are false affordances. False affordance means that there is a perceivable affordance but then it is directing directing to you an incorrect action. So just by looking at it you may feel that this is how I'm supposed to interact with it but the moment you do it is actually leading to a incorrect action. So then that is that falls in the category of false affordance. So let us try to understand perceivable versus hidden affordances first. So um then just if you look around there are uh there are a lot of cleverly and intuitively designed things around us. So such as a car door handle and I like to give this example uh you know uh in my class as well which we try which we know just without even thinking how to use it right even if you're encountering that particular car handle for the first time. So roughly they all look like this right? It may be very different designwise, form wise, shapewise, but just by looking at it, we know how to use it. But however, have you seen this? Do you know which car it belongs to? It belongs to a Tesla. And several of their models have these handles. Just by looking at it, do you know how to use it? How the gate will open? Probably not. So basically you need to press you need to press with one thumb. So then the other long part the long part of the handle comes out and then you pull it. So you press and you pull everything is done at the same time but just by looking at it it's not easy to understand. One may go and try to just push it like a button with a finger. Well I try to do it when I I interacted with a Tesla for the first time. So and then there are these uh for a very expensive car there are these 200 rupee handles which are available on Amazon just to make it look like a perceivable affordance from a hidden to just to make it uh change it from a hidden to a perceivable affordance. Right? So this is just funny that you buy a premium car and then you put these stupid plastic handles just to make the hidden affordance into a perceive a perceived affordance otherwise people are not able to understand how to interact with it and uh um in colder places if uh there is um you know frost etc the these handles they freeze in place because there is a sheet of ice which covers and then it is impossible uh for people to open because almost it gets stuck and in a lot of western countries that is the case that they they have a lot of snow etc every year. So then they redesigned after you know they saw a lot of complaints from the uh users then they redesigned it and then the further models. So as soon as the user would approach the car, it would automatically kind of come out, right? So that kind of changed its uh affordance from a hidden to a perceivable affordance without disturbing the aesthetic quality of uh the car which they wanted to have. However, with these electronically modified doors um for with model S, there was there has been a case where uh the handles did not open and uh the person inside kind of got um stuck and uh uh faced his own death because of this. So, and there was a lawsuit against Tesla for this and handles played an important part. So just to understand a good affordance means more invitation to action. Good form it looks nice. This one looks nice. Look looks sleek. Looks so finished. This one looks a little bit more jutdded out. And there is this um kind of cavity there which disturbs the the overall like u uh skin of the car itself. But then it is this is a bad affordance because there is less invitation to action. Then let's go on to understand an example of false affordance. So if you just look at this image. So uh there are these uh buttons or uh these are LED lights and then there are buttons which needs to be pressed. These are buttons. for example and then they they have placed it. Three is here, four is here, five is here, six is here, right? So if they wanted to if they wanted to um uh so if what happened was the dem the democratic party is listed uh second on the left but in order of vote one should press the third button. So this is just the signifier. So we'll also let us we'll also discuss what is the meaning of a signifier. So basically this is just a labeling right in this case and these are the feedback lights. So like how we have in our electronic voting machines that you press a press the button and then in front of uh in front of uh the name there the light blinks. So here apparently they have this list and the light here and the buttons are somewhere else which is another parallel set of 1 2 3 4 5. So one needs to go here and see the number and then press the button accordingly. However, just by looking at this list, it seems that first is Republican, second is Democrat and pressing the second button would cast a vote to the reform party, this one. But a lot of people who wanted to go uh with the Democratic Party, they mistakenly pressed the second button and voted for the Reform Party instead. And this is actually documented in a paper. I'm not uh citing anecdotal issues. This is um uh this is uh there documented in a paper where they argue that the design of this butterfly ballot during the 2000 US presidential elections may have tipped the balance of the whole election itself just because the design affordances are false. So here what we understand is that it is a call to action for the wrong action. Right? So then it is a false um a false. Some more examples very interesting examples. Which button is for which if I want? So these are elevator buttons. That is pretty clear. I want to go up. Which one do I press? And I want to go down. Which one do I press? Up. This one or this one? Is there any way to know? I don't think so. This is really funny. Then now here is a very common occurrence which we see in a lot of places. So there is a uh so just the handle itself because it's a grabable thing. It is supposed to be grabbed and pulled similar to the car handles that we saw just by its quality of it being held and uh that shape itself and similar to how um you know all of these car or most of the doors also have the moment you see a door handle which is jutting out which is a handle you try to pull it however in this case you can see that it's a push door. If it is a push door, then actually there is no need for a handle because then you can push, right? Just with your hands, you you need to push it. So here what is happening is that the signifier or the u the labeling of the action says something else. However, the affordance is inviting you to do something else which becomes very confusing for the audience or for the user. So whether if you approach such a door would you pull it or push it because grabbing and pushing is not an intuitive action. When you grab you can pull or you if you want to pull you need to grab it otherwise you cannot pull. If there is no handle by default you will push only. So but then this confusing uh affordances are found in a lot of places. Let us now now that we have some idea what is the meaning of an affordance and how uh it can help in making your design more intuitive. What is the meaning of perceivable? What is the meaning of hidden? What is the meaning of um false affordance? Let us try to understand how it is used in digital design. So for designers of interactive technologies, the concept signifies the promise of exploiting the power of perception in order to make everyday things more intuitive and in general more usable and thus more accessible to a variety of users. user interfaces. Interface designers can more freely and easily define visual properties of the objects they create. So therefore, they appear to be particularly well positioned for providing what Norman calls strong visual cues to the operation of things. So just if we take an example um like uh something like a color contrast which is also we have discussed as one of the major WCAG criterion for making a website accessible. So contrast of a text or a button against a background is quite important. If it is not as contrasting, you may not be able to u identify it as a button for example or you know may not be able to read the text itself. Other such examples can be user interface elements which directly suggest usable actions. So just by looking at this image just by interface few things are we are able to understand this different colored box is an empty field we need to fill something in it username password this is an embossed button which is also highlighted it is a pressable button so think about it all of this is happening on a flat green. So all of this are physical tangible traits of indicating like depth indicating as if it is an embossed. So we are uh so designers of user interactions and user interfaces are just using visual cues. So like using shadows, using highlights, using color contrast just to make it look as if it is embossed. Just to make it look as if it is empty. It's a box which is empty, right? Like this one something which is an embossed like a button, right? And then like this is like a contrast plus the underlying uh underline also indicates a hyperlink which is a common familiar concept with most of the users that if the text is underlined it is also a link right also the color contrast highlights it. Similarly, just by looking at this interface, again a digital screenbased interface, but just by looking at it, it again draws from analog versions of um you know volume or music equalizers and all of those things which have those small stubs which move up and down or slide left or right. Just by looking at it, you know that it is meant for sliding left or right on a scale. Clickable tabs. This is also something I'm sure you all might have seen um those tab files where there are several uh tabs in each sections and this is what uh initially the uh user interface designers borrow the idea again from the familiar intuitive surroundings of their um users that okay if when you were using physical files they also had these tabs in each file and the file was kept in a folder which was kept in a drawer. Um so all of those terminologies if you think they are all coming so windows uh has like a desktop similar to how you would have a real desk with um a top where you would keep some important parts and most of the other uh unimportant or non-priority files would be stashed in in another drawer or in another folder. Um similarly they have borrowed this idea of tabs and uh just by looking at it you know that if I click this tab I will move to uh it will start visually showing me that information. Then this swipable touchscreen slider. Uh again just by looking at it uh it also has this gliding um glow which also kind of indicates that okay slide slide. It also has a signifier. So it says slide to unlock as well. It also has an arrow which is also considered a logo based signifier. And also just by looking at it you know that it is an invited call to action. Then there can be pressable buttons or spinable controls. So this is uh again an early um example of a digital calendar which is borrowing from your old uh standard calendar which people used to keep which would which which ha which would has these rotating date rings. So you would rotate and then there's a date and then there's a month and then there's a year kind of a thing and uh it's just um they've borrowed it in the same and added visual cues like shadow etc to make it look as if it is like a cylinder and it is spinable. So just by looking at it you know that it is supposed to be scrolled and it will spin and it'll change. Similarly, uh these are some more examples of um buttons, possible buttons. So, um a visual designer or user interface designer can uh you know make the button like this itself where there's no outline, where there is no uh gradient, there is no uh nothing really. It's just the text because the code by default doesn't need that. But if we want the users to interact with it. Uh if we want the uh users to so this is just the signifier. This is signifier plus hidden affordance maybe or less perceivable. This can be a hidden affordance because it may be a button but just by looking at it you don't know. Uh this is a low perceivability per uh affordance and with all of these other aspects with the signifier plus high perceivability affordance just by looking at it you know that if I press this button it will submit whatever you want to submit. So it's like basically a scale right? So few affordances and many affordances. So as we move from here to here so it can vary from this to that but um as designers we can take a call where uh it needs to be a lot of affordances. If it is something which is a necessary top priority action in your interface, um you want the user to uh look at it. You want the attention to go towards that button. Uh then you want many affordances. What is uh where uh can you think of instances or examples where um designers or companies use fewer affordances but consciously use fewer affordances? So do you know like when all all of these do you remember when all of these ads pop up they have these very small cross button which is like stashed in one little corner. It the visibility is also very low. It was also always merging in the background. It is very thin lines so small that you cannot press it with your thumb. So they're using they're intentionally using those fewer affordances. So you are not able to close it and you are forced to watch that ad. Right? So this is how they can make use of fewer affordances also if they want you to make if they want to force you to do something which you don't want to do also and they can make you want to do things which is necessary or important to do in the whole part of the interaction or the process just by uh adding affordance or by removing affordance. they can make you do things which you uh don't want to do as well. So just by looking uh at this picture you may feel that um these are actually buttons. However, they are not. They're just indicating the sale price. So then it is a false affordance because it is looking exactly like a button. So this is a kind of study which um um you know or this kind of a pallet which user interface designers probably create before they start um you know coding or uh designing an interface. So basically how a button or default state would look primary or important buttons would look like this. uh highlight as as soon as you um kind of uh if you want to highlight something uh then how it looks. If it is an alert button then how it will look. So and also different um uh aspects of it. So if you this is the default state. If you hover then it becomes darker. Um then if you uh if it is disabled it becomes lighter. If there is some loading text then it is becoming like this. If you want to click or focus then it becomes even darker and seems as if it is pressed inside. So this table can help you understand uh the relationship between perceptual information and an affordance. So um so if there is no affordance and there is no perceptual information then it is a correct rejection. If there is an affordance but there is no information then it is a false affordance. It is a false affordance. If there is no affordance and there is a perceptual information then it is a hidden affordance and if there is an affordance and there is perceptual information then it is per acceptable affordance. So why do we need affordances again for error prevention maintain accuracy and overall enhancement of the user experience. So to summarize uh we spoke about affordances the conceptual part of it different types uses and how we can incorporate it in our design and our thought process as well to know more and understand the various aspects and how our dayto-day objects or day-to-day technologies have used affordances in order to make our lives so simple and easy. Uh you can go through this book, The Design of Everyday Things by uh Dawn Norman and it is a very interesting read. I really recommend this book. See you in the next class. Thank you for sticking around with digital accessibility.