Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 13 2013

13:30

Designing with Code

To code or not to code? For designers, that’s a very contentious question. Clients like designers who code because (among other reasons) that’s one less body on payroll. Design advocates, on the other hand, often see code as a technical limitation that stifles creativity. To make matters worse, the information ecologies we all work in refuse to stand still. By looking carefully at some of our favorite arguments, however –and by taking them within the context of our ever-evolving digital landscape –we can begin to make a case for when working in code makes sense.

Several years ago, Andrew Maier penned an article on the use of prototypes in website design and development. In light of my own recent work in prototyping, one of the comments to that article stood out:

Any kind of prototype that involves programming or markup sounds scary to me –that’s the fastest route to a “developer-y” looking site rather than a truly designed –graphically as well as functionally designed –site.

This comment caught my eye because it is the same concern I often hear today, a full three years later. And here’s why this is a big deal: given the content and information architecture challenges that the responsive, multi-context web presents there are now better reasons than ever before to integrate coded prototypes into the design process. By paying close attention early on to the integrity of the narratives we create at the most basic level of communication, we can build the foundation necessary to effectively articulate those narratives far and wide.

Why we’re afraid to commit

If pressed to describe their relationship with code, many designers would hunt around for the “it’s complicated” checkbox. We may have already been sold on prototyping (see Todd Zaki Warfel, Jeff Gothelf, and Stephen Hay if you’re not yet convinced), but we’re still afraid of our beautiful UX getting all bent out of shape and smudged up by an engineering toolset (and mindset).

The source of this dread is no mystery. In his seminal 2004 book on design in technology, The Inmates Are Running the Asylum, Alan Cooper writes that “when engineers invent, they arrive at their solution through a succession of practical, possible steps. Because of this, their solution will always be a derivative of the old, beginning solution, which is often not good enough.” Cooper goes on to argue that interaction designers are in a unique position to break this cycle of derivative solutions by “keep[ing] a healthy suspicion of all assumptions about what cannot be done.”
Whether they’ve read Cooper’s book or not, many designers have implicitly heeded this advice and translated it into an “I design it, you build it” workflow. In many cases, this delivers the results Cooper promises: designers and developers frequently challenge one another to synthesize new ideas and novel solutions –ideas and solutions neither of them would have been able to come up with on their own.

What’s different now

With the growing need of responsive web solutions and adaptive, flexible content, there are new reasons for designers to roll up their sleeves and get into “code.” Since HTML is, at its core, a layer of description wrapped around content, working at this level helps designers think more critically about their content and about the architectural implications of that content. While considering markup won’t replace our content audit, user research, or taxonomy work any time soon, it can increasingly function as an important part of the design process.
HTML prototyping helps us discover and vet the IA step Information Architect Dan Klyn refers to as “choreography,” or the “appropriate unfolding” of content: the link between taxonomy and the interaction-level design typically represented in prototypes. When we address the architectural underpinnings of our content’s choreography early on, we ensure that we haven’t driven off course, and left our intent on the side of the road. What’s more, the benefits of HTML prototyping present themselves when we apply even the most basic of HTML’s elements. Creating a linear, semantic document calling out our navigation, header, teaser, aside, and paragraph elements forces us to think critically about how these elements relate to each other in context.

Now look at that same document on a tablet, or on a phone. Does it tell the same story? Does (should) it follow the same choreography? We might find that our content needs to break into summaries or teasers at different places in different contexts. We might also find that the navigation patterns that work on a phone are overly simplistic with regards to the desktop experience. Each of these insights forces us to think about how our content models need to adapt to accommodate new contexts. (For an in depth and practical look at creating content models, see Sara Wachter-Boettcher’s Content Everywhere.)

Why it matters

In her brilliant book Content Strategy for Mobile, Karen McGrane encourages us to stop thinking about content in terms of “pages” and to start thinking about it in terms of “packages.” A content package might contain things like long and short headlines, teasers, summaries, body copy, and pull quotes. Early HTML prototyping helps us decide which of these elements we need –and helps us think of them as pieces that combine across contexts to create a cohesive experience.
Whereas many of the excellent, commercially available prototyping tools are centered around interaction and design, early HTML prototyping is a way for us to begin to prototype our information architecture –and to test the architectural hypotheses we’ve laid out in our conceptual and taxonomy work. It also puts us in the right frame of mind to break out to the page metaphor.

In her keynote at DrupalCon in May, Karen McGrane traces the history of the page metaphor. This ubiquitous concept comes to us –surprise –from Xerox, maker of printers. Of course they would think about content in the digital age as coming together on pages: pages have been the cornerstone of their business for over a century! When we move to thinking of content as a resource that can be pulled into view when and how it is needed, we’ve already taken a huge step toward creating the responsive and adaptive information environments we need to meet the demands of the mobile ecosphere.

How to get started

