UX: The One-Stop Guidance Principle
Previously I shared a story about a certain office space which had the round walls. In fact, this tower-shaped office turned out to be a source of inspiration for quite a few stories, and here’s another one. Today I’ll explain a basic UX design principle, relevant both for the navigation in user interfaces, and for the real world.
The office (the one with the circular walls of which I wrote here) occupied the entire level in a 3-tower office building, and here’s how it looked on a schematic plan:
The three towers were named by the colors: Orange, Blue, and Green (and if you’re open to ideas for designing creative office spaces, check the colored plans for each of the towers here).
Now, imagine how we felt as we just moved in. A huge office space of ~10,800 sq ft, the Orange, the Green and the Blue towers, not yet painted back then… and the entryways that went into some unknown directions, because no one was exactly sure which tower was where. We were lost at first, and the quick-fix solution for a faster navigation was this:
Stickers posted on the doors of the elevator hall. It’s simple. When you’re exiting one of the towers, you face these doors, and you can’t see the walls of the other towers. You are supposed to figure out that if the blue-colored sticker is on the left, you’ll want to take the entryway on the left. The green-colored sticker is on the right, so head to the entryway on the right if you want to get to the Green tower (that was a very popular route by the way, because the sports room and the kitchen/dining space were located in the Green tower).
Then, all settled in after the move, we implemented a one-spot guidance framework to get to any tower: a certain pattern for painting the walls. Wherever someone exits one of the towers, if they are visitors, or some new people, they have these two questions on their minds:
- Where I am? In which tower?
- How do I get to where I need to? To my destination tower?
All right, what happens if you want to go from the Orange tower to the Green tower now? Take a look:
Remember, you can’t see this entryway when you’re just about to exit any of the towers. The semiotics is simple: the orange on the right means that you’re now in the Orange tower. The green stripe next to this piece of orange means that this route will take you to the Green tower, and you do see this green stripe with your peripheral vision as you’re facing the elevator doors when exiting the Orange tower. Then, once you make a couple steps to the right, you can see the green wall ahead of you, and that’s where you are certain that now you’re on your way from the Orange tower to the Green tower.
The other routes are marked in the same fashion. If you refer to the image at the top, you’ll see that the entryways between the towers form a triangle, the sequential counter-clockwise walkway. The Orange-Green route makes the first side of this triangle.
Keep in mind that the Orange-Green route and the other two images do not include the elevator doors, only the pieces of the “departure” tower and the “destination” tower:
.. and the Blue-Orange route completes the counter-clockwise motion along the entryway triangle:
You get the idea now. If we go clockwise, the sequence will be Orange-Blue, Blue-Green and Green-Orange, with the same painting patterns on the walls used.
I can easily draw an analogy between this simple GPS semiotics at the office space and navigation in user interfaces. Users feel comfortable and in the flow if they can answer the following 2 questions:
- Where I am now?
- How do I get to where I want to get?
Once your software app helps users feel confident about the answers, your job as a UI/UX designer is ~90% done.
Related:
This story is based on an earlier article.
