Earlier this year I posted a blog about our move to the new office. Then, after a while, I wrote about the unexpected harmony of the circular walls. Our new office never stops to inspire me. Today I'll explain one basic UX design principle, relevant both for the navigation in user interfaces, and for the real world.
If you've been following our blog this year, you might recall that the office occupies the entire level in a 3-tower office building. Here's the sketch of our office space:
The three towers have been named by the colors: the Orange, the Blue and the Green tower (you can check the colored plans for each of the towers here).
Now, imagine how we felt as we just moved in here. 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, as you were trying to get to any of the towers. We were lost at first, and the quick-fix solution for a faster navigation was this:
The 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, then you should 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 (a very popular route by the way, as our sports-room and dining space are located in the Green tower 🙂
Then, as we settled in, 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 my destination tower?
All right, what happens if you want to go from the Orange tower to the Green tower now? Take a look:
The Orange-Green route
Remember, that 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 on the top, you'll see that the entryways between the towers form a triangle, the sequential counter-clockwise flow. The Orange-Green route makes the first side of this triangle (as I'm residing in the Orange tower :).
Keep in mind that the Orange-Green route and the other two images do not include the elevator doors (if honest, it'd be too hard to take such a picture for me), only the pieces of the "departure" tower and the "destination" tower:
The Green-Blue route
.. and the Blue-Orange route completes the counter-clockwise motion along the entryway triangle:
The Blue-Orange route
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 in our office space, and the navigation in user interfaces. Users feel very comfortable and in the flow if they can answer those 2 questions:
- Where I am now?
- How do I get to where I need to get?
Once your software app makes them feel confident in their answers, this can account for as much as 90% of success.