So how can you get started designing with code? Both Jeff Gothelf and Stephen Hay stress the importance of sketching. I’ll reiterate that here: although our goal is to eventually end up in code, sketching out your rough ideas before diving into markup will keep you from committing to mediocre ideas you’re reluctant to change because they’re already saved to disk.
Use pen and paper or a whiteboard to work out a hypothesis and then write your markup to match. Does it work with your content? Check it out on mobile, on a tablet. Revise and refine. Consider how your content needs to adapt to convey the same concepts in different contexts.

There’s no way around the fact that you will need to understand the basic elements of HTML and CSS. Fortunately, these are not overly complicated and online resources abound. HTML alone allows you to author structured content in a semantically correct way. CSS (with help from media queries) allows you to shape the visual hierarchy of content and adjust it to different contexts.
If you’re new to HTML and CSS, learn a little bit at a time –and fake what you can’t build. You don’t need to have a fully functional AJAX calls or form validation in order to gain insight. Stephen Hay suggests capturing and printing screenshots to show to stakeholders early in the prototyping process. This way you can show exactly the ideas you want to convey without risking stakeholders getting caught up in the fact that a button doesn’t work, or links aren’t yet connected to their destinations.
Finally, allow your process to grow and develop over time. It will. We may never strive –or want –to be standards-compliant, cross-browser, front-end rockstars, but with a little bit of knowledge, practice, and experience, HTML prototyping can become a valuable addition to our content strategy and information architecture toolkit.


The post Designing with Code appeared first on UX Booth.

August 21 2012

13:30

The Difference Between Information Architecture and UX Design

Information architects form the blueprints of the web

Next to explaining what I do for a living, the second question I most frequently hear is: “What’s the difference between Information Architecture and User Experience?” The line always seems to blur between the two, even though there’s clearly a difference. How should I go about explaining it?

Information Architecture, according to Wikipedia, is “the art and science of organizing and labelling websites … to support usability.“ According to the same source, User Experience is “the way a person feels about using a product, system or service. [This includes] a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.”

Even with regards to its definition, User Experience takes Information Architecture as its foundation and brings it to the next level.

Information Architecture concerns structure

Information Architecture is a relatively old term. Old in the sense of the web and old in the sense of our progression through technology. It focuses on the organization and structure of content in a manner in which a user can navigate through it. Digitally speaking, it can range from a simple brochure site all the way to a complex information system.

Information Architects work to create usable content structures out of complex sets of information. They do this using plenty of user-centered design methods: usability tests, persona research and creation, and user flow diagrams (to name only a few). That said, it still seems that UX design is in vogue.

And here’s why: Information Architecture comprises only small a part of a user’s overall experience.

User Experience concerns emotion

What’s User Experience then? User Experience Designers take a site’s information architecture one step further, considering not only its navigation, but also its ability to facilitate engagement. To do this, they employ user-centered design to produce a cohesive, predictable, and desirable affect in their target audience. Whoa.

UX designers turn ordinary experiences into exceptional ones

Essentially, UX designers work to make things more profound, targeting their users on an emotional level. I don’t mean “tugging at heart strings” emotional, but more eliciting an emotional response in respect to what they just accomplished. UX design adds context and story to a user’s natural behaviour and, in so doing, gives them something to take away from their experience.


The Fundamentals of Experience Design

Stephen Anderson believes that the best experiences lie at the intersection of “People, their Activities, and the Context of those activities”

You can look at it like this: UX encompasses the whole spectrum. It’s like taking a cup of IA, mixed with a dash of usability, a pinch of content strategy and whole lotta creativity. Or, even simpler, UX is the love child between a Creative Director and an Information Architect. A lot of the time this means stripping things away so you’re left with just the essence of what a user needs.

Being easy and cool

If you aren’t completely confused yet, you’re probably thinking that you need a good IA in order have a good UX. Exactly. Another way of looking at it is: User Experience Designers consider Information Architecture, but Information Architects don’t necessarily consider their users’ entire experience.

A usable experience is easy, simple and gets the job done. An engaging experience does all of that and instills a lasting impression on the user. It’s the difference between coming away from a site and thinking “That was easy” and “Whoa. That was cool.”

It’s the difference between Wunderlist and Clear.

Between Sketchbook and Paper.

Both of the former apps are good, easy, usable tools. But the latter apps are not only easy and usable, they’re fun and engaging.

It’s all in the approach

Looking at any one discipline’s workflow is a daunting task, but let’s take a quick 10,000-foot view how the workflows for IAs and UX designers might differ. Information Architects would likely consider their requirements, research their users’ goals, and conduct some form of competitive analysis. In the end, they might generate page flows, wireframes and, of course, a sitemap. Add on some usability testing, refinement and revisions, and it’s off to the designers.

UX designers, though, would likely take a different approach. Although they’ll take the IA’s workflow into consideration, they might also consider the emotional goals of their end-user. Their competitive comparison may be more around interaction models, rather than structure and layout.

Conclusion

UX builds on the foundation that IA provides, aiming to take that experience to the next level, both creatively and emotionally. This is the outstanding difference that defines how the apps, sites, and products of today are designed as opposed to those of yesterday. For those interested in more resources, I’ve included a list of links below to check out.


The post The Difference Between Information Architecture and UX Design appeared first on UX Booth.

May 08 2012

13:30

