In my previous post on web design layout, I discussed the role of layout in design, covered two examples of well executed layout and discussed what contributed to the success of them. In this post, we will cover how to analyze and plan for the most effective layout for your project. To plan a layout, you must first understand its purpose. Layout -- loosely defined -- is the organization of elements on the page. To be more specific, I define effective layout as:
The organization of content, elements and objects on a page such that users can scan over the arrangement and understand the relative importance and relationship of everything they see.
To elaborate, successful layouts organize elements on the page based on importance and relationship. The more organized your page is, the easier it is to look at, understand and use. An important distinction to make, is that organization is more than arranging things in a neat and cleanly way. Organization is much deeper, the arrangement of elements must inform the user about them.
Applied to the web (and layout specifically,) organization means elements on the page are arranged based on how they are related or connected. Elements are arranged based on their relationship to other elements on the page and the context of the website. Interrelating elements are placed in close proximity to form a cohesive group. Elements involving the sites goals are more important, and are given more space and visual prominence. For example, a site designed to sell books would arrange book listings so they are seen first. Users coming to the site will be looking for books, so placing them in an visually obvious spot (top center of the design, for example) informs them of the site context and makes their primary action (browsing books) effortless.
In order to design an effective layout, you must first understand the relationships of page elements. Only through understanding the relationships can you arrange them in the most organized way.
Understanding The Relationships
As I eluded to earlier, there are two types of relationships you should seek to understand. First, is the relationship of an element to the user or clients goal. Elements that are vital to conversion (a user performing a desired task, like purchasing a product) or user's goals are more important and should be organized as such. Second, is the relationship of elements to each other. Users interpret everything they see, one universal interpretation being that elements in close proximity are related. Great layouts are designed around these concepts, allowing users to understand a design without conscious thought.
Relationship to Goals
How an element relates to user and client goals is the most important aspect of layout, so you will find it best to start here. To do so, you must first know what the client goals and user tasks are. Hopefully you have already uncovered this during planning and discovery phases, if not there is never a better time to clearly define why the site exists. This information can be obtained in many ways, interviewing clients and stakeholders, looking at site statistics, performing field research, etc... Design research is a subject best left for another post. Regardless of your method, first understand what users and clients want from the website.
With this information in hand, list all of the site goals (for both your clients and the users) and then rank them based on importance. Having a clear hierarchy of objectives will make future decisions to prioritize easier. The most important elements should be given the most space and most prime locations. Elements of lessor importance can be placed further down the page.
Once the list is created, create a second list containing any element which relates to the goals (ie: call to action button, primary headline, photo of product, etc...). Elements which relate to the most important goals should receive the most visual prominence, those which relate to non-essential goals can be deemphasized.
Identifying the most important elements is half the battle, but you must still consider how elements relate to each other.
Relationship to Each Other
Elements on a page have relationships. Some elements are intimately related, others are practically unrelated (the only commonality between them being the website they live on.) A pair of submit and cancel buttons are closely related as they both control the functionality of a specific form. The cancel button and a home link however, are almost completely unrelated.
When designing a site you will understand these relationships intuitively. You know enough about the context of the page, user and clients where relationships will be obvious. Users however, have no idea the relationship between elements. This is why the layout must communicate it to them.
Related elements should be grouped together into a common space. Unrelated elements should be kept far apart. Often times you will end up with groups and subgroups of related elements. A sidebar for example, typically contains non-critical information and actions. Within a sidebar -- which is a group itself -- you typically have sub-groups of related elements. The "Stay Updated" section of this blog contains several related elements all grouped within the site sidebar. The "Stay Updated" section has a headline, latest tweet (which has the tweet itself, the date and user handle), icons and links to RSS and E-MAIL subscription. All of these elements are closely related.
The grouping instantly tells the user the relationships of the elements. On a broad level, one doesn't need to read every word in the "Stay Updated" section to know the elements within deal with the same subject mater. On a micro-level, the layout informs the users the RSS icon and the Entires RSS link are "one unit."
Another good example of this concept is the split column approach in the Categories / Archives section. These links essentially take the user to the same place, a list of previous articles. They only differ in how the list is filtered. Rather than creating two separate sections (which communicates non-relation) they are contained in a single section (which communicates a relationship.)
To understand the relationships simply create an inventory of all elements on the page and document how you would categorize them. You can do high level categorization such as "navigation, primary content, actions, etc..." or detail level such as "archive links, calls to action, utility navigation, etc..."
If needed, you can always use card sorting (a common IA practice) and put each major element onto a card and pill them together based on their relationships.
Layout Next Steps
Once you understand how elements relate to site objectives, user goals and other elements you can begin crafting a layout. Because the function of layout is to best organize and display the elements on the page understanding the relationships is essential. The word "organization" by definition means "the structure or arrangement of connected items," relationships determine connectedness.