BlogmyQuery – BMQ

Forums have been around forever, so it should come as no surprise that several plugins for the popular publishing platform WordPress provide this feature, as well as support for integrating other forum software. One project, however, has a special place in the WordPress community, and that is bbPress. This is the software created by WordPress founder, Matt Mullenweg, as a lightweight system for the WordPress.org support forums. In true open-source fashion, the bbPress project was born (at bbpress.org, of course) as a lightweight standalone alternative for forums.

The problem is that the project never really kept up the pace; and while the WordPress community wanted to use it, and bbPress saw some promising spurts of development, it never really caught up to the alternatives. Most of us who needed a forum went either with a plugin alternative that integrated perfectly or with forum software such as Vanilla.

The Facebook-inspired community plugin BuddyPress changed all that. BuddyPress, which adds groups and other membership functionality to a blog, started to ship with bbPress integrated in it. Perhaps unknowingly, some WordPress bloggers who had community features powered by BuddyPress were actually running a version of bbPress, which is enabled in the BuddyPress interface. It worked — and continues to work — great actually; because although bbPress, as standalone forum software, is way behind the competition in terms of features, sometimes all you need is a lightweight alternative, which was the idea behind bbPress all along.

bbPress 2.0 changed it all again, because bbPress has now been officially reborn as a plugin for WordPress, something that had been in the works for quite some time. This is where we stand today, with a fresh release of the first version of the bbPress plugin. In the coming weeks (or right now, depending on when you’re reading this), the plugin will get proper documentation and more support for cool functionality. That shouldn’t stop you from giving it a go right away, because getting started and taking advantage of its core functionality is easy enough.

Before we move on, we need to clear up some nomenclature:

• bbPress is a plugin for WordPress, and is sometimes referred to as bbPress 2.0 for clarity.
• bbPress 1.0 is a standalone forum that integrates with WordPress (and the BuddyPress plugin) but does not reside in WordPress’ core.
• BuddyPress is a separate plugin for WordPress that integrates with the bbPress plugin.
• BuddyPress still ships with bbPress, but you can connect to your bbPress plugin forums if you want to.

Yes, it’s all a bit messy.

Getting bbPress Up And Running

Installing bbPress is easy, because it’s available in WordPress’ plugin directory. Either install it from within WordPress, using the “Add new plugin� feature, or via FTP if you prefer to (or must) upload plugins. Then, activate the plugin, and you’re all set!

Well, not quite. You’ll want to look at some settings before starting to use the forums.

bbPress settings.

You’ll notice a new “Forums� menu under “Settings� in the admin area, along with the brand new sections “Forums,� “Topics� and “Replies,� all sporting bee-inspired icons.

Let’s look at the “Forums� settings pane first, shown above. Here you have an assortment of settings for your forums, such as whether to allow anonymous posts, how long posters should be able to edit their posts, and how many topics to show per page.

The “Archiveâ€� and “Single Slugsâ€� settings are important. These define the URLs of your forums, the posts, and the tags for posts. Choose something that fits your set-up; if you’re running an English-language website, then the default settings will probably do, but you can fine tune to your needs. Remember to go to Settings → Permalinks after making any change to the slugs, and rebuild the permalink structure by clicking the “Save Changesâ€� button on that page. If you ever have problems viewing the forums, give this a shot because it might be an issue with the permalinks, and rebuilding them might help. Also, make sure to press the “Saveâ€� button in Settings → Forums.

Where are your forums, then? Well, you’ll already know that from the Settings → Forums page, because they are located at the base slug assigned for the forums. By default, it would be forums, so you’d find them at yourdomain.com/forums/. Do yourself a favor and use pretty permalinks, because although bbPress will work without them, the URLs will look so much better if they’re pretty. That Google will thank you is just a bonus (note: an actual thank-you from Google is not guaranteed).

The forums page, without any forums unfortunately.

There we go: all set up and ready to go. Too bad there aren’t any forums, nor posts… yet!

Managing bbPress Forums

Getting bbPress set up and ready to go is a breeze, but if you actually want some action in your brand new forums, then you’ll need to create a forum. This is easily done under “Forums� in the admin area. Just click “New Forum,� and you’ll get a familiar-looking screen to create a forum.

Create a forum.

This is pretty self-explanatory. The one thing you’ll need to be careful with is the box in the top-right corner. These are the settings that enable you to control whether a forum is open or closed, whether it is a forum or a category, and who should see it. When you have created multiple forums, the “Parent� and “Order� options will show up, allowing you to nest forums (much like “Pages�) and sort them (also like Pages).