Effective Presentation of a Website’s Navigation

Users obtain information on the web in one of two ways: searching or browsing. Browsing – moving through a multi-faceted content structure – is made easier when information architects present users with an intuitive navigation hierarchy. This article discusses two techniques to that end.

There’s a great line in the Postal Service song, This Place is a Prison, that states, “It’s not a party if it happens every night.” Although the singer specifically refers to a life of too much partying, it’s a good reminder that anything that happens too regularly loses its significance.

A copier's start button appears larger than its neighboring buttons

This same concept holds true in our navigation. As humans, our brains are wired to notice contrast, things that stand out from the norm. It’s why photocopiers employ big, green start buttons. It’s also the reason that the interface on my smartphone offers a collection of colorful icons instead of just text links.

When looking for Yelp on my iPhone, I’m not scanning for the word “Yelp;” I’m scanning for a red square. This is a much faster mental calculation than exhaustively reading each application’s name. It’s clear in both cases that the designers have put prioritization and visual language to work.

Defining our terms

Prioritization is the act of giving an element prominence relative to its importance in a (navigational) hierarchy. With regards to a navigational hierarchy, this is done by first considering each element’s relationship to its user’s goals.

Prioritization is the reason why items like “Settings” or “Profile” are typically less noticeable than the primary actions on a site or application. It can be communicated in a variety of ways, but essentially prioritization means that items of more importance should call more attention to themselves.

A screenshot of harvest.com

Harvest App prioritizes more regularly used links (Reports and Timesheets) over others (My Profile)

Visual language, on the other hand, involves using visual elements to convey meaning. Often times this is done through illustration or iconography, though any visual cue that reinforces the function of an element contributes to that application’s visual language.

By way of contrast, consider text-only navigation structures – especially those that use the same font size. Without introducing/incorporating a rich visual language, these structures don’t reach their fullest communication potential. Simple visual cues go a long way towards helping users parse information because they facilitate recognition over recall.

Some well-known sites and applications make use of the calendar icon.

Hobgoblins

Unfortunately, designers often do the exact opposite in their designs. In their desire for consistency they often force users to carefully scan each item until they find what they’re looking for. Emerson once termed this kind of foolish consistency “the hobgoblin of little minds.”

Let’s take a look at a few bad examples:

Craigslist

Craigslist offers both little prioritization and a non-existent visual language. Users are required to read nearly each entry on the home page before finding the link they’re looking for.

A screenshot of craislist.org

Jimmy John’s Website

Every time I order a sandwich on the Jimmy John’s website, I find myself carefully re-reading each navigation item. For the sake of consistency, every navigation item looks the same: red, black, and white. The sandwiches at Jimmy John’s are great; the navigation, less so.

A screenshot of Jimmyjohns.com

Microsoft Metro UI

One of my favorite recent violators is the Microsoft Metro UI. This has been out for some time in the Windows Phone interface and will be arriving soon on the desktop with Windows 8. By making the home screen tiles all the same color with white lettering and white icons, the user has to read each tile instead of responding to unique icons and colors. (John C. Dvorak recently wrote a great piece about this in PC Magazine.)

Rdio iPhone App

The Rdio iPhone App interface makes the same mistake as the Microsoft Metro UI. While they do incorporate iconography, the consistency of color and size of the icons forces the user to closely scan each item. In an otherwise beautiful and successful app, I find myself repeatedly scanning the home screen options to find my desired action.

Apple iTunes

In Apple’s iTunes 10 (as well as its Finder), the sidebar items were converted from color to grayscale. In bringing consistency, Apple removed the contrast between each entry, thus requiring users to scan more closely and read labels to find the desired content. Previously, if you were looking for podcasts, you scanned for the purple icon. Now you have to scan for the word “Podcasts” because the icons run together.

Screenshots of iTunes 9 and iTunes 10

iTunes 9 appears on the left and iTunes 10 appears on the right.

Path Sliding Menu

The Path iPhone app uses a similar sliding navigation to that found in Facebook app. There is one important difference, however, in that Path does not use icons with labels whereas Facebook does. Each time I open the Path navigation, I have to read each entry until I find the one I want. With Facebook, I’m reacting to the visual patterns and selection is much faster with less cognitive load.

Screenshots of both Path and Facebook's iPhone apps

Learning by example

So now that we’ve seen them, can we avoid these hobgoblins of consistency and create more effective navigation structures? Let’s look at some good examples:

Mint

Mint has long been viewed as an exemplary user experience and they have some nice touches in areas that use highly visual navigation. The “Ways To Save” tab in particular relies on a thoughtful collection of icons for navigating.

Screenshot of mint.com

ESPN

The ESPN site has a variety of different navigation styles throughout, but I find the hover state for the primary navigation items to be particularly effective with its combination of photos, videos, and various text weights.

Screenshot of espn.com

Volkswagen of America

When browsing the vehicle model options on the Volkswagen of America website, the dropdown navigation menu combines prioritization – Sedans before Convertibles – with visual language – an iconic version of each vehicle in varying colors.

Screenshot of vw.com

Twitter Web App

