The Data-Pixel Approach To Improving User Experience

Advertisement

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.

But first, a little context.

Redesign Through Realignment

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

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 follows2:

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 Gruber3) 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 Information4 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.

Tufte Book5

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 mode6” — 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 Book7.” 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.

Technology in the background8
Image credit: Sarah Blake9

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 doHome10. 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:

Do.co.za home page11

MailChimp12 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.

Mail Chimp Sign Up13

Squarespace14’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:

Squarespace Sign Up15

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

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 Kent17. The chart shows the price of parking per hour. Surely a simple sign that reads “R10 per hour” would suffice?

18

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 Quora19 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:

Quora Registration20

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.com21 (where I currently work) looked like when I started at the company:

Kalahari old header22

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:

Kalahari new header23

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–193224

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?

Front page image source: Elliot Jay Stocks25

(al)

Footnotes

  1. 1 http://www.alistapart.com/articles/redesignrealign
  2. 2 http://www.getfinch.com/finch/entry/long-live-the-redesign/
  3. 3 http://daringfireball.net/linked/2011/06/14/thurrott-ios-5-lion
  4. 4 http://www.amazon.com/Visual-Display-Quantitative-Information/dp/0961392142
  5. 5 http://www.amazon.com/Visual-Display-Quantitative-Information/dp/0961392142
  6. 6 http://www.informationarchitects.jp/en/ia-writer-for-mac/
  7. 7 http://craigmod.com/satellite/our_future_book/
  8. 8 http://twitter.com/blakey
  9. 9 http://twitter.com/blakey
  10. 10 http://www.do.co.za/
  11. 11 http://www.do.co.za/
  12. 12 http://www.mailchimp.com
  13. 13 http://www.mailchimp.com
  14. 14 http://www.squarespace.com/
  15. 15 http://www.squarespace.com/
  16. 16 https://plus.google.com/115711522874757126523/posts/6EbG2uwnE3c
  17. 17 https://plus.google.com/106699847074126281204/posts/UzhFechmQKr
  18. 18 http://plus.google.com/106699847074126281204/posts/UzhFechmQKr
  19. 19 http://www.quora.com
  20. 20 http://www.quora.com
  21. 21 http://www.kalahari.com/
  22. 22 http://www.kalahari.com/
  23. 23 http://www.kalahari.com/
  24. 24 http://www.amazon.com/Selected-Essays-T-S-Eliot/dp/0151803870/
  25. 25 http://elliotjaystocks.com/

↑ Back to topShare on Twitter