To make a long story short, with a few forums created, users will soon be able to post in your forums. Depending on your settings, they may need to sign up, but that’s a different matter and depends on what kind of website you’re running.

A forums page.

Managing “topics,� which are new posts, and “replies,� which are replies to topics, is easy enough. These show up under their respective sections in the WordPress admin area, and they behave much like posts and comments. That’s no surprise because bbPress has the same model as standard posts and Pages, using custom post types. This will also make it easy to style the bbPress forum should you want to, something we’ll look at more closely later.

Finally, one thing to know when running bbPress on a non-English website: localization projects are on GlotPress, and you can get a translation by using the options at the bottom of the entry for your selected language. You’ll need to upload these to the wp-content/plugins/bbpress/bbp-languages/ folder, and the file should be called bbpress-sv_SE.mo, where sv_SE should be swapped for your language of choice. Hopefully, we’ll be able to store these files in the wp-content/languages/ folder later, but this doesn’t work for me right now.

Extending bbPress

Although bbPress is now a WordPress plugin and not a standalone system, you’ll find plugins that extend its functionality. Quite a few actually: for displaying the latest posts in widgets, adding signatures and whatnot.

Your starting point for bbPress-related plugins is the plugins section of the bbPress website and, of course, the WordPress plugin directory (begin with a search).

One thing, though: make sure any plugin you choose is made for bbPress 2.0 (i.e. the plugin version). Older plugins made for the 1.x branch will not work.

BuddyPress And bbPress

BuddyPress, the plugin that enables you to create your own Facebook-like community on a WordPress website, work just great with bbPress. That should come as no surprise because the plugin still ships with the forum component (bbPress) built in. But this forum component is for enabling forums for your BuddyPress groups. Groups are exactly what they sound like: members can join them, even create their own (depending on your settings), and discuss various topics in them. With forums enabled for groups, every group will get a forum. This is still true with BuddyPress 1.5, despite there being a standalone bbPress plugin now. If you want forums for your BuddyPress-powered groups, then either choose an existing bbPress installation or install one in the BuddyPress settings. And yes, this is a bit confusing.

The settings page for BuddyPress forums.

With bbPress 2.0 and the shift from standalone forum software to WordPress plugin, you can rest assured that BuddyPress and bbPress still work well enough together. The option for installing forums site-wide is on the settings page for the BuddyPress forum, and it actually installs the bbPress plugin, rather than rely on the built-in forum component in the BuddyPress plugin. BuddyPress and the bbPress plugin integrate nicely out of the box, but not for group forums. Instead, your posts in the forums will show up in the BuddyPress activity stream; surely we’ll see some cool plugins in the future that leverage both BuddyPress and the bbPress plugin, tying the two even closer together.

All in all, there is no reason not to combine bbPress with BuddyPress if you need more community features than just a forum on your website.

Making bbPress Look Good

While your forums will work well out of the box, as you no doubt have gathered from the screenshots earlier in this article, you might want to make bbPress better suit the look of your website. You’ve already seen the default styles of bbPress, which you can tweak easily enough: just add CSS to your theme’s style sheet!

Doing this is easy: just inspect the code of the forums with your favorite Web inspector (such as Firebug or the built-in inspector in Chrome or Safari), and find the classes that you’ll need to style the forums.

The ul.bbp-forums class gives you control.

If you want more control, perhaps to break from the default layout of the forums, you can add additional template files to your WordPress theme. The bbPress plugin is already compatible with Twenty Ten, the previous default theme. In the bbpress folder, look at the files in bbp-themes/bbp-twentyten/ and you’ll get an idea what you can do. Simply changing the theme to Twenty Ten (instead of Twenty Eleven, which was shown earlier in this article) will give us something different and more attuned to our theme.

We get a different look when using Twenty Ten.

How you style the forums will depend on how much you want to deviate from the default look and feel. If everything is where it should be, then you’ll be able to make the forums looks good and fit your theme just by adding styles to your theme’s style sheet. But if you want to move things around a lot, then you’ll probably have to create your own template files. Consult the files in the bbpress/bbp-themes/bbp-twentyten/ folder to get an idea of what can be done, while we wait for bbPress to publish proper documentation. Because forums are really just a custom post type, you’ll likely be able to find your way around if you’ve worked with them before.

Three Websites That Use bbPress

Want to see some bbPress forums in action, other than bbPress.org itself or Twenty Ten and Twenty Eleven themes with the plugin activated?

WordPress.org

WordPress Forums

While using bbPress on WordPress.org might not exactly qualify as eating one’s own dog food, this is where it started after all.

Dropbox

Dropbox Forums

