Debra Gelman is a leader, strategist, author, and practitioner in the digital design and user experience space. She leads experience design teams in the creation of digital products for the telecomm, financial services, healthcare, commerce, and publishing industries. She is currently Assistant Vice President, Digital Design at AT&T. She is also the author of Design for Kids: Digital Products for Playing and Learning, published by Rosenfeld Media in 2014.
IA Summit 2015
Topic(s): cognition and psychology
It’s been used to explain everything from love to racism, but in actuality, the pre-attentive variable is a powerful concept that belongs in every information architect’s toolkit. Rooted in cognitive psychology, pre-attentive variables are elements that operate on a subconscious level, conveying information to users before they’re even aware of it. Pre-attentive variables can help users tell which articles are the newest, which videos are the highest rated, and which books are the most popular before they even start actively processing the information on the screen.
This presentation will cover the basics of pre-attentive variables – what they are, why they work, and when to use them – and will provide an overview of some design patterns to use when creating them, including:
Participants will learn how to identify and analyze the effectiveness of these variables in existing interfaces, as well as how to design them for new experiences they create.
- Pre-attentive variables are elements that subconsciously communicate information to users, before they have even started processing what’s on the screen
- Pre-attentive variables help IAs organize, prioritize and classify information for users in a meaningful way
- Some top design patterns for pre-attentive variables include size, shape, color, texture, prominence, focus, orientation and density
- Pre-attentive variables can be used for good, to influence positive user behavior, and for evil, to manipulate users against their will
Deb Gelman: For those of you who don’t know, I do a lot work with kids and designing for kids. I’m a firm believer that the best way to learn is through play. Before we get started on the presentation, we’re going to play. That means you all have to stand up.
Audience Member: [inaudible 00:15]
Deb: Yeah, you too. [laughs] You guys ready to pop?
Female Audience Member: Sure.
Female Audience Member: Yes.
Male Audience Member: Yeah.
Deb: That was anticlimactic. Here we go.
[Pop See Ko Song Playing]
Deb: For what?
My hands are high, his feet are low and this how he pop see ko. Pop see ko. Pop, pop see ko. Pop see ko. Pop, pop see ko.
Are you ready? Pop what? My feet are low and this how I pop see koes. And this is how he pop see ko. Pop see ko. Pop, pop see ko. Pop see ko. Pop, pop see ko.
For what? Pop what? His hands are high, his feet are low and this how he pop see ko. Pop see ko. Pop, pop see ko. Pop see ko. Pop, pop see ko.
To pop. Pop see ko.
Everyone can do that.
Pop see ko. Pop, pop see ko. Pop see ko. Pop, pop see ko.
What? Pop what?
You know what to do. Go.
Deb: And this is how she pop see ko. Pop see ko. Pop, pop see ko. Pop see ko. Pop, pop see ko.
Hey what? For what? Pop what?
Do something, anything. There you go.
Our hands are high, our feet are low and this is how we pop see ko. See ko. Pop, pop see ko. Pop see ko. Pop, pop see ko.
Deb: That was awesome. Whoever said IAs can’t dance? I was mistaken. Now, we learn.
I actually learned something really interesting myself. I had the video up and I was testing out the audio. One of the gentleman who works here was like, “It’s Neil and Bryan!” Apparently, they are Minneapolis locals and they have this band called Koo Koo Kanga Roo. They do videos for kids to get them active during the day.
My daughter’s class, her kindergarten class watches these regularly to get them relaxed, motivated and playful so that they can learn for the day.
We’re going to talk about something super interesting today. The art and science of the pre-attentive variable. Now, it sounds a little bit lofty, a little bit academic, but every single one of you in the room has used the pre-attentive variable at some time or other during either your work, your navigation, your play. You use it every day.
Let’s get a little bit of information about what that means. I’m going to start with a story. When I was in grad school, it was like my second day, I was on my way to class and I hear a voice behind me, “Wendy! Wendy, wait up!”
My name is not Wendy. I kept walking. The voice got louder, “Wendy! Wendy! Wendy!” I did one of these like what’s going on, but I kept walking. Again, my name is not Wendy. Tap, tap, tap on my shoulder, “Wendy, why didn’t you wait for me?” I turned around and there is a woman who would soon become a close friend of mine, Wei Lo Ping, who had just moved to Atlanta, Georgia from Taiwan.
I said, “Wait, it’s Deb. We met yesterday.” She goes, “Oh man, I’m really sorry. All Caucasian people look the same to me.”
Deb: I said, “I get it. That’s cool. Let’s go to class.” It turns out there was another woman in our class named Wendy who looked like this.
Deb: I pretty much looked like this even back in 1996. This actually isn’t Wendy, but it’s a picture that I found of somebody who looks like Wendy or at least what Wendy looked like back in that year. [laughs] Needless to say, I was a little bit surprised.
What I experienced was the pre-attentive variable. Wei had seen the color of my skin. Her mind processed that before it processed any other visual information about me. She thought of Wendy. She thought I was Wendy.
We’re going to take a little bit of a look at why that happens and talk about ways we can use this concept of the pre-attentive variable to our advantage as designers and information architects.
What is a pre-attentive variable anyway? I’m glad you asked. This is my non-dictionary definition. A pre-attentive variable is a visual characteristic of an element that people notice before they notice that they’re even noticing.
In this story with Wei, again, she noticed the color of my skin. Her brain just unconsciously noted it and she thought I was Wendy. We’re going to talk about eight kinds of pre-attentive variables today. We’re going to talk about some real world examples of how we can apply them.
Size, that’s a tiny type. Speaking of size, I hope you all can read that. Size, shape, color, texture which is hard to see but it’s the third one down, prominence, focus, orientation and density. You don’t have to write all these down. I’ll make these slides available. I see a lot of you furiously taking notes. I talk really fast. Don’t stress yourselves out. I’ll make sure that the deck is available after the presentation.
We’re going to take a look at each of these and talk about ways that we can use these pre-attentive variables in our work. Let’s start with size. Don’t believe what they tell you, it matters.
Sorry, just not in violation of the code of conduct.
Deb: I didn’t even think of that until I just saw that slide. When is size important? Size is important when you want to draw people’s attention to a particular aspect of an experience. In my experience, size seems to work best when you’re dealing with numbers. Numbers which you need people to hone in on particular ones.
A great example of this is test results. Financial services, if somebody makes a withdrawal and has overdrawn. How do we make that more prominent? We can use size. Even data entry, what next field you’re on to enter information. You can use size for this.
Let’s take an example. Here’s a very hard to read screenshot of a comprehensive blood report. To a doctor, I see something that’s bold but it’s all running together for me. What if I would use size to make the important stuff stick out a little bit better, like an abnormality or a high level of something?
Here’s an example of how that might be done. If I’m a doctor and I look at eight billion of these a day. I can quickly look on here and say, “Hey, Emily’s bilirubin are high. It’s a problem.” [laughs] Using size when you’re dealing with numbers that are important for people to act on is a good way to incorporate that concept.
We’re halfway through, I’m going to hurry. Talking about shape. How can we use shapes? Shapes are really effective when you’re designing catalogs or e-commerce experiences, maps or signs and wayfaring devices.
Here’s a screenshot from a shopping mall map in South Africa. What sticks out in your mind? You can say it’s the big pink parking lot because that stuck out of my mind first, too. There’s a star right there in the middle. That tells me where I am. That orients me.
There’s a ton of color in here. There’s a ton of shapes, but that one different shape is what helps me locate myself and navigate the mall. You can use shapes in interesting ways to show location, context and navigation.
Color. Here’s something about color. Color is the strongest of all pre-attentive variables. It is the thing that your mind unconsciously notices first about an element, an experience or a person. Why don’t I have color first? Why can’t we rely on color?
Color, unfortunately, has been tortured for so long that it has become almost meaningless. It’s always good to use color alongside other variables as well. Color is really effective when you use it for scheduling, lists, things that are due on a certain day. You can use color to highlight those. Again, commerce, catalogs, and pretty much everything.
Again, if you’re designing for accessibility, you have to be sure that you’re colorblind compliant. It can be a very effective tool. In many of the examples we’re going to look at, we’ll see that color is used in conjunction with another of these pre-attentive variables. Color is always the thing that people notice first.
Here’s a screenshot from what looks like a fruit salad to me, but it is a doctor’s scheduling tool. This shows the doctors what patients they have on what day. Now, what’s the problem with this? The problem with this is that I don’t immediately associate yellow to Belinda Black. I see yellow and that doesn’t have any meaning for me.
I see that I have something there, but why is that yellow versus green? There’s not a whole lot of information being presented here beyond the color.
A better example of this is something like this. Everything in color reflects a new patient. The color are reflective of the condition the patient is coming in to be seen for so the blue is depression, the green is heartburn, the red is a cough and the yellow is migraine.
There’s still a little learning that has to happen here on the part of the doctor. Like I’m not going to be like, “Oh if it’s yellow. It must be migraine. That is so clear.” I’m going to have to learn it. Because there’s two different things being communicated here and the color is used to communicate one of those very important things, it’s an effective mechanism for the design of this piece.
Next up is texture. Texture is a tricky one. Texture is really best for maps, diagrams and flows. As information architects, when we’re designing site maps that we think maybe a client or a developer might print out, texture becomes very important because people may not have colored printers. They may not feel like investing much money into a printout of a site map.
You can get really creative with textures to show differences in phase, differences in functionality, and differences in location. My favorite example of this is old maps. The artists who design some of these older maps were absolute geniuses.
Here is a map of my hometown, the City of Philadelphia. Look at all the textures here. The city center is that grid in the middle which is shaded in texture. The river, I don’t know if you can see it from where you’re sitting, but you can see the lines in the river to communicate motion and movement. The farms are on the outside. Then there’s this little area over here by the school [inaudible 11:49] that are woods.
They not only have communicated the layout of the city, they’ve also has been able to communicate the topography of the city itself. Your eye goes right into that city center or right into those woods because those are the things they want you to focus on.
Prominence. Prominence is a really important design pattern to use for e-commerce, especially if there’s a particular product or line of products that you want to push. It’s great for sites that focus design, art and news.
One of my weaknesses in addition to old maps is handbags. I spend a lot of time on Neiman Marcus website looking at very expensive handbags that I can’t possibly afford.
If we look at an example from this site, you’ll see right in the middle is the new handbag line by Christian Louboutin. It’s a pretty cool looking bag. I hone right into that. As a consumer, it makes me excited to buy that. That’s the most prominent thing on the screen to me and that is the pre-attentive variable that gets my attention.
Focus is our next one. Focus is a really important concept when we’re dealing with games or procedural task or special audiences. When you’re dealing with children with autism, actually when you’re dealing with any kid under the age of five, you need to put focus on the foreground and blur the background out so that they can focus on the task at hand.
Here’s a screenshot from a game called Jungle Junction, Ellyvan’s Coconut Parade. If you see the background, it’s blurred out. If I’m a five-year old, I look right at that blue elephant and I know exactly what I’m supposed to do. That’s where my navigation has to happen. That’s where my focus needs to be.
By blurring out the background and putting focus on the foreground, that’s the pre-attentive variable that helps me direct my attention.
Orientation, this was a really tricky one. It was really tricky to find examples of this. It becomes really important when you’re thinking about to-do lists. Again, catalogs where there’s an important thing that you want people to notice and purchase. Also with diagrams. You can change the orientation of some of your shapes when you’re doing site maps or user journeys to get people’s attention.
Here’s an example from Scholastic. See how that thing at bottom is tilted? Five wild non-fiction books. Like my eye goes right to that. It’s also very large, but it also has an interesting slant which makes me hone in on that and think about what I want to do in that space. Whether or not I want to buy a book about cheetahs.
Finally, we can talk about density. Density is the boldness [inaudible 14:18] or the saturation of an element. This is a great tool for curated lists, when things are available, when things aren’t available, schedules, travel and data collection.
We’re going to look at an example from our friends at US Airways. Look at how the weekends are shaded. My eye goes right to that because I’m probably going to want to leave on a Saturday if I’m planning week vacation and return on a Saturday.
My eyes go right to that right-hand column and I see that those weekends are shaded out. It makes it easy for me to plan what days I’m going to take off from work, what days I don’t have to take off from work, where the weekends are and where my work days are.
That’s how you would use density to communicate information as part of the pre-attentive processing that your users have.
Moderator: Thanks a lot, Debra. Let’s give her a round of applause.