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.

In a recent training session on Visio, I explained the benefits of using Backgrounds when building wireframes. Much like the slide master in PowerPoint, making an edit on your Background will be reflected in all foreground pages whose properties have been set up to leverage that Background. A time saver (make changes in one place instead of on each page) and ensures consistency in object placement across pages.

Here's where the Background falls short. If you're planning on building out your Visio wireframes into clickable prototypes for usability testing, Visio doesn't publish hyperlinks you've built into your Background. Why? Visio publishes Foreground pages and Foreground pages show Background elements almost as a sub-layer or image, not as individual elements on the page. And unfortunately, we typically use Backgrounds for universal elements such as global navigation, footer/utility links, search...objects that are constant across all pages, but that must be clicked on during usability testing.

You have two solutions:

1. When it's time to build your clickable prototype, build your hyperlinks into your Background page, group your Background objects and paste them into each Foreground page, sending the Background object to the back so that your Foreground elements still appear in the front of the canvas. Clearly a work-around.

2. If you know you'll eventually be building out wireframes into clickable prototypes (which we typically know at project inception), don't use Backgrounds when you begin wireframing. Instead, use Document Stencils. File > Shapes > Show Document Stencil or Alt+F+E+D for those of you who love shortcuts. Here's how it works. Build an object for your page. Drag it into your document stencil and name it. As you wireframe other pages, drag the shapes you've built and added to your document stencil onto new pages. If at any point, there's an edit to make to the object, make the change in the document stencil - not on each individual instances of that shape. When you save the change to the document stencil, that change will be reflected across all pages using that object. This is also true for hyperlinks. As long as you've draged the object from the document stencil onto your page, any/all edits will be instantly reflected for that object across all pages.

When not to use document stencils: If you're not going to be building clickable prototypes from your wireframes, I still recommend using Backgrounds. With backgrounds, you set up your elements in one place, and the design of that page (and placement of objects) is applied to all applicable foregrounds. With document stencils, you have to paste in the elements you want (e.g., global nav bar) into each page and you'll also need to do some tweaking to ensure consistent alignment across pages.

Consider this: If you've created your wireframes from the get-go using document stencils, you only have to add hyperlinks to the objects in the document stencil and they will be applied to all instances of that object in your file. A great time saver when building a clickable prototype.

Don't forget: you must still create individual elements for hyperlinks. Creating a long line of text to serve as your global navigation tabs will not work if you're trying to make each link a unique hyperlink. A draw back that Visio will hopefully fix down the line.

Thanks KV

The ABC News website allows users to change the page font size with a simple click. The visual iconography depicting this option is clear, and the placement of this feature is prominent.

Why might you want to do this? For starters, for accessibility purposes (providing the flexibility to increase font size on a page for those who are visually impaired). Most users are still not aware of the ability to enlarge/decrease font size using their browser menus. ABC News has chosen a placement that gives this feature just enough prominence without detracting from other content on the page.

Also notable, in the case of ABC News' site, is that the font change applies to the text within the body of the page (which is where most users will spend their time), not to all text on the page. Increasing the font size using your browser menu can result in the text breaking, whereas ABC News' font size editor maintains a clean page layout as user manipulates the font size.

Something to consider: it's valuable real estate being allocated to functionality this is otherwise available via browser menus. With that in mind, this treatment is probably best suited for content-heavy sites and sites whose audience will include users with decreased vision.

Example: http://abcnews.go.com/Politics/wireStory?id=2575845

OmniDazzle, The Omni Group's latest product, allows you to animate your cursor on your machine. Imagine you are in the middle of a presentation. With a quick keystroke you activate OmniDazzle's Zoom effect, you select a portion of the screen and immediately a box pops up with that area magnified on your screen.

Choose from 11 effects. The kids are going to love Pixiedust, which showers your screen with thousands of little stars as you move your cursor. Unlike those annoying sites where animated objects followed your cursor (Courtney recalls butterflies...why were those ever popular?) the animated effect is for your computer only and can be turned on/off with a quick key stroke.

You have to see it to appreciate it. Go to OmniDazzle's page to watch short demos, or better yet, download a trial version (sorry PC users, for Macs only).

I'm a fan of Edelman's Steve Rubel's blog. Earlier this month, I linked from it to the Web 2.0 Toolbar, an aggregator of user-generated content in various forms.

The sight describes the tool as a way to 'save time and keep up on the latest Web 2.0 news right from one browser toolbar. The Free Web 2.0 Toolbar aggregates the best of Social Search, Social Bookmarking, Social Pics, Social Video and Social News websites.'

With the introduction of social media, we've been so inundated with data that I welcome these kinds of aggregation tools.

Another one of my favorites: Pure Video. Lists the top 10 videos from a bevy of resources including YouTube, CNN, ESPN and others.