The syncing service Dropbox has been using bbPress forums for quite some time, with a pretty simple, standard look. This is just the standalone version, and it shows that bbPress is ready for prime time.

WPCandy

Discussions on WPCandy

The forums section of WPCandy is a great example of how bbPress can be easily integrated in an existing WordPress theme.

What’s Next?

Personally, I’m thrilled to see bbPress become a WordPress plugin. We’ve seen plugins that add forum features to WordPress in the past, but I haven’t been comfortable running any of them, to be honest. Whenever I’ve needed forums, I’ve used software such as the excellent Vanilla. Some people have suggested the BuddyPress plugin, but that’s a bit much if all you need is a simple forum for discussions.

With bbPress 2.0, this isn’t an issue anymore, and although documentation isn’t available yet, getting started is easy enough. You’ll probably want to add features to your forums, and that’s easy with additional plugins. And because bbPress is really just a custom post type for your WordPress website, using actual registered users, you can use existing plugins to achieve things such as moderator privileges and whatnot. We can anticipate a boom of bbPress-compatible plugins in the near future that will make our forums even better and more interesting.

For now, let’s play with what we have, which is usually more than enough.

(al)

---

© Thord Daniel Hedengren for Smashing Magazine, 2011.

When we design we have a hierarchy that we are responsible to, which is what drives us to deliver a great design. In this way, there are three groups that we effectively owe the design to. And while most of the community would agree on the three areas that we are beholden to, many of us completely prioritize them differently. Those that we owe the design or are responsible to are the client, the users, and last but certainly not least the design itself, its goals and purpose.

Naturally there are many factors that impact how we tend to prioritize them, but these are the proverbial lord and masters of our projects. The instillers of purpose in our design endeavors. Besides just being points of priority, these areas also tend to play a heavy part in the outcome and overall effectiveness of the design. So today we are going to take a look at these areas of design priority and see if we can determine which is the best hierarchy to work by.

When we design, we should know who is king in our hierarchy.

Now there is also a fourth area that sometimes gets added into this mix that we will take a brief look at as well. So for the purposes of this discussion, the four key areas that we are responsible to for our designs are the client, the users, the design itself, and our reputation (or that of the firm we work for).

Why the Hierarchy Matters?

Whenever we begin a new project there is lots of important information that we must collect in order for our design to end up being effective. There is a reason that this research phase is so vital to the project, it basically sets up the foundation that we are going to be building upon. But even after we have this foundation laid firmly in place, we still have to decide the direction to take the design. This is where the hierarchy begins to factor in.

In order to decide the best course of action, we have to know just who exactly we are building this design for. We have to apply this hierarchy to find our footing, and point us down the right path towards an effective resolution. So it becomes a matter of who we owe this design to that will help us put all of the pieces together in the best possible way.

The Who Leads to the How!

Do not misunderstand, yes design is all about providing solutions. And while so many just look at the problems that they need to address and go from there; having this hierarchy to look to while we begin assessing and addressing said problems can steer us towards much more effective solutions.

There are many who will always come down on the side of the client being at the top of this list, as they are the ones paying the bill. Others see the users as always occupying the top of this design food chain. And it is not to say that either group’s prioritization is incorrect, just that this chain does dictate so much of our course of action.

Whichever group occupies that top spot will certainly determine how we deal with any proverbial roadblocks or barriers we come up against. They will usually steer our problem solving processes as we craft the design. Dictate whether we turn (or even return) to our research to find the way forward, or whether we just consult the client for their input. Or if we just allow our egos to take over and power us through any potential problem areas in the design without any consultation whatsoever.

So the hierarchy does play an important role in the process. But it does mean more than just how we tackle any issues we may arrive at. It shapes the entire project, even if somewhat passively at times. Which is why it is good to have an idea of the sort of hierarchy we are working by.

The Client

When the client is the top priority with your design, the positions of many of the others in the hierarchy are at times, completely subjective. No matter which group falls below them, the top consideration is always given to the client’s wishes. Even when they act in complete contrast with the goals and mission of the design itself. This is pretty much the major flaw in this hierarchical structure. For there are numerous designers working in the field today who will simply cave to the client’s wishes, without even making the case for the other areas that need to be considered and would be impacted by this design decision.

Yes it is true that the client is paying for the final product, but they are also paying for our expertise. And it is a complete disservice to all of these areas of priority if we do not urge the client to allow our expertise to sometimes be the guide. This is also not saying that those who follow any of the other hierarchies will not consider the client or even end up caving to their requests. It is just saying that when the client is the top priority, those who tend to ascribe to this way of design, will often not bother challenging the will of the client. They will just cave and move on.

