Clear Indications That It’s Time To Redesign

Redesign. The word itself can send shudders down the spines of any Web designer and developer. For many designers and website owners, the imminent onslaught of endless review cycles, coupled with an infinite number of “stakeholders” and their inevitable “opinions,” would drive them to shave their heads with a cheese grater if given a choice between the two. Despite these realities, redesigns are a fact of any online property’s life cycle. Here are five key indications that it’s time to redesign your website and of how extensive that redesign needs to be.

Metrics Are Down

The first and most important indicator that your website is in need of a rethink is metrics that are beginning to tank. There certainly could be other reasons for this symptom (such as your product not fitting the market), but once those are eliminated or mitigated, a constant downward trend in conversions, sales, engagement activities and general user participation indicates that the efficacy of your current design has worn off. Many people call it “creative fatigue,” but what this really indicates is a disconnect with your audience. The key to solving this in the redesign is to figure out where in the workflow the design is breaking down and then address those areas as top priorities.

The metrics are the most important indicator.
The extent to which you redesign to solve sagging metrics could be limited either to adjusting your conversion funnel, if that’s where the problem resides, or to optimizing the product’s main workflow. It does not necessarily mean having to rethink the entire face that your product presents to the world.

Your Users Tell You It’s Time

Metrics give you immediate insight that something is wrong, but to get to the core of what needs to be addressed in the redesign you need to speak with your customers. Surveys work well, but usability testing is most effective. The fluidity of face-to-face conversation allows you to explore the dynamic threads that surveys restrict. If through these conversations you notice consistent patterns that shed light on the drivers behind your downward-trending metrics (and you will), then it’s time to redesign. In addition, these user conversations will reveal prevalent attitudes towards your brand, which can also be addressed in the redesign. In some instances, negative brand perception should be enough to trigger a redesign — but you’d never know about it unless you talk to your customers.

The final decisions are still up to you. (Image: Kristian Bjornard)
Customer feedback will tell you not only whether to rethink parts of your website, but to what extent. Typically, customer conversations focus on specific elements of your workflow. Those areas are the ones that the redesign should focus on. In most cases, this wouldn’t be the whole website, but if the feedback is broad and far-reaching, then tackling the entire experience may be a priority.

The Tech/UX “Debt” List Is Longer Than Your Forearm

Over the course of building a product or website, an organization begins to accrue tech and UX debt. This debt is made up of all the things you should have done during the initial build but either didn’t get around to or had to cut corners on in order to ship the product on time. Each subsequent iteration inevitably adds more debt to the list, until the list becomes so long that it is almost insurmountable. While there are many ways to tackle tech and UX debt on an incremental level, there comes a point when the website, in essence, becomes “totalled.” Like a car that has sustained damage greater in cost than its value, your website gets to the point where starting over would be cheaper than fixing all of the items on your debt list. This is a perfect time for a redesign.
When the debt list gets this long, taking on “incremental redesigns” is easy, where you knock off bits from the list but not the majority of it. This turns into death by a thousand paper cuts, because as you fix elements on the list, you start to accrue more debt around other features. If the list truly is longer than your forearm, then rethink the website if possible.

It Just “Looks” Old

The website’s aesthetic reflects directly on the perception and trustworthiness of your brand. Even if your design was the hotness when it first launched, aesthetics evolve. An old design will be detrimental to your product, leading to the declining metrics mentioned earlier. How can you tell whether your website’s aesthetic is outdated? Look at your competition. Look at hyped-up newly launched services in other sectors. Compare your aesthetics to those of brands that are performing well. Those factors provide excellent barometers by which to assess the currency of your design. The challenge is to review these other websites objectively. Living with your website day in and day out can amplify the feeling that it’s stale and old. Ensure that your assessment is accurate by reviewing your findings with a cross-section of employees in your company.

Decide on what to lose and what to add. (Image: Kristian Bjornard)
In this case, the redesign would essentially be a facelift, a superficial upgrade of the presentation layer that doesn’t necessarily address the fundamental workflow or conversion funnel — although those aspects will undoubtedly be affected by this aesthetic upgrade.

It’s Been More Than 12 Months Since Your Last Refresh