The Twitter web app has a very simple interface with only a handful of links, but each is accompanied by a distinct and meaningful icon to set it apart and the most important action, composing a new tweet, is set apart in bright blue.

Screenshot of twitter.com

Instagram iPhone app

The buttons on the Instagram app effectively combine both prioritization and visual language. Each button is identified by its associated icon and the most important one (the camera) is centered and stands out with a blue background.

Screenshot of Instagram's iPhone app

EPB Fiber Optics

The EPB Fiber Optics website makes good use of varying levels of priority within the top level navigation. The primary navigation items are all in black with the most important option (“Order Now”) set off in blue.

Screenshot of epbfi.com

Guidelines for success

We’ve seen examples both good and bad, now let’s try to generalize a bit. The following guidelines can help us create more prioritized, visual navigation schemes:

  1. Pay attention to User Goals and/or Conversions

    When trying to determine how to prioritize and bring meaning to your navigation, think in terms of your users’ primary goals and/or site conversions. Make those elements prominent and easy-to-understand.

  2. Be Inconsistent

    Take inspiration from the photocopier: instead of striving to give all navigation items the same size and appearance, leverage inconsistency in your design so that the most important items receive the most visibility.

  3. Use Visual Language, not just Textual

    Where it makes sense, use icons and other visual cues to bring additional meaning to your navigation instead of using only text. This will allow the user’s brain to process more quickly by relying on pattern recognition instead of reading.

  4. Size (and Color) Matters

    Use size and color distinctions to differentiate more important links or buttons.

Final thoughts

With so many aspects to consider when designing navigation, it can be easy to fall back on convention and create more work for your users as a consequence. While there will always be situations where using these techniques doesn’t make sense, keep in mind that differentiation can be a powerful tool.

Not all navigation is created equal. By employing prioritization and visual language in your navigational elements, you’ll help users forget the navigation altogether. They way they can focus on the content they’re really after.


April 19 2012

13:30

Enhancing Your eCommerce Site’s Credibility: Part 2

In the previous part of this series I addressed the role that credibility plays in online retail sites. Because an increasing number of users are leaving these sites, it behooves us to ensure that the ones that we design are perceived favorably. I then explored a few ways to do this–to increase a retail site’s perceived credibility– including both security and ethical considerations.

Picking up where my last article left off, I’ll now discuss how certain communication and user assistance strategies can be used to further improve your perceived credibility. Let’s jump right in!

Communicate effectively

Wherever possible, information should be presented using plain language and an appropriate tone of voice. Ensure that any information you provide (including product reviews, descriptions, comparisons, policies, or disclosures, etc.) is communicated in a way that helps users’ make decisions. That is, quite often, what they’re there to do.

Provide relevant product information

Customers can feel a little like Goldilocks when trying to choose the right retail site by way of its product descriptions – some are too flowery, others include a great deal of exaggeration, and still others are too technical to convey any real meaning.

Aim to get it just right. Provide product information that’s meaningful to your users. Convey relevant information that actually helps them to discern the pros and cons of their choice. If you’re in any way unsure, conduct user testing to test your hypothesis.

Lowes.com

Lowes shows the advantages and disadvantages of a product, enabling users to make a rational buying decision.

Use product comparison tables

Though product comparison tables are common, the metrics used within them can be difficult to understand – especially when it comes to raw materials, ingredients, and industry-related jargon. Explain the meanings of all attributes – as either in-line help or tool tips – so that users can actually understand the advantages that one product might have over another.

Lenovo.com

On the Lenovo site, users can view additional information about a comparison attribute on mouse-over.

Guide users to product recall information

People are often none-the-wiser when it comes to product recalls. As usage of some products can prove hazardous, it’s imperative that you bring such products to your users’ attention.

Consider guiding users to product recalls using your site’s home page. Timely guidance shows that you not only care about your users’ safety and well-being, but that you can be trusted to do so in the future.

Target.com

Target’s product Safety & Recall page reiterates its stand on consumer safety.

Explain terms and conditions

Lengthy terms and conditions often confuse and frustrate users. Explain your terms and conditions in plain language to help users better understand the experience you wish to provide. This includes your policies related to site usage, privacy, shipping, returns, repairs, warranty, discussion forums, and commenting. Throughout, use proper paragraph breaks, categorizations, labels, and a comfortable font size.

topshop.com

Topshop’s terms and conditions have been well articulated and categorized, making it easier for users to understand the various policies and limitations.

Explain international shopping

Though online retail sites have made it easier than ever for people to shop across borders, ambiguity surrounding basic things – such as time taken for international shipping, customs duties, and return policies – can make it difficult for users to actually proceed with cross-border online shopping.

Therefore, provide information such as what products are eligible for order internationally. Explain how an international order affects delivery times, a customer’s ability to return a product, get support on a product, etc.

If your business is based out of the United States and you comply with the U.S.-EU Safe Harbor program, let your European users know that you are in compliance with their privacy protection needs. Additionally, inform users about your policies and limitations around shipping goods to a restricted area, like a US Military address (APO/FPO/DPO).