Where it Leads

This path of design tends to not always end up in the best of places. With compromises made without care of the outcome, but essentially to just get to the end and collect the check; the design’s effectiveness can easily become compromised. If the client decides that they want navigation elements that make moving through the design unclear and difficult for the users, and we allow this breach without attempting to make the client understand why this can hurt the project and their mission, then the fail rate climbs all around. The project’s, as well as our own.

While it is always important to respect the wishes of the client, we should always be giving weight to the other areas of design priority. But when the client leads the hierarchy, this does not often happen. And this is admittedly an easier trap to fall into for the newer, less than confident, or even the over-worked designers. For whatever reason they feel that just biting their tongue and riding it out is better than speaking up and steering the course themselves. This can often not only extend the time-frame you are dealing with, but increase the number of headaches and revisions you end up with in the end.

The Better Fit?

Perhaps for the client, a much better fit in this hierarchy is in one of the secondary spots. While they are still being considered, they are not potentially derailing the design with their (not always as informed) opinions and revisions. So while it is not always easy to do for some, just as for some clients it would not be necessarily a pleasant thing to hear, putting them first or at the top of this list is not always conducive to the best results. And framing it as such should take the sting out of adjusting the client’s position in this hierarchy.

The Users

Another popular way to top off the hierarchy is by placing the users in this highest place of priority. This is followed by many in the community, but once again, is not without its downsides. For the most part, adopting this hierarchy does tend to breed more good than bad, but especially given the temperament of the client it may not always work in our favor. Or the favor of the project for that matter. This seems like a sound route, given that the end users are who is being targeted with this design. But which areas receive priority immediately below it also raises some issues that need to be addressed.

Whichever takes the second place in this design food chain, either the clients or the design itself, will help to further decide how we proceed, but to so much of a lesser degree it seems. And potentially, we can risk losing sight altogether of anything beyond the users and how the design can be crafted around their needs. Given the amount of designers whose entire careers are focused on UI design, it is easy to see where this push for user prioritization comes from. And while there are arguments for and against placing the users atop the list, devotees of this hierarchy are hard to sway from it.

Where it Leads

When this route is opted for, the focus on the users risks becoming too fixed, and other areas begin to suffer. Mainly this user focus can cross the line and confuse the issue of the design’s true purpose. Suddenly our grip on what the design is intended to do slips and the only mission that matters, is delivering the most user friendly experience that we are able to muster. Which looks and sounds good on paper, but in practice can steer us a bit off course with regards to our client’s wishes and the design mission that was meant to be our guide.

This is not to say that the we should abandon our attempts to keep the users in mind, and make the design intuitive and friendly, but that our focus needs to be a bit more flexible when it comes to this groups place in the hierarchy. Now if we were being hired to design a truly exciting and cutting-edge user experience that needed to achieve this and little to nothing else, then having this group atop the hierarchy would be completely justified. But beyond that sort of project coming our way, is there really a need to adopt this hierarchy?

The Better Fit?

When it comes to the users, perhaps they have a better fit outside of this first position. Especially if we risk the confusion of the mission itself. This is not to suggest that consideration of the users needs to be forsaken to satisfy other areas of the design, only that other priorities considered first perhaps would lead to an overall better design that still lands comfortably in the user-friendly realm. This way they stay in our minds, but do not overrun our focus.

The Design Itself

Perhaps one of the best hierarchical leaders in this prioritization equation, is the design itself. The mission and goals that the project needs to achieve to be considered successful and effective are natural measurable benchmarks so why not use them as guideposts throughout. Whenever you encounter any sort of problem in the project, looking to where it needs to end up and working backwards can often lead us to just the solution that we were looking for.

With the clients and users still being held in close consideration, this path seems like the lesser evil, and certainly the route with the highest chances for effective designs. How can the clients argue with the mission and purpose of the design taking priority in this instance? It gives their project the most consideration, not necessarily another group (i.e. users). If it is another group’s opinion that takes priority over theirs, then there are risks of their ego and/or pride becoming threatened. As they believe their opinion should rank highest. This is not at risk with the design taking the lead.

Where it Leads

Here we have a hierarchy that pits the design’s very purpose as the highest priority, which means that the mission never has to take a back seat. Never becomes relegated to a secondary role, when in point of fact, it should always be at the top of this food chain. Any interference with this mission is easily sacrificed in this hierarchical structure, so there doesn’t even have to be much discussion. The lines become very black and white, and if any element crosses them, they automatically lose out.