Even if none of the above indicators apply to your website, the shelf life of an aesthetic in today’s highly iterative online reality is hardly ever more than 12 months. If it’s been a year or longer since you last redesigned your website, then it’s time to redesign. Not only will it refresh the experience for your loyal customers, it will attract new ones. In addition, it will breathe life into the brand and show your user base, the press, your investors and staff that you’re committed to keeping the experience fresh and top of mind.
Again, the focus here is on an aesthetic improvement that keeps the brand current, not necessarily an overhaul.

In Conclusion

These are five simple indicators that it’s likely time to redesign your website, but the list is certainly not exhaustive. The number of them that apply to your situation will determine whether a redesign is imperative. But each indicator on its own is still a strong reason to kick off the next phase of your website’s life. Maintaining a current and fresh face for the online world will yield dividends in customer acquisition, conversion and retention. Also, your staff will stay immersed in the latest technologies, design trends and presentation-layer wizardry if they know that they’ll soon get to exercise their chops in a redesign.
What indicators have you found work best in your organization to drive a website redesign?

Redesigning Craigslist With Focus On Usability

Craigslist is obviously one of the most popular websites in the world, and each month it serves millions of users who post and view classified ads on the website. At the time this article was written, Craigslist was ranked as the 28th most-visited English-language website in the world by Alexa. Despite the fact that Craigslist receives such a huge amount of traffic each month, it is also criticized for its design, which seems to be at least 10 years out-of-date.
This very basic design has also become a huge part of Craigslist’s branding, and it helps make the website memorable and instantly recognizable. As a result, the company has benefited in some ways from a design that many people consider to be very subpar. Over the years, as various design trends have come and gone, Craigslist has bucked the trends and stubbornly maintained it’s bare-boned approach.
However, despite the fact that Craigslist has been able to benefit in some ways from its ultra-basic design, there are plenty of reasons to consider making some changes. A simple approach to design and layout that cuts excess and eliminates anything that is less than critical is typically assumed to improve usability.
With Craigslist, however, this is not the case, because the website could benefit from usability improvements in several areas. In the design world, minimalism that conveys a simply beauty is regarded as a very difficult thing to achieve. Minimalist websites can be both attractive and easy to use. However, Craigslist’s design is hardly considered beautiful, even by those who appreciate websites that consist primarily of text.

In this article, we’ll take a detailed look at the design, layout and usability of Craigslist and point out some areas where we feel change and improvement are possible. This is only one opinion of what could be done to improve the site. Our goal is to demonstrate the process of evaluating a website in certain areas and determining specific improvements that can be made. Hopefully this will help other designers who are attempting to evaluate websites of their own or of clients.
Additionally, we hope to start a discussion among Smashing Magazine readers in the comments below about the points raised in this article. The best way to improve the usability and design of any website is to listen to those who are using the website, so we hope that you Craigslist users out there will share your opinions here.

The Goals

Before starting any type of evaluation, it’s important to clarify what exactly we hope to accomplish. In this case, our purpose is two-fold. First, we want to improve the usability of Craigslist by making some minor changes that will result in a more positive overall user experience. Secondly, we want to create a design and layout that is more up-to-date and pleasant to look at.
One major consideration that cannot be ignored is the brand recognition that Craigslist has developed over the years. The company obviously values its website’s consistent look, which hasn’t been updated (at least not heavily at once) throughout the years, and it keeps this approach for a reason. A website as large and popular as Craigslist could easily go in any direction it wanted with a new design. But given the company’s stance on its design and the recognition already in place, it’s clear that drastic changes are not realistic.
As a result, our goal is to suggest improvements for the usability and design of the website while maintaining a simple, basic approach. Even though this is strictly a hypothetical scenario, it would serve little purpose to suggest changes that could never be implemented in reality. Although the end result bears some significant differences to the current website, it still maintains a very simple approach that puts priority on content rather than design.

What’s Wrong With Craigslist?

Before we suggest any changes that need to be made, let’s look at some of the weaknesses of the current website.

1. The Design is Bland and Outdated

As mentioned earlier, and as any Craigslist visitor already knows, the design of the website lacks visual appeal.

2. Logging In, Signing Up, and Managing an Account is More Difficult than Necessary