Childrensplace.com

Children’s place has an FAQ devoted to international shipping that answers some basic questions that users may have.

Provide reviews, both positive and negative

According to data released by Bazaarvoice in Talking to Strangers: Millennials Trust People over Brands, 84% of Millennials (people born between 1977 and 1995) say that user-generated content (UGC) has a significant influence on what they buy (compare that to 70% of so-called “boomers,” or folks born between 1946 and 1964). Because a huge chunk of users will likely base their opinion on what strangers’ feel about a product , its imperative that you display user-generated content in a straightforward, honest way. To avoid frustration, have a concrete policy concerning the moderation of comments, reviews, and ratings.

Make all user generated content (such as reviews) easy to comprehend. Provide a dynamic summary showing the percentage of negative and positive comments/reviews and give users the ability to sort and search for specific types of comments/reviews.

Sony.com

Sony allows users to filter comments and also provides a graphical summary of user comments of its own products.

Continuous assistance

The last credibility strategy is certainly not least: provide online shoppers with continuous assistance throughout their experience. Here are a number of ways to do that.

Prominently display contact numbers

Though contact numbers are displayed commonly on retail sites, many times they are difficult to come by during an “emergency,” such as before making a buying decision and during checkout. In these situations, it’s especially important to help users on their way. If you’ve got it, after all, why not flaunt it?

Dealsdirect.com

The customer care number on the Deals Direct site is shown at several places on product pages and persistently on the header.

Allow users to contact previous buyers

Despite their apparent trust in product reviews by strangers, users are occasionally skeptical. What if the marketing department’s “cooking the books?” To overcome such doubts, consider facilitating communication between a potential buyer and someone who has already purchased a product.

You could also invite frequent buyers or selected members of the community to support new users by guiding them through the buying process. Ask and answer-type of services and user-moderated communities are two examples of such efforts. Encouraging users to contact previous buyers will instill confidence that the information shared on your site is authentic and unbiased.

direct.tesco.com

On the direct.tesco.com site, potential buyers can get feedback directly from actual buyers.

Provide help documentation

Help is commonly provided to users in the form of manuals, write-ups, articles, descriptions, and textual how-to’s on retail sites. But that’s old hat. These days, context-sensitive help, embedded, and inline help are quite common, as is live chat.

Because of the time it takes to read documentation, users are likely to prefer a quick how-to video. Research conducted by Nielsen has shown that video consumption across multiple platforms has risen globally. About 70% of global online consumers watch online videos, while mobile video is watched by 11% globally. Considering that the adoption rate for videos is significantly high among desktop users (and catching up among mobile users), consider providing demos, how-to- videos, and interactive presentations to help users quickly understand a product or service.

made.com

Made.com provides short product videos that describes the product and helps users to visualize how the product may look physically.

Respond to feedback

The absence of a timely and sincere response – especially to negative feedback and grievances on forums linked to your site – may give the impression that you do not really care about your users and their concerns.

Always respond maturely and promptly to negative publicity, without being defensive or rude. If you have made a mistake, there is no better way than to come clean. A show of aggression or indifference, on the other hand, is best avoided at all costs.

A JetBlue representative responds on Twitter.com

In this example from its Twitter page, a JetBlue representative responds to an aggrieved flyer by informing him proactively about its Customer Bill of Rights.

Conclusion

Over the past two articles, we’ve considered many factors that may enhance or detract from the credibility of your website. Whatever mechanisms you choose, ensure that they are sustainable in the long run. Credibility and responsibility are essential qualities to the trust in any relationship.

Finally, I leave you with a rough heuristic for improving your site’s credibility:

  1. Reconsider your business’ actual stance on credibility and reflect this on your site through a mix of design and content.
  2. Consider elements that are currently on your site that (might) affect its credibility.
  3. Consider elements you could add or change on your site that would increase its credibility.
  4. Triage everything: consider what’s the easiest or fastest thing and the hardest or slowest thing you could do. Features that are relatively easy to implement include showing the total cost of a product upfront or providing navigation cues to your shipping policy. The ones that require some amount of investment, organizational motivation, and approvals include: making actual changes to policies, creating product videos, defining a plan for social engagement, etc.
  5. Put a plan into action.
  6. Implement changes in a phased manner. Give it at least three months to have an effect.
  7. Test your hypothesis using a combination of web analytics and usability testing.
  8. Keep testing and make necessary changes based on feedback till you see actual changes in users’ behavior and your Return On Investment (ROI).

You can use the above points as the base to create a realistic site strategy that has credibility at its core.

To conclude, in Fogg’s words, “those who design for credibility gain a strategic advantage,” as credibility gives site owners the power to change users’ attitudes and behaviors.

Series references


April 10 2012

13:30

Open Card Sort Analysis 101

One of the biggest problems facing information architects (IAs) today is crafting the perfect content hierarchy, one that quickly gets users to the information they’re looking for. To do this, information architects need to first query their users. How do the people browsing and/or searching this site think about its content? In search of an answer, IAs often employ card sorts; however, they inevitably produce a great deal of data. Knowing how to correctly structure and analyze that data can help architects attain the perfection they seek.