Rian is passionate about designing and building software that people love to use. After spending several years working in Silicon Valley and Cape Town, he is currently Product Design Director at Jive Software in Portland, OR. He also blogs and tweets regularly about user experience and product management.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Absolutely fantastic article.

    I haven’t read Tufte’s book, but I will after reading this post. It’s always interesting to see what principles we can apply from past ages and technologies.

    I love the comparison you used for the before and after header image: it does a great job of visualizing the concepts you’re explaining.

  2. 2

    that Sarah Blake accredited image is by Jonathan Barnbrook (barnbrook.net)

    • 3

      Rian van der Merwe

      November 15, 2011 11:16 am

      Thanks Robb. I found it on Sarah’s Instagram feed. She took the picture at an exhibit at the Victoria and Albert Museum in London. I’m assuming it was a Barnbrook exhibit.

  3. 4

    Another name could be space utilization. An area that leads the eye to oblivion always alerts the user that something is a miss, even if they lack web design/development experience. Your first example, doHome, littered with stock examples in prominent positions is my biggest gripe when web designing. I disapprove of adding media elements just to make the website “pop”. A picture is worth a thousand words, but can be frustrating to users looking for a few words.

    • 5

      Rian van der Merwe

      November 15, 2011 8:02 pm

      I agree – inappropriate use of stock photography is a huge pet peeve for me as well.

  4. 6

    Brilliant article with great structure and examples.
    Thank you for this valuable piece Rian!

  5. 7

    Why would anyone ever redesign something without thinking about the core purpose and the audience? If you’re never asking “why” and “for whom” before “how” then you really need to rethink how you approach this profession.

    • 8

      Rian van der Merwe

      November 15, 2011 8:08 pm

      Thanks for the comment, and I agree with you. That’s why I say this in the article:

      “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.”

      I also talk about remaining purpose-driven (the *why*), not just aesthetics-driven. Only after the goals and objectives have been defined should the focus turn to *how*.

      This is primarily a *how* post, yes, but it doesn’t ignore or preclude the importance of *why* and *for whom*.

  6. 9

    Great article! I’m a huge fan of Tufte’s data-density rants, and you took those ideas and adapted them well to the web. Another, related vein I’d love to see explored is the density side of things. Tufte favors showing more (and more meaningful) data in a given amount of space. His principal argument is that people can handle more. That, as it is, they’re not getting enough. I think we ought to pursue that line of thinking online. I think the web community often sees density as a problem. It’s not. Fluff is the problem. If you have a lot of info to show, show it. Just make sure it’s digestible, intelligible, and meaningful. But now I’m just ranting…

    • 10

      Rian van der Merwe

      November 15, 2011 8:13 pm

      Great point, David. A very good recent example is this Jared Spool article on what users mean when they use the word “clutter”, vs. how designers usually perceive the word: http://www.uie.com/brainsparks/2011/11/04/clutter/

      They found the following in their testing:

      “We put the old and new pages side-by-side. The new page definitely had more text, less whitespace, and more dense information design. Yet, when we asked the users to tell us which one was more cluttered, they were unamimous: the old design was the cluttered design.”

      I think that proves your point about not being afraid to show meaningful data in an elegant way.

  7. 11

    Hey Rian,

    Great Article! I especially like the way you gave concrete examples of the Tufte principles.

    Tufte’s focus is on visual design and these principles are applied to a page [or Section] inside of a website. What about when the principles are applied to the structure of the site?

    My colleague and I refer to this as the ‘Critical Path’ in our blog post, “Cut the Chute and Get on the Critical Path (to Profit)”. Basically, it’s defining and clearing the navigation path a user takes when completing primary tasks on the site. Our document to show this is the wireframe. We realize that the scope can be tighten to include the page or the section. Also, perhaps it could be widened to include the entire business or organization…

    thanks for the thought provoking post,
    Newman

    • 12
    • 13

      My Data Manager permits you to get roctnol of the cellular data. Check application data usage for your home plus roaming options. Establish usage alerts to deal with your expenses. Observe past use | usage | utilization to make sure you are buying the optimal plan and optimize how you make use of your data. Keep an eye on per app data consumption to be aware of what kind of applications are consuming the most data, as well as which applications tend to be pretty much free of charge. Economize by using your data plans more efficiently. Please be aware that My Data Manager supports Android products with 2.2+ Operating system

  8. 14

    While the article is good, I think you’re ignoring your own advice with the example of the parking sign.
    A sign like that is the best for it’s intended audience. You have no idea of how they might comprehend “R10,00 per hour” simply based on the fact they drive and park a car (and believe me there are plenty of people who would not understand the concept of ‘per hour’). Listing all hours serves 2 purposes; 1. The person reading it can quickly see exactly how much they are going to pay based on how long they will stay instead of having to calculate it in their head – they are just glancing as the drive past afterall. This saves time for audience and prevents misunderstandings. 2. Unlike the web, signage can’t changed with the click of a mouse. Computer cut vinyl signs like this are often designed to be easily changed later down the track. For example, what if the car park decides it doesn’t want as many long term parkers, so starts charging R200,00 for anything over 7 hours? Your “R10,00 per hour” formula no longer works. It’s easier & cheaper to peel off and change a couple of numbers than to make a whole new sign.

    You need to find your intended audience and display the data in a manner that balances efficient use of space with ease of use for that audience. Yes it’s great to condense and simplify, as long you don’t make them think too hard ;)

    • 15

      I’d also like to add that by making such a ginormous sign, customers have no excuse of “I didn’t see the sign!”

      It’s like Lady Gaga standing infront of you in her meat outfit holding up a “no parking” sign.

      Lastly, I’m not good at math.

    • 16

      Rian van der Merwe

      November 15, 2011 8:17 pm

      Valid point, Tristan – thanks for raising it.

      I think that’s where the “within reason” concept in all these principles come in. It’s important to identify redundant pixels (which the sign certainly has), but then make a decision on it: do we need to remove it, or does it actually serve a purpose?

      Blindly putting it up without thinking = bad.

      Recognizing it for what it is, and making a calculated design decision to keep the redundant pixels in the interest of UX = good.

  9. 17

    The author of this article deserves a cupcake.

  10. 18

    Superb article. Never thought of all these points while designing but now onwards will definetely keep in mind. This is will definetely improve the design lot.

  11. 19

    Hi Rian,

    Brilliant article, thanks.

  12. 20

    Hi Rain,

    It is a great work done by Rain, thanks for giving me “Redesign Through Realignment” article, once again thanks to you.

  13. 21

    Excellent article and very interesting link regarding user use of the word “clutter”. I’ll also be taking a look at Tufte’s book after reading this. The principles should really help us optimise our data heavy line of business Web apps.

  14. 22

    Very nice article. Redesign is not always the answer. Like it.

  15. 23

    Lovely article mate, well said.

  16. 24

    Great useful article.Nice description with example and comparision.Thank you for sharing.

  17. 25

    Very good article Rian but I have a reservation about the application of your article on your website (kalahari.com).

    When we open your website, although you have done a good job but there are too much distractions. It is simply against what you are propagating.

    There are 7 images (1 slideshow image, 1 banner below featured area, 4 game title images, 1 free delivery image) on a standard resolution. This does not allow us to focus on the main function of the website. In other words, there are too much distractions, no clear separation of sections, too many animations (featured area+Gobii image) and most of all very busy free delivery banner.

    Your design looks very good if the banner below featured area is removed then your design looks very clear.

    Also, it is better use jpg instead animated gif for your sidebar product.

    I just put your article on your website. Best of Luck

    • 26

      Rian van der Merwe

      November 16, 2011 6:37 am

      Hi Ejaz, I agree with you, which is why I’m not holding up our entire site as a good implementation of all the issues I adress in the article. We have some legacy issues that prevent us from removing some of the elements we’d like to simplify, and we’re actively working on that. This is where “Revise and Edit” comes in :)

      • 27

        Shops are designed to make you buy things you weren’t planning on buying. To do that they show it to you when your not looking for it. Same applies to websites. I use kalahari.com a lot and the search section has the hierarchy of importance. When i want something specific everything else on the site doesnt distract me too much.

        PS great to see a south african pushing out such great articles.

  18. 28

    Fantastic article and identification through your examples. It’s always important to get the user to where they want (..need) to be as quickly and easily as possible.

    Thanks for sharing!

  19. 29

    Great article Rian,

    Just came across a web-based example of Principle 3 – http://www.cassar.com.mt/ If you look at the leftmost entry of the footer you will notice redundancy in the opening hours. It could have easily be rephrased as: Mon – Fri 06:00 – 18:00, Sat 06:00 – 13:30, Sun Closed.

    Cheers thanks for sharing!

    • 30

      Rightmost entry I meant, not left!

    • 31

      Why not: Mon – Fri 6am – 6pm, Sat 6am – 1.30pm, Sun Closed.
      Personally, I hate the 24-hour clock. Probably for the same reason as Tristan dislikes the idea of a parking sign that says ‘R10 an hour’ — i.e. don’t make me have to work to find out what you’re saying. Not to mention the typographical soup of all those zeroes…

      But an absolutely fascinating take on design, Rian. Love the reinterpretation – or should that be realignment – of Tufte’s principles. Thank you. Feel quite inspired to make every pixel count.

  20. 32

    Let’s make everything grey, and suddenly it’s a better user experience…

    • 33

      Rian van der Merwe

      November 16, 2011 6:39 am

      Hi Machteld, that’s certainly not the message I’m trying to get across. As I explicitly pointed out:

      “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.”

  21. 34

    Great useful information.Thank you for sharing.

  22. 35

    Is often used to record the user’s movements and translate the captured data into inputs into the virtual simulation to provide the user with a more immersive experience to an ideal.

  23. 36

    Optimization can take the form of reducing bandwidth costs, improving end-user
    performance.

  24. 37

    Liked the article and definitely will read Edward Tufte’s book.
    I have been doing infographics recently and a lot of these principles apply to this particular form of data visualisation.

    Will definitely apply some of the article’s fundamentals in my UI/UX work.

    Here is a cool website for UI inspiration: http://littlebigdetails.com/

  25. 38

    seriously on of the best design articles I have read. thanks

  26. 39

    For this reason, care must be taken when acquiring an image on one device and
    displaying it on another, or when converting image data from one pixel format.

  27. 40

    Some real food for thought here. Great article.

↑ Back to top