Forum One: User Experience & Design Blog

UX Book Club

nospam@example.com (Brian Verhoeven) — Wed, 03 Dec 2008 20:58:22 -0500

Last week I was enjoying coffee with a colleague downtown and he was talking about starting a local UX book club. Seemingly, out of nowhere this became a world wide initiative via discussion posts on IxDA.org

Have you join a UX book club in your area?

Drupal Usability Testing

nospam@example.com (Sophie Campagne) — Wed, 03 Dec 2008 09:19:08 -0500

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.

Educating the Client on Information Architecture

nospam@example.com (Sophie Campagne) — Tue, 02 Dec 2008 15:27:14 -0500

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)

Weekly Reads (Week of November 28, 2008)

nospam@example.com (Brian Verhoeven) — Tue, 25 Nov 2008 17:40:32 -0500

The importance of usable documentation

Getting into gaming industry as interaction designer?

The IxDA board is announced

A beautiful, free resource for interaction designers

We stumbled upon this list of resources to help nonprofits learn more about and keep up to date on technology trends

Hand drawn sketching video explains the Criterion website.

Drawing with water

Detailed Sitemaps & Partial Sitemaps in Footer back in fashion?

nospam@example.com (Brian Verhoeven) — Tue, 25 Nov 2008 12:34:04 -0500

A co-worker recently attended a conference and noted that several speakers talked about the importance of sitemaps to SEO. He also said that a few of these speakers also recommended "fat footers" that contain a partial site map at the bottom of each page.

I just received this same advice from Whitney Hess via Twitter who was relaying advice from Smart Experience's Web Navigation Design presented by James Kalbach:

Site map: laundry list of every single page on the site organized by section. Seem to be coming back into fashion. Good for SEO

Partial site map at bottom of every page becoming popular. More contextual navigation

Whitney is sharing other great advice on navigation design via hashtags

UXD Weekly Reads (Week of November 21)

nospam@example.com (Brian Verhoeven) — Thu, 20 Nov 2008 12:49:25 -0500

Adaptive Path's magnetic prototypes -

Jakob Nielsen's take on agile methodology -

Cooper talks about Rich visual modeless feedback, pronounced Riv Mof -

Don Norman cautions against simplicity in interface design -

Twitter helps UX professionals make the world a better place

Evolution of wayfinding in NYC public transit

Jared Spool writes about hiring the right UX staff

Nifty Slideshare presentation that shares 8 ways you can be more like the Internet

The secrets of blogging. You can be the next David Armano!

Chrome Comic Book

nospam@example.com (Courtney Clark) — Mon, 17 Nov 2008 11:27:00 -0500

Google's team explains the new browser, Chrome, via comic book. What fun!

UXD Weekly Reads (Week of November 14)

nospam@example.com (Brian Verhoeven) — Tue, 11 Nov 2008 16:13:19 -0500

Luke Wroblewski discusses common visual design misconceptions at UX matters

John Yesko discusses what user experience consultants can learn from Barack Obama

Auto Desk recounts how they approach Agile methodology for product development.

Side notes:
Interesting insights into their approach to user research throughout the various stages.
Pondering whether it can work in a staffing model where resources are allocated to more than 1 project at a time.

Dan Willis recaps Shwartz's Paradox of Choice, or what we like to call 'decision paralysis'. Reinforces our mantra of keeping information/interaction design simple, and designing valuable solutions that don't overburden the user with options.

Multiple style sheets and IE conditional statements lead to better css organization.

Lately, we've recommended that clients produce content for thier blog and then pull the best pieces for their newsletter. Backwards from what they're doing now, but makes so much more sense.

Game-like activities that help a team gain insight, understanding, and clarity while avoiding dry and often unproductive meetings.

What if photoshop were real?

Intuitive Madlibs signup form from huffduffer.com

Designing for international clients.

nospam@example.com (Brian Verhoeven) — Fri, 31 Oct 2008 15:08:18 -0400

Recently, a client came to us and asked us to design a multilingual gateway to several language specific sub-domains. We immediately thought of several solutions to this problem that included:
• Geographical targeting based on IP lookup,
• A splash page that saved user’s language selection in a cookie,
• A splash page without the cookie.

Geographic Targeting
We originally thought the most elegant user experience would be to use geographic targeting based on IP address lookup where the web site would be redirected to the default language for that host requester IP. We would also include the ability to switch your default location or language after the fact. This technique is used by Going.com, Samsung.com. Motorola.com and a bunch of other web sites.

We questioned whether geographic location was the best predictor of particular user’s native language. How does geographic targeting work for countries such as Canada that have more than one natural language? Our research also suggested that although in theory the IP address was assigned to a particular country, in actuality the IP was sold to users in another country [Note: we can only speculate on how often this occurs]. The conversation continually came back to how would users be able to recover if the system [behind the scenes] redirected them to a language that they did not speak.