For the uninitiated: a card sort involves a bunch of cards, each representing a different function and/or content-type from the site being studied. Users are then asked to organize those cards into groups that make sense to them. You can learn the vocabulary surrounding card sorting in our Complete beginner’s guide to design research or checkout Donna Spencer and Todd Warfel’s Card sorting: a definitive guide for something more comprehensive.

Open card sorts are particularly difficult to analyze because they produce a variety of content structures. Different participants will give different names to different groups. You can try and make sense of it by identifying common traits across participants but there is always some guesswork involved. “Person 1” put cards A, B and C in a group called “transactions” but “person 2” put cards A and C in a group called ‘cash” and B in a group called “transfers.” Are these the same thing, really?

Due to a phenomenon known as confirmation bias, it’s easy for researchers to unassumingly create a site “in their own image,” confirming their mental models rather than manifesting that actual content structures that exist. To bring rigor to the process, I’ll explain a way to analyse open card sort data using R, an open source statistics language.

First, let’s use Excel, OpenCalc, or any other spreadsheet program and prepare the results of our recently finished open card sort.

Preparing the data

Open your spreadsheet program of choice and create two column headers: Participant and Group. Next, create a column for each content/functionality card used in your sort.

Create a number of rows equal to the total number of groups that resulted from your study. For example, if two participants created three groups each, you’d have six rows. Assign a row to each participant’s group and then sub-divide these rows by participant. Figure 1 exhibits the final row/column structure more clearly:

Example of cards entered into spreadsheet

Figure 1: example of cards entered into spreadsheet

In the screenshot above, you can see that the first participant (P1) created five (5) groups and the second (P2) created six (6) groups.

The columns other than “Participant” and “Group” are given names that correspond with your cards. Consider using abbreviations here because, later on, we’ll display these names in a chart where longer names are unlikely to fit well (16 characters is a good length). Column Q, for example, is called ‘See portfolio’ when it actually represents a page where users could view a portfolio of products online.

Next, mark whether each group contains a given card. If it does, that group-column pair gets a 1. If it doesn’t, it gets a 0. In the above example the cards “New_login,” “Name_supplier,” Change_contact_details,” “Change_security_questions,” and ”Change_password” appear as red, highlighted columns. Because they belong to the first participant’s fifth group – the row marked in red – they get a 1 where they intersect and a 0 elsewhere.

If the participant created a hierarchy, make sure each level has its own row. If a card was put into two or more groups by way of that hierarchy, make sure each cells gets a 1.

Save your spreadsheet and then double-check your data. Checking is of course a boring task but you need to be certain that what you’ve entered is correct – there’s no way to tell if you made a typo later on! Finally, delete the first 2 columns (“Participant” and “Group”) and then save the spreadsheet as a CSV (comma separated value) file.

Take note of where you put it; we’ll need it in just a moment.

Get your statistics on

The rest of the work is done in a program called “R.” R is a free download with versions for all major operating systems.

Once you have a working installation of R, fire it up and you’ll see that it uses a text-based interface. Don’t worry, because all the commands you need are here in this article. Just copy and paste the following code into R and press the enter key:

  compare <- function(x1, x2) {
      x3 <- x1 + x2
      ints <- sum(x3 > 1)
      uno <- sum(x3 > 0)
      return (ints / uno)
  }

  getJaccard <- function(data) {
  	l = length(data[1,])
  	jmatrix <- matrix(nrow=l,ncol=l)
  	for (i in 1:l) {
  		for (j in i:l) {
  			s <- compare(data[i], data[,j])
  			jmatrix[i,j] <- s
  			jmatrix[j,i] <- s
  		}
  		}
  	return (jmatrix)
  }

  cardsort <- function(filename, blocks) {
      filedata <- read.table(filename, header=T, sep=",")
      data <- getJaccard(filedata)
      colnames(data) <- colnames(filedata)
      hc <- hclust(dist(t(data)), method="ward")
      hc$labels <- colnames(data)
      plot(hc, main = Sys.time())
      rect.hclust(hc, k=blocks, border="red")
  }
The functions for card sorting copied and pasted into R

Figure 2: The functions for card sorting copied and pasted into R

This code you just entered contains three functions: compare, getJaccard and cardsort.

The compare function works out the similarity of any two items by taking the number of times both were put into the same group and dividing by the same number plus the total number of times the cards were put elsewhere. This measure ranges from 0.0 to 1.0 with higher scores meaning greater similarity.

The second function, getJaccard, uses the compare function to create a matrix where each item's similarity to every other item is recorded. This is known as a similarity matrix.

The final function, cardsort, runs a cluster analysis on the similarity matrix to create a chart called a dendrogram. I've made sure the time and date are shown as the chart’s title, so if you run lots of card sorts you can tell when you did each one.

If all of this makes your head spin, the good news is that you only need to issue one more command to make it all work:

cardsort('/path/to/data.csv', numberOfGroups)