Craigslist has achieved its success due to the huge community of users it has managed to build. According to its fact sheet, each month over 30 million new classifieds are posted to the website, and over 12 billion pages are viewed. With this kind of activity level, it’s clear that making the process of creating an account, logging in and managing the account should be as straightforward as possible. However, the current website could be improved in these areas. Unnecessary clicks are needed to do anything with an account, and options on the account page are very limited.

3. Screen Space Is Not Prioritized

One issue with the current design of the Craigslist home page, as well as sub-pages, is the use of screen space. Valuable screen space could be used more effectively in some areas to improve the usability of the website.

4. Navigation

Craigslist is really a network of smaller websites held on sub-domains of Craigslist.org. Each sub-domain, representing an actual location, has its own board of classifieds. Currently, over 550 cities in 50 different countries are represented. With any website of this size and this amount of content, challenges with the navigation will always exist. Some aspects of navigation are rather effective on Craigslist, but others leave room for improvement.
For starters, there is no navigation menu that appears consistently throughout the website. Some pages use a left sidebar, some don’t. Some pages are easily accessible from most areas of the website, but not all. On many of the secondary pages, huge amounts of screen space are left completely empty with very few navigational options. This forces users to hit the “Back” button in their browser to go to another section of the website, something that could be improved by adding more navigational choices on these pages.

What’s Right With Craigslist?

Of course, a number of things are also good about the existing website, and it’s only appropriate to look at them as well.

1. Recognizable

Given the amount of traffic worldwide that the website receives, and an appearance that stands out from other major websites, Craigslist is one of the most recognizable websites in the world. When people want to post classifieds online, Craigslist is usually their number one choice.

2. Clarity of Vision and Purpose

Part of the beauty of Craigslist is that it exists to provide local classifieds and forums, and that’s basically it. There aren’t a lot of extras and options, and there are no ads on the website. Craigslist exists to help people find what they are looking for, and to help people find other people who want what they have, and it does this better than anyone else. The people running Craigslist have not been distracted by other monetization opportunities or other things they could be doing with the website, and they deserve to be commended for sticking to their purpose.

3. Relatively Easy Posting Process

For a website that relies on classifieds being posted by individuals, Craigslist makes the process fairly straightforward and simple. On community pages, there is a clearly marked link for posting classifieds, and users are led through a simple and efficient process once they are logged in. The only drawback here is that you have to navigate from the website’s home page to a local community page before seeing the link to post a classified.

4. Pages Load Quickly

Visitor to the website will appreciate the speed with which pages load. This is especially nice as you’re browsing classified listings and visiting a number of different pages on the website.

Challenges Of Redesign

Before we get into the specifics of our suggestions for change, let’s take a look at some of the challenges of redesigning a website like Craigslist’s.

1. Organization

There’s so much content on Craigslist, with hundreds of different local communities and lots of different categories of classifieds. Any website with this amount of content will face a challenge of organization in terms of structure and navigation.

Of course, the goal is to make it easy to move through the website and find what you want, making it necessary to include plenty of navigational options while minimizing clutter.

2. Improving the Website Without Detracting from the Brand

There are a number of different ways to improve the design of Craigslist and reorganize the presentation of data, but improving the design without straying too far from the current basic approach that has contributed so much to the success of the website is a major challenge. Creating a more attractive design and improving usability are both very achievable, but doing so while maintaining the essence of the company and website is not so easy. Because Craigslist’s identity is so closely connected to the website in its current state, severe changes to the aesthetics of the website could have a major negative impact on the company’s success.

3. Improving Usability with Only Minor Changes

Because so many people throughout the world have used Craigslist to post classifieds, and because so many of them are repeat users, any changes to the process of using the website should be thoroughly considered before being implemented. Even if a website lacks in some area of usability, making “improvements” can negatively impact users who have become accustomed to doing things a certain way.
Regular users know how the website works, and the process is usually easy for them, even if it isn’t so simple for new users. Because Craigslist is so firmly established and the community of users is so large that usability improvements that would confuse regular visitors and make it more difficult for them to use the website should be avoided at all costs.

A Preview of the Suggested Design

