Menu

The Proxority Principle in Web Design

In web design, the position of design elements and the layout of web pages is everything. So many cool, exciting techniques are available to help us lay out our designs (especially with CSS3 at our disposal) that we often forget that structure is as important as aesthetics.

How do you determine where content should appear, and how can a well-oiled interface increase website readability? This is what we’ll aim to uncover in this article.

We’re going to examine a basic technique that could help you improve your general content flow, and, for lack of a better term, I’m going to call that technique the proxority principle (a portmanteau word that combines "proximity" and "priority").

Communication through Design

Designers already understand that the relationships between objects on a page matter. That’s why when we create a design, we think about visual hierarchy, visual weight, Gestalt psychology, the distinctiveness of important elements and other principles that affect relationships between the various components of a web page. It’s one of the reasons why we tend to get neurotic when it comes to navigation menus, headers or footers.

With so much going on inside the average web page, getting the right content to users in the right place and at the right time is quite an achievement!

If your content isn’t structured suitably, there can be a number of downsides, such as:

The proxority principle, in a nutshell, puts forth the idea that if we can prioritize our content to ensure that the most relevant material is visible and appealing, users will immediately be drawn to it.

This principle asserts that all related, important content should be grouped or joined together whenever possible to allow flow and feedback.

The art of this technique isn’t in the theory, because we often lay out content logically as we write it (headings, subheadings, bullet points, etc.); instead, it’s in the planning stage.

Proxority Principle in Site Navigation

Consider something like a navigation menu. One of the first things we do when producing the information architecture of a site is to organize pages and links into one cohesive structure, after which we add categories or subsections if appropriate.

This technique leads to the development of drop-down menus and other unique browsing aids which help us to further bind content that lacks proxority.

When planning navigation menus, one must pay particularly close attention to the value of pages and their connections, in order to make them a perfect example of proxority in action.

This particular technique works for any style of website, so whether you’re scaling a huge service-heavy but content-light layout (like Amazon) or a content-heavy but feature-light design (like a blog), the technique should be of use.

Better yet, the principle can help you organize your website’s information architecture; the proxority between pages is as important as what exists upon individual pages.

If you find yourself struggling to determine where stuff should be placed, this strategic guide will help you.

Priority: Boost the Best, Weed out the Worst

Many of us know only too well the benefits of prioritizing. The priority we give our content plays a huge part in the perceived value it has upon a page.

A site’s logo/name, for example, is recognizable because of its critically high placement, usually in the top left-hand corner, and it maintains visibility in that position on every page of a website.

A logo should be dominant over all other objects on a page. That’s its proxority.

Rate Each Element’s Value

To identify which pieces of a web page are most critical and important, we need to begin by examining every object in a layout, no matter how small.

Rate them based on their perceived value (according to what your visitors need to know or are likely to want to know) and their functional value (according to what contributions they make to the website, such as functionality or advertisements).

You can do this either by taking a screen capture (or printout) of the entire page and annotating it, or by producing a list of everything that appears on a page. This exercise will help you reassess the value of your website’s content.

Rate images, media, content (at a paragraph level), and everything else according to this numbering system:

RatingDescription of Element
1The website cannot function without this.
2This adds benefits but is non-essential.
3This supplements or reiterates content.
4This is redundant or wastes space in some other way.

Eliminate Unneeded Elements

When you’ve gone through everything, review the results.

Before we go any further, it’s probably worth mentioning that if you find content, links or objects that are no longer useful or don’t contribute anything, remove them.

Eliminating clutter from an interface is tough, but reductionism improves the general user experience of a website.

For elements rated at a 3, removal might be a bit harsh, so consider rewording or attaching things together to add value.

This website arranges its critical information into clearly defined segments for readability.

After you’ve identified the stuff that can be deleted, merged or moved, look at everything you’ve given a rating of 2. These elements can be the toughest to deal with because you want visitors to benefit from them, but you don’t want to overburden them.

One solution to giving these these needed, but non-essential elements an appropriate proxority is to use progressive disclosure: make content appear on demand with drop-down menus or tooltips, or display it further down the page so that it’s still available but less prominent.

Many websites use progressive disclosure to avoid swamping their users with details.

Proximity: Flow, Feedback and Functionality

We’ve considered the importance of prioritizing every asset on your page, identifying which bits have more sway than others, eliminating the fluff that has accumulated, combining weak material into a strong structure and pushing the less critical data out of the field of vision.

We now need to take all the remaining content and follow through on the second part of the process: to connect everything logically and put it all back together, as if it were a jigsaw puzzle — or a storybook, wherein the plot develops at consecutive points.

You should be left with everything that needs to be on your website, in its most diluted form, with supplementary content either hidden down the page or waiting in tooltips and extensible data boxes.

Rate Important Elements in Relation to Each Other

Go back over everything to which you have assigned ranks of 1 and 2, and rank them again; number everything according to what order you believe readers need to know about it.

If everything ends up where it should end up, it will all make perfect sense when you read it aloud.

The developers and designers behind this website clearly understand the need for organization and feedback.

Redesign

Once you’ve got everything labeled, re-shuffle your source code to match the new reading order. Pay special attention to bits of content that connect to or depend on other pieces of content (such as image captions), and put them as close together as possible.

Then, make the necessary changes to your CSS and JavaScript.

Proxority: Examples and Patterns in Action

Many websites already exhibit what I’d define as high proxority in that they take great care to use techniques that account for both priority (bringing attention to certain elements) and proximity (making reactions happen directly next to or above the objects being interacted with).

Below is a showcase of a few examples of best practices in use. Some we’ve briefly mentioned before, and others are being introduced here. By following similar practices, you can avoid user confusion and increase reading efficiency.

Using progressive disclosure to track the progress of a form:

Informing visitors of errors as they enter data:

Drop-down menus expanding close to the cursor icon:

Input objects disabling once they’ve been submitted:

Progress bars showing loading progress:

Content or light boxes expanding upon user interaction:

Proxority: Origami for the Web

The proxority principle posits that everything you find on a web page can be assigned a value and a place in sequence, in relation to the objects that surround it. This idea has existed since the early days of the Web, but too few designers pay enough attention to it. Think through what is actually needed, where it is needed and when it should appear (as opposed to simply putting all of the content on the screen, in its entirety, in an order that "looks pretty"). The need for such techniques is increasing, especially given the proliferation of handheld devices and the idea of designing with a "mobile-first" philosophy.

If content isn’t worthy of a restrictive mobile layout, why is it needed in the desktop layout?

If you have ten spare minutes, give this simple activity a try. Go through your website and weed out anything that isn’t offering what it should. Make existing objects provide greater value to users (or use less space), and don’t be afraid to reorganize your code and its content to ensure that what’s needed is what appears. Oh, and if you do feel tempted to make actions elicit responses, ensure that users know that your website is responding; after all, you don’t want them clicking "submit" ten times in a row, only to fail.

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

This was published on Jan 18, 2012

27 Comments

Navigator Multimedia Jan 18 2012

Pragmatic strategies here! For designers with thorough understanding of their site’s goals and functions, it can be challenging to step back and visualize what newcomers will see and respond to. Rating elements of a page by perceived and functional values provides a constructive strategy for getting past this.

Cheers,
Sarah Bauer
Navigator Multimedia

Big Bubba Jan 18 2012

“.. call that technique the proximity principle (a portmanteau word that combines “proximity” and “priority”).”

typo?

Sara Henley Jan 18 2012

That was a great read, thanks for the info, looking forward to reading more about bettering myself to do web design.

Michael Tuck Jan 18 2012

Nice article, Alex. The process of ranking and weeding out elements is very specific, and nicely constructed.

A little over my head but bookmarked for future reference!

Janey B. Smith Jan 19 2012

Thanks for the info, I’ve been interested in this for quite some time, the design is really a vital part.

Myles Kedrowski Jan 19 2012

Alex, this is a great article I’m glad you took the time to publish it. I really enjoyed reading it. There is a lot of useful stuff in there that a lot of designers tend to look past. Once again, great article!

Jacob Gube Jan 19 2012

@Big Bubba: Yes, typo. It has been corrected.

Raleigh Jan 20 2012

This is a great checklist of items to keep in mind when working on a site’s information architecture. I’m sure I will be referencing back to this multiple times. Thank you!

Fascinating! I love when you all write about design principles… That’s a good amount of information to keep in mind when building websites and applications.

michelangelo Jan 23 2012

Priority and proximity are important and well-known design principles, but I don’t think that your article makes a strong case for any connection between, or combination of the two.

yescando Jan 23 2012

Great article – thanks :-) I think it will help developers understand what they are trying to achieve within a website and makes a great checklist! Thanks again

Yescando Jan 23 2012

Very useful – especially for those of us who so often get caught up in functionality rather than usability. I’ve already bookmarked this one!

Alex, this is a great article , to connect everything logically and put it all back together, as if it were a jigsaw puzzle

Jen Mars Jan 31 2012

Interactive websites are better. It always pays to have websites that are easy to navigate.

Great Article and great examples! I will also be referencing this article. I could definitely start using some of your techniques to improve my current projects.

Saksham Talwar Feb 03 2012

Now this was something I’ve never heard of before. I have heard about priorities, but proxority principle is new for me. Now I think when priority is clubbed with Proxority, it will yield great results?

This article abstracts the fundamentals in webdesign – things that looks simple is often extremely complex and complicated.

Alex R. Feb 08 2012

I think a key part in creating a successful website is by rating each element’s value. Great point and article!

I would like to mention some thing about progressive disclosure. I fould that lot of web designers and developers have neglected that when they design submission form

There are some steps which you have to think seriously
(1) Steps should be visually displayed clearly
(2) User should be able to navigate among them
(3) Errors of the fields should be validated before submitting the form
(4) If server side validation fails, forms field should be auto filled with old values and highlight the error field

Kristin Currier Ludlow Feb 10 2012

I LOVE this article. We are currently redesigning a content heavy site and it can be overwhelming. I’m doing a lot of interface design (shopping carts and the like), and these are the principles I’m sticking to and try to advance to others involved in the process. It can be a challenge because a lot of folks don’t naturally *think* like this, but they understand the frustration when their user experience is hindered.

Great article, Alex. Many designers understand that technique on a subconscious level but… not always use it. Which then leads to millions of awfully designed websites.

Article bookmarked ) Thnx!

Angel Coffey Feb 12 2012

Very informative post! This is great information to keep in mind when designing websites. I’ll be needing to come back to this information often. Thanks!

Stefano Feb 12 2012

Very useful and well written article!

Nandita B. Feb 13 2012

Proxority Principle – Great article with plenty of new info and thoughts.

Thank you Alex !

Elizabeth Hunter Feb 21 2012

Very useful post! This is excellent details to keep in thoughts when developing sites. I’ll be requiring to come again to this details often. Thanks!

Makes a lot of sense good article

This comment section is closed. Please contact us if you have important new information about this post.

Partners