The cardsort function takes two parameters: (1) a string that indicates the location of the CSV file we created earlier and (2) an integer that indicates the number of groups to highlight in the dendrogram. You can pick any number between 2 and as many cards as you’ve analyzed. I tend to start with 3 and see what the main groups are, then repeat the analysis and increase the number incrementally until I feel happy that the groupings are making sense. In other words, play around with it!

In the example above, I've loaded a csv file called 'data.csv' and asked for 4 clusters. R then dutifully generates a chart:

The dendrogram with 4 clusters outlined.

Figure 3: The dendrogram with 4 clusters outlined.

Be sure to save a PDF copy of the chart by clicking “File” → “Save as…”

Using the results

Now let’s put our dendrogram to good use. Create a table with a number of columns equal to the number of groupings used in your chart. By way of example, the following table shows an information structure using the results of the above analysis. Next, title the columns with group names given by participants in your original study. It’s also possible to show people each group of cards and ask them what name they think summarizes the group succinctly.

The resulting groups and names are the foundations of your site’s IA as specified by its users. Remember that this information is just the starting point. Card sort data should inform the design rather than dictate it. Some elements – like “sign in” and “sign out” – often need to be available across our groups.

Group 1

Administer your profile

Group 2

Products, plans and services

Group 3

Savings & investments

Group 4

Payments

Change security questions Compare services View loan interest rates Assign a name to an account Change contact details Make a long term plan See your portfolio Cancel an invoice New log in Make a short term plan Compare products Assign a name to a supplier Change password Apply for benefits Set up supplier payments

In sum, the results you achieve during any open card sort data are “fuzzy:” both qualitative and semantically inconsistent. Analyzing them in the rigorous, quantitative way that we’ve discussed helps remove researcher bias and point the way towards the perfect content structure.

The author wishes to thank Andrew Maier for his contributions to the structure and thinking behind this article.


August 27 2010

01:47

Gridulator: Create and download grids with ease

Gridulator is a nice little tool for creating grids with customizable widths and columns.

April 27 2010

13:30

Classification Schemes (and when to use them)

This post is part of a series of posts written by the speakers of UX Lx, The premier UX conference in Lisbon, Portugal; happening on May 12th–14th. If you’re itching to meet luminaries in our field and take a trip to beautiful Portugal, hop on over to the conference site and be sure to enter code UXBOOTH2010 for a 10% discount.

When you do information architecture work you’ll realize that most sets of content can be organized in more than one way. One of the challenges for an IA project is figuring out what way works best for your audience, your content and your project’s goals.

In this article I’ll talk about a few different classification schemes you can use to organize your content, and offer tips on when and how to use each.

Alphabetic

Alphabetic schemes can be used for practically any type of information—as long as you can give an item a name, you can include it in an A-Z scheme. But that doesn’t mean alphabetic schemes are necessarily good for all content. Alphabetic schemes work best when people know what they’re looking for, know how to describe it, and the item labeling matches the words that they’re looking for. An alphabetic scheme is perfect for this type of task as people can simply scan a list of words and spot the one they’re looking for.

There are only a couple of situations where you’d use alphabetic as the main way of organizing your content—dictionaries and glossaries come to mind. But they’re great secondary schemes to a main scheme. Even as a secondary scheme they can be valuable—I’ve worked on intranets where people said “Do whatever you like, just don’t take away the A-Z.”

When people ask me about using A-Z indexes, three questions always come up. I’m not a professional indexer (indexing is an entire profession in itself) so my answers just skim the surface:

  1. Should I list things twice?

    Yes. List things under two headings where there are two common terms for something, and where you know people will use more than one term. Be conservative though—you don’t want to double the size of your index by adding extra terms. Do it only when there is a real need.

  2. Should I use more terms that are technically correct, or the words people use?

    You’ll often find that people use inaccurate, outdated or incorrect terminology. If this happens, and you know they will use these terms, add them to the A-Z index. If you’d like to educate them about correct terminology, include it alongside the more common one.

  3. Should I list every content page?

    When using an A-Z index, you usually don’t need to include every content page. You’ll probably do want to include all of your main topical pages or landing pages, though this will depend on your site structure and type of content. For example on an intranet you may have an index item for ‘Maternity leave’ but probably not for the individual pages on maternity leave.

User research is a great input into an A-Z as you should have a rich resource of the terminology people use.

The BBC A–Z index is a great way to jump straight to a program.

Geography

Geographical schemes can be used for any content with some sort of geography as a key attribute. I can’t tell you how many web and intranet project meetings I’ve been in where someone has said “We should just include a map on the home page and let people use that”. In some cases it’s a perfectly good suggestion, but in others it’s not so good.

So when is it good? There are two real criteria for a successful geographical scheme. The first is that your audience must want to access information in that way. The second is more important—they must understand the geography you’re using, often in quite a lot of detail.

One thing to consider when using a geographic scheme is the difference between using a map to display information and using a map to navigate to it. Two different uses for maps that can mean quite different things for users. Think about what you’re trying to achieve with a geographical scheme/map. Are you trying to show precisely where various objects are in the world? Or are you trying to help people get to content about a particular area. By figuring this out the map’s purpose will be clearer—a map for navigation doesn’t need to be particularly accurate, but a map for displaying information certainly does.

