BlogmyQuery – BMQ

Have you read Where the Wild Things Are? The storybook has fluidity of content and design figured out.

It goes that one night, protagonist Max “wore his wolf suit and made mischief of one kind or another.� He hammers nails into walls, pesters a small dog. Author Maurice Sendak doesn’t explain these hijinks textually for the reader. The mischievous acts are illustrated on the right-hand pages. Readers make the narrative connections for themselves.

Photo of the book Where the Wild Things Are

The words and pictures depend on each other for completeness. Web designers can employ the same complementary dependence of graphic and text in their own work. It encourages a sense of belonging and can create strong first impressions, which are often essential to effective Web design. Because Web design is not confined to page-by-page display as storybooks are, we’ve got no excuse for neglecting Curt Cloninger’s assertions that a design “has to somehow be relevant to the content, accurately representing its purposes in the medium,� and that “the content has to be useful to the site’s audience.�

This post explains four strategies for improving fluidity of content and design, and we’ll gauge the effectiveness with which several websites use these strategies, taking special note of what we can learn from Sendak’s Where the Wild Things Are.

With Graphics As Your Witness

When editing critical papers during my undergrad, I was constantly mindful of backing up every claim I made in writing. Describing a protagonist as “yearning for a return to childhood� wasn’t enough to convince a professor unless I could refer to a passage where this was suggested.

Though published way back in 1997, Jakob Nielsen’s analysis in “How Users Read the Web� still offers a storehouse of relevant advice about how users gauge legitimacy online. He suggests that when businesses use promotional language online, they create “cognitive burdens� on their users, slowing down their experience with the website, triggering a filter by which they weigh fact against fiction.

Instead, use design to complement or convey self-promotion, easing user skepticism from the get-go.

Makr Carry Goods effectively “backs up� its content with graphics to convince users of the “news�-worthiness of its work. In the example below, the visual promotion of the products complements the text: without having to scroll over the images, we see the products themselves as being the news.

Scrolling over the images on top reveals the textual “news�:

From there, users can carry on their visual journey through the Mark Carry catalogue, enticed to read on by the persistent connection between the product and the news section, a connection that compels users to explore further.

Key to this graphic-textual connection is the visual quality of the products themselves. Without the clean white presentation and professional style, the visuals here might fail to suggest a connection with the news. But the products have been presented to impress.

Without engaging visual confirmation, content will often fail to persuade.

Take Mark Hobbs’ professional website:

He claims that he’s “not normal.� He’s “extraordinary… adaptable, loyal, ambitious and an Eagle Scout,� and he’s “like a sponge� (among other things). If he were getting points for descriptiveness, Hobbs would take first place. But he’s got no visual evidence of any of these claims. No hint at this lack of normalcy.

Besides, as Nielsen’s studies suggest, users generally dislike “marketese�: writing that is boastful, self-promotional and full of subjective claims. Then again, should claiming not to be normal be considered a boast?

Mark’s claims could have been justified by an impressive and immediate visual display of his past work. Engaging users with the strict facts of his expertise could have reinforced his textual claims.

Consider the home page of Rally Interactive:

It is “here to help you build digital things.� We know this because of the two immediate examples of its work, presented in triangles that recall other projects that required exceptional skill: the pyramids.

Rally’s folio effectively demonstrates a strategy of fluid content and design. The firm backs up its claim and provides users with an immediately useful and positive association. The visual and verbal prompts coalesce to convince users of Rally’s expertise.

Going back to Where the Wild Things Are, if Sendak hadn’t included visuals of Max’s misdoings, what sympathy could we gain for him as his mother sends him up to bed? We can interpret his “mischief� any way we choose, but Sendak’s visual direction helps us gauge what kind of protagonist (or antagonist) Max will be for the remainder of the story. Verbal prompts simply wouldn’t cut it.