Splash Page with Cookie
We also thought that we could have the user select a language on a splash page (brand.org) and then be redirected to the appropriate sub-domain (ex. Espanol.brand.org). This is similar to what Nike.com, Rolex.comand ralphlauren.com have implemented.

We questioned whether setting the cookie was appropriate for our target audience because many of the users accessed this particular web site through shared computer. We also considered my experience on Rolex.com when I clicked En Espanol and had to clear my cookies to figure out how to get back to the English site (I am not fluent in Spanish and could not find the change language link in the footer).

Splash Page
We decided to implement a splash page that the asked the user to select a language each time the returned to the site. We did consider including a “Remember this selection” checkbox; however it seemed in appropriate to display that in each language because it may clutter the primary action of choosing a language. Including a “Remember this selection” as selection dependent input (ajax call) or pop-up confirmation also seemed inappropriate because both would interrupt the primary task of accessing information.

Note: In my quick review of other web sites, I noticed the following trends:
• Many of the sites were Flash sites
• Electronic products seemed to favor the geographic targeting
• Non-electronic products seemed to favor user selection

Hot Tip: Todd Zaki Warfel recommends tagging observations for quick analysis

nospam@example.com (Brian Verhoeven) — Fri, 31 Oct 2008 13:51:12 -0400

I attended the latest IxDA DC event and listened to Todd Zaki Warfel present his InterVu research framework. Todd’s talk was mostly about the difficulty that user experience professionals face when capturing and analyzing data.

He explained that often the greatest challenge is that analyzing data takes too much time. Therefore he recommended that when you capture your observations in Excel that you tag each observation in a separate column with all relevant tags. That way when you come back to analyze the results, you can simply sort your observations by those tags. I haven’t had the opportunity to try this yet; however, I fully intend to give it a shot on my next research project.

Product Planner - User Flows on the Fly

nospam@example.com (Matt Humphrey) — Thu, 09 Oct 2008 10:26:52 -0400

Product Planner is a slick and simple web application that allows a user to "discover, create, and share user flows."

Creating a user flow in Product Planner provides you with the ability upload images - screenshots from web sites or wireframes, for example. You can easily add steps to the flow and arrange your process accordingly. Give it a shot! I can see this being quite useful for creating quick user flow mock-ups heading into a brainstorming or planning meeting for a site project.

This is an example of a existing flow in the gallery - the Twitter Sign-up Loop.

View more Twitter user flows.

(via Squared Eye)

UPDATE: After some further tinkering, it appears as though the application only provides 3 flow orientations - horizontal, veritical, or loop. This could prove to be fairly limiting for more complex flow diagrams.

sIFR 3

nospam@example.com (Corey Lafferty) — Tue, 05 Aug 2008 15:08:00 -0400

sIFR version 3 is currently in beta, and it looks to be far more user-friendly than previous iterations. If you're unfamiliar with sIFR (Scalable Inman Flash Replacement), the quick description is that it's a way to use any font you like on your website through the use of Javascript, Flash and CSS. sIFR is not the future of text on the web given it has several large drawbacks. However, used carefully, it is a relatively painless way to bypass the limitations of typical web typography until a better solution is found a few years down the road.

Below is a portion of a page I've been working on using traditional plain text fonts.

Here is the same page with sIFR enabled, replacing the headers and image caption.

From my brief exposure to sIFR so far, I'm fairly impressed. Below I've listed some of the pros and cons that I've run into; this is hardly an exhaustive list and will likely be modified as I gain more experience with sIFR.

Pros:

Use any font you like. The biggest plus to sIFR is that it allows you to use any font you wish, beautifully anti-aliased, without needing it to be installed on the user machine. Want to render all your H2s in Wingdings? Well, now you can, whether you should or not.

Selectable Text. Text can be selected/copied, although the Flash text behaves a little less responsively than normal text (at least on my WinXP machine).

Code is unmodified. Except for adding a few new JS and CSS file calls to the header, sIFR requires no changes to your HTML or CSS.

Accessible. Since your HTML is unchanged, sIFR sacrifices neither accessibility nor search engine friendliness (unlike using images).

Degrades gracefully. Since neither the HTML nor CSS is changed, the site degrades gracefully into plain text alternatives when Flash or Javascript is unavailable.

Cons:

Complexity. While far easier to use than sIFR 2, it is still a somewhat tedious process to create the Flash files and get the proper spacing through trial and error for the flash alternatives. sIFR 3 requires the use of multiple JS, CSS and Flash files and (for the creation of Flash files), requires access to a Flash editor.