In the rest of the article, we’ll look at details of the suggested changes and why they’re being made, but here is a wireframe that would serve as the starting point of the proposed design. The wireframe only includes the top of the page and is in shades of gray. The proposed color scheme will be discussed later, but for now we have a layout to work with. The columns shown here have only a few items listed, but they would be extended further down the page. (Click the image for a full-sized view.)

The following image is the proposed header for secondary pages. It is essentially the same as the header on the home page (making it consistent), but it includes breadcrumb navigation.

Additionally, the header area includes slight changes when the visitor is logged in, and an account management area is added to the sidebar.

Evaluation of the Design

Now that we’ve defined the context of the website as well as the strengths and weaknesses of the current design, let’s jump into the specifics. We’ll start with the design and then move into usability issues.

1. Color

The current design of Craigslist uses very little color. In fact, aside from the default colors for links and text there is virtually no color at all. The page has a very light gray background, and slightly darker gray boxes are used to make certain pieces of text stand out. The website contains many links in the browser default color of blue. That blue is really one of the distinguishing marks of the website as a result of the sheer number of links and lack of any other color. Visited links are displayed in purple; and when hovered over, links are shown in purple with an underline.
In attempting to improve the design, some modification to the color scheme is justified. However, to keep the identity of the website intact, we won’t add too much color or too great a variety of colors. Instead, we’ll go with a monochromatic color scheme consisting of a few shades of blue. This will give the website a more appealing look, without too dramatic a change. Some grays can be mixed in as well to add some diversity and keep some of the current look.
COLOURlovers has a few monochromatic blue palettes that seem appropriate, including Cold Day:

The boxes that contain links on the home page and the community home pages can be done away with. They are one of the factors that contribute to the website’s out-of-date look, and they don’t really make text any easier to read.

2. Width

Although the width of the home page is not fixed, the table-based layout displays at about 760 pixels in the default font size. Community front pages, such as http://newyork.craigslist.org/, display at about 860 pixels. While it’s possible that the home page is kept to approximately 760 pixels to accommodate a greater number of visitors without horizontal scrolling, this is unlikely a major consideration because most visitors would be on the local community pages.
If keeping the width down to accommodate visitors with smaller screens was a major concern, the local community pages would have to be kept to a similar width, too. Because that is not the case, and because the average screen resolution is bigger, it’s safe to say that the home page could be made wider. With a wider page width, more white space could be added between columns, making the page easier on the eyes. The proposed design uses a fixed width of 960 pixels.

3. Typography

Craigslist makes very little use of special fonts. In the style sheet, “serif” and “sans-serif” are specified for the font family. Some typographical changes could subtly improve the overall look of the website, particularly the home page and the community home pages, where so many links are listed. Bold text is used for headers and sub-headers (although h1 to h6 tags are not used), but a font change here could also help.
A serif sans-serif font, like Arial, would be appropriate for the body text, with a sans-serif serif font, like Georgia, used for headers and sub-headers. Headers on the home page such as “United States”, “Europe” and “Canada” could be placed in h2 tags. Community home pages, such as the Los Angeles page shown below, could have the location name in an h2 tag, with items such as “community,” “housing” and “jobs” in h3 tags. Both h2 and h3 headers could be styled to be displayed in Georgia font.
Additionally, on the current home page and the community home pages, no capital letters are used; everything is lowercase. Capitalizing appropriate letters would look more professional and might help break up the large amount of text.

4. Branding

Obviously, no logo is used on Craigslist; only plain text is used for the website name. While a fancy logo is not necessary, a change in font could add some visual appeal to the website without causing a major change. Websites like TechCrunch and Ning have also passed on logos, but they instead have a nice branded look with a font that’s not so standard.
A simple change here would be to use an image of the word “Craigslist” in a slightly different font. (Using a text replacement tool such as sIFR is another option.) We don’t want to stray too far from the standard sans-serif font being used on the current website. Goudy Bookletter 1911 is a nice font that would allow the branding to stay very simple.

5. Icons

