User Expectations vs. Creator Perceptions
Creating successful user experiences is an art. A lot of art involves taking advantage of the way that the brain processes information. The most successful designs (user experiences or otherwise) are those that give off feeling of “how else would you do it?”. The design simply seems to make sense. Designing an interface is a more complex process than simply creating links and putting arrows on a page. To compare this process to that of another in art in terms of complexity- let’s have a look at foreshortening. Foreshortening in art is a good illustration of how difficult it is, because it illustrates that something that seems so obvious once it’s done well. It harnesses the power of the brain to fill in the things it’s expecting, even if they aren’t there.
In the Egyptian drawing to left- observe how the artist drew the shoulders. They have been illustrated squarely facing the viewer, and if you look at the arms you realize that it is physically impossible for the subject to have been standing and motioning exactly like that. If you look at the sketch below it, you will see the shoulders of the subject are rendered realistically, and use a technique called foreshortening. This means that the artist has drawn the elements of the subject that are closer to the viewer as larger and overlapping the elements that are farther away. Foreshortening actually looks more realistic because it uses the same concepts to create depth on paper that our eyes and brains use to determine depth. Surely you’ve seen photos of people looking like they are holding up the leaning tower of Pisa or the moon. These photos are using the way our brain processes depth to fool it into thinking the depth is real, it’s just an exaggerated version of the same thing as foreshortening. If the photographer didn’t understand how the brain processes information, these photos wouldn’t exist.
One of the challenges that budding artists face, is that they often attempt to render the foreshortened body part as if they can see it completely, because their brain insists to them that it is there. So instead of drawing using the technique of foreshortening, they draw what they think they should be seeing. Often this results in awkward, badly rendered drawings of foreshortened objects. The artist is trying to fill in the blanks, even though they don’t need to be filled in. The brain will read the arm as behind the hand, even though it isn’t actually rendered in the drawing. Foreshortening is something that has to be taught, as it is often not intuitively understood. There are whole eras of art history that have almost no foreshortening, for example it is rarely seen in ancient Egyptian, Greek, or Roman art. It has been speculated that the artists of the time simply hadn’t figured out how to draw things in perspective.
We have to be taught to ignore what our brain is telling us. One of the most common drawing exercises for a beginners art class is to give them a line drawing (often this one by Pablo Picasso) and to ask them to look at the image upside down while they draw it upside down. Shaking up the brain from it’s expectations allows the student to more often than not, draw a closer copy of the original. The artist needs to be taught to abstract what the eye sees in such a way that they can stop making assumptions and start making informed choices. Instead of looking at a hand and trying to draw a “hand”, they learn they need to see the shapes and forms that make up the hand.
When we’re developing an app we often become so familiar with how it works that it becomes easy to forget to include features or details that would be considered standard. One of the reasons for this is that we don’t often spend a lot of time thinking about the little details that make an app a pleasure to use. We obviously spend plenty of time being frustrated by apps or websites. I’m sure you can name more than a few that left you feeling annoyed because you had a difficult time doing something that seemed so basic to you. Do you remember what those little frustrations were caused by? Most often, they were probably caused by you expecting something to work a certain way only to find out it didn’t. Instead of trying too hard to fill in the blanks like the Egyptians, we developers often leave gaping holes because we know what’s supposed to be there.
This is why taking time to think like the user, creating user profiles, and having a non-biased person do testing is important. We often can’t find these gaps ourselves. The process we should follow is extensive, but we can shorten the process by taking time to leverage what the user already knows and has already been taught. How do we do this? We have to have an understanding of what the user already knows by looking at common patterns, and seeing if we are following those patterns in our own applications and web sites.
One of the reasons patterns work and are important to design success is that, as humans, we have a mental preconception of how things “should” be and what is “important”. Our brain filters out things that it perceives as just “static”. You’d be amazed at how much you are ignoring in any given second. Try to feel the keyboard under your fingers, the mouse in your hand, the tounge touching the roof of our mouth, the clothes on your skin and the air moving in and out of you all at the same time. All while you’re reading this article, too! It’s hard to do for very long because you’re accustomed to to sensations of these things and they are expected- but you would notice if one of them suddenly went missing, wouldn’t you?
This is called the “perceptual set” and Saul McLeod summarizes it well:
“Perceptual set is a tendency to perceive or notice some aspects of the available sensory data and ignore others. […] perceptual set works in two ways:
1. The perceiver has certain expectations and focuses attention on particular aspects of the sensory data […] 2. The perceiver knows how to classify, understand and name selected data and what inferences to draw from it […].”
— Perceptual Set, by Saul McLeod
In terms of design, it is the meeting of these expectations allows the user to actually filter out the less important sensory data to concentrate on the important tasks or information at hand. The designer leverages the expected perceptual set to direct the attention of the perceiver. For example, a headline on a news paper is taking advantage of the fact that the perceiver will filter out the other headlines and focus on that one. In relation to that headline, where is the name of the newspaper? The date? The page numbers? You know already where these things are if you want to look for them. The designer is counting on that too, letting those be smaller and consistently placed allows the headline to take up even more space.
In development, we overlook the perceptual set because it is easily forgotten in the rush of development. Every case we account for creates more validation code. We rush to get things working and things go to production as soon as possible. We create an input field and we write “phone number” next to it, so we put in during our tests: “3334445555” but we forget to think about the person who might want to put in “333-444-5555″. Maybe we’ll give that person a validation error! Is that really fair to make them do if they weren’t given good instructions to start with? A little placeholder text would solve that issue for a lot of people an eliminate unnecessary frustration.
There are a lot of common user interaction patterns, and while some of them involve visual elements, sometimes they are simply keyboard or mouse interactions. These are just as important as visual differences. Have you ever gotten into a different car and grabbed the windshield washer lever because you wanted to put the car in drive? Or went to put the emergency brake on with your hand near the console but then found out it was on the floor and done with your foot?
Have you ever switched from a Mac to a PC or the reverse and find yourself going to the wrong side of the window to close it? I switch browsers constantly and find myself looking for the refresh, home, and bookmark buttons in the wrong place. I’ve been trained to expect them to be in a certain spot, and I automatically go to that spot to find them, whether or not they are there.
A common mistake I find with forms is that when my browser opens up the auto complete suggestions and I arrow down and hit enter to select the highlighted one to fill in the field. Except instead of filling in my selection, the whole form tries to submit. I’ve been trained that I can do this interaction, but suddenly it’s been taken away from me. I get extremely frustrated by this. This is just one interaction pattern.
New interactions can be taught, which is why people can transition back and forth between Mac and PC between iPhone and Android. There is an adjustment period (or should I say, frustration period). The time to challenge your user’s expectations is not when they are doing important things. I went to the store and swiped my credit card recently, and accidentally hit the cancel button because it was the same color as the accept button and on the right.
Any time someone is training on a new application, or one that they haven’t used in a while, it’s best to make the transition as comfortable for them as possible. Stick with interaction patterns that are already established, re-use menu formats and locations of buttons. These repetitive interactions help the user feel secure and comfortable in using your application.
Separating what your brain fills in from the reality of what you have created is difficult. You’ve created a perceptual set of your own through building the application. The end user won’t have that same perceptual set. Pretend you are the end user, who knows nothing about the application until they have been taught. The need of the uninformed user to use his or her previous experience to work your application should always come into consideration. You are the artist, even if you are just doing front end development. You have to think outside your own perceptions and use the design patterns that people are already familiar with to guide your user interactions. You have to outwit your own brain, and create something useable. It seems so simple until you try to do it. It may even seem like you’ve succeeded until you have someone try to use it. Think about the difference in obviousness between the way the Egyptians drew and the drawing with foreshortening applied. A web site or application without common interaction patterns is as starkly different as one with good patterns included.
Below is a list of websites with interaction design pattern libraries. If you’re adding a interactive piece to a website or application, take a look at what the standard behavior is.