The Design Range

Helping creatives improve their business and increase their income from doing what they love.


How Your Website Design Orientation Affects User Experience

Published on January 17th, 2013 | by Celina Conner


Nowadays, people are probably not as riled up as they were when Facebook first introduced the Timeline model. For a while, a number of users refused to shift from the old format voluntarily because they found Timeline very disorienting, with its two columns and how it has to be processed in a zigzag manner to follow the events chronologically. This just goes to show how important website design orientation is – whether it’s portrait or landscape or a mixture of both, it has to help the user process data on your site better.

Portrait or Landscape

To choose the proper design orientation, it depends on a couple of things: the type of content, and the device used for viewing.

Content: Videos, photos, books, lists

More often than not, videos are best viewed when in landscape format – think TV screens or monitors. Most sites make sure this is the case when viewers choose to watch the full screen version. On the other hand, when the video is to be viewed along with the description and comments, portrait format is used, assuming that after watching the video briefly, the viewer will immediately scroll down to read or type something else.

portrait-landscape

In case of photos, it’s pretty much the same with videos, only that there aren’t so many ‘shots’ within a given time frame, so to speak. Photos would include graphs and charts as well.

For books and lists, the typical orientation used is portrait – as most books are. The portrait orientation facilitates reading by limiting the left-right movement of the neck and eyeballs. It’s also much easier to see more items on a list given a portrait orientation.

Device: Desktops, tablets, phones

upside-down

We are most familiar with desktops and laptops, but nowadays a lot of browsing is done through mobile devices, and it’s important that your website can be properly viewed through smaller screens.


On shifting between portrait and landscape orientations, here are a couple of approaches used:

Extended: When orientation is changed, it provides additional data on top of what is already shown. It effectively expands the current content.

portrait-and-landscape-difference

Complementary: With the shift, a different perspective is provided regarding the same information, for elaboration or emphasis.

smashing

The shift between orientation has to have a purpose, to engage viewers and keep them coming back.

Unlike other things, there is no such thing as one size fits all in website design, so make sure to think ahead and consider carefully these two things: what are the most important things you want to get across, and where are viewers most likely to access this information.

Photo Credit to Robert Scoble

Did you like this Article?

If so, why don’t you consider subscribing to The Design Range Newsletter? You’ll be kept informed once a fortnight on all the latest articles as well as exclusive tips and tutorials on increasing your income from graphic design.


About the Author

Celina Conner is a Yoga Instructor, a holder of a Diploma of business from Martin College Australia and a mother of a beautiful daughter, Krizia. She has a passion in cooking and formulating vegan recipes.Follow her adventures on her Twitter.



Back to Top ↑
  • Welcome

    Alexander SingletonWelcome to the Design Range – your online resource for tips and advice on how to get the most out of your design business and increase your design salary. My name is Alex Singleton and I own the Hunting Town design house. The Design Range is a place for me to talk about all the things I’ve learnt about the graphic design industry and hopefully provide some helpful advice to anyone else walking the same path.

  • Newsletter

    Subscribe to the Design Range Newsletter and be kept informed on all the latest articles as well as exclusive tips and tutorials on increasing your income from graphic design.


  • Fans

  • shopify
    graphic river