This is not always a perfect recipe for success, but it certainly does take so much of the hemming and hawing, the guesswork out of it. Now this is also seen as a path where little risks are taken, as most fall back on proven solutions for achieving the goals as laid out in the beginning. But that does not always have to be the case. Just because some see this as an excuse to only play it safe, does not mean that everyone adopting this hierarchy will do the same.

Our Reputation

This is an often unfortunate addition to the hierarchy, but one that gets included sometimes nonetheless. Sometimes our reputations, or those of the firms we work for, become priorities by which we make decisions for the design. Now while it is important to always do our best work, and that may point to the necessity of adding this area of consideration into our top positions, that is rarely the case. And it often does not tend to serve the design’s best interests in the end.

There are some who would argue that naturally if we are letting consideration of our reputation take the lead, then the end results will tend to be reflective of some of our best work. If we go into it keeping our reputation held in such high regard, then how could we turn in anything other than stunning works? But it is not always the destination that matters. Sometimes it is the journey that means much more. This is often one of those cases.

Where it Leads

The main problem with this hierarchical approach is its tendency to make us completely unreasonable and difficult to deal with. When the clients come to us with their concerns, our egos intrude and cause us to dismiss them. After all, our reputation tells us that we know what is best. This is not always a good for the design, for the client, or our reputations. With so much potential for damage, perhaps it’d be best to leave this out of the hierarchy altogether.

The Better Fit?

Our reputations should always be in play, as mentioned before, driving us to perform our best, but they should never become a barrier to the project. Taking rank in our priorities over the regular hierarchy. Keeping our egos in check as we work with our clients will usually be the best thing for our reputations, as well as turning in a fine design that meets its every goal.

In Conclusion

When we look at all of the factors involved, it would seem that perhaps the best hierarchical structure to follow when prioritizing those we are responsible to for the design, would be one like this:

• #1 – The Design Itself
• #2 – The Client
• #3 – The Users

All the while embracing our reputation as a bar that we have set which this new design must meet.

Time for Your Two Cents

What are your opinions when it comes to these hierarchies? How do you prioritize your designs?

(rb)

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 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?

Front page image source: Elliot Jay Stocks

(al)

---

© Rian van der Merwe for Smashing Magazine, 2011.

Through the photographer’s lens, so much beauty can be extracted from the world around us. Even from the most unusual and unexpected places, these artists find captures overflowing with inspirational energy. Take for example those who turn their lens towards the industrial. Large metal structures, both new and aged, twisting and climbing their way into these photographers focus and becoming something beautiful.

Below we have a showcase of images that embody just what it is we are talking about. This look at industrial photography turns to the railways and factory floors and beyond to find so much of the overlooked and forgotten beauty all around us. We hope that through these amazing photographer’s work our readers find as much as inspiration as we did.

The Work

Urbanidea by gilad

Tannery by fibreciment

Generator by 187-lockdown

Unnamed Place by angelreich

Industrial Chimney by oriontrail

Ladder to Heaven by Toope

Industrial Landscape Study 1 by MichelRajkovic

Nobody Wants Me by MinasTirith

To the Next Level by calawa

Battersea Power Station by angelreich

Falls of the Shadow by Toope

Patnow Power Station in Konin by jarek78fe

Cold Night at the Mill by DragonWolfACe

kraftworks by raun

Blue Blueness of Blue Blue by darkdex52

Nuclear Power Station by Durdenyr

Industrial Starry Night by oriontrail

5343 by ZeeNiGma

Industrial Area by xrust

Zone Industrielle Portuaire 1 by makavelie

Crane Lundaren

The Beast Tribute to Gilad by lil1k

Burn the Rails by Lightsofthenights

Train-Depo, Donetsk by daily-telegraph

Steelworks by ZerberuZ

13 by ZeEnigMa

SouthStreetSeaport by janplexy

Surreal Energy III by PatrickRuegheimer

Industrial Landscape by lxrichbirdsf

Stalker 2 by Ice-Dark

Shadow of Chernobyl by Toope

Octopus by fibreciment

Silos to Heaven by vinceBM

Lipetsk by armene

Industrial Landscape by Haszczu

Night Photography Railway 2 by mara-mara

Waiting by otsego-amigo

Battle Field by fibreciment

Cement Factory 6 by DenisOlivier

The Foundry by ZeEnigMa

(rb)

The profession that dares not speak its name needs you. Digital design is the wonder of the world. But the world hasn't bothered to stop and wonder about web workers—the designers, developers, project managers, information architects slash UX folk, content strategists, writers, editors, marketers, educators, and other professionals who make the web what it is. That’s where you come in. Take the survey!