Increased page load. While rather streamlined, adding additional Javascript, CSS and Flash movies does somewhat increase the file size and processing demands needed to render pages.

Requires Flash and Javascript. Both Flash and Javascript must be enabled for sIFR to replace fonts, although, in their absence, pages will degrade gracefully to their normal HTML equivalents.

Not useful for large blocks of text. Due to processing demands (and possible issues of line-spacing and placement), sIFR is discouraged for use with large blocks of text.

sIFR is most useful for replacing headers and short, important bits of text. A better web typography solution will certainly present itself in the coming years, but for now sIFR serves its purpose well when carefully applied.

Resources

Main sIFR site
Examples of sIFR typography
Tutorial: This is how you get sIFR to work

It's a bird! It's a plane! It's DATA VISUALIZATION!

nospam@example.com (Courtney Clark) — Fri, 18 Jul 2008 11:59:59 -0400

A perfect example of data that is beautiful, interactive, and informative.

It's a simple idea. Measure the air quality. Launch a gigantic balloon that's color indicates the quality (red=bad, green=good). Let tourists go for a ride.

The balloon displays two measurements of air quality using Airparif’s data. Firstly, the ambient air quality is indicated by the color of the balloon, using three projectors that are located upon the envelope’s equatorial plane, providing good night-time visibility. Secondly, air quality near major traffic junctions is indicated using a high-power rotating laser beam that sweeps the lower half of the envelope.

The environmentally friendly design is based on the Archimedes principle, and can lift up to 30 passengers (about 2.5 tones), without any noise or shaking, to an altitude of 150 meters above the city. Using an innovative lighting system it can be seen from more than 20 km.

- Ecofriend

CARMA (Carbon Monitoring for Action) uses a similar data visualization idea. In their case, color indicates the amount of CO2 generated by a power plant, power company, or region.

via: The Hot Strudel Flakes

Hierarchy - Design's pecking order

nospam@example.com (Courtney Clark) — Tue, 17 Jun 2008 23:40:00 -0400

Hierarchy. Strong, consistent visual hierarchy is key to a quality design.

Q : What is visual hierarchy?
A : Important elements have the most emphasis. Least important elements have the least emphasis. So, a user's eye should move around the page from your most important content to your least important content.

Q : Ok...I still don't understand. How do you measure the emphasis of a single design element?
A : There are a couple of design principles that we can use to create more or less emphasis.

Contrast
more contrast = more emphasis
less contrast = less emphasis

Size
larger = more emphasis
smaller = less emphasis

Positioning
more space = more emphasis
less space = er, clutter. There should always be some space.

Color
darker or brighter = more emphasis
lighter or duller = less emphasis

Q : How do you decide the order? What should people look at first on my website?
A : Of course it varies from site to site, but here's a hierarchy that works for most:

Logo / Navigation / Feature

Section Headings / Small Features

Accompanying Text

Q : I'm a visual person. Can you just show me an example? What does a design with strong visual hierarchy look like?
A : Here ya go. I added numbers to indicate where my eye went.

Clear Hierarchy

Both examples use contrast, size, positioning, and color effectively. The visual hierarchy guides your eye to the feature first and the sub-features second. Perfect!

Confusing Hierarchy

I didn't know where to look first with these examples. I numbered them, but doubt that the goal of the design was to look at the spinning globes first. I'm talking to you Freemap.com!

Q : Tell me again - why is this important?
A : Having a clear visual hierarchy helps your users scan the page and quickly take in the content. Visual confusion leads to user confusion and frustration.

Q : But how do you measure the weight of an element?
A : I like to do a squint test. Put the design on the screen/wall, squint your eyes so it's a little blurry. What do you look at first? Second? By squinting, you are not thinking about the content itself, but about what item has the most weight on the page.

Another useful tool is Feng-GUI.

The Feng-GUI heat map service is an automatic alternative to eye-tracking. Unlike eye-tracking or click-based heatmaps, Feng-GUI creates heatmaps based on an algorithm that predicts what a real human would be most likely to look at.

Check out Forum One's hierarchy.

Thanks to Brian at The High Contrast

Five and a half approaches to usability testing

nospam@example.com (Matt Humphrey) — Fri, 06 Jun 2008 17:24:40 -0400

In May, Forum One's Web Executive Seminar entitled "Putting Online Audiences First, Again and Again" focused on the application of user-centric techniques to capture audiences' perspective throughout the lifecycle of a redesign. One of the speakers, Kira Marchenese, gave an enlighting presentation on various approaches to usability testing.

My colleague, Andrew Cohen, has put together a great recap of her presentation entitled "Five and a Half Approaches to User Testing." It's definitely worth a read. Be sure to watch Kira's presentation for more details.