In late April, I participated in the Nonprofit Technology Conference in San Francisco. With over 1400 participants, the event sold out and saw an increase in attendance by 30% in comparison to last year. Impressive given the state of the economy.

I was invited to speak on a panel to share methods and tips for designing beautiful, usable sites. From moodboards, to audience segmentation, user research tactics, and A|B testing, three consultancies and Google shared their experiences on how to strike the right balance between organizational-centric and user-centric sites. While it can be costly and time consuming, multivariate testing created a lot of buzz, particularly as Google described testing 30 shades of blue on its site, which resulted in a $10M revenue stream. The challenge with most non-profits is that they do not see the type of traffic that major retailers see in a matter of hours, and thus must be prepared to test over a longer period of time. The suggested approach was 20% traffic with a 90% confidence interval. Meaning that 20% of your site visitors interacted with the same visual element every time except 10%.

I also reconnected with Kira Marchenese from the Environmental Defense Fund (EDF) who had spoken at Forum One’s Web Executive Seminar last year on usability testing. This time, the topic was branding, and how to brand your organization’s sub-campaigns. The screenshots you see below are of EDF’s current home page (large screenshot) and two different campaigns. You can immediately identify one campaign as belonging to EDF, because of the way it ties back to the parent organization’s brand elements. The challenge with the other campaign, while beautifully designed, was that people thought it was a separate organization, and did not associate it with EDF.






























Our conference keynote, Clay Shirky, spoke of the social networks and media tools that have emerged, allowing masses to organize themselves outside of the traditional organizational boundaries. Should you choose to insert yourself into that community, Network for Good provided tips on communication and content strategy for social media, for organizations aiming to connect and build trust with their community.

1. Think before you write. The tools you use won’t improve the message.
   
2. Your audience is not an audience. Two way communications are the norm and are most effective at engaging.
   
3. Be humble, acknowledge others
   
4. Cater to emotions. Humans use emotions to make decisions, and then use logic to justify their choices.
5. Humor can be effective.
   
6. Simplicity is more digestable, keep the information overload to a minimum, otherwise you run the risk of losing your following.

For more nuggets from other presentations, see the following:


• Andrew Cohen covers social marketing tips for getting traffic, attention, and subscribers online
  
• Michaela Hackner provides highlights of her sessions, including great tips for better storytelling online
  
• Jo Ryden on cloud computing
  

The New York times released a recent article about a site mashing-up google maps and Prop 8 donors. The result? Public access to names and addresses of people in a handful of states who have financially supported the ban of same-sex marriages in the state of California. The Google API makes the map design recognizable and easy to use.

According to California law, details on contributions of $100 or more are available for public access.

The down side has included harassing letters, phone calls and emails to some of the listed donors. One University of California professor explained that despite his support of civil unions for gay couples, he made a $100 contribution because he didn't want to change the traditional definition of marriage. Following his donation, a dozen of his colleagues and supervisors were copied on an email sent to him berating his involvement in supporting Prop 8.

From nytimes.com,

Eightmaps.com is the latest, most striking example of how information collected through disclosure laws intended to increase the transparency of the political process, magnified by the powerful lens of the Web, may be undermining the same democratic values that the regulations were to promote.

Where does one draw the line between open government and protecting democratic rights? A professor at Georgetown proposed that state sites disclosing donor information should ask people interested in downloading the data to provide identification through a credit card.

Equal transparency on both ends, is that where this is headed? What do you think of using the web to expose people's support of specific policy?

Earlier this year, the University of Baltimore (UB) conducted usability testing on Drupal's admin interface with web developers already familiar with other CMS in the same space, but with no prior Drupal experience.

Users mostly struggled with nomenclature, key functionality burried within dropdown lists, and understanding that the administrative menu is overlaid on top of the actual site, leading to confusion about how to preview work and test links that were created. One developer commented "it's hard to visualize what the structure of the site is at this point, what it looks like". UB recommended that the default Drupal theme should visually distinguish between admin and non-admin controls.

The video resolution is low, but worth following if you're already familiar with Drupal's admin interface - http://video.google.com/videoplay?docid=-3942663057311698508&hl=en

Additional findings, coupled with an earlier study done by the the University of Minnesota can be found on Drupal's site. Some interesting comments followed as well.

Keith LaFerriere published an interesting article today on A List Apart about communicating the value of Information Architecture (IA) to clients, and outlining deliverables by phases.

Keith does a thorough job of outlining the various deliverables that are produced in sequence, and incorporates a brief description of each one. This is a particularly useful overview of artifacts for someone who is unfamiliar with what an information architect produces.

What seemed to be missing from the article was an explanation of how information architecture works with other strategies to provide an optimal solution -- interaction design, graphic design, and so on. Therein lies the true value of a good information architect - someone who considers the complete user experience across these various disciplines, not someone who works in isolation on the IA.

On a side note, I found myself wishing the deliverable tables were presented as a swim lane diagram to more easily see phase:deliverable mapping.

(thanks OM)

On Thursday, May 8th at the Press Club in downtown D.C., a handful of organizations will discuss how they approached user-centered design tactics during their redesign efforts.