Fluid content and design reduce the user’s search time and, in this case, justify the claims made textually. Users don’t have the time or willingness to hunker down and read, particularly when looking for a service. Fluid content and design convince users of the truth of a claim before they even begin to question it.

Tighten Up

Once you’ve eliminated any refutable claims, you might find your content looking a bit sparse. In fact, you want it naked: easy to scan and to the point.

Christine Anameier’s article “Improving Your Content’s Signal-to-Noise Ratio� points us in the right direction for creating tight content that isn’t afraid to depend on suggestive design to share the workload.  There will always be information that the user cannot process visually. So, what should you put in text?

Anameier suggests segmentation, prioritization and clear labeling to make the most of your content.

Segmentation

Segmentation entails sectioning content on the page according to audience or task.

The home page for Jessica Hische’s design portfolio does this effectively:

The home page targets the specific needs of users. Hische has divided the links to her services according to what particular users will be looking for, sparing us long descriptions of each service.

Hische also spares us a textual description of the quality of her service, instead pairing tight layout of text with sprawling, confident design. We can gather from the background a sense that she has clean organization. The orange ribbon font “welcomes� us and puts us at ease so that the text doesn’t have to.

Prioritization

Prioritization, as Anameier says, requires that you “understand your audiences and their tasks, and decide what your website is trying to do.� Structure your website to reflect these tasks, removing any content that strays from the path. Hische’s home page demonstrates a comprehension of her users’ purpose for visiting the website, and it wastes no words.

Content and design fluidity entails deciding what should be explained textually and what should be demonstrated graphically. Hische does not verbally boast about her quality of service. The design does that for her, conveying an array of positive attributes, from classic taste to proficient organization.

Hische recognizes that the first priority of users is not whether she’s any good, but whether she offers what they need. Once that is clarified, users will look into the quality. Keyword: look.

Creating those fluid user experiences in which content and design cohere requires, as Mark Boulton states in “A Richer Canvas,� “text that feels connected to the physical form in a binding manner that should make it invisible.� Anameier herself says that incorporating “specific and accurate link text, page titles and headings� gives users the luxury of perusing graphic elements on the page without being disrupted by navigation obstacles.

Labeling

Labeling that is structured with the user’s goals in mind will be trim and to the point, “invisible,� as Boulton suggests, so that the visual showcase enjoys some attention, too.

Tight content that follows Anameier’s guidelines will visually suggest your service’s qualities and attributes strongly. The description of the service itself will rely heavily on text, but what sets your service apart from others can be conveyed visually. Creating cohesive visual and textual discovery paths for users replicates that same sense of control that users get from the storybook.

Doodle Pad superbly utilizes segmentation, prioritization and clear labeling on its “About� page:

Carrying over the sketch-book theme to its visuals, Doodle Pad sets down user goals with clarity, displaying information directed at clients and creative professionals.

The labelling is clear and styled with familiar doodling motifs that show the user where to look for what they need. Key questions are answered, and the word count is not too shabby for a software concept.

Impressively, Doodle Pad connects the imagery and layout to the overall concept without over-informing or weighing down users with elaborate language. It gives us notebook-style notes for a notebook concept: tight and user-friendly.

Check The Narrative Voice

Curt Cloninger’s article “A Case for Web Storytelling� argues for narrative voice as being an essential consideration for Web designers who want to create engaging user experiences.

Designers are at a great advantage when it comes to synthesizing text with graphics. We can create a rich narrative tone that convinces and directs users. We are able to explore and experiment with the Web’s possibilities, going beyond Where the Wild Things Are and celebrating non-linear narratives, incorporating several kinds of interactive media.

With Web design, narrative voice need not stay put in the text. It’s more flexible that in storybooks, and Cloninger encourages us to play with that.

For instance, look at the layout for MailChimp 5.2. Toying with slogans that would look out of date on another Web page, the designers evoke nostalgia with their use of background images, color and typography, elements ripe with narrative potential:

Viewers interpret the slogans the right way because of the text’s ironic connection to the design. The “real people behind all those email addresses,� is a wink from the designers, because the viewers recognize that the “real people� in the background don’t look very “real� at all.

Users will commit to a fluid narrative online if the design fully commits to the content. And as Cloninger says, using narrative voice through Web design presents countless possibilities for exploration.

MailChimp explores one such possibility with its demo video, complete with more “wholesome� design and content:

Users can expect to be led on this retro journey through the other formats for narrative voice, as the video suggests with its old-school film-reel introduction.

The narrative voice is so woven into the content and design that MailChimp 5.2 could offer all kinds of 1950s-terrific claims and users would be moved to follow along.

MailChimp 5.2 experiments with tailoring content and design to a narrative voice, but it is effective because of its consistency. If it hadn’t committed to a particular narrative style, then the escapist spell of this user experience would have been broken.

Green Tea Design has chosen a watery, traditional Japanese-inspired design for its website. A geisha shades herself with an umbrella, looking down meekly, making for a quiet non-confrontational effect. But look at the aggressive text: “We don’t design wimpy websites that get sand kicked in their face by the competition.� The text goes on the offence, but the design doesn’t align with or enhance the narrative voice.

Try this: choose one adjective with which you’d like users to describe your website. Affix a sticky note of this adjective to the top of your monitor, and measure every sentence on your website against this adjective. Ask yourself whether the content aligns with the adjective. Now pour over your design and assess it by the same measure. We’re looking for matching sensibilities. Does your content and design align with how you want users to feel about the website?

In Where the Wild Things Are, the narrative tone is the anchor in Max’s hectic journey. Consistent, calm and matter of fact, even when Max is off dancing with the wild things, the voice elicits the reader’s trust as it sees the protagonist back to safety.

Readers settle into this consistency the way Max settles into his boat for “in and out of weeks / and almost over a year / to where the wild things are,� and again “back over a year / and in and out of weeks / and through a day.� It steadies the commotion in Max’s imagination.

Here, readers recognize the tension between the consistent content and the disruptive visuals as the mark of a superbly imaginative journey, where anything can happen, but where eventually everyone must return home.

The narrative commits to this tension until the end, when Max gets back to his room, where dinner is waiting for him, “and it was still hot.�

As a children’s storybook, Where the Wild Things Are doesn’t employ multiple forms of narrative expression. But it is an effective example of the co-dependence of playful and experimental text and visuals, in which the narrative voice incites chaos and calms the senses at the same time.

One last example of a committed narrative voice:

Recalling Gold Rush-era drama and Victorian carnival sights with its effective design elements, Forefathers maintains an adventurous tone, employing text that is consistent, descriptively appropriate and authentic.

Be Mindful Of The User Experience

As Elizabeth McGuane and Randall Snare state in “Making Up Stories: Perception, Language and the Web,� as Web users scan pages, they are “filling in the gaps-making inferences, whether they’re based on past experience… or elaborate associations drawn from our imaginations.�

Trust the user to connect the graphics and text, and expect them to want to. Cloninger says that “the more power a user has to control the narrative himself, the more a visitor will ‘own’ that narrative.�

Keep the descriptions visual. The acts of “mischief� in Where the Wild Things Are are graphic. The connection is made when both elements are harmonized into one idea. The user will be willing to read the text and view the corresponding image if both elements are compelling.

Looking at Jonathan Patterson’s effective online portfolio, we can see he has maintained a fluidity of content and design by basing the user’s experience on the motif of “fresh meat�:

Patterson’s “About� page looks like a steakhouse menu. The text on the first page hints at a description of a meal, while suggesting the page’s function. The website can be flipped through like a menu, giving the user choice and control. The text is simple and linear, mirroring the sequence of appetizer, main course and dessert in a restaurant menu. Fluid text and design help Patterson to create a particular experience with his portfolio.

