Stanley Kubrick was a visual mastermind. He didn’t necessarily need a fantastic premise or an unforgettable story to carry the weight of his films. Kubrick was able to use cinematography alone to capture his audience and guide them wherever he wanted.

Movies and website navigation are not all that different. In a movie, directors connect various scenes together using camera angles, lighting, cuts, and other techniques to deliver a cohesive experience that evokes a specific emotion from the audience. Website navigation connects web pages together to allow a visitor to find or get something they want.

Since both movies and website navigation vary in design and organization, there are not set guidelines or standards. Like film, designing site navigation is an art in itself, and in both cases, it’s all about perspective. How does the user perceive the information architecture on your site?

blog_stanley_inline_0014_site-nav

One-Point Perspective

One of Kubrick’s signature cinematic techniques is the use of one-point perspective, which leads the viewer’s eye towards a central vanishing point on the screen. This technique relies heavily on a complex visual symmetry created through parallel lines that lead away from the viewer. This is usually combined with camera motion that makes an effect which has been referred to as “hypnotic and thrilling”.

For example…

In “A Clockwork Orange” there is a scene in a record shop in which the camera pulls Alex as he walks around the shop.

In “A Clockwork Orange” there is a scene in a record shop in which the camera pulls Alex as he walks around the shop.

For his horror film “The Shining”, Kubrick used long Steadicam shots of Danny riding his tricycle along the hotel’s corridors.

For his horror film “The Shining”, Kubrick used long Steadicam shots of Danny riding his tricycle along the hotel’s corridors.

In "Full Metal Jacket", the camera tracks Sergeant Hartman as he marches around the dormitory, berating the new recruits. The same effect is also employed whenever the new recruits are shown in their bunks.

In “Full Metal Jacket”, the camera tracks Sergeant Hartman as he marches around the dormitory, berating the new recruits. The same effect is also employed whenever the new recruits are shown in their bunks.

In each case, Kubrick pulls characters towards the audience using one-point perspective. Instead of sending the audience into the picture, he presents certain scenes by having the audience at a single focal point and then moves the content in the film towards it. As this relates to website navigations, the concept is that you don’t force the audience to move into your content. Instead, you get your content to move towards them.

In order to accomplish this on your website, you have to converge all of your links, buttons, and navigation components towards one distinct focal point – your user. Let’s take a look at this example from PC World:

blog_stanley_inline_0010_pcworld

Notice how you focus directly towards the center at one distinct focal point on the screen. In this case, the one-point perspective works perfectly when taken literally in a visual representation. Luckily, this isn’t the only way we can achieve the one-point perspective in site navigation. Let’s take a look at a couple of other ways…

Classification and Ordering

Grouping content is commonly the first thing to do when setting up navigation; start with major categories and break each individual concept into smaller sub categories.

The main issue that comes up once content is grouped into one category is the classification. In other words, what order do you put everything in? Card sorting and similar methods could help you create groups of content and establish hierarchies to distinguish between high priority and lower levels of navigation. But there is still one problem – how should the hyperlinks within those groups be ordered?

Bonus Tip: More often than not, the first and last links in a standard navigation bar are given the highest priority. Users will naturally view left to right, so in this case the links with the least individual impact will typically be in the middle of the navigation menu.

Check out Mashable:

blog_stanley_inline_0009_mashable

The first and last links in this case are “Social Media” and “More”. Makes sense, considering the top trending articles on Mashable are usually related to social media. Then the “More” link is related to a number of other subtopics and together make up more visitors than any of the other subjects. As far as Mashable goes, it’s easy to see that US & World news are not exactly the most popular subjects.

Layered Access

Sometimes your site navigation changes depending on whether a user is “logged in” to their account which may customize its content. Websites may have a simple account user area or an entire network of content navigation.

Whenever this level of involvement is necessary from the user, you might want to consider tailoring content in a specific way to highlight the exclusive features and sections of your website that they have access to. In other words, in order to keep the one-point perspective for the user, you have to create a new “layered access” for your navigation. Here are things to consider when organizing content navigation with a membership aspect: The tiers of user hierarchy and what specialized content will those groups have access to. In order to coincide with the one-point perspective, each of these levels of membership should be treated differently and addressed individually.