Hosted by Forum One, the distinguished panel includes:

• Claudette Archambault, Principal IT Specialist at U.S. Senate
  
• Steven Fuchs, Information Architect/Designer at Broadcasting Board of Governors
  
• Sanjay Koyani, Director, FDA Web Communications
  
• Kira Marchenese, Director, Internet Communications at Environmental Defense Fund
  

From usability testing in multiple languages, to audience research considerations for an intranet, this promises to be a very entertaining 3 hours!

Sign up for the event at: www.forumone.com/audiences

Hope to see you there!

***
Putting Online Audiences First, Again and Again
May 8th, 2008
8am - 11am, $95
Lunch with speakers following event, pay as you go

I’ve been hearing people misuse a common UCD term, saying User Testing when they mean Usability Testing. Semantics, you say? Not so.

The term User Testing would imply that the user is being tested, when in fact, it’s the prototype and its usability that is being tested. One of the first things explained to participants during usability testing is that the goal is to determine how usable the proposed solution is. Not how well the user has performed. Because it's the 'Usability' of the prototype that is being assessed, the correct term is 'Usability Testing'.

Conversely, the term User Research (a study often done at the earlier stages of a redesign) suggests that users are being researched: who they are, what information they seek, how they interact with the existing site. This takes on many forms – surveys, focus groups, contextual inquiries, interviews, stats analysis, etc. The focus is on the ‘User’, and thus the approach is called ‘User Research’ or ‘Audience Research’.

To summarize:

• User Research – the focus is on the user and their needs
  
• Usability Testing – the focus is on the usability of the solution or prototype
  
• User Testing – is a misnomer

Search our blog for additional posts on usability testing.

(Thank you to MH and Todd Zazelenchuk for his UCD stencils)

In 2003, Jakob Nielsen reported that, on average, a usability redesign could increase desired metrics by 135% (based on a study of 42 site redesigns). Fast forward to 2008, Jakob reports in a similar study that gains have dropped to 83%. Why? Usability has become a standard online, making the possible impact smaller than 5 years ago. And it seems that usability budgets have not increased.

As someone working in the User Experience field, there's no doubt that there's been a surge in UX people and work in the last decade. Entire career paths have been dedicated to the practice of user-centered design: Information Architects, Interactive Designers, Usability Analysts, and many others. Non-profits and government agencies alike have taken the lead from their commercial peers and invested in audience research and usability improvements.

This is a vast improvement from earlier generations websites. Ten to fifteen years ago, websites were growing organically and usability was hardly a factor in design. Today, usability has become part of our standard rhetoric.

Looking forward to what the next decade brings in the UX field.

JN's 2003 ROI report
JN's 2008 ROI report

Photosynth has to be seen to be understood. The idea behind it, as shown in this TED video, is the ability to view, zoom, and navigate digital images in multi dimensions.

The entire 7+ minutes is worth watching, though the most compelling example is of the reconstruction of Notre Dame done entirely by scraping Flickr images that have been related spatially (begins at 03:50 in video).

TED does it again. And in case you're one of the 3,000 people who has been turned away from the $6k membership after maxing out on available 'seats' (both physical and via simulcast), you can bid on 1 remaining ticket to the Feb/Mar '08 conference in Monterey through ebay. Current bid: $20k

Looking for Nam-ho Park? You can find him a) living in Korea with his family b) commenting occasionally on this blog, and c) on his personal blog, strangesystems.com

Ajax is showing up more and more online. Not that it’s a new solution – it’s been around for years – but has become increasingly popular in online applications and websites.

What is AJAX? It stands for Asynchronous JavaScript and XHR (XMLHttpRequest). Translation? It updates web content in the page without a full page refresh. This is done by retrieving data from the server and displaying data only in a portion of the page instead of refreshing the entire page.

Example 1: Auto Save
The best example I can think of to share, given its popularity, is the autosave feature in Gmail. As you’re drafting an email, the email is autosaved into your draft folder, and the ‘save’ button appears deselected, letting you know that the system is saving for you. The page never reloads, yet the user sees a change in display on the page. That’s Ajax.



Example 2: Auto Suggest
Ever had a list of search terms auto-populate in a dropdown list as you’re typing in your keyword? Yahoo’s search engine does this currently. Ajax again.




Usability considerations
At the Usability Professional Associations’ DC conference in November, John Whalen from Human Factors International spoke about the usability of Ajax, and knowing when to use Ajax as a solution, and when not to. Like any solution, using Ajax gratuitously or incorrectly can decrease usability. I love kayak.com and find that they’re using Ajax really nicely. One exception is when the user changes the flight times filters and the page data refreshes (without reloading) with new data, but very little feedback is provided to the user that this has happened. The user has to look quickly because the visual cue indicating that the data is changing is very easy to miss, displaying for half a second. If the user’s looking elsewhere on the page, they may not realize that their flight options have changed.