Maurice Sendak employs similar tactics in Where the Wild Things Are, encouraging readers to expand their gaze to match Max’s ever-growing visual landscape. As Max moves out of his room and onto the sea, the content on the right-hand pages (otherwise bordered in thick white space) creeps over gradually, thrusting more colors onto the facing page. At one point, a sea monster appears on the left-hand page, which was otherwise reserved for text and white space.

Here is the user experience at its most polished. The change comes quietly, invisibly, but the reader is aware that something is different. The protagonist’s growth has been connected with the reader’s experience of the narrative through the placement and cohesion of text and image.

Another polished example of fluidity in content and design can be found in an actual restaurant’s website layout:

Yes, Denny’s. Look familiar? Replicating the experience of perusing a Denny’s menu, this layout shows how, in Patrick Lynch’s words, “visual design and user research can work together to create better user experiences on the Web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and the brain.�

The user controls the narrative here, with fluid navigation options that maintain the menu-like aspect of the layout, and a pleasing visual presentation that, as Lynch says, “enhances usability.� Filling in the gaps between glancing over a Denny’s menu and browsing the website, users feel encouraged to control their experience.

Conclusion

Fluidity of content and design requires that you trust users to make connections. By making the tone consistent, backing up your claims, tightening the text and being sensitive to the user’s experience, you can be assured that users will draw the conclusions you want them to draw. Designers of promotional Web projects can learn these lessons in part from storybooks such as Where the Wild Things Are, which demonstrates the essential elements of user control and delight. Trust your inner child; it won’t steer you wrong.

(al)

© Sarah Bauer for Smashing Magazine, 2011.

Javascript is one of a web designer’s best friends. Learning how to use this powerful tool to its fullest potential can prove invaluable to our work and our clients. jQuery helps make JS more accessible. jQuery is a free, fast, and concise JavaScript library that allows you to efficiently write cross-browser javascript code to make Ajax requests, animate elements, manipulate the DOM, and do a variety of user interface manipulations.

So today we are going to look at getting started with jQuery. This is the most popular javascript library available and has an extensive community working behind it, so if you are just diving in to the JS waters, jQuery is a fantastic place to begin. Below we have prepared something of a virtual resource guide for beginners to help them on this mission.

And know that if you ever get in over your head, you can always refer back to the official jQuery documentation to help get your bearings and clear up anything you are having an issue getting a grip on.

Tutorials

jQuery for Absolute Beginners is a wonderful series of 15 video tutorials that teach you exactly how to use the jQuery library starting with downloading the library and eventually working up to creating an AJAX style-switcher.

jQuery for Complete Beginners is a series of text tutorials aimed at teaching the jQuery library from scratch. This is a currently ongoing series with 4 parts already complete.

Simple Guide: How to Get Started with jQuery is a simple beginners guide that covers what jQuery is, some of the benefits of the library and takes you through writing your first simple script.

Introduction to jQuery is one of Chris Coyier’s outstanding screencasts providing a very basic introduction to including jQuery on your web page and getting started writing a few functions.

Marc Grabanski’s jQuery Essentials Slideshow is an extremely helpful, illustrated slideshow that will have you understanding the basics of jQuery in no time.

How jQuery Beginners can Test and Improve their Code offers some tips for optimizing your code by making small changes to significantly improve its readability and/or performance .

Websites

The Official jQuery Blog will keep you up to date on all things jQuery including details on new releases and how they improve the library.

The Learning jQuery blog offers jQuery tips, techniques and tutorials divided up into beginner, intermediate, and advanced categories. Though not a blog that updates frequently, it’s already a very large and useful resource.

jQuery for Designers is another site that publishes jQuery tutorials in every experience level. Only this site focuses specifically on applying web interactions using jQuery.

Visual jQuery is an interactive jQuery cheat sheet that provides a variety of sorting options with an in depth description for each element, many with examples.

jQuery HowTo is a blog with a collection of code snippets, tutorials, tips, and performance observations. This is another blog that doesn’t update often but has a vast backlog and quality content.