Geography may be good as a secondary way to access information, supporting one of the other schemes.

Last.fm shows events in my local area.

Format

A format schema organizes content around the format of the file. This is particularly common on sites such as instructional websites (where they group videos, articles and tutorials) and article websites (where they group articles, interviews and tools).

Again, it’s a fine way of organizing your content as long as your audience expects and wants to find it like that. I must admit I have my reservations. I think people think first about what they want to do and then about the format they want to see it in. If I want to find out how to do a better shoulder stand (a yoga position), I’ll want to find out about shoulder stands first before deciding whether to read instructions, watch a video or hear a description. I certainly don’t want to look in three different parts of a site to see what’s available.

Format is a great way to show people the different types of information available once they’ve found the topic.

Bunnings (my local hardware store) has a great DIY section, organized by format of the content. I’d prefer to see the topics, then choose a format.

Organizational Structure

Another scheme you’ll come across in both intranet and website work, is the structure of the organization you’re working with. This scheme comes about because it’s easy for authors—they can prepare information and put it in ‘their’ part of the site. And managers can see not only where their stuff is, but also the stuff for their section.

The biggest problem with this structure is anyone who needs the information needs to know who is responsible for it. Generally, this is a bad way of organizing information. Of all the projects I’ve worked on I’ve suggested the organization structure be retained only twice (and both were for intranets):

  • In a very small organization where everyone does know who does what. This was supported via user research.
  • In an organization where structure and rank matter a lot. In my situation, this was a Defense Department. I saw little point trying to remove the organizational structure from the intranet as the internal structure was so much a part of how they thought. It didn’t mean that staff knew who did what though, so we provided other ways for them to find information.

Task

Task-based schemes are interesting. On the surface they seem to be fairly easy—just organize the content around the main tasks that people do. But whenever I’ve tried doing this (usually because a client thinks it’s a good way to start) we end up with so many and varied tasks that it becomes too difficult. Even if we come up with a draft, we often find that most of the time a particular piece of content will apply to more than one task.

I’ve found that task-based schemes work best when:

  • There are only a small set of tasks
  • The main tasks have quite clear boundaries
  • Your content is easy to allocate to the task groups

Task-based classification schemes tend to be more suited to things like web applications more than websites and intranets. However, even something like accounting software (which is quite a task-based activity) doesn’t fit into tasks, but instead to the content types you’ll work on.

When you’re looking for tasks in your user research, keep an eye out for phrases like “I need to” or “I do”. Whatever follows is usually a task.

Paypal’s second level navigation is task–based

Audience

Audience schemes are very much like task-based schemes, in that they often sound like a good approach on the surface but are harder than they look.

Audience schemes are suitable, and only work when:

  • You can split your audience into groups, with very clear boundaries.
  • At any point in time, a user can identify which group they belong to (they may switch groups for different tasks—this is okay as long as they know where they fit each time)
  • Your content assigns across audience groups without too much overlap

Again, this is much harder than it seems. In most cases when we start along this path, it’s hard enough identifying the audiences in the first place—people cross over groups and aren’t sure who they are, and a lot of content applies to more than one group. If you have this problem, try a subject-based scheme as your primary scheme and use an audience scheme as a secondary way to help people find specific information.

Dell use an audience scheme as the top level of the site. I can never figure out whether my home-based office should be ‘Home’ or ’small business’

If you decide an audience scheme is best for your content:

  • Make sure the boundaries are clear. For example, don’t use small, medium and large—use numbers to describe what they are about.
  • Label the groups in the same way that your users will talk about them.

Something to keep in mind when creating audience schemes: you can potentially limit access to information by audience, or at least make it hard for them to find a full range of information. If your audience groups are sensitive, or it looks like you’re restricting access by audience, make sure this is what you intended.

Subject/topic

The type of classification scheme you’ll use most often is a subject scheme (or topic scheme—I use the terms interchangeably). And chances are you’ll be coming up with it from scratch. A subject scheme groups similar things together based on what they’re about.

I’ll talk some more about what makes a good subject scheme in part 4, which is about how to actually create your IA. But for now, it’s worth knowing this type of classification scheme works well for most content. (I’m yet to meet a set of content I couldn’t arrange topically.) And as long as you can do it in a way that makes sense for your audience, it will be suitable for them as well.

Combination schemes

I’ve described these classification schemes as if they are all independent. In reality you can use a combination; you could:

  • Mix up types at each level
  • Start with one type and use a different type at the next level.
  • Use more than one approach for your whole content set.

In sum, there are no hard and fast rules. The main things, as I’ve said, are that it works well for your audience, they expect to access information in this way, and it works well for your content.

About the Author

Donna’s a freelance information architect, interaction designer and writer. That’s a fancy way of saying she plans how to present the things you see on your computer screen, so that they’re easy to understand, engaging and compelling. Things like the navigation, forms, categories and words on intranets, websites, web applications and business systems.

She’s been doing this professionally since 2002, and she’s a regular speaker at Australian and international events.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl