The Cognitive Abilities of the Human Mind
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 46 | |
| Author | ||
| License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/47176 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
droidcon Berlin 201524 / 46
5
7
10
13
16
18
20
21
23
26
31
34
35
36
41
42
45
00:00
CognitionGoodness of fitSoftwareEvoluteSoftware developerMathematicsField (computer science)Lecture/ConferenceMeeting/Interview
01:01
SoftwareMultiplication signField (computer science)Interactive televisionCognitionNeuroinformatikSoftwareBitSoftware engineeringComputer animation
01:57
Graphic designField (computer science)Android (robot)Right angleSoftware developerBitDependent and independent variablesLecture/ConferenceMeeting/Interview
02:25
Physical lawDistanceGroup actionSoftware developerCore dumpNP-hardPhysical lawInsertion loss1 (number)Analytic continuationDistanceFigurate numberNetwork topologyAlgebraic closureSimilarity (geometry)Interface (computing)TorusLecture/ConferenceMeeting/InterviewComputer animation
03:24
DistanceDot productGroup actionMultiplication signSlide ruleLecture/ConferenceMeeting/Interview
04:05
Web pageClient (computing)GoogolDistanceCharacteristic polynomialDot product1 (number)SoftwareLine (geometry)EmailSpacetimeMultiplication signInterface (computing)CASE <Informatik>Lecture/ConferenceMeeting/InterviewXMLComputer animation
05:19
Similarity (geometry)Figurate numberSimilarity (geometry)Group actionSquare numberDot productGraph coloringCircleShape (magazine)Computer animationLecture/Conference
05:56
Compilation albumSimilarity (geometry)Bit error rateInclusion mapGraph coloringDifferent (Kate Ryan album)Element (mathematics)Web pageSimilarity (geometry)Subject indexingInterface (computing)Lecture/ConferenceMeeting/Interview
06:54
Mobile appMessage passingGraph coloringDifferent (Kate Ryan album)Sign (mathematics)Lecture/ConferenceMeeting/Interview
07:44
Similarity (geometry)GUI widgetMobile appWeb browserGraphical user interfaceGraph coloringLecture/Conference
08:19
Bit error rateAnalytic continuationComputer iconGraph coloringGraph (mathematics)Analytic continuationLine (geometry)Lecture/ConferenceMeeting/InterviewComputer animation
09:02
WebsiteInterface (computing)Physical lawAnalytic continuationMobile appLecture/ConferenceComputer animation
09:43
Maxima and minimaTriangleSphereMatrix (mathematics)Physical lawAlgebraic closureLecture/ConferenceMeeting/InterviewComputer animation
10:14
Algebraic closureMedical imagingInterface (computing)Web pageAlgebraic closureGreatest elementComputer animation
10:49
NeuroinformatikCoefficient of determinationRight angleDot productMereologySummierbarkeitMultiplication signBitLecture/ConferenceComputer animation
11:39
TouchscreenTwitterComputer fileBitComputer fileArithmetic meanMereologyComputer iconMoment (mathematics)Graphic designCurvatureComputer animation
12:15
Context awarenessComputer fileComputer iconMultiplication signSoftware testingArithmetic meanLine (geometry)Lecture/ConferenceMeeting/Interview
12:46
Gamma functionBit error rateGEDCOMData storage deviceMobile appComputer iconElectronic mailing listLine (geometry)Equaliser (mathematics)Arithmetic meanDifferent (Kate Ryan album)QuicksortLengthInvariant (mathematics)Object (grammar)Lecture/ConferenceMeeting/Interview
13:19
Invariant (mathematics)Object (grammar)CASE <Informatik>AngleInvariant (mathematics)BitGreatest elementLecture/Conference
14:22
Object (grammar)Different (Kate Ryan album)Game theoryGraph coloring
14:52
MultiplicationStability theoryMedical imagingArithmetic meanAngleState of matterMultiplication signMultiplicationStability theoryPhysical lawMereologyComputer animation
15:47
Inclusion mapMathematicsGroup actionGraphic designSystem callCASE <Informatik>Interface (computing)Software developerFocus (optics)Connected spaceMobile appProfil (magazine)Computer animationXML
16:28
Graph coloringFunctional (mathematics)Arithmetic meanSystem callGroup actionInterface (computing)1 (number)Dot productTwitterAndroid (robot)Moment (mathematics)Lecture/ConferenceComputer animation
17:15
SynchronizationStatisticsUniform resource nameAverageInterface (computing)Ring (mathematics)Computer animation
17:47
RepetitionRing (mathematics)Interpreter (computing)Form (programming)Interface (computing)Symmetry (physics)Lecture/Conference
18:46
Symmetry (physics)DistanceRevision controlSymmetry (physics)1 (number)Group actionMobile appPoisson-KlammerDifferent (Kate Ryan album)Square numberSet (mathematics)Type theoryComputer animationLecture/Conference
19:29
Special unitary groupSymmetry (physics)Interface (computing)Vertex (graph theory)Symmetry (physics)Chemical equationCASE <Informatik>Line (geometry)Lecture/ConferenceMeeting/InterviewComputer animation
19:57
Symmetry (physics)Greatest elementMenu (computing)Group actionMultiplication signChemical equationLecture/ConferenceComputer animation
20:29
Figurate numberReading (process)Lecture/Conference
20:57
Multiplication signInterface (computing)Sound effectMenu (computing)Acoustic shadowDrop (liquid)Figurate numberCASE <Informatik>Lecture/ConferenceMeeting/InterviewComputer animation
21:31
Visualization (computer graphics)Multiplication signTerm (mathematics)Graph (mathematics)TriangleSphereInsertion lossInstance (computer science)WordComputer animationLecture/Conference
22:46
Error messageAndroid (robot)Characteristic polynomialRoundness (object)Lecture/Conference
23:23
Hardware description language1 (number)Lecture/ConferenceMeeting/Interview
23:55
1 (number)Characteristic polynomialRoundness (object)Lecture/ConferenceMeeting/Interview
24:30
Goodness of fitBookmark (World Wide Web)Lecture/Conference
25:07
Error messageInterface (computing)Lecture/Conference
25:37
Shape (magazine)Equaliser (mathematics)Control flowLengthStability theoryLecture/ConferenceMeeting/Interview
26:06
LengthLecture/ConferenceMeeting/Interview
26:37
Disk read-and-write head
27:07
Water vaporKnotPoint (geometry)Video gameLecture/ConferenceComputer animation
27:48
NumberInterface (computing)Error messageLecture/ConferenceComputer animation
28:20
Water vaporSlide ruleGreatest elementMeeting/InterviewComputer animation
28:51
Table (information)Square numberMeeting/InterviewComputer animation
29:33
Functional (mathematics)Instance (computer science)Lecture/ConferenceMeeting/Interview
30:13
BitLengthNP-hardCharacteristic polynomialLecture/Conference
30:46
1 (number)Right angleCharacteristic polynomialCASE <Informatik>CurveSlide ruleKey (cryptography)Lecture/Conference
32:22
Fibonacci numberRight angleProcess (computing)Office suiteLecture/ConferenceMeeting/Interview
32:54
Office suiteArithmetic meanChemical equationLecture/ConferenceMeeting/Interview
33:27
Office suiteBuildingTable (information)Meeting/Interview
34:03
Table (information)Ring (mathematics)Multiplication signDisk read-and-write headLecture/ConferenceComputer animation
34:39
Reading (process)Line (geometry)Interface (computing)Multiplication signFunctional (mathematics)Right angleGraphic designSymmetry (physics)Lecture/ConferenceMeeting/InterviewComputer animation
35:43
Normal (geometry)SoftwareSurfaceSoftwareError messageProgram flowchartLecture/Conference
36:26
TwitterEmailMultiplication signMeeting/InterviewComputer animation
36:55
Bit error rateLecture/Conference
Transcript: English(auto-generated)
00:06
But see the thing is I'm not going to be the only one working in this session. I intend to include you in the talk because that way I don't feel quite as alone up here. So I hope you will help me and interact with me during my talk. My talk today is going to look into the fact that by now UX has become an established
00:25
field of work and most developers know the importance of having a good user experience in our software. The question is that with all of these guidelines that have come along, how do we know why it's exactly these guidelines that we should adhere to?
00:42
Why is it that if they are not adhered to the user will fall off and will not understand our software? That's because of the cognitive abilities of the human mind. That's regarded by evolution just as so many other things with the development of the human being that also means that the cognitive abilities won't change and we cannot fight them.
01:04
So let's look into some of the things that go into the cognitive abilities. But first let me introduce myself. I am a software engineer, I graduated in 2003 from Aalborg University and after that I started doing research within HCI, human computer interaction as it was called back
01:25
then, today it's more UX. I then went on to do a Ph.D. in the same field and I did that until 2009. Went on to become a researcher again and by then I had worked with this for nearly
01:41
eight years and I decided maybe it's time to go out into the real world and see if this actually works or if I have wasted my time. Luckily I came to Trifork and I found out that it really does work and it really does add value, so good for me. But I would also like to know a bit about you, so raise your hands if you mainly work
02:02
with Android development. Yeah that's far most of you, that was the to be expected. Raise your hand if your main field of work is within UX or graphical design. All right you guys are busy.
02:20
All right raise your hand if your main responsibility is the business side of things. All right there's a few of them as well, but this is a hardcore development group. That's good, I like that. All right, the first thing we're going to talk about is something called Gestalt laws. Gestalt laws were first talked about and published about in the early 19th century by
02:46
three Germans actually. And the Gestalt laws they go to talk about how we perceive things and how we group things when we see an interface or anything around us really. This particular way of writing Gestalt actually includes five of the Gestalt laws.
03:05
So closure on the far left, proximity on the E, continuation on the S, similarity on the two Ts and figure and ground the tree within the A, when it comes to the A. That's what we're going to look at. I'm going to explain one of each of these to you and especially the ones that actually
03:22
apply in development, I'm going to explain how that applies. The first one is this one. What do you see here? Dots. Can you say anything more about these dots? They're black. Anything else? They're grouped.
03:41
How are they grouped? Three groups. Some say four. All right. So maybe there are three groups like this. Maybe there are four groups because this one is split into two. Maybe there's even six groups if you split this one into three. See the thing here is I have shown this slide to a lot of people through my time
04:03
and never ever have a single person said they see 36 dots. But that's what there is because we don't just see 36 dots. We go on and start saying some of the characteristics of these dots. One of the main ones being that they're grouped. So how does this affect our software?
04:22
Well, in this case, it's Gmail's app. And here, of course, it makes sense that way, but it's grouped according to the mail. So each line has three lines of text that are grouped closely together. Then you've got a large amount of white space before you see the next line that
04:41
also has three lines of text and so on and so forth. And just to emphasize the grouping, there's a line between these mails. The thing is this interface works well, but the time it wouldn't work well is if you minimize the white space between these lines. And there's a tendency, especially when we design for small screens, that we want to fit as much into it as possible.
05:03
And then we start stealing the white space. Don't do that because that hinders the user in grouping what they're trying to make sense of in the interface. So please do not steal the white space. It has a purpose, and it's not just pixels that you can eat away at.
05:20
Second one, similarity. Again, some geometric figures. What do you see here? There's still three groups, but what can you more say? All right, so there's some that differs from the rest. Yep.
05:41
On the left side, they differ by color. There are four whites. In here, they differ by size, so there are four small dots in the middle. And here, they differ by shape, four squares in the middle of the circles. This is another way that we make concept of the world around us, that we look at things that are similar looking, and
06:02
we expect them to belong together and behave the same. And if something is looking different, we expect it to not belong to the rest. We expect it to behave differently, and we expect it to be a reason for it looking differently.
06:21
This is a classical example of how we use color to see the difference between various elements. Color is a strong way of making dissimilarity, because you can easily scan across a page like this and see which indexes did well and which indexes did poorly on a given day.
06:42
If you had to scan that same page without color, just for the pluses and minuses, it would take you a lot longer. So, here's the deal, if you are making an interface and you are making things different but without different behavior or for no apparent reason, the user's gonna wonder, why is it different?
07:02
Am I missing something here? And it could be something like not calling the same thing the same everywhere in an app, so once a place you call a notification, the next place you call it messages, and third place you call it something else, push notifications maybe. The user's gonna wonder, is there a difference between these three things?
07:21
And if there isn't, then you're gonna lose them and then you're gonna make them feel less safe about what they're doing with your app. Also, if you have different buttons and you vary them in color for no apparent reason or size for no apparent reason, that's also gonna confuse them. So if they have the same behavior, if they belong together,
07:41
make sure they look the same. This is really how we make sense of our home screen on our phone. We scan quickly to find the apps that we're looking for, and I'm absolutely sure that you don't scan the name underneath. You look for the orange logo to have found SoundHound, or you look for the yellow, green, and red to find the Chrome browser.
08:05
And here's the thing, imagine you started sorting all of your apps and grouping them by color, then all of a sudden your home screen would look like this. And it would be a lot harder to find the app you were looking for. It would take you longer. The reason being that now you would actually have to read,
08:22
because you wouldn't have the color to go on. And especially when the size of the icons are roughly the same as well. What do you see here? A what? A dinosaur, yeah, I always get that one.
08:44
There's a graph there, right? Except there isn't. Again, there's only dots. But we do continuation. We can't help but draw that line that's so very obvious there in the middle. And we are not thinking about this. This is just something we do unconsciously.
09:02
And that's the whole thing about these Gestalt's laws, that they are unconscious. That also means we can't work against them as a user. And how that affects our interface, I haven't found, I've found some websites where it actually affects the interface and where you will have things overlapping each other. And then the continuation is actually of what is going behind
09:22
whatever is on top. But since we have such small screens in mobile, I have yet to find an app that actually makes use of continuation. What do you see here?
09:46
Anyone else? A white triangle, yeah? And a sphere on the left. Yeah, but you see, it's like in The Matrix, there is no spoon. There is no sphere and there is no triangle.
10:01
But again, you have to try really hard to not see the triangle and to not see the sphere, because it's so blatantly there. So closure is also one of the Gestalt laws that we work with. And we can use this to our advantage, because closure is something we use to make things whole.
10:21
And the human mind is so used to things having to be complete, that if something is incomplete, we'll start looking for the things that are missing. We use that as a way of hinting that there's scroll in this page. Because if you look at the bottom here, you clearly see three images that are not whole. And because they're not whole, we'll start scrolling for the rest of them.
10:44
So that's a clever way of making sure that the user know that an interface has scroll. Emergence. What do you see on the left? A giraffe, yeah, on the right?
11:01
A dog, a Dalmatian dog. These pictures, a lot of computers would have a really hard time making sense of those. Emergence is when something appear as a whole right from the beginning, and is not something you make up in your mind out of the sum of its parts. Meaning, you didn't look at that giraffe and saying,
11:20
okay, we've got four hooves here, we've got a mouth here, we've got some ears there, it must be a giraffe. No, it just appeared as a giraffe. Same with the dog. It's not like you looked at the individual dots and saying that's the ear, that's the neck. You look at the whole, and it just emerges. And there's a bit of controversy about this at the moment,
11:42
because the graphical design tendency at the moment is that everything has to be flat design. Everything is being simplified to oblivion, basically. And the problem here is that how much can you take away from an icon before it no longer has any meaning?
12:01
Because icons are also supposed to emerge, and you don't look at the parts and see, okay, that's a file folder, or that's a clipboard for movie making. You should just look at them and know what they are, but if you look at that zip icon up there, that's nearly not a zip icon anymore. Same with the one above for movies.
12:22
If that was taken out of context, and you couldn't see that was next to an MP4 file, then you would have a hard time saying what that was. So the question is, how much can we take away from our design before it loses meaning, and the users won't be able to make sense of it anymore? And already I'm running user tests
12:41
where they will look at that icon in the left corner and saying, I don't know, these three lines, what do they do? Is it a burger? Is it a list? What is it? There's a lot of people who don't know that as a menu, and if you look in the App Store, nearly every app has that icon. That's actually a problem. Same with the sorting icon up there.
13:02
Three lines now, the only difference is now they're not the equal length, but people don't know that means sort, because there's no meaning embedded in it. It doesn't emerge like it should. Invariance. Invariance is the ability to recognize a known object
13:22
no matter where you see it and from what angle. In this case, it's the angle that's differing. That means that if we're on the street, we'd recognize a car even if we see it from the side, from the back, or even from the bottom. That same car, we will also recognize it if it's an Opel or a Mercedes or a smart car.
13:42
So they can look slightly different, but we'll still recognize it as a car. Even if it's a bit distorted, we will recognize it as a car. So when you're running down the A7 and you see a red car in the side of the road, you will still recognize it as a car.
14:00
And finally, we also recognize cars when we see them at day as well as when we see them at night. So the lighting and the material also doesn't hinder us from seeing that it's a car. So invariance is what makes us able to recognize a given thing no matter what the circumstances. And they can really look quite different and still be recognizable.
14:24
And we have the same thing in the 2D world. This is from a racing game called Furious 7 racing. It's the same thing. We look at these cars and we know they're cars, even when they're turned upside down, even when they look different, even with different colors, day and night and so on. So the human mind is actually quite mind-blowing in that way
14:43
that we will be able to recognize this when it nearly has no common, nothing in common. We will still recognize it as being the same object. This one doesn't actually have any meaning in an absence, but it is one of the Gestalt laws, so for complete let's sit here.
15:02
But that's called multi-stability. These images are fairly known. This one is called Rubens Vars. And if you focus on the white, you'll see a vase in the middle. If you focus on the black part, you'll see two faces facing each other. The thing about multi-stability is that either when you focus on the white or when you focus on the black, it's stable.
15:22
So it has multiple states where it's stable. But the thing is you can't see both at the same time. You can switch very fast between them, but you can't see both at the same time. Same one on the left. You either see a young lady seen from this angle or you see a witch seen from this angle.
15:42
But you can't see both. Focal point. That's the ability to make out one single thing in an interface and seeing that that's the most important. This is about prioritization. And those of you who work with UX and graphical design
16:02
and possibly also the developers will know that this is what we call the call to action. Being able to make one thing out in an interface that is the most important thing. In this case, it's the LinkedIn app where you have this bright blue button in the middle that says edit. So that's one of the call to actions.
16:21
But there's actually a couple more because you can see who has viewed your profile and you can also see how you rank among your connections and you can see all of the recent activity. This has been done the way it should be done where you choose a bright color and you make that the call to action. That doesn't mean that everything you can interact with
16:42
should be that color, but it means that the primary functionality should be that color. Common fate. This is about animation and given what is the trend at the moment in the Android society, this is actually quite important
17:02
because these dots are all the same, but we group them according to how they move. So the ones that move up, we group them together and think they have something in common. The ones that move down, we do the same. And we can use that in our interfaces because here you have things moving together.
17:23
So they're grouped only based on movement, also on other things, but mainly here based on movement. And this is actually quite cool because that's yet another way of helping the user make sense of an interface.
17:41
Simplicity. What do we have here? The Olympic rings, yeah, exactly. So basically what you're saying is that we have five rings. This is what, did anyone see anything else than five rings?
18:01
No. But if you look at it, you could also see this. The reason that nobody sees this is because that's not the most simple form to split this up. And you should think about that when you make your interfaces because if you're making an interface where you have a headline somewhere
18:22
and people might mistake it for belonging to whatever is above rather than what is below, then you have a simplicity problem because then you have chosen the more complex road and since the user always sees the most simplistic interpretation of the interface, they will get it wrong.
18:40
Always think in simplicity. What is the most obvious way of grouping things? Symmetry. I think that's the last one. Here we're actually in conflict with the first one called proximity because proximity said that the things that are close together belong together in groups, but here, these two acts are the ones
19:01
that are closest together along with these. Nevertheless, that's not how we group them. That's because of symmetry because symmetry is stronger here. It's easy to see that these are square brackets that belong together. These are, I don't know what they're called in English, different type of bracket belong together and another set of square brackets.
19:22
So symmetry is also something to look for and in general, symmetry, you cannot create complete symmetry in an app. That wouldn't make sense where you would have like a vertical line and everything would be mirrored around it because for the sole reason we have text in there. You would never have that. That said, symmetry is not about exact mirroring.
19:41
It's about balance. It's about balance in the interface. This case here, Google Now, when you look at this one, you can draw a vertical line here and it has balance. It's not mirrored, but it has balance. All the way up and down. Even here at the bottom where these are centered
20:02
rather than to the left. Same in the top if you have your back button, your menu button and you have your action buttons in the right corner. So there's also balance there. Oh, there was one last time. Can you read what it says there?
20:23
Try squinting your eyes, then you can. See, what's happening here is that we are being confused about what is the figure and what is the background. Right now, we're looking at all of the white
20:41
as being the figure and the black as being the background. When it's really the black, that's the figure and the white, that's the background. And there is really no telling why that is or why the human mind works like that, but it does. And that's why if we squint, we can all of a sudden read it. But that also has effect in our interfaces.
21:01
And that's also at the time when flat design was at its highest, that was creating problems because at the highest, this menu here that's dropped down would not have a drop shadow on it. Meaning it would actually be hard for you to tell what was the figure and what was the background. It is these subtle visual hints that tell us
21:23
how to interpret the interface. And in this case, the menu is the figure and the rest is the background. So think about that when you have something overlaying that the user should be able to interpret that correctly. All right, so those were the guest outlaws.
21:44
I think there's 10 of them and you can find much more about them online. But it is something that we are not unable to work against. You could see even when I was making you aware of them and making it something conscious,
22:00
you would have a hard time working against them. You would have a hard time not seeing the graph. You would have a hard time not seeing the triangle and the sphere. And that's when we're conscious about it. Imagine the user who doesn't even know that they are guarded by such a thing as guest outlaws. If you don't know it, you can't work against it.
22:20
The other thing I'm talking about today is affordance. Affordance is a term that was coined quite late by a guy called Don Norman in the UX world, that is. Before that, it existed in psychology, but he coined it in the UX world. And it is, in essence, visual assessment of intended use.
22:41
In other words, the ability to tell how something is gonna be used just by looking at it. That means no trial and error. You can't push any buttons, you can't try your way around. You should be able to immediately recognize how it's used just by looking at it. And we're gonna start off somewhere completely different than the Android world.
23:01
We're gonna start off with this one. Given we had no history of using a football, how would we be able to tell roughly what this is for anyway? What kind of characteristics does it have?
23:20
It's round, yes. What else? Bouncy, yeah, the material is flexible. And one last thing. Yeah, that's also a characteristic, but it's not one of the defining ones
23:40
because it's not what makes it good at what it does. You could have that one in red and blue and it would still be a good football. So the third one that's important is the size. Because if this was this size, you would have to be messy to be able to play with it. Or if it was this size, you would just look stupid. So it's the size of it that makes it good to be kicking around.
24:02
Also, if you had three balls lying next to each other, the same size, all of them round, but one was a bowling ball, one was a football, and one was made of glass. Without knowing how to use any of them, you would know which ones not to kick. And that's what affordance is about.
24:21
Looking at it, knowing how to use it. The next one, two out of three characteristics here are the same. It's round, it also has that flexible ability. But here the size is different. And that's why you would never put that down on the ground and start kicking it around. But if I handed it to one of you while talking to you,
24:42
you would probably go like this quite soon. You know, just lazily going back and forth between your hands. Because it's good at that. But you wouldn't do it with the football. Well, some of you might if you have really big hands. But other than that, it's really hard. And you would quickly fall it all over.
25:04
This one is one of my favorites, a light switch. You are going to be really hard pressed to find any other uses for light twist than pushing it. There's no trial and error here. There's only one way to use it. If only all interfaces could be that easy to use, right?
25:24
All right, so let's see what goes wrong when affordance is not obvious. What is this? It's not a trick question. So go ahead. It's a chair. Yes, why is it a chair?
25:41
Yeah, you didn't expect that question. Why is it a chair? Yeah, so it has a seat. What else makes it a chair? The shape? And what can you say about the shape?
26:00
I'll break it down to you. It's got four legs. They're equal length. That means it's stable. It has a seat and it has a back. And here's where it becomes really good. The length of the leg is this long. The depth of the seat is this long. And the height of the back is this long. That's what makes it a good chair.
26:21
That's what makes us able to recognize it as a chair. We don't think about that when we walk into a room. That thing over there that has stable legs that has a seat and a back, so it's probably a chair. Now we just know that. We're not conscious about that. But if I show you this, is this a chair?
26:44
People are more, hmm, not quite sure, right? See, here's the thing. It does have legs, but it only has three of them. So it might not be as stable. The material also looks kind of flimsy, not as sturdy as the one on the left. It does have somewhat of a seat, but it seems like it's more of a recliner, if anything.
27:03
And the one thing that throws us off really well is where are we able to put our heads in this one? It doesn't look very comfortable. And when we see something like that in a museum, we're not quite sure that if we sit down, we'll be able to take a rest, or maybe we'll be chased out
27:20
because we sat down in an invaluable sculpture. That's what happens when affordance is not correct. Same here, water faucet. Two good knobs that fit really well with your hands and when you turn them, water comes out in the middle. It's smart. But let me see, show of hands,
27:40
how many of you have been in a bathroom at some point in your life, helplessly waving your hand in front of a tap that you couldn't use. Right, and the rest of you are lying, by the way. Because let me run into something like this. I can reveal it is a tap, but how would you turn it on?
28:06
There are a number of ways here. You can turn it. You can slide it. You can pull it. You can tip it. But nevertheless, this will be a trial and error interface because you would not be able to tell
28:21
how to use this just by looking at it. And that's just opening so it gets water out. Nevermind getting cold or hot water. That's too advanced in this one. Pepper mill, pretty standard. Turn the top, pepper comes out at the bottom.
28:40
And this one is in my slides because this is where I fell into a trap at a restaurant. I was in one of these fancy restaurants that is really minimalistic, all black and white, fancy snooty waiters and all that. And my food had just arrived and I hailed the waiter and said, excuse me, do you think you could bring me some salt and pepper? And she looks at me and says, yeah, it's there.
29:01
It was right on the table next to me, next to a vase, a square vase with some flowers in it. But I hadn't seen it because it looked like this. I thought that was just another piece of interior decoration. You can turn it.
29:20
On the top it's pepper, on the left side it's salt. So far so good. I would never have one of those in my kitchen. Why not? Because when I cook, I get greasy. I always have stuff on my hands. If you have greasy hands, you can't turn those. And I would quickly get annoyed.
29:43
So it's not only about looking at it and being able to see what it does, it's also about it minimizing functionality and making it less functional for you if the affordance is not good. But there's also such a thing as perceived affordance because humans are resourceful.
30:00
So just because it's intended for one use does not mean that we won't use it for something else. For instance, if I have a nail that needs hammering in and I do not have a hammer, what do I look for?
30:21
Heavy, flat? Yes. Sturdy surface, hard surface, yes. And perhaps even a bit of length so I can swing it. Yeah. Which is exactly why you get in trouble with your mother-in-law when you use these. But they will do the trick. They will do the trick because they are heavy.
30:43
And that's back to the football. The three defining characteristics of that one were the ones that made a good football. The three defining characteristics of a hammer that makes that a good hammer also roughly exists in the candle holders on the right. And that's why it can be used in a jiff.
31:02
So when we have a screwdriver or when we don't have a screwdriver, what do we look for? A knife, yes. A coin, yes.
31:23
Fingernails, yeah. Key, yeah. Oh, that's not on there. I had a key on one of my slides as well. Oh well, that went missing. But the girls will know the last one because that's what we also look for. And the reason that that was easy to make in advance
31:42
not having talked to you before is because that's how predictable we are. And that's also why it's important that we stick with what the users know because they are just as predictable. But why do we not use any of those three if we actually have a screwdriver?
32:05
The screwdriver's better. Because for those of you who have used the knife, I bet at least some of you have broken the tip off. Yeah. Because it's not meant for it. And the coin will work in some cases but only if the top of the screw is really large
32:21
and the curve is really large. And that one, because it's pointy, you have to tilt it in a really awkward manner and you can't really get a grip on the screw with it. So if we have the right tool, we'll use it. If we don't, we'll look for something that will do the job in the minute.
32:41
Sometimes perceived affordance becomes affordance. In the 80s, everybody had these to sit in. And then somewhere in the late 90s, early 2000s, all of a sudden offices were filled with these. What's that about? They don't belong there. They belong in a gym. Why did we move these into the offices?
33:06
Because as good as we are at making chairs, the human body is not meant to sit down eight hours a day. And we would lose our back muscles from being too comfortable. So people started introducing these because they are uncomfortable
33:20
and they are constantly out of balance, meaning we constantly have to use our back muscles to stay on top of them. But because it is perceived affordance, meaning it was not meant for this use, it also has it back draft because it would never stay at the desk where you actually left it. It would roll off into the other end of the office or if you were in a really crooked building,
33:42
you could fight it at the end of the hallway after lunch. So people started looking for ways of improving this. And I'm ashamed to say that's how something like this happens. And yes, they can actually be bought online. And I know how it happened
34:01
because they wanted it to stay put at the table. So they put a ring under it. The problem was then it was really hard to move back and forth under your table when you're sitting on it. So then they put wheels on it and then they got carried away and they put a backrest on it and they ruined the entire thing. There you go.
34:20
All right, we've all been there, right? Yeah, but it has labels. Why don't we just read the labels? We don't. Well, we do, but not until we banged our head against the door the first time. Then we read them.
34:40
So what's the answer to that? Bigger labels. No, not bigger labels. You don't read. Your users also don't read. That means if you have a problem in your interface, stop thinking you can add three lines of text and explain it away.
35:01
Actually solve the problem because the users won't read. That's what you wanna be doing. And I know there are some designers in here who are cringing right now because this is not very pretty. But that actually solves the problem because you're gonna have a hard time pulling that one and you're gonna have a really hard time pushing that one
35:21
unless you push on the actual door. The reason we don't do this, symmetry, aesthetics. Graphical designers decided that it looks prettier if they look the same on either side of the door despite the fact that we never look on both sides of the door at the same time. So there goes functionality for you.
35:44
All right, so how does this apply in software? Well, originally buttons would look like this. First one actually looks like a button. It proceeds out from the surface behind it. You could see the middle one is disabled and the last one is highlighted so it's actually activated.
36:00
It's pressed in so it's below the surface. But then came flat design and then they started looking like this. And now all of your visual cues as how to use them are gone. That means it becomes a lot more trial and error. And even worse, if they just look like this. You can't see anything from that.
36:21
And what happens when people can't see when a button reacts and it activates? They press it again and again and again. And if that actually does something, they will do it 10 times before they realize that it actually did register. So again, we're peeling too much away and that also peels away the visual cues
36:41
that we need to have to be able to look at an interface and know how it's used. That was what I had.
Recommendations
Series of 9 media