Tools

The jQuery Quick API Reference is a color coded and searchable jQuery cheat sheet that links directly to the official jQuery documentation for each element.

jQuery Tools : The Missing UI Library for the Web is a collection of the most important user-interface components for modern websites.

jQuery UI is an open source library of interface components built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

jQuery Plugins is a collection of just that, pretty much any kind of jQuery plugin you could hope to find. Complete with a forum for on the spot help when you need it.

Books

jQuery: Novice to Ninja is an easy to follow guide that will teach you to master all of the major tricks and techniques that jQuery offers. And while their claims that you can learn it all within hours may seem a bit ambitious, it’s still a great read for beginners.

jQuery Fundamentals is a creative commons (ie free) online book that features an in depth lesson on jQuery as well as an extensive collection of examples.

jQuery in Action is a highly lauded book where you will learn how to traverse HTML documents, handle events, perform animations, and add Ajax to your web pages. This comprehensive guide also teaches you how jQuery interacts with other tools and frameworks and how to build jQuery plugins.

Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications.

Essential JavaScript And jQuery Design Patterns is a free ebook on design patterns which are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal.

That’s a Wrap!

That concludes this gathering of jQuery resources to get you started in the Javascript game. What are your favorite or go to resources for learning this the ins and outs of this library? Where did you turn in the beginning to get a handle on jQuery? Let us know in the comments!

(rb)

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.

The country selector. It’s there when you create an account for a new Web service, check out of an e-commerce store or sign up for a conference. The normal design? A drop-down list with all of the available countries.

However, when conducting a large session of user testing on check-out usability (which we wrote about here on Smashing Magazine back in April 2011), we consistently found usability issues with the massive country selector drop-downs. Jakob Nielsen reported similar issues as far back as 2000 and 2007 when testing drop-downs with a large number of options, such as state and country lists.

So, this past summer we set out to redesign the country selector. This article focuses on the four design iterations we went through before arriving at the solution (free jQuery plugin included).

First, let’s take a closer look at the usability problems of traditional drop-down country selectors.

The Usability Issues

Drop-downs cause usability issues when used for country and state selectors for several reasons. Here are six:

1. Lack of overview
   Seeing more than 20 uncategorized options can be bewildering, and country drop-downs often offer hundreds of options (according to ISO 3166, there are 249 countries).
2. Unclear sorting
   When shown a massive list, the first thing users do is figure out the sorting logic. But because country drop-downs often include the three to five most popular options at the top, the sorting logic is unclear at first glance.
3. Scrolling Issues
   Multiple problems are related to scrolling large drop-downs. If your mouse cursor is outside of the drop-down, you will most likely scroll down the entire page, hiding the drop-down options from the screen. In other browsers, however, the drop-down will actually scroll as long as it has focus, likely leaving you with erroneous data.
4. Inconsistent UI
   The UI of drop-downs differs from browser to browser and OS to OS. The drop-down will not only look different, but will also work differently. For example, on a Mac, Safari forces you to hover on two arrows to scroll up and down, whereas Firefox provides a traditional scrollbar. Now grab your smartphone, and suddenly the UI has dramatically changed again.
5. Lack of context
   Mobile devices have very limited screen real estate, which means you have less page context when scrolling, and actually finding the option you’re looking for takes longer.
6. Breaking the flow
   Nearly all users — even those who otherwise tab through forms — will use the mouse when interacting with a drop-down, thus slowing their progress.

It All Adds Up

These usability issues are all minor interruptions that don’t occur every single time someone interacts with a drop-down country selector. But they all add up, and together with other minor usability issues on your website, they will degrade the overall user experience — ultimately leading to abandonments.

With this in mind, we set out to redesign the standard drop-down country selector. Below are the four design iterations we went through.

Iteration 1: Typing Vs. Scrolling