Progressive Disclosure
I’ve also seen Ajax being used to enable progressive disclosure. This is an interaction design term referring to presenting small amounts of content at a time, upon user prompt, so as to avoid overwhelming the user with too much information or options at a time. Banana Republic, and most of the Gap brands, use this approach on their sites. Users are able to discover additional information about an item - what colors it’s sold in, what sizes remain – and can even add the item to their cart without ever having to reload the page.





Another Ajax example using progressive disclosure is on tripadvisor.com Long lists or sections of content are displayed in a summary view, and the user has the option of discovering the complete and expanded list by clicking on the ‘Click to expand’ prompt. The page never reloads, but additional content is disclosed to the user.



In conclusion
At Forum One, we tend to work on the information architecture of content dense sites; I can see a number of ways that Ajax will be a good fit for some of the challenges we approach. The remaining questions I have are around the accessibility of Ajax, and the impact it has on site statistics. If you've got insights on those topics, please share.

We're a lucky bunch at Forum One. We regularly collaborate with amazing people who are working hard to raise awareness around important issues. CARMA (Carbon Monitoring for Action) is one of those projects. Forum One teamed up with the Center for Global Development to create a site that would visually portray the volume of C02 produced by power companies and plants around the world.

Within 24 hours of its launch, the site was featured on major online publications - cnn.com, bbc.co.uk, npr.org, nytimes.com and many others.

Our very own Courtney Clark led and designed all information architecture efforts, and partnered with Synergema to produce the design.

Read what others are saying -
Technorati
F1's technology blog
F1's influence blog

Joined an interesting discussion today about writing for the web, most of which applies to information architecture.

Chunking content
Folks read 25% slower on the web and the ease with which users scan becomes increasingly difficult on a screen. Because of this, consider 'grouping' your content so that users can consume it in digestable chunks. Include headers, sub-headers, as well as formatting like bolding, bullets, or pull quotes to help the user break up the page.

Page titles
Including page titles or section headers is a best practice, but particularly useful for users discovering a page from search results. If they click on a link from the results page only to arrive at a page deep within your site containing no title, they will be forced to begin reading to understand what they're looking at. If you force a user to read instead of allowing them to read because they choose to, you're disrupting their 'browsing' mode and you face a good chance of them swiftly hitting the back button to explore the other search results. Along with page titles, including breadcrumbs and highlighting which section in the global navigation they're in are good practices. This provides immediate feedback on their position within your site.

Information Snacks
This is a term I'd heard a few years back to describe small, digestible pieces of information that users will scan thanks to their short length, and will revel in if related to the information they're seeking. The fact is, users on websites jump around, they don't scan in a linear fashion. Watch an eye tracking session and this will be immediately clear. Designers know this too and the best of them will know how to design elements to draw the eye around the page. Provide related or contextual information on the page, and allow users to discover other tid-bits of information that may be of relevance to their information search.

To ensure that anyone coming to your site can see the fonts on your site, you must work within a list of fonts common to the Windows and Mac operating systems. The following site explains this in more detail and provides a visual presentation of the acceptable fonts: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Much to Courtney's chagrin, Helvetica doesn't make the list.

Steve Krug gave a presentation today called "Usability Testing on a Shoestring Budget". A few highlights from the session:

1. Steve recommends frequent testing, 3-4 people, 1x/month. As long as you plan on iterating/retesting throughout the dev lifecycle, you'll catch the most obvious issues immediately, and can repeat the exercise a month later to gauge progress.
2. Experience/testing trumps market research. The proof is in the pudding.
3. When writing scripts, don't use nomenclature already on the site and avoid making the scenarios too specific (e.g., instead of finding xyz book, instruct users to locate a book they'd like to read and add it to their shopping cart)
4. Recruit loosely, grade on a curve. The point is to test frequently regardless of whether it's with an unbiased colleague or a neighbor. You can usually deduce which feedback stems from the person's frame of reference or whether the issue raised is truly a usability issue.
5. Consider having the subjects test similar tasks on comparator sites. This can yield interesting insight into users' preferences and spark some good IA ideas.

Additional resources (test scripts, video consent forms) are available on Steve's website. And a link to an earlier post Courtney wrote reviewing the second edition of his book.

Breadcrumbs are not a recent concept on websites, but occasionally clients are unfamiliar with the term and their function. Reminded of that confusion while recently reading Jacob Nielsen's alertbox on that very topic, I thought I would shed some light.

A breadcrumb is that small line of text near the top of a web page that serves to remind the user where they are within the context of the site (see the red outline in the screenshot below). The reason why the name breadcrumb is a misnomer is because it does not, in fact, reflect the click path you've taken to arrive at this page. Instead, it represents where your current page fits into the overall navigation structure or hierarchy of the site. If the user wants to navigate back the way they came, most people will know to use the 'back' button on their browser.



I've observed many people during usability testing who rely on the breadcrumb as a way to navigate, and yet I'm amazed by the number of sites who don't provide it as a means of secondary navigation (think of a site off the top of your head and see if they're using breadcrumbs, you'd be amazed). The exception would be for relatively flat sites where there isn't much nesting of pages happening. Breadcrumbs would be less useful in that scenario.