The community home pages, containing links to various categories of classifieds, with all of those links in the content area, can be difficult to look at. To add some visual appeal and make it a little easier for visitors to find what they want, small icons could be placed next to category titles, such as “community,” “housing,” “jobs,” “personals,” etc. Icons would not change the appearance of the page as drastically as pictures or other visual elements would, but they would make the page look better.
Certainly, other design options could be explored, but these are four particular areas that could be improved without taking away from the character of the website. Now, let’s move on to the structure of the layout.

Layout

Like design elements, the layout of the pages has an impact on both the appearance and usability of the website.

1. Tables

For starters, Craigslist’s layout is table-based. You wouldn’t expect any Web design blog to write about potential improvements to a website without mentioning the tables. The current layout could certainly be achieved without relying on tables: a CSS grid-based system is the logical alternative.

2. Header

The current website doesn’t have much of a header. In many ways, it’s good for the content to begin as high as possible on the page; but a small functional header could be used that would push the content only slightly lower down the page. The header in our redesign serves a few purposes:

• The title/branding area is slightly bigger and features a font that adds a little more variety.
• The header can introduce some color to the website.
• The header appears on every page of the website and so could contain a consistent navigation menu that visitors could easily find.

The header would still be basic in design and not add anything flashy to the website, but it would improve things by adding some consistency, color and navigation.

3. Sidebar

There is a left sidebar on both the home page and the community home pages. Some links are present on both sidebars, but some appear on only one or the other, which can be a little confusing. As a result, the effectiveness of the sidebar suffers a little bit. Additionally, the links in the sidebar on the home page have no organization. There are 15 links, but they don’t seem to be in any kind of order. We’ll relocate all 15 links to the header in our redesign and organize them by putting them into three groups of five.

In our redesign, we’ll take the sidebar off the home page and increase the amount of white space between columns in the main content area. Because there are so many columns, increasing the white space will make it easier to read the content. The sidebar on the community home pages can be improved by cleaning it up and allowing for more usability features when users are logged in (more on that in a minute).

4. Footer

Craigslist currently has no footer. The home page has a copyright notice, but community home pages have nothing at all. With a website of this size, navigation and usability could be improved by including a footer with links to the most important pages. The footer should exist throughout the website, whether you’re on the home page, a community home page, a listing of classifieds or a log-in page.

Usability

For a website like Craigslist’s, which relies so much on user interaction, usability concerns are far more important than the design or layout. For the most part, Craigslist does a pretty good job of making it easy to post classifieds, so huge changes aren’t needed, but some tweaks here and there could make a big difference.

1. Log-In Form on the Home Page

Currently there is a link on the home page for users to log in. This link takes them to a separate page with nothing on it except the typical log-in options. Once they log in, users are taken to a page that lists the classifieds that they have recently posted. The process could be made smoother by simply adding a log-in form to the home page, thus eliminating the need to click to a separate page. In our redesign, we’ve included a log-in form between the header and the main content, where it can be easily seen and accessed.

2. Link to “Create an Account” on the Home Page

Next to the form, we’ve added a link for users who have forgotten their password and a link to create a new account. Currently, there is no link to create a new account on any of page except the log-in page. This requires at least an extra click by users who want to create an account; more significantly, it assumes they know to go to the log-in page to create a new account.

3. Consistent Navigation

Using Craigslist to post classifieds, you may notice that logging in and out leaves you on pages that don’t offer many options.

This does help minimize unnecessary distractions, but if you want to leave the page, you may have to use the “Back” button on your browser or click to the home page. Earlier, we established that we wanted a consistent header throughout the website. Some pages would still be very basic, as they are now, but would have a feel that is more consistent with the rest of the website; and some of the basic navigation options would be present on all pages.
Did you forget your Craigslist password? As with most websites, there is an option to have your password emailed to you; but once the email is sent, you arrive on a page that has zero navigation options.

Your only choices are to leave the website altogether or hit the “Back” button on your browser. In fact, you would have to hit “Back” twice to reach the log-in page and three times to get to whatever page you were on before that. Most users would probably go check their email immediately, and the email does contain a link to the appropriate page, but for users who don’t want to check their email right away, this is poor usability. By putting these features on pages that have some sort of consistent navigation, the user at least has a few options.

4. Account Management

Managing your account and viewing a list of your posted classifieds is currently done only on a separate page. Once you’re logged in, this page is accessible from the sidebar. Since we’ll be moving some of the items from the sidebar to the navigation in the header, space will be freed up in the sidebar that can be used to improve usability for users who are logged in. The image below shows what would be available from the sidebar.
Users who are logged in would see a list of their recent classifieds, with the date of each post, its status, and a link to the actual page listing. All of this is currently accessible from the “My Account” page, but adding it to the sidebar would allow users to access this info just a bit more easily. The “View All” link would then take you to the “My Account” page, where everything would be listed.

Below this account management section, the sidebar would include the search box and event calendar, which are also currently located in the sidebar. If visitors are not logged in, everything would slide up to take the place of the “My Account” section.

Conclusion

While these changes would not lead to a design that wows visitors, they would help make the website more visually appealing overall and, most importantly, more usable. The goal was to create a simple design that keeps the essence of Craigslist while addressing some of its weaknesses. This is just one user’s opinion on the matter, so please share your thoughts in the comments.

The Data-Pixel Approach To Improving User Experience

There are many ways to skin a redesign (I think that’s how the saying goes). On a philosophical level, I agree with those who advocate for realigning, not redesigning, but these are mere words when you’re staring a design problem in the face with no idea where to start. This article came out of my own questions about how to make the realignment philosophy practical and apply it to my day-to-day work — especially when what’s needed is more than a few tweaks to the website here and there.
I propose an approach to redesign through realignment, by using a framework adapted from Edward Tufte’s principles on the visual display of quantitative information.

Redesign Through Realignment

Let’s recap the redesign versus realign argument. Here is Cameron Moll in “Good Designers Redesign, Great Designers Realign”:

The desire to redesign is aesthetic-driven, while the desire to realign is purpose-driven. One approach seeks merely to refresh, the other aims to fully reposition and may or may not include a full refresh.

A realignment can include a full refresh, but the starting point is not the visual layer. The starting point is an understanding of the website’s users and their objectives, of market trends and of brand strategy. These are the hard questions that guide a realignment — not a desire to try out some new fonts or see whether a +1 button would look good on the home page.
But surely a visual refresh can be beneficial, too? What’s the danger in giving users something new to look at? In an essay that builds on Cameron’s article, Francisco Inchauste sums up the problem as follows:

Great designers adjust an existing work with little disruption of the foundational design for a goal or purpose. The end result is a modification to the design that improves the user experience. Good designers, on the other hand, recreate existing work focusing on the aesthetic, with a misunderstood notion that it will always improve it. However, they end up disrupting and/or damaging the user’s experience, making no real impact with the effort.

The main problem with big redesigns, therefore, is that, even though objectively the UX might have been improved, users are often left confused about what has happened and are unable to find their way. In most cases, making “steady, relentless, incremental progress” on a website (to borrow a phrase of John Gruber) is much more desirable. With this approach, users are pulled gently into a better experience, as opposed to being thrown into the deep end and forced to sink or swim.
So, if we agree that a realignment is preferable to a redesign (and I’m sure we never will, but let’s assume we do for the sake of this article), a big question remains unanswered: What happens when a realignment requires major changes to the website? What happens when small tweaks aren’t enough, when a website’s UX is so far gone that you’re tempted to scrap everything and start over?
One way to go about it is to use a continual realignment process to redesign the website. Build a vision, and know where you’re going in the long term; but get there incrementally, not with a big-bang release. Remaining rooted in the realignment approach ensures that the focus remains purpose-driven, even if the process results in major visual changes. “That’s fine,” you say, “but how do you do it? Where do you begin with such a project?” Let’s now look at one possible approach to redesigning through realignment.

Edward Tufte And The Data-Ink Ratio

I’ve always been intrigued by Edward Tufte’s principles for visualizing large quantities of data. The Visual Display of Quantitative Information is one of my favorite books of all time. Recently, I’ve been wondering whether its principles could be applied to Web design and, specifically, the realignment process. The deeper I got into it, the more I realized that within Tufte’s principles lies a goldmine for people who make websites.

One of Tufte’s central principles in The Visual Display of Quantitative Information is what he calls data-ink:

Data-Ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented.

Before we unpack what this means for Web design, it’s important to note that Tufte’s work applies specifically to information graphics and the display of quantitative data, not to the design of graphical user interfaces. However, when carefully interpreted and applied to the field of Web design, the principles are extremely useful.
With that in mind, I propose the concept of data-pixels for the design of user interfaces to mirror Tufte’s data-ink for information graphics. In the context of Web design, we can then think of data-pixels as the simplest and most desirable path that a user can take through a flow (the “non-erasable core of an interface”). It is what would remain in “focus mode” — if nothing else existed on the screen, just the design elements that enable users to get from one screen to the next.
For example, on a payment screen, data-pixels would be the credit-card fields, text labels and “Pay now” button. Nothing else. This is obviously not possible — you need headers, payment summaries, tooltips, trust seals, etc. But the “core data” are the elements of the page that we cannot remove without the user getting stuck with no ability to recover.
From this irreducible point of the design, you can start to add other elements as necessary, and this is what Tufte’s work is all about. Much of what Tufte espouses is finding the right data-ink ratio (or what we’ll call data-pixel ratio) for quantitative data, so that the core data can shine through. He lays out five principles for data-ink. Here is an overview and how these principles can be adapted to redesign through realignment.

Principle 1: Above All Else, Show the Data

Data graphics should draw the viewer’s attention to the sense and substance of the data, not to something else.
– Edward Tufte, The Visual Display of Quantitative Information

During a realignment, we should be guided by the principle that every page should be focused on the core data and the primary task that users need to take in that particular flow. Anything else is noise and should be added only after very careful consideration.
Craig Mod has written a great article titled “The Shape of Our Future Book.” In it, he describes the “quiet confidence” that a Kindle has when it is woken from its sleep state (compared to the iPad in particular), and then he addresses the data-pixel issue as follows:

I think the same concept of “quiet confidence” can be applied to data. Namely, in designing user experiences, we need to produce data that doesn’t draw attention to itself explicitly as data.

This doesn’t mean that design has to be boring or that aesthetics are not important. It means that we need to be mindful that any layer of design we add to the core data has to serve a specific function and cannot distract from the data itself.

Image credit: Sarah Blake

Principle 2: Erase Non-Data Pixels, Within Reason

While it is true that these boring [pixels] sometimes help set the stage for the data action, it is surprising […] how often the [pixels] themselves can serve as their own stage.
– Edward Tufte, The Visual Display of Quantitative Information

Once the context for the realignment is set by the overarching principle of focusing on core data, it’s time to evaluate the design and start improving the data-pixel ratio.
The first step is to look for ways to erase non-data pixels — the parts of the design that don’t directly apply to the user’s primary task. Look for elements that cannot be connected to guiding a user to the desired outcome, such as:

• Colors that don’t support the visual hierarchy through contrast;
• Typefaces that draw attention to themselves for no good reason;
• Gratuitous imagery (stock photography in particular) that does nothing more than break up the page (consider using white space and proximity grouping to create natural breaks instead);
• Alignment, sizes and color contrast that draw unwanted attention (for example, indented paragraphs, large social-media icons, a bright ad that doesn’t fit the website’s visual style).

One website that could certainly benefit from the removal of non-data pixels is doHome. Notice the gratuitous reflection of the navigation menu, the unnecessary stock photography, and the fact that so little content on the page tells you what the website is about:

MailChimp does a good job of limiting the non-data pixels on its sign-up page. Clear language indicates what to do; large fields with top-aligned labels ensure that you complete the form quickly; some information is included about the plan you’re signing up for; and the button to sign up is big and high-contrast.

Squarespace’s sign-up page removes as much non-data pixels as possible to put all the focus on the task at hand. The background disappears as soon as you click the “Sign up” link, and you’re presented with the following zero-distraction form:

Google+ is another example of a design that employs minimal non-data pixels. As Oliver Reichenstein says:

It is extremely difficult to keep a complicated user interface so light, white and free of lines, boxes and ornaments. The content hierarchy is always clear, color definitions and consistent and clear without labeling them.

This list isn’t exhaustive, but it illustrates the purpose of the principle: to critically evaluate the visual elements in order to strip out what isn’t necessary.

Principle 3: Erase Redundant Data-Pixels, Within Reason

Gratuitous decoration and reinforcement of the data measures generate much redundant data-[pixels].
– Edward Tufte, The Visual Display of Quantitative Information

“Redundant data-pixels” refer to elements of the design that are repeated without good reason. Some examples:

• Rows of products in a table with an “Add to cart” button next to each one.
  (Consider using check boxes, with one “Add to cart” button at the bottom.)
• Animation as a way to draw attention to an element.
  (Consider using high-contrast color and size instead.)
• “Are you sure you want to do this?” dialogs for simple tasks such as adding a product to a cart.
  (For potentially catastrophic actions, like deleting an account, this type of dialog is, of course, appropriate.)

Below is an example from the offline word, courtesy of Allan Kent. The chart shows the price of parking per hour. Surely a simple sign that reads “R10 per hour” would suffice?

Note the addition of “within reason” to each of the data-pixel principles. Tufte himself acknowledges that redundant pixels are sometimes necessary:

Redundancy, upon occasion, has its uses: giving a context and order to complexity, facilitating comparisons over various parts of the data, perhaps creating an aesthetic balance.

The exception, then, is when, in Tufte’s words again, “redundancy has a distinctly worthy purpose”. A “Pay now” button at the top and bottom of a check-out page could be an example of this. One of the buttons is redundant, yet it introduces efficiency so that users don’t have to scroll up or down to place their order.
The guiding principle here is to strive for a minimalist aesthetic, adding redundant pixels only when they serve a larger purpose (for example, when they’re essential to the brand’s promise or to user efficiency).

Principle 4: Maximize the Data-Pixel Ratio, Within Reason

Every [pixel] on a graphic requires a reason. And nearly always that reason should be that the [pixel] presents new information.
– Edward Tufte, The Visual Display of Quantitative Information

Once you’ve erased as many non-data pixels and redundant data pixels as possible, the next step is to figure out what (if anything) is missing from the design. The goal of this principle is to add more pixels to the design, if necessary.
There should always be a reason for adding elements to a design, and the reason will usually be that those elements provide information and/or functionality that increases usability. Some examples:

• Breadcrumbs that tell users where they are on the website and give them an easy way to get back to where they came from.
• An aesthetic layer of color, typography, layout and so on, to ensure consistency between brand perception and the website.
• Hover states or tooltips to provide appropriate guidance or contextual help to users.

An example of necessary pixels is relevant inline error messages. Consider the sign-up form on Quora below. Very few non-data pixels are on the page. The form’s layout is simple, with no extraneous decoration. But if you try to enter only your first name, the page instantly reminds you that a full name is required:

One could argue that this isn’t technically part of the “core data” of the design. Quora could have let this slide and either allowed accounts with first names only or sorted it out after users have signed up. But it has decided that data integrity is important from the start, so it has added this real-time check.
A little closer to home, this is what the header of kalahari.com (where I currently work) looked like when I started at the company:

Identifying the non-data pixels in this design is easy: very large radii on the rounded corners, color that grabs too much attention, too many unimportant links, etc. After maximizing the data-pixel ratio to put the focus on the core data (which is search), we ended up with this header:

Principle 5: Revise and Edit

Probably, indeed, the larger part of the labour of an author in composing his work is critical labour; the labour of sifting, combining, constructing, expunging, correcting, testing: this frightful toil is as much critical as creative.
– T.S. Eliot, Selected Essays, 1917–1932

Tufte quotes T.S. Eliot to describe the relentless effort of editing and revising in graphic design work, and it’s certainly true for Web design.
Once you’ve completed a cycle through these principles, it’s time to go back and start again. Every realignment cycle exposes new opportunities to “above all else, show the data”. UX is a never-ending cycle of improvement, and following a realignment process bakes this constant cycle into the strategy in a very natural way.

Summary

As I mentioned at the beginning of this article, there are many approaches to redesigning a website. The hardest part often is knowing how and where to start. As I’ve shown, Edward Tufte’s timeless principles for the visual display of data can be adjusted and used as a framework to get over that initial hump and serve as a catalyst for a cycle of continual improvement through realignment.
What other models or approaches are there to frame a realignment project? How do you get started?