Social media sites tend to take this medium to the extreme. The primary goal of any social media site is to get more people to join. In Facebook, you’ll notice that their homepage is rather bare:

blog_stanley_inline_0007_facebook-login

They give prime real estate to sign up requests and then go as far as to place the majority of their available menu on the footer, as to not attract too much attention from its non-members. The login elements are highlighted where you’d more than likely find key menu items on some other websites, so it’s clear that at this level, Facebook wants new visitors to join their network more than anything else. Once you login however, there’s a plethora of menu items.

blog_stanley_inline_0008_facebook-admin

With a Facebook fan page, you’ll notice that the admin section is a little different than the standard profile page since the goal is to reach out to your followers, connect with them, and then work on gaining more followers. So the biggest sections of the menu items are things like “Get more likes”, “Messages”, and “Notifications”. All of these sections obviously serve the particular user’s needs through the one-point perspective. Figure out the primary goal of the user in each layer of access and give them exactly what they came for.

Ask yourself what members are going to accomplish that is different from new visitors. In the most basic setup, you’d have a company whose goal is to sell an online website service.

Smooth Motion

In his movie “The Shining”, Kubrick used something called Steadicam. A virtually unknown system, the Steadicam allowed one crew member to move the camera any place he could walk, either up and down staircases or through narrow hallways, with the Steadicam smoothing out any sudden movements. Kubrick used Steadicam to its fullest potential, giving the audience a smooth, stabilized, motion tracking by the camera.

blog_stanley_inline_0003_the-shining

Displacing the Weight

Site navigation has to be one continuous fluid movement throughout the entire experience. What then is our “Steadicam” when it comes to organizational structure? Well, the idea here is weight. The Steadicam operated based on adding weight to the camera and then displacing it by separating it from the cameraman. Likewise, site navigation operates much smoother if you can shed off some of its weight. Group like-minded categories together and remove whatever isn’t being used (or is barely being used).

blog_stanley_inline_0002_moz

In this example, MOZ breaks it down into five distinct subject areas for users. There’s no sub categories, secondary menus, or tags. The site relies on its landing pages for each subject in order to better explain to its users what a subject like “products” has to offer them.

Keeping the number of items on your navigation down is crucial to the overall success of this method. Having fewer items make navigation easier to memorize in the short term, meaning your site is more usable for the average user.

The golden number here is seven. For some reason or another, human short term memory is said to only be able to hold up to seven items at once for up to twenty seconds, which means you should try to condense your navigation menu to seven items or less.

You should also clear up the track and keep the amount of links down to two-three clicks. This means that a user should be able to get to any part of your site within a maximum of three clicks. You want to keep their journey smooth and constantly flowing from one end to the other.

You should also avoid using excessive information in the titles and category descriptions. Consider also using icons or symbols to represent a menu item so that it trims things down, visually placing focus on what’s most important.

Keep it Simple

Above all else, Kubrick kept it simple. He constantly relied on standardized sets, angles, and tracking shots to convey his message. Whatever it was, it cut and flowed naturally throughout the film. Nothing was out of place. Everything was exactly where it needed to be.

Website design is a big part of creating a successful online business. However, designers often find it necessary to incorporate new and “innovative” ways of visually representing navigation. But most of the time, simplicity wins.

Bottom line: Most users will appreciate a simple menu. 

blog_stanley_inline_0000_site-navigation-with-stanley-kubrick

Even if it means just standardized text and links, people want what they are comfortable with. Think of it like a map. As it is, people will always be confused with directions. They won’t know where to go and will rely on your help to get them there. Why burden them with flashy vector art and obscure menu orientations? Web design is so important for standing out, but your navigation is not the place to do it.

Through his filmmaking techniques, Kubrick has inadvertently taught us lessons about website navigation. He’s shown us that audiences wants something clean cut and smooth to guide them where they want go. Because after all, it’s not about the trip but the destination.

Comments