notch-blue

Episode 003: Design Patterns are Your Friends

Hosted by:
With guest: Annette Gustafson
March 10, 2017

Mahtab   Hello and welcome to the third episode of The Crux of It. We are going to be talking about design patterns today. I'm Mahtab Rezai and the Principal and CEO of Crux Collaborative. We're a user experience consulting firm specializing in regulated industries.

Today I'm joined by my co-worker, Annette Gustafson, who is a Senior User Experience Consultant. She is a visual designer extraordinaire. She's a QA savant. She's also a blue ribbon award-winning cookie baker. If you eat one of her ginger snap cookies, which won the blue ribbon at like every fair ever, it will scar you and all ginger….
Annette   You will be ruined for all other cookies.
Mahtab   Yes. All ginger cookies will be crap from now on. So don't do it. Or maybe do it. Depending.

Today we're going to talk not so much about cookies, but about design patterns: what they are, why they matter, and how to use them to your benefit.

If you don't know what a design pattern is, let's define it. Annette, why don't you take a stab?
Annette   Yeah. A design pattern is a general reusable solution to a commonly occurring design problem. Some of the things when thinking of our industry when we're talking about that it’s things like buttons, links, color, typography, navigation, form fields, so…common patterns.
Mahtab   Another thing that when you have design patterns in place that they do is they improve the efficiency of design and development so you're not having it be a Herculean effort to code and to design multiple pages.
Annette   Coming from UX in the 90's, I have coding experience, so I'm a little out of date with the whole responsive shift and whatnot. I still know enough to be a pain in the ass, but I still know enough to be a developer's best friend.

I'm very mindful of that when we set up design. I'm very mindful of the fact of setting up the typography, the H1, the H2, how the page is going to layout, color selection. Just so we don't have this monstrous CSS file because I've gone off the rails and created multiple different patterns.
Mahtab   Another thing that design patterns do is they make it easier to maintain systems and software over time. Because we don't often ... In the way that we work, we're project based. We're not retainer based, so we don't often hang around long term. Our clients need to be able to maintain their systems. When they see a page and there's a new thing that emerges, they can first refer to the pattern library and say, "Do we have a pattern for this? Yes, we do." and apply that. That way, they don't always need us. They're really enabled to take it and to own it and to keep growing the systems.

That's, I think, a really key thing from a client perspective.

I also think it's really important, when you're thinking about design patterns, to recognize that there are many well established universal design patterns that are already existing and that you can't just go in there and decide you want to “make your mark” with how some things are presented.
Annette   Yeah. Icons are a big one in that respect. It's kind of funny, you think our generation, we grew up and we had the floppy disks in which we needed to “save” our information to. That's become kind of a universal icon for save, but you think of the younger generation, I mean ... Have your kids ever seen a floppy disk?
Mahtab   No, and in fact, they call it "the square". Push the save square!
Annette   Right, yeah.
Mahtab   They don't know what it is. Yeah, absolutely.
Annette   It's funny how those patterns, they exist and they're known and they're established. It would be foolish to go against those grains because it's the cognitive level of the user. They know those, they recognize those.
Mahtab   Yeah. Another one just like that is the magnifying glass for search.
Annette   Yeah.
Mahtab   When you see that, you know that's a search field.
Annette   Instantly, you know it's search.
Mahtab   Absolutely. So, if it exists, use it. Don't decide you're going to come up with a whole, "No, I'm going to use a compass." You know.
Annette   Yeah, and it's kind of funny, too, because there are new patterns that are beginning to emerge and will become established. The hamburger menu is one of those. It still blows my mind a little bit if I'm being honest of ... not all users understand what the hamburger menu is when it's just the three bars alone, so we have found through usability countless times that just adding something as simplistic as menu to it helps.
Mahtab   Yeah, the word menu. Now they know.
Annette   Yep. But over time, that will become the established pattern, I believe.
Mahtab   Yeah, that's a really good one that's like an emerging one that I think if we were having this conversation in five years would be like, "That's the standard."
Annette   Duh, that's known.
Mahtab   Yeah, absolutely. Absolutely.
Annette   But sometimes they take time to become established.
Mahtab   Yep.

So, if you're beginning a design project, a redesign project, or evaluating a piece of software, and you're thinking, "Do I have design patterns? How am I using them?", we thought we would identify 4 common design patterns for you and talk about how you can begin to consider how you're using them and how you can get consistency and efficiency around them.

The first one is primary and secondary action buttons and links.
Annette   Yeah, what we like to do, and what we really stress, is being wise with your color choices when it comes to that. Picking a color and using that as your “action color”. That way, when a user looks at a page ... well, let's just use blue for example.

When they scan the page, they can easily see where the actionable items are. They can easily detect a link within a body of copy because it's blue. We've seen before, because blue could be the primary brand color, that people are using it as their header color as well and in fact, it's not a link. When you mix those messages, it causes confusion.
Mahtab   I also think differentiating between primary actions and secondary actions is such a key one because sometimes when two things are presented, looking identical, people go based on habit. Depending on what operating system you're used to, your primary action button can be always on the right, or it can be always on the left. Mac users, I think, it's always on the right. PC users, always on the left.

