Kristina Halvorson – A Content Strategy Roadmap

Go to article

By Sean Carmichael

March 20th, 2013

Podcast: Play in new window | Download (Duration: 15:39 — 8.2MB)

[ Transcript Available ]

A beautiful design means little if it’s not useful. Content is the key to making it useful. From the outset of the design process, you must consider the content for the site. Members of the design and development teams should work alongside the content strategist to ensure the right content is delivered with the right message.

Kristina Halvorson, founder and president of Brain Traffic, is the author of Content Strategy for the Web. In her virtual seminar, A Content Strategy Roadmap, she laid out necessary tools and processes so that your audience is met with timely, appropriate content. During the live seminar, the audience asked a lot of questions of Kristina. She joins Adam Churchill to answer some of those in this podcast.

• For a content audit of a large site, is it ok to audit just a sample of pages?
• How can you convince stakeholders which content is truly valuable?
• Are there ways to deal with highly resistant stakeholders?
• When making a sample set of a content audit, how do you make sure you don’t lose long term maintenance of the pages?
• What tools are available for creating editorial calendars?

Recorded: February, 2013
[ Subscribe to our podcast via  ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Full Transcript.

---

Adam Churchill: Welcome, everyone, to another edition of the SpoolCast. Recently, Kristina Halvorson presented a wonderful virtual seminar called “A Content Strategy Roadmap.” In it, she walked us through a typical website project to demonstrate how, why, where, and when a content strategy happens. Best of all, she showed us how you can do it in your organization, too.

Hey, Kristina. Thanks for joining us again.

Kristina Halvorson: Hi, Adam. It’s my pleasure.

Adam: For those that weren’t with us for your seminar, can you give us an overview of what you talked about?

Kristina: I sure can. When people talk about content strategy, they tend to blow it up into this huge — it is. It’s a huge, complex process that has a lot of moving pieces. What I really tried to do in this seminar was focus on the basics of how to introduce content strategy and the content planning process into a relatively standard, waterfall web design process.

What we did in this seminar was, essentially, really lay out the core processes and tools that are required to make sure that your content ends up being the right content, in the right place, at the right time, to your audience, with everything from messaging to content prioritization on the page to voice and tone.

We learned how to do a content audit and what that spreadsheet should look like and how to make it as useful and usable as possible to all the people that are going to be referring to that throughout the design and development process. It really does break it down step-by-step.

I also worked to show very carefully how the different roles on a website design and development team will work with and interface with your content strategist. Really, what we called it in the presentation is more of the content wrangler, the person with whom the buck stops when it comes to the content, from the very beginning of the process all the way through launch and maintenance.

Adam: In the section where we were talking about auditing, we had a bunch of folks in the audience that were cringing because they’ve got really big sites with lots of pages and lots of information. Jonah sums it up in his question. In the case of larger sites — and he quantifies that as 100 pages or more — is a sampling of the pages OK rather than actually auditing every existing page?

Kristina: That is a great question, although I will say that my definition of a large site really is going to be anything beyond, I don’t know, 1,200, 1,500 pages. In the instance of, let’s take this 100-page site, depending on the kind of content that is in there, I do strongly recommend auditing — at least having an inventory of each page of that website.

Let me just clarify real quickly. When I talk about a content inventory, essentially what I’m talking about is a spreadsheet that just lists out all of the different pieces of content that we’re responsible for in our project teams or within the areas of our organization, where it is really just listing out the URL, the page title, potentially the page topic, and other kind of quantitative information, like when was this published, when was the last time it was touched, et cetera. When I’m talking about inventorying the content, that’s what I’m talking about.

When we’re discussing auditing the content, that is typically where we get into some more qualitative attributes, like readability, relevance to audience, things that are going to require human or editorial input.

Having said that, a site of 100 pages is really something that I think we can tackle, not just from a quantitative perspective but also from that qualitative. Now, when you get up into the 1,000, 2,000, 10,000, hundreds of thousands of pages, that sample audit is something that really will come in to be very, very useful.

I almost never recommend tackling, “We’ve got 100,000 pages. Let’s figure out how we’re going to audit this thing.” You’ve got to really prioritize top areas of content to look at, which can be based on audience interest or relevance, the content that you really need to be presenting in order to help meet your business objectives.

A really good example is if you’ve got a support section and you’re trying to drive down call quantity to customer service or to your support team, how can we take a look at that section and identify which areas we need to look at or we need to audit for best results.

So, all that said — I’m coming back around to the question, I swear. [laughs] All that said, in order to identify which parts of your content to audit, you need to identify the attributes you’re looking to get at. If you look at your business objectives — and again, let’s take the case of “We want to drive down call volume.” Well, obviously, to our support team, there are a couple of different areas that you’ll want to audit.

Probably the home page and the key landing pages throughout the product sections that people may be going to looking for that information, figuring out how you’re greeting them on the support and so on.

Those are your key landing or your way-finding pages. And then, in terms of pulling out a sample set, in this instance, identify what those templates are and then maybe pull 10 to 15 different content samples from each of those templates to really take a look at.

To summarize, we want to have what are your business objectives, who are the audiences that you need to impact or have an effect on that will help to achieve those business objectives from an activity standpoint, and then what core areas of content are they interacting with that are making or breaking the success of those objectives.

I wish it were like, “B. Always go with B.” But it’s not. It’s a complicated question, and a great question.

Adam: Somebody that owns the content, right? They’re working with lots of other folks that want their little pieces added. How do you help your sponsors understand exactly which contents are important and what’s truly necessary for the people that are using those pages? How do you get them to understand that what they’re asking for is trivial content and something they just want to have there rather than something that’s truly useful? How do you get over that hurdle?

Kristina: Another great question. Interestingly, a lot of the clients that we’re working with, this is one of the key problems that they have and why their websites are the way they are now, is that they’ve just been saying yes to everyone because there haven’t been any guidelines or benchmarks or rules when it comes to publishing content on the site or sites or elsewhere.

Really, there are a couple of core tools that we try to introduce or develop, the first of which is really trying to create, whether you want to focus on user personas or user stories, anything that would really help your internal audiences or your sponsors or your content stakeholders, owners, et cetera, understand, “Look, here’s what we know our audiences want.”

“Here’s what we know they need. Here’s what we know they are reacting to.” So that you have that hard data and user research to really be able to give it to them to provide some context to the content, the outcomes they’re really asking for or looking for.

I think that so much of our content is created and published based on assumptions of what it is we think we know about our audiences or what we think our audiences want. Any sort of tool that can be easily referenced or rolled out or made available to the content creators and requesters is really important.

Another way to do it, I think, having some sort of messaging hierarchy that exists throughout a website or an area of the website where we can begin to map back the content that people are requesting to our priority messages, whether it is throughout a section or per page, and helping them to see whether or not that content is going to actually expand upon or ladder back up to that message.

Or if it’s just something off in left field that’s nice to have, that’s, “Just in case somebody wants it, we’ll throw it out there.”

Adam: Related, Kristina, what about tips for people that are working with highly resistant stakeholders?

Kristina: Oh, yes. [laughs] This is one of the things when the content strategy conversation really started to take shape that quickly became apparent and that I think, as a web writer, I was always frustrated by, which is that so much of what we end up with for content has so little to do with anything other than personalities of our internal stakeholders or preferences or agendas or the politics.

It’s just incredible how our website is like a hotbed for political and personal strife. When you are dealing with highly resistant stakeholders, it becomes a sales process. That’s where every single person involved in the design at that process becomes a consultant, because you have to be able to identify, why is this person resistant?

What is this person afraid of? What is this person upset about? Why are they upset about it? What has happened in the past that has caused this person to push back so much on any level of change? Are they seeing guidelines as restrictions? Why are they seeing that? It becomes a lot more, at that point. Corey Vilhauer of Blend Interactive has done a really terrific job of writing about empathy in the design process.

I think maybe his work is geared more towards audience, having empathy for your audience. But in my mind, so much of the content process is learning how to empathize with resistant stakeholders in particular so that you can reach some sort of an agreement with them about, “I understand that these are what your needs are.

Now, we understand where those needs are coming from. Let’s talk about how we can align those with what we know are our user expectations and their needs so that we can get the work done and make sure that everybody is successful in this.”

It’s incredible. That can boil down to a short little paragraph on a home page, or what the subhead says on a landing page, for example. But, again, it’s making sure that people feel heard and making sure that you’re communicating clearly the context from which you are approaching the problem that will help move you forward in that conversation. Just sticking them with, “This is what the rule is,” that’s just going to put you backwards.

Adam: Laura asks a question back to the audit process and what that leaves you with. When you’re making that sample set of content audit, how do you make sure that you don’t lose long term maintenance of the pages? By maintenance, she’s talking about making sure that everything on the site is necessary, updated, and, probably most important, owned.

Kristina: In that instance, I probably would introduce… Well, let’s back up. Why is the sample audit being conducted in the first place? That is the core question there. What is it that we’re hoping to accomplish with that? Typically, in that instance, we’re looking at qualitative attributes. We’re looking at readability. We’re looking at audience relevance.

We’re looking at timeliness, to see whether or not it’s still on-brand. We’re looking at page structure. We’re looking at inconsistencies across different types of content. That’s typically, when we’re doing a sample audit, what we’re trying to get at and demonstrate in terms of the current state of the site as a whole.

When we’re talking about making sure that we have an eye on and are capturing and wrangling all of the content on the site, that becomes more of a management or, to her point, a maintenance issue. And then, in that instance, I would probably introduce more of a rolling inventory, which Lou Rosenfeld wrote about on a blog post quite some time ago.

That has been successful for many clients that I know in terms of really understanding the landscape of the site or the larger ecosystem of the website or websites that they are responsible for. And then, on a calendar, whether it’s a 6, 12, 18-month basis, really divvying up — “We are constantly going to be auditing the content on this site, checking for these specific attributes.”

Mark McCormick, who’s with Wells Fargo out in San Francisco, likened it to painting the Golden Gate Bridge, where you start at one end and you paint it section by section, and then as soon as you’re done with it, you start all over again. In that instance, if you are worrying about keeping track of all the content on your site, I would really recommend setting up some kind of an ongoing, rolling inventory like that.

Adam: One of the things that our audience is always after is the resources that our experts use. What type of editorial calendar tools do you use or recommend?

Kristina: I have yet to see anything more powerful than a simple Excel spreadsheet or Microsoft Project. I think that you can use tools like Basecamp and just set up alerts and tasks for people to manage. I will say that trying to get any kind of an automated editorial calendar, where people just seed the guidelines and deliver their stuff and it goes up and it goes live, you do have to have a person attached to it.

Think about how magazines have run for centuries at this point. There is an editorial calendar. Whether it exists in a spreadsheet or a Word doc or anything else, you’ve got to have somebody who is overseeing that and mapping the content development and ensuring that everybody’s upholding their end of the bargain.

Adam: Very cool. Thanks for circling back with us. Really appreciate it.

Kristina: Yeah, absolutely. I hope that this has been useful.

Adam: Time with you always is, so thank you.

Kristina: Oh, go on.

Adam: [laughs] To our audience, thanks for listening and for your support of the virtual seminar program.

Information Wayfinding, Part 1: A Not-So-New Metaphor

Go to article

By Tyler Tate

Published: April 1, 2013

“We perceive the world—both physical and digital—in spatialterms.”

Browsing the Web. Surfing the Net. Navigating a Web site. Traversing a hierarchy. Going back. Scrolling up and down. Returning home. We’ve seen such metaphors throughout our history of using computers to interact with information. Haphazard though they may seem be, these metaphors highlight a universal reality of human psychology: we perceive the world—both physical and digital—in spatial terms. As George A. Miller [1] observed in 1968:

“Mankind evolved in a world of space and time. Our memories evolved to record events that transpire in space and time. Modern attempts to externalise and enlarge that memory should not, and probably need not, neglect its spatiotemporal dimensions.”

Out with the Old, in with the Older

“Despite mankind’s age-old proclivity for perceiving things in the context of space and time, the majority of today’s Web experiences resemble a relatively recent invention: the book.”

Miller’s insight is as important today as when he wrote those words. However, despite mankind’s age-old proclivity for perceiving things in the context of space and time, the majority of today’s Web experiences resemble a relatively recent invention: the book. Books comprise the following:

• pages of information that are organized into sections
• a table of contents that lists those sections
• an index of all the concepts an author has mentioned in the book

The architecture of most Web sites follows this same pattern:

• pages of information that are organized into sections
• a navigation bar that lists those sections
• tag clouds or keywords for all the concepts the site mentions

This similarity is understandable. As content shifted from print to digital in the early days of the Web, we transferred our approaches from the old medium to the new one. However, while this may have been expedient at the time, the effectiveness of the book metaphor has diminished, and this metaphor is now holding us back.

The Medium Is the Message

“The time has come to adopt a more appropriate metaphor for interacting with information, one that acknowledges the spatial reality of human psychology.”

At this point, the skeptic in you might be thinking, “What difference does it make whether we think of Web sites as being book-like or spatial—just let them be Web sites.” While it’s true that Web sites certainly have an identity of their own, it’s impossible to consider them apart from the cognitive model that we use to understand them. In their influential bookMetaphors We Live By, George Lakoff and Mark Johnson convey the important role that conceptual metaphors play in our everyday lives: [2]

“Our concepts structure what we perceive, how we get around in the world, and how we relate to other people. Our conceptual system thus plays a central role in defining our everyday realities. If we are right in suggesting that our conceptual system is largely metaphorical, then the way we think, what we experience, and what we do every day is very much a matter of metaphor.”

The time has come to adopt a more appropriate metaphor for interacting with information, one that acknowledges the spatial reality of human psychology. I believe that we have such a metaphor in information wayfinding—a concept that depicts interacting with digital information as analogous to navigating a physical environment.

Wayfinding as Spatial Problem Solving

“Wayfinding has much in common with the way we know people interact with information.”

Kevin Lynch coined the term wayfinding in his 1960 book, The Image of the City. [3] Lynch recognized that a person’s ability to navigate a city relates closely to how spatially oriented that person is within the city. He quantified a city’s navigability according to its imagability—that is, the likelihood of its evoking strong images in observers, and therefore, enhancing their sense of orientation.

Architect and environmental psychologist Romedi Passini further developed the concept of wayfinding in the 1970s and 1980s. [4] Defining the term simply as “spatial problem solving,” Passini identified three interrelated cognitive processes that wayfinding requires:

1. Developing a decision plan. A person forms as precise a plan of action as possible based on his goal. For example, wanting to visit the British Museum would involve numerous intermediate decisions such as finding the nearest tube station, determining which tube line to take, finding the correct platform, and so on.
2. Executing a decision from the plan. Once the person has made a decision, he must execute it at the right place and time.
3. Processing environmental information. To execute a decision correctly, however, the person must notice and comprehend relevant information from the environment. In addition, changes in the environment—a closed tube station, for instance—frequently prompt changes to the decision plan.

Wayfinding has much in common with the way we know people interact with information. In particular, Marcia Bates’s berrypicking model of information seeking [5] portrays a process where—to paraphrase Peter Morville [6]—what you find along the way changes what you seek. Likewise, Peter Pirolli and Stuart Card’s information foraging theory [7] compares information seeking to rummaging for food in the forest, where users follow information scent as they sniff their way onward. Both models present information seeking in terms of spatial problem solving.

The Future of Information Architecture

“Information architecture is the architecture of information spaces.”—Andrea Resmini at World IA Day 2013

“If we are to build modern information environments that are coherent—that is, which are imageable and facilitate orientation—we must put the page metaphor to rest and embrace the spatial nature of information wayfinding….”

Today, we find ourselves in a world where print has gone electronic, we distribute our computing across numerous devices, and the digital and the physical have become intertwingled. If we are to build modern information environments that are coherent—that is, which are imageable and facilitate orientation—we must put the page metaphor to rest and embrace the spatial nature of information wayfinding that is so ingrained in the human psyche.

You may have noted that this is only “Information Wayfinding, Part 1.” Parts 2 and 3 will appear here on UXmatters in the coming months. In Part 2, I plan to outline four elements that make up every information environment and four strategies that people use to find their way through these environments. Then, in Part 3, I’ll look at specific design principles for crafting effective information wayfinding experiences.

Further Reading

Resmini, Andrea, and Luca Rosati. Pervasive Information Architecture: Designing Cross-Channel User Experiences. Burlington, MA: Morgan Kaufmann, 2011. Retrieved March 24, 2013.

Lynch, Kevin. The Image of the City. Cambridge, MA: MIT Press, 1960.

Arthur, Paul, and Romedi Passini. Wayfinding: People, Signs and Architecture. Columbus, OH: McGraw-Hill Book Co., 1992.

Morville, Peter. Ambient Findability: What We Find Changes Who We Become. Sebastopol, CA: O’Reilly Media, 2005.

Russell-Rose, Tony, and Tyler Tate. Designing the Search Experience: The Information Architecture of Discovery. Waltham, MA: Morgan Kaufmann, 2013. Retrieved March 24, 2013.

Bowles, Cennydd. “Wayfinding Through Technology.” Johnny Holland, September 15, 2009. Retrieved March 24, 2013.

References

[1] Miller, G. A. “Psychology and Information.” ACM SIGDOC, Volume 17, Issue 3, August 1993. Reprint.

[2] Lakoff, George, and Mark Johnson. Metaphors We Live By. Chicago: The University of Chicago Press, 1980.

[3] Lynch, Kevin. The Image and the City. Cambridge, MA: MIT Press, 1960.

[4] Arthur, Paul, and Romedi Passini. Wayfinding: People, Signs, and Architecture. Columbus, OH: McGraw-Hill Book Co., 1992.

[5] Bates, Marcia J. “The Design of Browsing and Berrypicking Techniques for the Online Search Interface.” Online Information Review, Volume 13, Issue 5, 1989.

[6] Morville, Peter, and Jeff Callender. Search Patterns: Design for Discovery. Sebastopol, CA: O’Reilly Media, 2009.

[7] Pirolli, Peter L.T. Information Foraging Theory: Adaptive Interaction with Information. New York: Oxford University Press, 2007.

Web Optimization: The Myth of the 3 Click Rule

Go to article

By Chris Wright   Oct 28, 2010     2 comments   

Forrester Report: Connect the dots of the online brand and elevate the impact of digital (Download Free)

The assumption that users must be able to access all content with a maximum of 3 clicks is simply false, and we have the data to prove it.

Website, and Intranet, design has matured almost beyond recognition since the early nineties. Copies of Frontpage have been banished to the great software cemetery in the sky, and modern content management systems allow us to develop very sophisticated systems with relative ease. As an industry we have made great strides in our tools, processes, and methodologies.

But one or two relics from the early days still remain, including a number of design myths. Anyone who is involved developing web based systems will be familiar with this request from clients:

“Users must be able to access all content with a maximum of 3 clicks”

This is generally referring to an unofficial web design rule, the '3 click rule', specifically talking about navigating to content. It suggests that a user of a website, or Intranet, should be able to find any information with no more than three mouse clicks. Any more than this and the user will become frustrated and abandon the task at hand.

It is a theory that arose very early on in the short history of website design, and as such has attached to it a certain kudos. Nobody quite knows why it is held in such high esteem, but it is very rarely questioned. Clients who contract vendors to build websites or Intranets seem particularly fond of quoting this phrase during the requirements gathering phase, and look on in horror if they are told it is no longer relevant.

A Look at the Data

Way back in 2003 User Interface Engineering (UIE) ran a very interesting article on this subject. They start their piece with a very sensible statement: "On the surface, the 3 click rule makes sense". Of course it does. We all want end users to get to the content they are looking for as quickly as possible. "Quick" surely equals less clicks? Well the short answer is "sometimes".

UIE then go on to do something few people actually do themselves, they test the rule. More accurately they carried out a meta analysis, by looking at the data from a study of 44 users attempting 620 tasks. The tests involved users clicking through a site to complete a number of tasks. In total users in the test completed nearly 8000 clicks.

The 3 click rule should show users dropping off after hitting the third click or page, when trying to complete a particular task. Tasks taking over 3 clicks should show up as unsuccessful, with a sweet spot for successful tasks hovering somewhere between 1 and 3 clicks.

The data didn't show this at all. In fact it showed users hardly quitting after 3 clicks, and often happily going up to 12 clicks in some cases. The results showed that few users gave up after 3 clicks.

Satisfaction Didn't Significantly Suffer

So users will carry on clicking, and will complete tasks that require more than 3 clicks. However this doesn't mean the users were left happy with their experience. So this was looked at as well in the test. Guess what? Fewer clicks did not result in more satisfied users. Those tasks taking more than 3 clicks were completed by happy users. Our 3 click rule is looking a little shaky to say the least.

We are all aware that statistics can be presented to prove almost any point. So let us use a little common sense as well. I agreed earlier that the guiding principle of the rule is a sound one - don't put barriers in the way of users. But much like that other web design myth, 'don't put content below the fold', it shouldn't be treated as gospel. 3 clicks is good, 5 is fine, even 10 can be. It depends on the method of navigation, the experience, the task at hand etc. It depends on the context.

Put simply getting users successfully around modern websites and Intranets is a complicated problem. Completing tasks — be that downloading files, taking part in work-flows, or updating status messages — can be equally complex. Numerous tools and techniques can help form a solution - good quality content, solid information architecture, a graphic design that works. But there is no one size fits all solution, no longer are primitive statements such as the "3 click rule" relevant. It is all about the quality of the click, not the number.

About the Author

Chris Wright is a IT consultant and technology writer currently working in London, UK. He writes extensively on web technology, Intranets, and SharePoint.

User Experience The Don Draper Way

Go to article

BY Expert Blogger Brian Solis | 02-21-2012 | 6:32 AM

This blog is written by a member of our expert blogging community and expresses that expert's views alone.

Products, pages, profiles, and entire click paths are often narcissistic by design, taking into account the needs of decision makers and stakeholders over the customers they’re designed to entice. Instead, they should be designed to evoke emotions and trigger a desired effect, regardless of platform or device.

This is part 2 in an ongoing series. 

In the development of customer-facing products, apps, displays, and destinations, businesses often miss what are among the most critical elements for true customer engagement: evoking a desired experience and sentiment.

Businesses tend to have a narrow view of customer needs or expectations. And, rather than design to evoke human emotion, journeys are designed with a "mediumalistic" approach, where platforms and devices take precedence over the human connection or aftereffect. Products, pages, profiles, and entire click paths are narcissistic by design, taking into account the needs of decision makers and stakeholders over the customers they’re designed to entice. The need to plug into trends trumps the opportunity to innovate and improve the customer journey.

In addition to taking mediumalistic approaches, businesses fall victim to what I refer to as creative endowment. This is a phenomenon in which creative professionals bestow their ideas for campaigns where technology becomes the stage for imagination, without regard for the customer experience. Instead, these ideas, no matter how brilliant, are thrust upon customer senses--what they see, hear, and touch--for the sake of executing an idea rather than evoking a sensation or designing an outcome. Regardless of the medium, this isn’t necessarily a new phenomenon. But, it is a problem.
There is a cure to creative endowment, however. To demonstrate this point, I can’t help but think back to the Mad Men episode where Don Draper presented his touching concept for Kodak’s new wheel, “The Carousel.”

In a dimly lit room and in a vulnerable voice, Draper took us on a touching journey: “Technology is a glittering lure, but there is the rare occasion where the public can be engaged at a level beyond flash…if they have a sentimental bond with the product.”

Draper told the story of his first in-house advertising job at a fur company and how his coworker, a copywriter named Teddy, explained the importance of combining "what’s new," with emotion, “He also talked about a deeper bond with a product. Nostalgia. It’s delicate, but potent. Switch it on...Teddy told me that in Greek, nostalgia literally means, 'the pain from an old wound.' It’s a twinge in your heart, far more powerful than memory alone.”

Nostalgia, indeed, is a potent play. In this gripping scene, Draper doesn’t push a creative idea for the sake of the idea; instead he takes technology and makes it human. He makes it so human, in fact, that as you watch the scene, it becomes intimate, and it becomes personal. As such, you’re reminded of your cherished memories, and for that moment, your experience joins the confluence of emotion, brand, and technology.

Here’s the important part: That scene--or, let’s pretend that was really the campaign Kodak considered--was designed to do just as I described. And, that’s the point. That campaign as conveyed would take center stage where technology, media, design, and the overall experience would be designed to evoke emotions and trigger a desired effect, in any network or any platform or device.

The ConflUX of Technology, Creative and Emotion

Whitney Hess is a user-experience strategist. It is her viewpoint that I appreciate as it aligns with what I believe to be the secret ingredient to engagement…empathy. Hess concludes that empathy builds empires. And in her presentation, "Design Principles: The Philosophy of UX," she shares something that is so profound, it serves as the very essence that most organizations miss in their engagement strategies: “User Experience is the establishment of a philosophy about how to treat people. Visual Design is the establishment of a philosophy about how to make an impact.”
In her article for UX Magazine, "Guiding Principles for UX Designers," Hess outlines 20 guiding principles that pave the way for frictionless engagement.

I’ll share 11 now and more later in the series...

1. Stay out of people’s way…provide an efficient experience.
2. Create a visual hierarchy that matches people’s needs. 
3. Limit distractions and choices.
4. Provide strong information scent.
5. Provide signposts and cues.
6. Provide context.
7. Use constraints appropriately.
8. Make actions reversible.
9. Provide feedback during the experience…design is not a monologue, it’s a conversation.
10. Make a good first impression.
11. Be emotional.

This is the beginning of an important shift where neither technology nor creative will lead the strategy for developing and steering customer experiences. Instead, intention and aspiration become the North Star. Technology and creative merely become the enablers in the delivery of magical experiences and gratifying sentiment.

The JUXtaposition of Empathy and Experience

As Hess says, “empathy build empires.” In UX, user experiences are interwoven with absorbing visual design packaged in a journey rich with empathy and desire. For UX to work, for it to mean something, architects must first feel it. See, I believe that effective engagement is inspired by the empathy that develops simply by being human. It takes a holistic approach to truly deliver an empathetic voyage. Design, channels, and devices are not enough. It takes a culture of customer-centricity to feel their challenges and ambitions and what it is that they need or do not know they need. It takes a vision, mission, strategy, and purpose.

Leadership must reimagine the future of customer relationships and not only vocalize it, but express it as a working charter. It requires nothing short of a culture shift to truly appreciate the customer for not only what they can do but also in how they feel.

Like so many things related to technology and new media, champions tend to push a bottom-up strategy. But, my point for this series is to complement the current groundswell by convincing executives and decision makers to lead top-down strategies that covey a vision for what customer experiences should involve. Then, and only then, we can inspire incredible UX to in turn bring that experience to life. Everything starts with defining a vision that articulates the view of the customer journey not just as you see it, but what it is that customer would appreciate, relate to, and value.
Vision is device and platform agnostic. But as Mr. Draper reminded us, it’s “delicate, but potent.”

Visual Design and Usability Yellow Brick Road

Go to article

by Tammy Guy

One of the main disadvantages of online shopping compared to in-store shopping is the lack of guidance. Walking into any retail location, customers may be greeted with a smiling face asking, “May I help you find what you’re looking for?” Online shoppers, on the other hand, are often forced to find their own way, and secretly wish for that smiling face to help them.

Visual designers have the power to change this scenario and pave the yellow brick road for users, creating a seamless and enjoyable browsing experience that can replace the smiling greeter at the door.

The yellow brick road is the users’ visual path. It allows them to follow a pattern to not only find their final destination, but also to always know where they are within the broader context of the site—no matter how many turns, bumps, distractions, and forks in the road they traverse along the way.

Visual paths guide users from one element to another, and allow designers to control how information is being perceived and in what order. Because readers can only absorb a certain amount of information at one time, it’s imperative to present content using a phased approach. Guide users through information-carrying areas that will help them determine which turns to take next in order to arrive at their final destination or, at a minimum, their next turn/action.

Designing Visual Paths

To begin designing visual paths, designers must label each page element (images, content, links, buttons, etc.) and determine the level of importance each has for the user. This sets the framework for the visual hierarchy and helps in making correct decisions when designing the overall visual path.
Let’s look at The New York Times’ cover page as an example.



The page is made up of text and images, which are all set in different sizes, allowing readers to skip from one headline to the next and scan the overall composition prior to deciding which article to read in depth.

The designer of this cover page decided on the following visual path and hierarchy:

Content	Heirarchy	Visual Path
1. Main Story of the day	Most Important	Look here first
2. Additional Stories	Important	Look here second
3. Article Content	Important - For interested readers	Read if you are interested

A composition may have elements that share the same level in hierarchy. In this case, it allows users to scan all the daily stories and decide which they will read, if any.

Case Study - Example Redesign of The Watchery

The image below is a product page from watchery.com. The page is busy and somewhat overwhelming, making it difficult for users to quickly scan and find imperative product information. The composition lacks visual paths, and throws users to various areas of the page without a logical flow.



Using design fundamentals such as color, type, shape and grids, one can turn the current design into an organized, cohesive, and easy to absorb page that will in turn convert shoppers into buyers.
Since I’m doing hypothetical work on a sample site for this illustration, one of the constraints is that I have no background information regarding the project, including the business decisions that were made to incorporate certain elements within the composition. Therefore, I’m leaving most of the original page elements in the layout even though I am not convinced they should stay in. For example, considering this is a product details page, one could argue that the faceted search controls on the left hand side should not be on this page.

But the constraint adds to the challenge, and serves us well for what we’re trying to demonstrate in this exercise. Instead of making the redesign easy by removing elements, I will show that we can organize elements, create visual paths and clean up the composition while keeping most elements in.
Let’s take a look at the redesigned approach and discuss some of the main differences:

1. Color: Use one to two colors that will serve as a visual path.

Select a dominant color and apply it only to key areas that are high on the overall page hierarchy. That color should be used as a yellow brick road to guide the user from one information-carrying element to another.

The Watchery selected their brand color, purple, as their dominant color. Their composition includes purple in their navigation, banner ads, buttons, labels, icons, and even as a grid in the product details tab section. Because it is used on so many different element types with varying meanings and interaction behaviors (some are links, some are not; some elements are related to the specific product, some are general promotions; etc.), users are not able to learn and trust its behavior and meaning.

Redesign

The suggested redesign still utilizes purple as the primary color but limits the number of times it is used throughout the design. This allows the color to come to the foreground and dominate the composition with its strength rather than its abundance.

A secondary color, yellow (purple’s complementary color), is used to highlight the two key actions users may select on this page. The Add to Cart and Make Offer buttons appear in the foreground with their warm tones, helping users to find them quickly and easily.

2. Type: Use consistent font style, color, and behaviors to allow users to quickly scan the page.

It has been proven time and time again: online users don’t read. Confusing them with an array of font styles and colors will only push them away from the page faster. Omit information that is not necessary and reduce the number of font styles and colors used. Assign a behavior to type elements and be consistent.

Watchery.com has at least nine font styles in their design, with a confusing range of sizes, color, and behaviors.

Redesign

The suggested redesign minimizes the number of type differences, allowing users to quickly learn patterns and behaviors and concentrate on the important content.

Read more about design and consistency in my previous article, Think Outside the Box, but Don't Forget the Box Exists.

3. Grid and shapes: Use modular grid systems supported by negative space for well balanced and organized design.

When all elements seem to lie in their intended positions, compositions are balanced and require no thinking from the user’s perspective, allowing them to concentrate on the content. Modular grids allow flexible layouts to come to life while keeping organization intact.

Watchery.com content appears unstructured, as information is separated by inconsistent background colors, shapes (content and banner borders, icons), and misaligned elements, causing users confusion and uncertainty.

Redesign

The suggested redesign opens up the grid, allowing white space to control the flow and separate elements. Fewer background colors and more consistent shapes clearly group elements together and indicate the hierarchy of information for users.

Once all elements are in place, a visual path is formed:

1. Navigation
2. Main product image and title
3. Price
4. Main calls-to-action
5. Sales and promotions to apply during checkout

Items 1 and 2 may switch places depending on how users arrive at this page. If they arrive from within the site, the first item they’ll notice will most likely be the product image and title. Users landing on this page from another site (a Google search page, perhaps) will most likely notice the navigation and logo area first to understand where they are and what the site is about, and orient themselves.

Conclusion

This example redesign is just one of many possibilities for Watchery.com and isn’t a finished product, but it makes clear the advantages of paving a yellow brick road.

Prior to redesigning a page or site, one must consider general business goals and user personas to determine element hierarchy. Once the hierarchy is set, employing graphic design fundamentals will help give users a clear visual path and direct their flow through the page and site.