What's Your Orientation?
Since the dawn of the Internet, we have befriended the scroll bar. The vertical scroll bar made much more sense to use in the beginning since the majority of the world reads information from top-to-bottom, left-to-right. It also helped the appearance of web pages to incorporate a scroll bar; in the situation they weren't able to fit their information into one frame, a web designer would simply add content and ask that the reader simply keep on scrolling.
I had a conversation with a client the other week about a few mock-ups we were designing for their site. We had nailed down a home page design that flowed well and, for the most part, fit within one frame. The client then requested that we look at taking a more "horizontal" approach to the mock-up, which promoted a landscape type of view. With the proliferation of websites - especially ones for design and technology companies - turning to more horizontal designs, that got me thinking. What exactly are the benefits of going more "horizontal" in orientation as opposed to working again with our vertical-scrolling friend?
Navigation
A website is useless without great navigation. Of course it's important to provide names for navigation that make sense for your target audience. For example, if your target audience is looking for rocking chairs, don't use navigation titles like "Services" or "Solutions." Wouldn't "Rocking Chair Designs" and "Rocking Chair Repair" sound much better?
Since the majority of us do read left-to-right, top-to-bottom, a navigation that extends from left-to-right makes much more sense than placing a left-side vertical navigation menu. Magazine spreads and e-zines understand this concept, typically requiring the reader to read left-to-right within their frame of view. Referencing how we view navigation, this study confirms people don't typically pay too much attention to left hand navigation but will definitely read over the horizontal navigation. Many of our clients utilize horizontal navigation: IRUNURUN, John Moore Services and XS International, for example.
One of the drawbacks of horizontal navigation is it will sometimes limit the length of names for each of your silos of information. Where you could list "Turbo Rocker Chair Service and Design Shop" in a vertical navigation, you would typically only be able to list "Turbo Rocker" in a horizontal navigation.
Layout
You'll notice that some of the most successful websites out there use some type of horizontal approach to building their sites. Take Facebook, for example, which found early success in building horizontal navigation and has recently introduced new photos in user profiles that are displayed horizontally.
A horizontal layout also usually means a site will stay within one frame of view, which is typically the ideal situation when presenting information to a visitor. With horizontal navigation being utilized, we are also able to provide much more information and images in content boxes and layout, making for a site that doesn't have to feature cramped content and images due to the presence of a vertical scroll bar and/or navigation.
Functionality
More important than the navigation and the layout is the site's functionality. Will your content still be easily found in a horizontal design? Will your calls-to-action be understood as part of the design? Do you like drop-down boxes (which ask for horizontal navigation) or fly-out boxes (which would be for more vertical navigation) for your site?
A great site can be made with either type of orientation, though recent trends and studies show horizontal is more popular and, in most cases, more effective for your site's visitors. If you've recently thought about creating or modifying a website, think of who your site targets. If your site is overly graphical, you may like using a vertical navigation; if your site features more content and functionality, you may be happier with a horizontal site.
If you have additional questions about what your site could look like utilizing either orientation, contact us or visit a few of our other projects for some additional inspiration.