We've all had that experience where we thought we were going to the next step of a form and we accidentally canceled it or errored out. That's because we were just going based on habit.

If we have a clear thing that's the primary, sort of the “next”, the keep moving forward, and it looks different visually from the cancel or go back, that's another way that helps those of us who are moving quickly through systems and through data entry make sure that we don't make unnecessary errors or lose our work.
Annette   Yes, absolutely, and often times, you need a primary and a secondary button because you don't want those two placed right next to each other. You may want the cancel to be a button, but the submits also to be a button. Just doing a color shift helps that or maybe even a cancel should be a link at that point versus a button because it's that visual cue.
Mahtab   Another design pattern you can take a look at is help text and additional information. Things like a definition of a term, an explanation, a link to a glossary or an FAQ, think about how you're using it.

For the things where someone needs an answer to what something means, and they just need to see it, right there on the page – in context, do you have some sort of common way that you're telling them, "Hey, there's more information here"? And is that different from the way that you are getting them to go to maybe a reference library or something that defines a whole set of terms or has explanatory video or something around it that's going to actually take them away from the page if they need more information before they can move forward?

Thinking about the patterns that you're using there is really important.
Annette   Yeah, especially given the industry that we specialize in: healthcare and financial. Especially healthcare. There's a lot of terms out there that users just don't know and don't understand. In that moment, when they're reading, it's nice to have that help text in line, at that moment.
Mahtab   Absolutely.
Annette   What we often do is use a visual cue of something of like a dotted underline on that particular word. Upon hover, a tool tip comes up that just, right there, in line, gives a definition as to what that is. That particular term.
Mahtab   Yep.
Annette   Another common pattern that we tend to use is the question mark icon. If you need a little bit more information, or just indicate "what is this?", that's a really quick and easy cue to say, "We're here to help you. Here's a little bit more information." And then, having that information in line.
Mahtab   Yep. We already talked about, I feel like at length, about headers, labels and hierarchy, so we won't go into that too much more, but just be really thoughtful about your typography and the size it is, how you're using it.

I know one of the things that I always laugh about is I start to look at pages, especially in mobile, and I'm always pushing you to reduce the space between things. And you're always pushing back that, "Mahtab, this is the established pattern for this level of text."

I think, even ... It could be really easy to try and decide to break your patterns based on a specific instance, but that's not what designing patterns is for. Designing patterns is sort of for the benefit of the whole.

I think that is an important thing to talk about is sometimes there's one component or piece of content that isn't working as well. In those instances, you have the conversation with the team, with the client, and you decide: are you going to break the pattern or are you just going to suck it up and stick with it?
Annette   Yes.
Mahtab   Then the last thing is confirmation and error messages. One of the things we talk about with our clients is that they can't only rely on color. I think it's a common thing to say, "Oh, red = error. Green = confirmation." It's awesome to have a visual indicator.

Color's a great visual indicator, but not alone. People are color blind. There's other accessibility issues. You also need to accompany them with some other thing. An icon, a treatment or placement of the ... Then also consider where and how they appear.

Particularly with error messages, it's most helpful if they appear next to the spot where the error occurred because they help a user understand how to move forward and what to do.

Also, one of the things that we think about with that is confirmation messages. A lot of times now, we've seen this pattern where they appear as this bar that's like… locks up to the top with the navigation. We've observed that people just don't see them. They don't know that anything is different.
Annette   Yeah. Yeah, because sometimes when it's on the top of the page, too, especially in mobile, where your viewport is much smaller, as soon as you scroll up, you have no context. You know?
Mahtab   Yes.
Annette   So having that right there in line is just ... It's easier for the user to recover from that error. One thing you absolutely don't want to do is, sometimes we've seen with other sites, that a modal will pop up or some sort of pop up will come and say, "Correct the following errors." As soon as you close that modal close out that pop up, all of a sudden, you've lost any context as to, "Uh, what was my error?"
Mahtab   Yeah, or even for confirmations with things that people are nervous about, like their healthcare, like their finances, if you have a confirmation and it closes and they're looking at the screen that they were on before they got the confirmation, even though they just saw the confirmation, we've seen users second guess it and doubt if they're done with the process.

That's a really important thing is modals are not a great implementation for errors and confirmations.

All right. I think that is it for the four things we wanted to talk about. Let us know if you have any questions about what we shared. Other questions or topics you'd like us to answer or discuss on the podcast.

Our contact information is on our website. Thank you for listening.

You can find us on SoundCloud, iTunes, Google Play, Stitcher, etc., etc., and also on our website, cruxcollaborative.com/thecruxofit. Bye!
Annette   Bye!

cir-mahtab-lg

Hosted by: Mahtab Rezai
Principal & CEO

Mahtab has spent nearly two decades as a user experience designer, researcher, strategist, leader, and mentor. She has designed user experiences for companies ranging from startups to the Fortune 50.

 

With guest: Annette Gustafson
Senior Interface Designer

Annette is the lead Senior Interface Designer at Crux Collaborative. Her design aesthetics and attention to detail can be seen through all stages of the collaborative process; from the initial sketches to the final deliverables.
View Annette’s Bio

notch-white

Let us know your name and email address and we’ll send you our newsletter.


First Name

Last Name

Email Address

 

 

Thank you!