The easiest way to get rid of the hundreds of options and the issues related to scrolling is to simply replace the drop-down with a text field — letting the user type their country. This works only if the user knows what to type, because there would be no recognition effect (this would never work for shipping options because the user would have to guess the names of the options). But a country selector is a good candidate for a text field because it is fair to assume that every user knows the country they reside in.

Okay, so we’ve got a text field. While good for usability, it’s bad for the courier who has to deliver a product. The drop-down offered a limited number of options, whereas the text field offers infinite (the user can type whatever they want). In order to restrict the input to values (i.e. countries) that our back-end system can handle, the text field needs to auto-complete and accept a restricted set of options. This will enable us to 100% accurately map the text-field input to the countries that our back-end system (and courier) recognize.

Today, most Web users are familiar with auto-complete functionality. Google has used it for its search field since 2008 (and as an experimental feature since 2004).

Iteration 2: Typos And Sequencing

By replacing the drop-down with an auto-complete text field, we’ve introduced a new problem. While the user can be expected to know the name of their own country, they can’t be expected to know what our back end calls it. If the user lives in the US and makes an omission, such as “nited states,� or decides to type only part of the name, such as “America� (instead of “United States of America�), then no correct results would appear:

Apple’s country auto-complete field requires you to spell the name 100% correctly and in the right sequence.

This is because a typical auto-complete field will be looking for values that are not only spelled correctly, but typed in the right sequence.

Numerous Web services — and especially e-commerce stores — are geographically restricted, and international users are well aware of this. Even big websites such as Amazon, Hulu and Spotify have serious geographical limitations on some or all of their services. While someone from the US will probably expect their country to be supported, an international user who cannot find their country might abandon your website before detecting their typo.

In short, the country selector has to account for omissions and sequencing. We achieve this by simply enabling loose partial matching:

Iteration 3: When The Netherlands Isn’t Called “The Netherlands�

We’ve now taken care of typos and sequencing, but there’s yet another problem. Some country names have multiple widely accepted spellings; for example, the Netherlands is sometimes referred to as Holland. Geographically, they are the same, but the average person would say that they vacationed in “Holland,� whereas the Dutch themselves would typically spell it “Nederland.�

When we require the user to type a country name, we must consider all common spellings. This includes synonyms, local spellings, common abbreviations and country codes. A typical auto-complete (and drop-down as well) would fail when charged with all of these spellings, such as mapping USA to United States, or Schweiz, Suisse, Svizzera and Svizra to Switzerland, or DE to Germany.

From a usability point of view, this is unacceptable because these are common spellings, and people will often type them into auto-complete fields.

In our redesigned country selector, we’ve added the possibility to map multiple words to a given value:

Iteration 4: When “United States� Is More Common Than “United Arab Emirates�

Typing “United� into the auto-complete country selector on Apple’s website gives you the following list:

This list is simply sorted alphabetically. But because we don’t have to scroll through a long list anymore, there’s little reason to sort the list alphabetically. A more natural sorting order would be by popularity. Apple might want to prioritize United States, followed by United Kingdom and United Arab Emirates. Whereas a British newspaper may want to put United Kingdom first.

To accommodate for this, all values (countries) could be given a weight. By default, all would be equal, and then each website could then apply their own weighting for their most popular countries:

Solution: The Redesigned Country Selector

The solution is a redesigned country selector that addresses the issues of drop-down country selectors. It handles typos, various spelling sequences, synonyms and prioritized options.

The technically correct term for this would be something like an “auto-complete text field with loose partial matching, synonyms and weighted results.â€� That’s a bit long, so I’ve simply dubbed it the “Redesigned Country Selectorâ€� — you can try the demo here.

For those of you who own or work on a website with a country selector, I’ve decided to open-source the code. It is a simple jQuery plugin for the progressive enhancement of drop-down menus (i.e. your current country drop-down), turning them into advanced auto-complete fields in modern browsers. It comes with instructions and an FAQ.

(al)

© Christian Holst for Smashing Magazine, 2011.