Dennis Kardys is Design Director at WSOL. He is interested in design, telecasters, robotics and monster movies. Dennis is also the author of Mobile Web Triage.
IA Summit 2015
Topic(s): mobile, responsive design, and wayfinding
As we attempt to map larger, more complex systems to smaller screens, it becomes more and more challenging to help people find what they’re looking for. Learn how lessons from architectural wayfinding can guide how you structure your navigation and improve the ease with which your users can explore your site—regardless of what device they’re on.
We’ll dissect a number of mobile and responsive UI patterns, covering concepts like circulation systems, spatial cues and route visibility. By better understanding the cognitive and perceptual decision making processes that determine how people navigate their environments, you’ll be better equipped to build seamless experiences across a multitude of screens and devices.
- the pros and cons of different mobile and responsive navigation patterns (there are lots of conventions, so I’ll cover considerations for determining which ones make sense under which circumstance)
- the cognitive and perceptual decision making processes that determine where people decide to go
- how architectural wayfinding concepts like paths, landmarks and signage can help you make your site easier to navigate (looking at things like: visible vs. hidden nav, text vs. iconography, grids vs. lists, consistent and identifiable zones)
Dennis Kardys: …trace my steps that I had entered, which was going down the grandiose staircase, facing a small audience of people all looking at me, some of which, I’m sure, were aware of what had happened. I shamefully took my seat and enjoyed the rest of their performance.
That’s my story about a problem in wayfinding. I tell the story for a couple reasons. One is there are some wayfinding elements to it. Also, this is the real world situations we design for, even if we’re doing stuff in the digital space.
Because we’re designing for people like myself who are extremely fallible. It’s very common for us to design…in the real world, people are not necessarily attentive to all of the information that’s around them. It’s very obvious to overlook even the most blatant signs that might be in front of them.
It’s very common for people to mistake what icons represent or be forgetful of things. All in all, people are pretty fallible. That’s the stuff that we design for.
It’s interesting because, when we find ourselves in a wayfinding predicament, so you end up in the wrong spot or you’re looking for information that you can’t find, there’s a fairly predictable sequence of events that your mind goes through. The first is to blame yourself. I’m so dumb, why did I do this.
Then after that, you may react emotionally. You may be getting anxious or stressed out, a little bit frustrated, possibly humiliated. Then, you may also turn that at some point and start to resent the system. Instead of feeling bad about yourself, you start to blame whoever created that space.
Who’d design a bathroom with only one exit in it? Who would design a search that doesn’t work this way? You blame the system. I hate this website. The search sucks on it.
As humans, we try to avoid scenarios in which were lost. If anyone’s ever been lost, which hopefully not, it could be utterly terrifying. I’m pretty sure that in the type of work you do, no one’s ever embarked on a journey down the information highway and never returned.
At the same time, the way our minds are wired, even the prospect of being lost is enough to induce anxiety and stress into people. We try and find mechanisms of ways to not put ourselves in situations, both intentionally and subconsciously.
To avoid situations where we’re going to be lost and have trouble finding information. It’s no wonder that the bounce rates are so high when people come to mobile sites and aren’t able to find what they’re looking for.
It would be very difficult with a small screen to navigate around, but what I want to talk about is why is that so difficult, why is it exasperated on mobile compared to wider screen experiences.
What it boils down to is that is we’ve been developing websites and over years as really thought of as a baseline size where screens started to increase. The websites that we were building also began to become more complex.
So we started introducing more information, more interaction, and essentially the wider our screens got, the more content needs of the companies we’re working for had, so the site necessarily more complex.
It introduces this conundrum, which is that when we think about the mobile experiences that resonate best with us, they’re usually very simple interactions. They’re very paired down. We really crave these simple mobile interfaces.
But at the same time, the sites and the projects that we work on are usually incredibly complex. I’m going to show this example not as, like the most complex site ever. It’s one that is fairly straightforward in terms of the types of sites that we’re often dealing with.
Sites that have deep hierarchies of information organized on the site. Sites where on the home page you have a lot of different things that you’re trying to accomplish. You have a lot of links. A lot of interactive needs.
Multiple menu systems, which is very important, because through the main categories you can access sub-navigations, that you can see different places that you can go. Or more importantly, so you can open up other panels of links and reveal even more options for where people can choose to go.
So we look at this and how cumbersome some of our interfaces have become on wide screen experiences. Then the natural thing that happens is at some point, someone says, “Hey, can we make this all responsive?”
Then you say, “Yeah, yeah. You could make anything responsive, I guess. Let’s put it all in there.” Yeah. The truth is you could do it. You could fit anything. You could make anything responsive.
There are enough mobile interface and responsive patterns, ways of hiding and revealing information. There’s all different types of things that you can do to make everything fit in a small screen.
The question is, is fitting all that stuff in these places is the right way to approach it? Are there other things that we can be doing when we have these complex information rich sites to make everything easier to navigate.
Wood Morrison is an environmental designer. His code’s from 20 or 30 years ago. He’s approaching this from a little bit of a different perspective how we would see this, but when I read this quote, it really resonated with me.
Because this is what I was perceiving and seeing as a difficulty with how we approach mobile interface design currently.
In his perspective, where he’s coming from is seeing a bunch of people move from graphic and print design into environmental design, where they’re now designing signage for hospitals and outside environments and wayfinding.
What he says is that what he sees is that these designers and this is a criticism of them, are approaching these challenges that are about absorbing information solely through the lens of visual composition.
That’s what I see, too, when we start adopting all these patterns to stuff content and links onto a page. What I want to talk about today is a little bit about the different cognitive and perceptual tools that we use as humans to orient ourselves and find our way around.
And how we can take lessons from how other people in industries such as urban planning, architecture and environmental design solve similar challenges.
I’ll go over a couple things. First, we’ll go through some very simple wayfinding basics, so the shared language of how some of this stuff works and what’s going on in your head. Then some concepts and action where I’ll dig into a few specific elements of wayfinding.
Then I’ll in a third part try and cram in as much as I can about different mobile interaction patterns. Where I see the strengths and weaknesses of those. And how they might apply to projects that you’re working on.
Start by basics. What is wayfinding? It is essentially for a human or animal or anything that needs to move around and survive, it’s the way that you orient yourself in your environment. And it’s the way that you get from a location to a destination.
Thinking about somebody coming to a website, for example, they have some intention. They could be there to waste some time. Spend some time. They might be there to look up some information or to accomplish a specific task.
But as they enter that site, which could be on the Web, they could be entering on the home page or somewhere deeper into the site. The first question is trying to figure out, “OK. Where am I within the context of this site? And then how do I get there?”
Because if this is not where I should be, if I make that decision right away that this site doesn’t hold the information I’m looking for, am I going to be able to retrace my steps and get out of there?
Then is my destination nearby? Like when you walk in a new place, and you’re saying, “OK. Well, this is the way I thought I should go. Is where I’m trying to get to nearby? If so or even if not, what’s my next move going to be? How do I get out of there?”
What happens in our mind as this is all going on? The first thing is information processing, which is observing our environment and looking for different cues that give us signals of what’s going on.
When I was trapped in the bathroom, my environmental cues were the magazines and the lack of urinals and stuff. In websites, we have different things that we latch onto to help orient ourselves within the section of the site that we’re in.
And then decision making. Looking at those cues and trying to come up with some plan. Unlike scenarios where you might think you’d survey all of the options and then choose the best one.
It’s more of a method of “satisficing,” where the first thing that attracts your attention is being a possible candidate for where you should go is usually where people will go when they’re making their decision planning.
And the execution, which is more or less taking that intention and turning it into an actionable behavior.
The interesting thing is as we go through websites or again, equally through physical spaces, we don’t see the whole system of what’s going on. We only have these small glimpses, each one from a new vantage point.
So if you think about how that translates to somebody experiencing your application or your website, they may be coming from different devices, and each time only see a sequence of pages or parts of the flow.
What happens is they begin to make it this idea of how everything is structured and how stuff comes together. The parts they don’t see are conjured up based on their memories of viewing the site in the past. Some of them maybe from past experiences on similar sites.
But ultimately what’s happening is you’re creating a cognitive map. This cognitive map, essentially like a mental model of the site, but it’s what reflects our understanding of the parameters of what’s the system or the space that we’re in. Where we can go and how everything is set up.
Some concepts and actions that I want to talk about. First is circulation systems. Then we’ll talk about landmarks, edges and signs. There’s a lot more to wayfinding than these, but these ones, are very relevant and directly correlate to the type of stuff that we work on.
Circulation systems. When an urban planner is planning a city, they’re trying to figure out what are the most efficient ways to get people around in the city. Sometimes they have the leeway to set things up however they want.
Other times, they’re working around elements of the natural environment, so designing a city around a river or around mountains. Parts of the environment. What’s interesting is that as a designer or as an information architect, urban planner.
We have the privilege of this bird’s eye view where we see the master plan of how this all comes together. But for the people who use these systems, again, they’re only seeing the individual cues that they pick up on, so whatever paths they can see are what they interact with.
So it’s very important to make sure that when we are creating paths that they’re easy to find, identifiable and discoverable. We have to make sure that, especially when we’re going to small screens, that we have these paths.
If you’re looking at the example before where there’s 190 odd clickable areas that will take you to other places, those are all paths on the site. When you have a small screen, when you start tucking those things away and hiding them.
They’re no longer visible, so it’s going to make it very difficult for people to plan their routes. If it’s done well by the way you expose your paths and the routes that people take, they can start to get a more cohesive idea of what the rest of the system is like.
A perfect example is if you go to Chicago. Chicago’s very much built on a grid structure, where things run north and south and east and west, so you can become familiar with one section of the city, and it’s not a huge cognitive leap to visit another section of the city, even if you’ve never been there before.
And be able to know which way is which and where to go from there. We can do the same thing with our information architecture. Most typical circulation system or information architecture types that we see a lot for organizing site maps is this hierarchical structure, which is the common tree structure.
Most information dense sites are organized this way where you have parent sections that have children sections within it. They do allow you to dive down and go deep into sections, but they also afford the ability to make lateral movements across.
Part of what makes the lateral movement possible is the fact that you’re dealing with larger screen sizes, so you have more space to have a section navigation and then an associative contextual navigation area. So you have the space to have these multiple menu systems all going on.
You can spread them out in a way that makes sense to people. This is great on a big screen, but it can be a bit cumbersome to figure out how to deal with all those menu systems when you’re looking at mobile experiences. So what we see becoming optimal for mobile…and again.
This is something that maybe is a little bit more familiar in mobile applications, where you’re not dealing with a whole website. Or if you see people do a separate mobile site, where they’re not bound by the constructs they already have in place for the main site.
One of the patterns is the nested doll pattern, which essentially you can see on mail apps and other things, but you dive into a section. It’s a very directional path going down and up. But you funnel the user towards information. They traverse their steps backwards to get back up to the main screen.
Another one is the hub and spoke pattern. This hub and spoke pattern is really dealing with a central [inaudible 0:11:38] screen from which you would hop out to other independent sections of the site.
It’s almost like a portal where these sections that represent the spokes may be totally different experiences with totally different templates and layouts. You don’t necessarily move from one end of the spoke to the other.
To go across the system, you go back to that hub page, where everything is in the middle. Then jump out again, launch out to another section. There was a previous version of a LinkedIn app that did something similar to this. Bento box is another conventional mobile pattern.
This is more of a dashboard style view of information, where you’re dealing with lots of different information that you’re aggregating onto a page. In this case, you’re going to do most of your interactions on this single screen or on different view states for that screen.
So you might see overlays and you’ll interact with some data, and then that screen will close. But you never really lose the sight of being in that one spot of the dashboard. And then a final one is the filtered view.
This is common when you’re dealing with music apps or apps where you have a single data set that you want to explore from multiple perspectives. A good example of this one, too, could be like photo libraries and music and so on.
Now a lot of these things, they work really well for mobile, because they’re focused and because they afford…talking about focus of interaction there, but they’re not going to be ideal when we’re dealing with these information rich sites.
But one thing that we can do is combine them. So instead of having your whole site set up in this hierarchical tree structure, you can put things together and have different sections use different models.
The only key here is that as you do that, you make it very clear when a user is moving from one section into another section, where the whole structure is going to be different. We see this in the real world in a city.
For example, in New York, New York has sections of the city that are extremely grid based in terms of how the streets are laid out. But then you move to another borough. Maybe it’s more historic and it’s based around something in the environment. It’s a totally different thing.
People still find their way around in New York. It’s making sure those transitions are clear to people. One of the other concepts I want to talk about from wayfinding is landmarks and this idea of having some strong memorable visual cue that acts as a frame of reference.
Again, to talk about Chicago, in Chicago you can come out of a subway or off the L, and if you’re not sure which direction you’re facing, you can determine your relative position by seeing where the Sears Tower is or Willis Tower or soon to be renamed tower.
But it’s this thing that from anywhere in the city almost, it’s a recognizable cue that you can figure out your position and orient yourself. Another thing that landmarks do can be to give your space an identity. When you have space and you give it identity, it becomes a place.
And place is the type of thing that we retain in our minds as we’re creating those mental models. It can be very useful for finding your way around, for navigating, for describing your environment to have this sense of space. I mentioned the global landmarks. We also have local landmarks.
If you’re on the East Coast, maybe you’ve been to a Wawa before, but this is the thing when you’re doing your day to day activities. You’re not going to see the Wawa from any point of the city, but as you’re going down a path and going to do something.
The way you might give directions to somebody would say, “Oh, just go down the street until you hit the Wawa, and then make a left.” So you’re using these different cues. We would do the same thing in our websites, when we look at what our local landmarks and what are global landmarks.
To take a website, a global landmark is something that would be accessible from anywhere in the site to help give you a sense of reference. That could be the logo, especially if the logo clicks back to the home page.
It’s something familiar to people and they know that at any point if they’re not sure where they are, that can transport them back to somewhere where they do know where they are.
A menu icon. Again, consistently placed breadcrumbs, footer links. All of these things are tools that they’ll use to get around. If they’re positioned in a familiar way can be very helpful to understand the system.
The local stuff, on the other hand, these are elements of the site that if they’re going through a specific flow or seeing lots of pages, they may come across certain things. A section banner will reinforce where they are.
Maybe when they visited the site before, they remember that they were on some slide show gallery image thing. Then from there they found the content they wanted. So the next time they visit the site, they may not use the other navigational tools to get there.
They may remember that the last time, here’s how they found it. And trying to duplicate that by retracing the steps again. The other examples of things that could be local landmarks are there, too. It could be anything. These are some samples of what they are.
The most important thing, when dealing with responsive sites or even if you have a separate mobile experience, is understanding the pattern of how people don’t necessarily sit down and do the entire interaction in that one sitting.
It’s more common for people to weave in and out of different devices over time as they’re trying to complete the broader task. So somebody, they begin their search on a mobile phone, and then pick up a tablet later to continue that search. They’re researching about a product.
Maybe later at a laptop or desktop they’re continuing that. So by nature the whole premise of how responsive design works is that you hit these breakpoints and things change, things adapt.
Part of my argument is that the best thing that we can do in scenarios like this is understand that people are coming from these different devices and build in a sense of continuity between these.
I love this example from United Pixel Workers, where you can see, regardless of what size the screen is, the logo is always in the top left and it’s red. You have color cues. The shopping cart is always blue and in the top right.
The navigation changes from showing you all of the links to condensing down to an icon that says “navigation” next to it. But it’s always based on black. It’s always in the same position on the page.
A lot of the mobile and responsive patterns that we see are based on this concept of AppendAround, saying when you get to a certain screen size, take this out and then stuff it at the bottom or move things around. That’s something to be considerate of as you’re designing stuff.
How much adaptation are you making? Because when you adapt things differently, you’re asking that user, who’s been forming a cognitive map to modify or rewrite it, or potentially, if it’s a drastically different experience, to abandon the old one altogether.
Which is going to create a very disjointed and not a seamless experience across devices. A quick story where we had a situation like this. We were redesigning an intranet for a hospital. We were told we can do anything we want with the layout. Everything’s fine. Don’t touch the quick links.
The quick links is a 36 item long list in the left rail of every page in the site that has the most common pages that some of the people with a little more clout or department heads were trying to get to all of the time.
They would, as an experiment, take one link out and it would be like 30 seconds and the phone would ring. Someone’s like, “I can’t find the page that I’m looking for.”
It was this taboo thing that you couldn’t touch it, because people were very familiar with not only the fact that their item existed in the quick links, but the position of where it was on the screen as well.
It wasn’t only that. It was that when we did some usability testing and watched people, they would go down eight, nine clicks deep into the page, but they would be like, “Click, click, click, click…”
And for them, this was easy. This was easier than using the search, which never works. And the navigation, which you can’t find anything. So you had memorize these patterns. These patterns became landmarks, because they knew where to click.
If you move the position of that, they’d be screwed. They wouldn’t know what to do. That’s where you’d get upset users of the system. Another concept to talk about is edges and regions. This is the idea that edges are the things that exist in our natural environment to divide spaces.
Sometimes they’re shorelines. It could be mountains. They could be something constructed, like a fence. They create boundaries around a space to let you know what the parameters are.
When we look at widescreen design, we have the advantage of using white space to create columns into separate content from each other. We could put stuff in a left rail or a light rail. We have a lot of ways to organize information that creates those boundaries.
When we start translating that to what happens in a smaller screen, we have to be more explicit with where those boundaries are. As you could see on the example on the left over here, on that one, looking down.
There’s no clear delineation between what would otherwise be a main content and a related content so then people would assume that the stuff at the bottom is related directly to what’s happening above and not understand that it’s something contextual or something separate.
In the example on the right, you see by using a shade of background color, you create a visual separation that creates that edge and that sets the expectation for the user that they’re looking at a different section of content.
Similarly, to deal with our edges of buttons with flat design, we see a lot of minimal UI where people get rid of, sometimes, the outline. We have gills buttons where it’s, the outline with no fill. There’s a lot of things that people do where you have buttons in close proximity that’s the icon.
It’s super important on small screens to make sure that the edges or your buttons in actual areas are clearly defined. On the example on the right, you see the header’s separated from the content very clearly. You have these other photos that create visual separation in edges between them, labels and stuff.
Again, this idea of making sure that your visual separation is clear on small screens. With an example of links, is this identifiable as a link? This would apply to any type of website but especially on mobile, you want to make sure that people know that this is actionable.
That’s not going to be confused with this red underlined text to be linked, the underline is often used to represent that it’s a hyperlink. I also see a lot of content authors who want to underline text in red, so you have to be careful about making sure the appropriate cues are there.
The other thing is to be thinking about size. Tap targets and finger size to make sure that when people are trying to interact, that what’s helping to navigate is that it makes sense for their hands to use.
There’s a lot of different research that will say the exact best size to make as a minimum size for buttons and stuff. It usually is around eight or nine millimeters square for an icon if you want it to be actionable, then as wide as the content is, in the case of buttons.
Equally important to making sure that the button is easy to tap and the right size, making sure that there is a buffer of inactive space that separates your actionable area from another actionable are to avoid mistaps and things that might inadvertently bring people down the wrong path.
Finally, I want to talk about signs, in a way, finding. In the background where you can see this airport dream experience where you come out of the gate and there’s nothing else around to distract you to assign the points to, which way to go over baggage claim and other stuff.
That’s nice. It’s very cleanly-designed. There’s not a lot of things interfering with your focus and understanding where to go.
Next, we have this crazy intersection, so maybe we got a little bit overboard with signs. This is something that is funny to see in the context of a picture like this, because everyone would say how ridiculous this is. What happens is, signs are the easiest and often this lazy thing that we do.
If somebody complains that they can’t find their way around the side, our manager, whoever is making decisions around it, especially if it’s not a UX designer interactions, they’d be like, “Just put a button up there.” This intersection reminds me of almost every university site that I’ve ever designed.
They have all the stuff cluttered out a page, and then the alumni say, “Nobody is donating, so we need to put a button right at the top that says, “Donate.” Then admissions is like, “What about ‘Apply Now.’? We need that up top, too.”
You’re stuffing all these buttons and all these links to this page with no real understanding of how people re processing information. It comes down to this idea that information at the wrong place is as good as no information at all.
The way that we perceive environment is really this shift in between scanning and glancing. If there’s a lot of information on the page, you’re not going to look at all of it. You’re going to glance. Each glace, you might process something for less than a 10th of a second.
In that time, you’re going to quickly make a snap decision about whether or not it’s relevant and specific to what you have in your mind at the time. If it’s not, you’re not going to save it for later to remember. It’s not even in your vision. You don’t notice it at all.
You totally disregard it if it doesn’t make any relevance to it. Thinking about how people are scanning and glancing interfaces and making sure that things have the appropriate visual cues, especially when we’re dealing with mobile phones.
Where there’s a wider variety of environmental we’ll be using them in. Knowing that people use mobile devices outside is more susceptible to glare, or the fact that instead of having a screen that you’re going to be staring and looking at straight on, you’re looking at it an angle, too.
So you have some reflection and other things going on. Everyone knows the different accessibility requirement, section 508 and so on. The accessibility requirements for mobile are more strict than they are in desktop in terms of recommendation.
Give your minimum recommended contrast level of colors on a desktop, you’d want to make sure that’s even more so on small screen devices to accommodate the fact that they’re in these outside environments.
Things should be a little bit large and then maybe your minimum size text in the desktop screen, too. All of this makes sure that the system is legible. That thing that’s very critical to understanding and navigating any space.
Icons versus text. icons and text are both big parts of creating signage, so I want to talk about that really quickly. The question is, a lot of times, people are like, “Should we use an icon for this? Would an icon be better?
An icon is very tempting to use for mobile design because of the fact that it’s very concise, it’s small, it can fit under a screen really easily. As I eluded to at the beginning of this presentation, the ongoing problem with icons is that they’re not always as straightforward as we think they are.
So even simple icons like this…The pencil obviously means to edit. It also means to write, or the plus could mean to add an item or it can mean to expand. Is minus going to remove something from your interface or collapse something?
All of these things may have dual meanings. Even if you’re consistent about how you use it, there’s nothing to say that another designer somewhere else or a different platform, we use a similar icon to mean a different thing.
These things that are straightforward as design team may not be straightforward to users at all. An old article from the IUE site, Jared Spool has this quote, but it…Really, I love this.
He’s saying that the speed at which the average user can deduce the icon’s function is directly proportional to the speed at which the design team can agree in what the ideal image should be.
Dennis: Here’s that good example I want to show. In both these cases in the left and right on a mobile screen, you’re essentially doing the same thing, you’re pointing people to these different paths and using a combination of image and text for it.
On the one on the left, the images take the more prominence than the text does. The prominence of the images require more cognitive effort to decipher. They’re not straightforward. You don’t know what they mean. The text is smaller. Because the text is positioned in a grid, it’s harder to scan.
With the example on the right, everything is in the vertical list, and it’s aligned. You can scan the text easy with almost no cognitive effort, assuming that you have the ability to read, which in some case, some people might not.
The icons exist as a supplementary queue to that, maybe making return visits a little bit faster to do that. In this case, it would seem like the example on the right would be more ideal than the example on the left.
As a little twist, one thing to consider as well is that the one on the left could be good if this is an application that’s used people on a repeat basis. Instead of having to decipher what each of these symbols means each time, instead they recognize the position in the space.
For repeat uses, the one on the left may be really easy, because you have a lot of options to squeeze into that space and so people can remember it.
I forgot who had mentioned this, but as an example that exemplifies this point, if you were to take your smartphone and look at all the apps on it, when the app icons are updated, you’re not confused, you still use them fine. That’s not a problem.
If you lend your smartphone to your friend and the rearrange the position of all the buttons on it and give it back to you, all the app icons will drive you crazy, trying to refine those same things. Even if the icons are the same, it would be totally different if they’re in different positions.
Texture image. It can go either way, but in most cases, it’s a safe bet to say that a combination of text and image will work best, followed by text only.
Assuming that you’re usually in good labeling, that should be straightforward and not ambiguous, and then images, by themselves lastly, since there’s a little bit more ambiguity there. A couple of examples that I want to look at too are in laying out content for mobile screens. What’s better?
To put things in a grid or to put things in a list? In this case, if you’re at the top level of a system, with the example on the right, you see more options at once. On the example on the left, you see fewer options.
If what you’re trying to do is decide between top level categories, assuming that those categories are someone exclusive, then the version on the right succeeds better, because in one glance, you see more of the options where on the left, you only see, there’s a little line between.
You might only see four at a time. Then each time you swipe up, you’re tasting your memory to hold onto what you had seen and compare it against what you’re seeing now to get a sense of what all the options are.
Another example here, on the left, you’re looking at something that’s identifying categories. You see suits and then you see shirts. You’re in this visual format where you could see what it is, but you don’t need to see the photo to tell what’s the difference between suits and shirts. It’s very clear.
When you see the navigation expanded menu in the middle one, that’s a more ideal way to survey what your options are and what choices you have. Now, with the example on the right, you see the suit in detail. What happens, as you get to a more granular level.
What becomes more important is not surveying your options but seeing what differentiates your options. In those cases, if you’re trying to decide between details or the visual differences, what’s going to distinguish your preference for one item to another.
Then in those cases, you do want to use those images because it provides very important cues. Who likes hamburgers? Anybody had opinions on this? I love talking about hamburger menus, because it creates lots of drama.
More than drama and more drama is double hamburger, what you see up here, that’s pretty awesome. I like the arguments that happened with hamburger buttons, hamburger menus or trigrams they’re sometimes called, because everyone says.
“Do people really even know that it’s a button that represents that there’s a menu?” You know what, as we were looking in with other icons, people don’t know what icons mean, people don’t know what the hamburger menu means, but they learn it. They will remember what it is.
To me, yes, you will face issues if you have something that is a symbol, with some people being able to understand it, but the same as you with using any icon anywhere in your interface.
I like this example from the MBC nightly news. They redesigned right after I had grabbed the slide. You can see at the top left the hamburger button. I would love to be in the design meeting, where at some point, someone was like, “We don’t think people understand the hamburger meeting.”
“What are we going to do?” “Let’s put a tiny text that say menu below it.”
Dennis: It’s like, at some point, somebody is saying, “People aren’t finding this menu or they don’t now it’s the menu, so let’s add the text to it.” Maybe that’s why people aren’t using the menu. Maybe it’s because there’s 146 other clickable things in the page. I don’t know.
It could be because the page is filled with faces, which is attracting your attention. It could be because of the fact that with 116 requests and almost a megabyte and a half of download time, if somebody has a slow connection, this is the tablet size that we’re looking at here.
If someone’s on a slow connection, it might take 29 to 30 seconds to load this page, which could be a very good reason why nobody is using the menu.
The point is, there’s a lot of things that you need to think about when what’s making your mobile experiences easy to navigate. Everything that we’re doing in all of these cases, we’re trying to plan things in the system that make it easier for people to find their way around.
The reason why, as I mentioned, icons and the different patterns are so alluring is because is allow us to simplify and give us illusion there’s less things to deal with. That’s good, because processing less is easier than processing all of that stuff at once.
I’m borrowing from John Maeda’s “Laws of Simplicity.” He has a recipe for creating simplicity, which is essentially to organize, reduce, and optimize. Organize is simple. He has got this acronym for it, SLIP, sort, label, integrate, prioritize. There’s a very basic example of this at work. You have a list of 11 things.
A list of 11 things you, you will take one glance out, because it’s one object. In that one glance, you’ll only be able to parse a few of those items within it, so the chances are that you’ll miss the majority of items within that list on your first glace as you’re serving things on the page.
To sort that, you break into groups of three or four. By breaking into groups three or four, you’re now going to take three glances at it. In each glance, you’ll probably digest the full amount of information in there. You’ll be much better to understand what your options are when you sorted it.
Labeling it is helpful, too, because if you talked about how the brain will glance at things and then immediately decide it’s relevant, you may find that out of those 11 items, now sorted into three groups, that two of those groups are immediately recognized as being totally relevant at all.
And ignore, you’re not just looking at one group. Again, that can help with pairing down what would be a list of many things into least of a few, at least in terms of how your mind perceives it.
Then to integrate, by adding a little bit additional juicy-ness to what those titles are, this is something that would seem extremely redundant on a wide screen to be using that label over and over again to say campuses.
But if think about how much is visible on a view port at a single time, there are cases where you want to have more descriptive labels like that so that when people see that one snippet of information at one time, they’re able to get a better sense of what it is.
Then finally, prioritizing. If you know that 80 percent of your users are coming for these five links, but you need to show all 11 links. Visually prioritizing in the interface is another way to help people find that information more quickly and go down those paths.
Reduce is another way to create simplicity. Here’s where we’ll talk about navigation a little more specifically. It says there’s three ways to simplify something. To shrink it. You can hide it or you can embody it.
So shrink. Let’s say we have a related list of links on a page that you need to deal with. Maybe you’re in a situation where you’re going from responsive design and it got a little bit smaller.
In this case, on the example on the left, you’re carrying over some of these same design elements that you had in the big screen. So you can see there’s multiple shades of blue happening there. A box inside of a box.
Text in there. It’s hard to see on the screen, but there’s little arrow icons beside each one. A lot of that stuff is visual noise that is being processed that you don’t need it to. So when you think about that this block doesn’t need to stand out.
Maybe in the wider screen, it’s all colored and decorated, because you want to draw attention to that part of the page. In a single stacked column, your focus is already there, so as long as you indicate that this section is related or not related to the things before, you can drop a lot of those cues.
Again, you would still want to keep continuity in mind, but see, in the second example, you drop some cues. The list becomes easier to parse. In the final one, I’m not saying to go this minimal, but for sake of example, when you strip away all of that stuff, the list becomes very easy to scan.
There’s a few different menu patterns that I’ll go through quickly. First there’s some of the hidden patterns. An example of this is this tap to reveal. So it could be any combination of menu icon or hamburger icon or a button that says “navigate” or a button that says “menu.”
As you tap that, your options appear on screen, which is great, again, for spatial conservation. Fitting things onto a page, but a good chance that it contains trigger words that are being hidden.
The off canvas or push navigation does something similar, where you have an easy to access button that will then reveal information usually sliding in from the side.,
Same issue here. If what’s sliding in from the side are these major categories and pathways that you want to expose to be visible to your users, then hiding them may not be the best idea. It’s the idea of out of sight, out of mind.
Now with that said, it’s not to say that these patterns don’t work. It becomes riskier when they are the primary or only means of exploring different categories and different content on your site.
It’s the way your pages and templates are set up within the content or different areas of the page if you have those routes available and exposed in other ways, then you can become less reliant on making sure that those main navigations are always visible.
Some of the ones that stay visible are like a multi-toggle menu, where you have essentially like an accordion expandable panel style list of links. So in this case, it would always be visible, but you can tap it to reveal more information below.
We’ve done a lot of these, but one of the things that you have to be very careful about. If you have something that’s a button and a link that goes to a page, but you also have it paired with something is meant to expand the panel below to show more links.
You have to be very clear of making sure the delineation between the trigger to expand and the active link that’s a hyperlink is very clearly shown.
Even if you make it clear, that’s not to guarantee that somebody’s going to pick up on those cues. They may see it and press it, and be surprised with whichever behavior happens. So it’s something to consider if you’re using toggle menus.
There’s also skip to the bottom, which is what I’m personally fond of, because of the fact that it’s always visible. You still have that button for easy access up at the top of your screen that will slide you down to the bottom where your other options are.
This one is nice, too, because if you think about the gesture of swiping through a page and digesting information, when you get to the end of it, you’re not at a dead end, because now you have your major categories.
So that they can go and explore other sections of the site. This is one that can work really well. Another thing that we see, and this is carried over a lot as a convention from both native applications.
And what we see in wider screen design in contemporary stuff is the idea of a fixed header with a sticky nav. The idea of keeping this navigation always front and center, so that people have that reference as a landmark. It’s great. Do that.
A couple of considerations for this, if you’re going to try one of these patterns is that it’s not entirely supported. I mean, they’re pretty well supported now, but depending on how far back you’re going to support it in different browsers.
You have to be a little bit careful, because especially with the bottom area, the sticky footer, that’s a little bit less reliably supported.
The other thing with these, too, is it’s obstructing content, so it’s taking up space. When you have a bigger screen, a tablet or a bigger smart phone, the amount of information that it obstructs is not a big deal, but imagine it’s an older iPhone or something. Or you turn it into landscape orientation.
Maybe the real estate of the space of the screen that it’s blocking and obstructing content, that could be a little bit more detrimental at that point.
Again, with any of these menus, it’s not to say that one is good and one is bad. It’s all things to be considering as you’re exploring and trying out the different patterns for what’s going to work for you.
Embody was the other element of simplicity here. It’s this idea of being able to eliminate pieces of your interface, because instead of a graphical user interface, where you have an indirect way of manipulating the space, you’re interacting with your hands.
You’re touching the content and moving the content, manipulating it directly. That allows you to get rid of a lot of stuff, like the “click here for more” and things where you need to have descriptive text that gives you instruction for how to interact with it.
As we go from graphic user interface into the natural user interface, we have to also be cognizant of the ergonomic factors of it. If you do have a landmark or a trigger button, are you positioning it in a place that’s easily within reach, or is it little bit more of a stretch?
Thinking about those things and thinking about stuff like the proximity of a control and the content that it controls. Are you making sure that those are always close together in your screen?
Optimizing performance. I was joking about it with the NBC site a little bit, but if you have to go five miles and you’re stuck in traffic, it can be painful. It can seem like a terrible journey to take. You’re going to try and avoid doing that.
Similar with on the web is you navigate through places. If you’re optimizing for speed and for performance, the impression is that things will be easier to find. And the slower things go, the impression is that they’re going to be difficult to find.
Even if the site map, information architecture structure was entirely the same, that speed is enough to make people feel like, “Navigating in this site’s terrible. I can’t find anything.”
If I was to leave you with one message to sum up all of this stuff that I tried to cover in this talk would be to remember that people are fallible. Don’t let visual composition trump information. And provide people with clear cues of orientation so they can make sense of the system.
And maybe by progressively revealing navigation and keeping your paths visible, or by creating continuity across screens and devices, and clearly defining screen regions and tap targets. And focusing on legibility and always simplicity if you’re doing so sensibly.
Dennis: I leave you guys with that. Thank you so much for being here today. Hope you enjoyed the topic.