User Interface Design Part 2: Architecture Patterns

In the first part of this series, I went over the importance of designers utilizing design patterns and how it can impact the overall effectiveness of a website.  A website's structure is the first step in design planning and architecture patterns can organize this structure in a way that will make the most sense to a user, as well as achieving the business goals for the project.

Unlike the pattern examples we will look at in further posts, architecture patterns are not directly seen or interacted with by a user. Consequently, they are sometimes over looked by designers who specialize and focus on the visual.  But for designers that specialize in user experience (like all interactive agency designers should), the focus on what is unseen is just as vital as what is actually visible.  What ends up being determined in this phase of planning will strongly impact all subsequent design decisions for better, or worse.

In this post I will go over three commonly used architecture design patterns.  Understanding when and how to use these or similar patterns, will cut down on the time a designer needs to plan a site, as well as greatly improving the effectiveness of the finished product.

Hierarchy Pattern

The Hierarchy pattern is what it sounds like. It organizes all content by parent/child relationship. It is much like the typical folder structure on your desktop computer. 

This pattern encourages browsing by organizing content in a way that users are familiar with.  It is the basis of most traditional websites as it is easy to understand, and often can be reflective of the business structure that the website represents.

Strict adherence to one hierarchy in a site can be limiting however, and with most effective websites today, you can see multiple forms of hierarchy being used.  An example of this occurs on http://www.golder.com.  From the home page it is easy to view Services, Client Sectors, and Projects as equal objects and each of these sections contains their own unique child objects.  But if you look closely at a specific project for example, it can also be viewed as a parent to associated services and client sectors, objects that according to the overall website structure are not its children. By layering the hierarchy pattern in this way, you give users a multiple page relationship they can navigate.  This is very effective in moving a user throughout the site in an impulsive fashion as it can present more topical navigation on each page.

Hub and Spoke

A hub and spoke pattern consists of multiple pages accessed through a central hub.

Each of the pages or sections connected to the hub are self contained, allowing the user to focus on the contents within it instead of being led away to other content.  Because of this limited navigation is required, reducing visual clutter and distraction.

You encounter this pattern frequently in mobile development were a smaller screen size necessitates less navigation.  It will also be frequently used when you are in an account settings or profile management section of a website. The objective is to very clearly present you with the options on the hub page, and then only present relevant information on the pages of the spokes.

Process Funnel

A process funnel presents pages in a very linear order.  Although sometimes funnels allow a user to go between different pages in whatever order they choose, it is usually a very intentional step by step process, leading the user from start to finish.

Most often this pattern is used to either gather information from a user, or as an instructional tool to walk a user through an unfamiliar topic or process.  You commonly see this pattern used when making a first time purchase on an e-commerce site. The website carefully controls each step limiting the chance for the customer to leave the page and abandon your order.

To recap, there are three building blocks on which a site is developed.  As this is only the first step in any web development process, this is only the beginning of utilizing user experience design patterns.  In my next post we will cover the best way to move a user around all your site’s pages using navigational patterns.