97 UX Things
97 UX Things
Follow These Principles of Gestalt for Better UX Designs (feat. Erin Malone)
Erin Malone discusses her book chapter "Follow These Principles of Gestalt for Better UX Designs."
Sponsored by Watch City ResearchWatch City Research is your trusted UX research partner
Disclaimer: This post contains affiliate links. If you make a purchase, I may receive a commission at no extra cost to you.
Hi, everyone, and welcome to another episode of the 97 UX Things podcast. Dan Berlin here, your host and book editor. I'm joined this week by Erin Malone, who wrote the chapter "Follow These Principles of Gestalt for Better UX". Welcome, Erin.
Erin Malone:Hey, Dan. How are you?
Dan Berlin:All right. Thank you for joining the podcast. Can you please tell us a little bit about yourself and your UX
Erin Malone:Sure, I would say I got started in UX before it was journey? UX. I was a print designer, I was working in advertising. I decided to go back to grad school. During the time I was in grad school, I discovered this thing called HyperCard. And I wanted to do my master's thesis in that tool, because I had variety of media - I had video, I had sound, I had... I was doing it on a series of magazines. It was a design history piece. So I had the magazines and still images. I did a full-library science cataloging of the magazines for the Cary library, I went to grad school at Rochester Institute of Technology. So I hacked together what would now be called a new media degree, and two classes in the computer science department and in computer graphics department and the digital photography. Then, I was in graphic design and sort of put this together. While I was in school, I started working at Kodak doing some touchscreen kiosk work. I ended up working there after graduation for almost two years and moved out to the Bay Area here in San Francisco, where I'm based, to work on Adobe's first website. That was in 1995, when the dot-com boom was just barely getting started, and we didn't know what we were doing. We were just designing things, throwing it up on the internet, getting feedback making changes. There was no process. There was, you know... It was sort of a free for all. And through that time, and then eventually moving to a startup and helping codify some of the kinds of processes that we do. I'm a big one for making diagrams, maps, and things like that to visualize how things work. Then, just a lot of community engagement with peers to help define stuff. So I've been working, I would say, in this space since about '92. So, that's a long time. I've seen a lot of changes. I've seen it go from this sort of grassroots, cowboy mentality... to where folks are writing books about how things work and what people need to know. There's now degrees - and university degrees and master's programs in in the space. It's a real thing. It's a real field. I've been lucky enough to be along for the ride and kind of helping separate it. I'm still doing it. was in a Morecambe group. And the website, essentially, it was brochure - where to promote the application. So, I wasn't working on applications. We were just we were doing... We were concerned with information architecture, as opposed to the more robust interaction design because it was really all about content. When I moved to the startup, it was more interactive. I was the first designer in an engineering group. I just worked with those folks to try things, they would build them, and we would test it. Well, we actually didn't do any user testing. That didn't exist yet. We started that about a year after I had been working with this engineering team. It came down to building relationships, which is really what it still is. It's about relationships and building trust, so that people trust you and respect the qualifications and the experience you have. But they have to trust you in order to believe in that, and trust that you know what you're doing. And that it's. It's built on experience, or testing or data, you know, whatever. If they don't trust you, they're not going to listen to you.
Dan Berlin:Yeah.
Erin Malone:So yeah, it's really about those relationships. It was tough because at one point we got bought, and the company that bought us... So, we were an engineering-driven organization with design embedded in engineering. I had this group of folks that I worked with that really trusted me. I'd been working for two years. Then, we got merged with two other companies. One that was marketing-driven. So advertising-marketing-driven, and the other was news outlet people. So it was editorial, and this was AltaVista. So, they bought - this was back in the late '99. CMGI bought us, they merged AltaVista, the search engine, which was marketing-driven because of paid search with Zip2 - which is where I was, which was engineering-driven. We were doing city guides, Yellow Pages, maps, directions stuff. Then, they brought in folks from CBS Sports Center to create a newsroom. So, you have these three cultures working together that absolutely did not work together. The advertising side was standing over our shoulder,"Going move this here. Move this there, etc." And the Sports Center people are like, "We got to get this out. We're on deadline." Because they're used to, you know, "We've got to drop this and got to scoop all the other news people." Luckily, I was in the engineering group, with engineers who trusted me. And they were like, "We're not going to move this. Have you gotten this approved through Erin?" So, I had a lot of support during - I mean, it was very frustrating for other people. But we had to do a lot of education for these other groups. Because this was the beginning. Nobody knew what this was. Nobody knew why design, interaction design, and user experience design mattered. Because it wasn't seen as a differentiator yet.
Dan Berlin:Yep, you raise a great point about the need to build those relationships over time. So that you have the trust of your fellow engineers, designers, researchers, and everyone who makes this happen. Because UX is necessarily a team sport.
Erin Malone:Absolutely.
Dan Berlin:Yeah. So, thank you for that. Let's dig into your chapter, "Follow These Principles of Gestalt for Better UX". Tell us about that, please.
Erin Malone:Oh, awesome. I love Gestalt. So Gestalt principles are often taught to graphic designers, but not necessarily folks practicing UX design. And Gestalt, if you want to look that up, the Oxford language dictionary defines it as "an organized whole that's perceived as more than the sum of its parts." It's a set of principles that were developed and codified by a group of different psychologists at the turn of the century. They were looking at how perception affects how people understand the world around them. So, these principles essentially help us understand how people make meaning to the things that they are seeing. So as a designer, we can leverage that perceptual understanding, and create more meaningful and useful experiences by taking a look at these different principles and applying them to our designs. What that does is... We leverage what's already happening in someone's brain, and how their eyes and their brain are interpreting what they're seeing. We can leverage that in order to help people better understand what to do, how to work controls, how to understand the content that might be on a page that's grouped together. That means we don't have to work as hard as designers trying to explain everything.
Dan Berlin:Right. Yeah, it sounds like that's the microcosm of UX for visual space perception. In UX, we're always trying to leverage the strengths of the brain and bolster the weaknesses. What we're talking about here is specifically for that visual perception and leveraging our innate capabilities to uncover understanding and meaning.
Erin Malone:Absolutely, absolutely. People automatically group things together if they're close. So, we can simplify their need to have to deconstruct what something means, by grouping things together that should be together. We can use it- we use these principles to infer affordances for how things work. So, it's not just a visual. It's also to help folks understand the workings. So, an example I like to share with my students - I teach interaction design history, as well as visual design - is... During World War Two, there were a lot of plane crashes that happened, and they attributed a lot of those to pilot error. There was a researcher who was looking into this named Alphonse Chapanis. I don't know if that's how you pronounce his name. It's C H A P A N I S, he was French. He basically showed that the pilot error could be reduced by redesigning the cockpit for more intuitive design. What he had seen was that the controls for the flaps and the landing gear looked exactly the same. They were grouped together, they looked identical. In a split-second decision, people were picking the wrong control, and they were crashing. So, he changed the shape of the controls and the placement. So that they no longer looked like they went together, they no longer look the same. And that cut down on these crashes. And Paul Fitts, and a lot of us have heard of Fitts's Law. And that notion that the smaller something is - and the farther away it is from where you start- the less likely someone is going to be successful at selecting that thing. Paul Fitz was doing similar research. He was looking at- if we organize and optimize the design by grouping things by type in meaning - and basically, he's thinking about the Gestalt principles - then, we could reduce errors. You can apply this to controls in user experience, to button groupings to... You think about settings that's really full of all kinds of things that can be grouped. By pulling these things together, we automatically tell people without words that they have similar meaning. Or they go together. Or have a similar action or interaction. There's a bunch of sub-principles under this sort of larger principle around grouping. It's things like similarity. So if things are designed in a similar way, then we can infer that they will work in a similar way. If they are closer together, then we can infer that they have a similar meaning or a similar type of understanding. If things move all at the same time, we call that common fate. So if you grab a bunch of things on your desktop and move them, we infer that they're all going to move in the same direction and things like that. So, figure-ground things. We use that a lot with pop-ups, modals, and stuff like that - where parts of the screen are pushed back, and other parts are brighter. That is using the concept of figure-ground. So, there's all these visual principles in this Gestalt family that we can take advantage of when we're designing.
Dan Berlin:Are there ones that you see employed more than others? And that we're better at using in our minds, that we use more often?
Erin Malone:I think similarity is one that either people really get, or they totally don't get. And I mean, designers - not people, not general people. Because I often see novice designers using all different kinds of shapes of buttons, different colors, and placing them in different places. It's like is, "Are these all intended to do the same thing? You click on it and something happens? Well, then they should be designed the same."
Dan Berlin:Yeah.
Erin Malone:I think proximity is probably the most powerful because it supports Fitts Law. We've got things that are closer together that imply groupings. We see that in how toolbars are put together in all kinds of applications. And the things that are grouped together, there's an implicit understanding that they work in a similar way. So, I think that's one that we use all the time. And we don't even think about it. But if we think about what the principle is, and really that along with Fitts's law, then we can be smarter about the nuances of how these things are put together. You know when something isn't right, it stands out like a sore thumb, if it's something that- where it should be in the grouping, and it's off by itself. You're like,"Why is that over there?" Or it does something different, and you're like "What?" It causes a bit of cognitive dissonance.
Dan Berlin:Are there other examples where you've seen newer designers, where there were opportunities to employ the Gestalt Laws? Are there examples that you can convey?
Erin Malone:I think there's one of the principles around symmetry, in order like... We like to organize things, we like the symmetry. That principle coupled with good typography, readability, and legibility can work really well together. I think that's an area where the design and the visual design - that I'm seeing out in the world- is not as strong as it could be. I hate center text. I don't think blocks of type should be centered, because it reduces legibility. It creates awkward and an ugly white spaces. And it just violates that idea of symmetry and order. Why would you purposely design something to make it harder for people to read? It drives me crazy.
Dan Berlin:You and me both.
Erin Malone:That's one of my pet peeves.
Dan Berlin:It's more natural for our eye to go back to the same place, where it was at the beginning of the line. Not having to search for the beginning of the sentence.
Erin Malone:Absolutely. The thing is, people don't read whole words - they scan and they jump, and you need a landing place. If that landing place is continuing to move, it's frustrating and you slow someone down. People don't spend a lot of time on the web and on things anyway. But why would you make it harder? A headline, that's fine to be centered. But a block of text should never be centered, especially if it's in a column that just really pushes out that that dissonance. One of the things that I've been studying... I've been writing a book about women in the field. I came across some work by a woman named Sharon Poggenpohl, who is a longtime educator at Illinois Institute of Technology, and was at the Hong Kong University Interaction Design. She had been working with another designer, educator named Jin Soo Kim - thinking about time in animation within the Gestalt principles, like closeness of time, similarity of motion, and proximity of motion. There's not a lot written about it. But I really think, given how robust our ability to do interactions and animations, is that that's something that should be considered as to be added to the suite of these principles from the early 20th century.
Dan Berlin:That's a great point. Also, when you consider service design, there's a temporal aspect to service design - where you do one thing and there's time passes. You may interact somewhere else that's still Gestalt, there's still a connection there that you want the user to have.
Erin Malone:Absolutely, I hadn't even thought about it for service design. But that is so true, that closeness of time. And that immediacy of "If this happens, you want to follow up with this other thing that's related." So you can use these principles in less physical, less tangible types of experiences.
Dan Berlin:So, we're just about out of time here. Erin, was there anything else that you were hoping to convey here at the podcast?
Erin Malone:I think everyone should double down and learn these principles. I'm a big pattern library person. One of the last principles that is in the suite of principles is this notion of past experience. People come to the thing that you're designed with past experiences, and you want to leverage that. That's what the pattern libraries do, as well as leverage that communal learning across a suite of experiences over time and support that. I think we would do well to have basics of Gestalt to be taught to every single UX designer out there.
Dan Berlin:Agreed 100%. It helps us set those expectations, which is the whole point of UX.
Erin Malone:And I think our visual design would get better along the way, too.
Dan Berlin:Great. Well, Erin. Thank you so much for joining me here today. It's been it's been great chatting with you.
Erin Malone:Oh, thank you. It's been great to be able to talk about some of these ideas and concepts.
Dan Berlin:My guest today has been Erin Malone, who wrote the chapter "Follow These Principles of Gestalt for Better UX". Thanks for listening, everyone. You've been listening to the 97 UX Things podcast, a companion to the book 97 Things Every UX Practitioner Should Know - published by O'Reilly and available at your local bookshop. All book royalties go to UX nonprofits, as well any funds raised by this podcast. The theme music is "Moisturize the Situation" by Consider the Source. I'm your host and book editor, Dan Berlin. Please remember to find the needs in your community and fill them with your best work. Thanks for listening
