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

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

1. Logo / Navigation / Feature


2. Section Headings / Small Features


3. Accompanying Text

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.

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.

]]> Fri, 06 Jun 2008 17:24:40 -0400 http://uxd.forumone.com/archives/167-guid.html http://uxd.forumone.com/archives/167-Five-and-a-half-approaches-to-usability-testing.html http://feeds.feedburner.com/~r/UserExperienceDesign/~3/293453206/166-Paths-vs.-Hierarchies.html Information Architecture Usability Web Design http://uxd.forumone.com/archives/166-Paths-vs.-Hierarchies.html#comments http://uxd.forumone.com/wfwcomment.php?cid=166 0 http://uxd.forumone.com/rss.php?version=2.0&type=comments&cid=166 nospam@example.com (Matt Humphrey) Here is a short, sweet, and to the point post from Ryan at Signal vs. Noise on thinking about the architecture of your site in terms of paths instead of hierarchies. What he's saying makes sense. Often, it's easy to get caught up in the overall structure of the site: Where do the publications live? Should the blog be part of news? Should contacts be in the about section, or on its own?

A way to enhance the architecture of the site is to think in terms of paths, Ryan says. How are your users going to get from point A to point B? It's more than where the publications live. How are your users finding the publications? Where are they starting - the home page, an internal page found via search? It's beneficial to understand all the potential paths a user might take to get to your content. Prioritizing these paths will help you think about the most important content. So, when you're in the analysis phase, don't throw out those scenarios. They'll come in handy when you want to develop some paths.

One thing to note is that we shouldn't abandon hierarchies, obviously. It'd be a hard sell to convince the client or site owner that you'll only investigate paths and not hierarchy. A reader of the post made the following comment, "I would have to say though that convincing a site owner to only go down the ‘path’ route would simply give them the impression we were looking for shortcuts. So i think combining both elements of site planning/organisation is advisable."

• 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
  

The limitations of IE6 are well known, but one of the more irritating of its failures is the lack of support for PNG transparency. Of course, it does support GIF transparency... but GIFs don't support alpha transparency, only giving you completely transparent or completely opaque states for any given pixel. Hence those ugly halo effects around poorly created GIFs or when a transparent GIF is moved onto a different background color than it was originally matted for. PNGs give you alpha transparency, allowing smooth edges and variations in transparency, opening up far greater design options.

Fortunately there is a way to overcome most aspects of this limitation of IE6, allowing the use of PNGs. Better yet, it requires no changes to your HTML and involves adding only a single line to your CSS. The version I currently use was created by twinhelix.com and can be downloaded here. Alternately, there is also a jquery version that appears to work in much the same manner.

Below is an example from a site we recently worked on. The design called for a 3D bar graph to float on top of an auto-rotating slideshow. On the left, you can see what the bar graph image looks like in IE6 without the PNG fix. On the right is how it looks in modern browers... as well as how it looks in IE6 once the fix is in place. To see how the PNG interacts with the slideshow, please see the live site at www.usip.org/building/.

The fix does not create full PNG support, so it's not perfect. Most notably, transparent PNGs can be used as background images, but they cannot be tiled (i.e., repeat-x or repeat-y). In other cases you may need to specify a height or width other than 'auto' to get a particular image to display correctly. However, for the most part it works beautifully and allows the use of far more elegant design solutions in IE6 at very little cost.

In the field of web design for non-profit organizations, purchasing a tangible object isn't always the goal. However, there are a number of cases where action is required. Examples include: donating to support a cause, subscribing to an organization’s RSS feed, or spreading the word about a specific initiative. How are users persuaded to take action? Placing Donate or Join Now buttons on your site isn't enough. This is where persuasive architecture comes into play.

Persuasive architecture goes a step beyond trying to produce a usable and intuitive information architecture. Information architecture is about effectively structuring a site in order to help users find the information they seek. This is accomplished through a number of strategies: categorization, labeling, designing page layouts, grouping, etc. Good information architecture will make it easy for the users to find what they’re looking for, but the experience shouldn’t stop there. Persuasive architecture will deliver a useful and intuitive interface, while putting an emphasis on informing, enticing, and persuading users into action.

Persuasive architecture in the non-profit arena is not dissimilar from persuasive architecture in the for-profit arena. While you might not be selling your users handbags or new shoes, what you could be selling is an idea. You want people to support your cause. You want people to join your organization so you can create a larger network of people who are collaborating with you. To successfully accomplish this on your site, you must persuade your users. You must persuade them to click again, to discover more, and ultimately to engage.

Enough talk. Let’s look at an example. A site that sports a nice persuasive architecture is the Nothing But Nets campaign.

Nothing But Nets is a grassroots campaign to save lives by preventing malaria, a leading killer of children in Africa. If you peruse through the Nothing But Nets site, you’ll notice that they’ve done a good job of communicating their cause in addition to encouraging action. They’ve done this through persuasive navigation, persuasive content, and persuasive design. What I like the most about this site is that the navigation forms a concise, active, and persuasive statement. They broke out of the "Who We Are ... What We Do" mold with a very compelling site structure: Malaria kills, Nets Save Lives, and It's Easy to Help.

Persuasive Navigation

Malaria Kills

Within this section, information is provided for those who may not even realize that Malaria is killing millions of people. The site provides compelling content that informs the user of Malaria and encourages them to understand that this is an issue that needs support.

Nets Save Lives

Providing the background information is the first step. But now, users might be thinking "This seems out of control. What can be done about this?" The site answers that question with the Nets Save Lives section. The section provides statistics on how bed nets save lives, and provides an overview of the process of getting the nets to Africa.

It's Easy to Help

At this point, you are hoping that the user is convinced. They understand what Malaria is and they realize the importance of supporting the efforts to put a stop to the deaths resulting from it. They also realize that buying bed nets is an easy way to stop Malaria infections. The next logical step is encouraging the user to support your cause by donating. The content supports this - everything from the title of the section to the number of ways to support.

Persuasive Content

Net-O-Meter

Users like to know that other people are invested and have taken action. The Net-o-Meter is a perfect way to say, “Look! Other people are helping too!”

Interactive Net Distribution Map

Users also like to see the results of contributions. This map is a great way to visually see the results of current donations. It will also keep people coming back to the site to check the progress of the campaign.

Compelling Video

I don't think that I have to be the one to tell you that online video is a great way to spruce up your persuasive content. The videos on the site really help bring the issues to the surface. Not only do they make the issues seem more real than they would by simply reading text, they engage the user with a more emotional approach.

It might not make sense for you to structure your site in the way Nothing But Nets did, but when you want your users to do something, take the time to think about how you are encouraging them to act. Think carefully about your content. Is it supporting and encouraging your users? If you want them to donate, are you explaining to them why donating is a good idea? Are you giving them enough information to encourage them to act? The technology to make the site and transactions usable isn't always enough. Just because they can find the information, doesn't mean they will act when you want them to. The architecture, design, and supporting content needs to help your users make the choices you want them to make.

Additional Information

I had the privilege to hear Shannon Raybold, campaign director for Nothing But Nets, talk about the process behind building the site I've talked about in this blog post. You can watch and listen to her presentation from Forum One's Web Executive Seminar on Global Health.

• 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

• Relies heavily on user's mouse control


• Hard to select. See Fitts Law


• Search engines may not be able to index your site (if fly-out is working with Javascript)


• Not accessible to international users (who might need to look up words in a dictionary) or users with motor skills impairments (who have difficulty catching things that move).


• Hides navigation in a menu. Users must go to fly-out navigation to get from one sub-section to another, even if they're in the same section.


• Covers important content on the page

• Users decide what they're going to click on, before the move their mouse.


• "In our studies, we observed that once users realized there was more information available to them, they stopped and re-evaluated the screen. Users seemed disoriented by this disruption in activity and they lost confidence that they were clicking in the right places. The users now questioned a choice that seemed to be a good one earlier."


• "...fly out implementations required our users to use awkward movements to make simple choices."


• "Users became frustrated because they couldn't see the content in advance of choosing a category and some had problems with the menus going away when they used natural movements. Users expended so much effort to select a menu choice that they often missed stories that might otherwise have attracted their attention."

• How will my audience respond? Do they have the mouse control? Will they be annoyed?


• Do I want a fly-out nav because 'it looks cool'? Is it a personal preference?


• Are my sub-section titles long (over 15 characters) or will they grow in the future?


• What happens when users increase or decrease text size?


• How does this work with my CMS? Can I add sub-sections easily to the fly-out nav?


• How will I handle sub-page navigation? Will the user have to go to fly-out menu to navigate between sub-sections?

• Make the selection area wider that it appears so that it doesn't disappear if you are moving the mouse just a couple of pixels outside of the menu


• Make it clear that it is a menu, for example by adding a down-pointing triangle next to the label. Crate and Barrel does a nice job of this. Note that all items in the fly-out menus are actions.


• Work without Javascript


• Use a delay before hiding the fly-out menu again, e.g. 250ms


• Only use horizontal menus with vertical fly-out menus. The vertical area in which the mouse-pointer needs to be move is too small, i.e. typically 12-14px, and causes the menu to be hidden unwantedly.


• Keep sub-section titles short

Intuitive Filter Options
Start with the obvious	If you know who you like already
For presentations	For research and further learning
For teachers and parents

• Make each green box clickable. Right now you have to click on the text within the box. Simply clicking in the green space does nothing.


• Provide a word count for each poem. I was looking for a short poem to write in a birthday card. It's hard to tell how long the poem is before you click and are taken away.


• Auto-fill the Poetry Tool drop downs (see right column) once you get to the poem detail page. Clicking the back button is easier than selecting items in the form again. But if they were auto-filled, I could navigate easily from the detail page.


• Widgets! The Poetry Tool would be a very cool thing to add to a blog, Facebook page, Mac Dashboard, etc.
]]> Wed, 27 Feb 2008 09:24:20 -0500 http://uxd.forumone.com/archives/150-guid.html http://uxd.forumone.com/archives/150-Site-o-the-Month-The-Poetry-Foundation.html http://feeds.feedburner.com/~r/UserExperienceDesign/~3/231080856/149-Primary-Navigation-Image-Replacement.html Accessibility CSS HTML/XML http://uxd.forumone.com/archives/149-Primary-Navigation-Image-Replacement.html#comments http://uxd.forumone.com/wfwcomment.php?cid=149 5 http://uxd.forumone.com/rss.php?version=2.0&type=comments&cid=149 nospam@example.com (Corey Lafferty) Using basic CSS there are various ways to replace text with images, but most of these methods have drawbacks. These drawbacks become even more apparent when you are using image replacement in links (such as in navigation items). A primary reason for using image replacement is to aid in accessibility, but many of the common ways to replace text have accessibility issues. In an effort to choose one of these methods as our company's standard, I evaluated the most common image replacement techniques while creating a site's primary navigation. I thought it might be informative to show the process involved in choosing the option I believe to have the least serious drawbacks.

This may get a little complicated, so I'll first start with some simple examples of image replacement.

Replacement Method #1

Let's start with this code:

 <h1><span>About Us</span></h1>

When this header is rendered, what we'd like to see happen is the text 'About Us' disappear and be replaced with a nice image we've made. The easiest way to do this would be to apply a background image to the h1 tag and set the span tag to not display.

h1 {
    background-image: url(images/about_us.gif);
    width: 200px;
    height: 100px;
}

h1 span {
     display: none;
}

Unfortunately, setting display to 'none' causes most screen-readers to ignore the text, so nothing gets read at all. In addition, if the user turns off images in their browser but leaves CSS on (a common thing to do on slow connections or handheld devices), the header effectively ceases to exist.

Replacement Method #2

Using the same HTML, this rather serious drawback can be overcome by modifying the CSS a bit.

h1 {
    background-image: url(images/about_us.gif);
    width: 200px;
    height: 100px;
}

h1 span {
     display: block;
     overflow: hidden;     
     height: 0;     
}

Now the span is set to display block, but is effectively hidden from visual browsers by setting the height to '0' and making sure the overflow is hidden. The background image still shows clearly though and in screen-readers, the text will still be read. Unfortunately, the header still ceases to exist for all intents and purposes if images are disabled but CSS left enabled.

Replacement Method #3

Yet another method removes the need for the span scaffolding altogether, leaving our HTML happily simple and semantic.

 <h1>About Us</h1>

h1 {
     background-image: url(images/about_us.gif);
     width: 200px;
     height: 100px;
     text-indent: -9999px;
}

Here the background image is still applied to the h1 tag as before, but the text is cleverly removed from view in visual browsers by indenting the text negatively a ridiculous amount. In visual browsers the image display normally but the text is moved far off the screen (probably about 10 feet or so to your left), effectively hiding it. However, screen-readers will still read the text normally. Unfortunately this method, while simple and elegant, still suffers the same drawback as the previous method -- it renders the header tag useless if images are disabled while CSS is still being used. The negative text-indentation trick also has another drawback when links are being used, but I'll get to that later.

Replacement Method #4

The final method of image replacement suffers none of the drawbacks seen in these previous methods. Images display normally in visual browsers with the text hidden, screen-readers read the text normally and the header still renders if images are disabled (whether CSS is used or not). We start with this rather counter-intuitive HTML.

 <h1><span></span>About Us</h1>

We're back to using a span tag, but in this HTML, the text is actually outside of it. Our CSS gets a little trickier.

h1 {
     width: 200px;
     height: 100px;
     position: relative;
}

h1 span {
     background-image: url(images/about_us.gif);
     width: 200px;
     height: 100px;     
     position: absolute; 
     top: 0;
     left: 0;
}

What's going on here is the h1 and the span contained within are both being set to the same height and width. The relative and absolute positioning of the tags allows us to place (in layer terms) the span on top of the h1. Effectively, the text within the h1 is hidden behind the background image of the span. The text will be read normally by screen-readers and turning off images will simply reveal the text underneath. The only drawback to this option is that the width of the text underneath has to be equal to or less than the width of the image replacing it. Otherwise, parts of the text will hang out from underneath the image like feet sticking out from a blanket that's too short. However, in most cases this will not be a problem and in those cases where it is, the size of the text could be manipulated through CSS. If a user bumps their text size from within their browser too high, this will obviously start to become more worrisome -- but this seems to be the least offensive of the drawbacks from all of these methods.

Now lets see what happens when we start to use these techniques within a site's primary navigation where our images need to be anchors. Below is what we're trying to create should look like. Four navigation buttons with dark blue roll-over states.



To achieve this goal, we'll need to create four images. We could make eight (an on and off state for each of the four menu items), but rather than be forced to preload images let's just put the on and off state right into the same image. So here's what the image for the first nav item would look like.



But which replacement method to use? When originally building and testing this navigation, I rejected Method #1 straight-away since it offers no real accessibility benefits. So I started with Method #2. It worked fairly well, but I was unhappy with having to use span tags and the fact that the site becomes unusable if images are disabled (with CSS enabled). Further research led to me to Method #3, which seemed like a big winner. Clean HTML with no span tags and a nifty negative indentation trick -- what's not to love? Sure, it still has that problem with the navigation becoming unusable when images are disabled, but so did the first two methods.

I was content to leave the navigation like this until I started testing it in Firefox. Many browsers (like Firefox) outline links when you click on them or use other methods of link selection (like using Tab in keyboard navigation). What I expected was something that looked like this:



When tabbing over to or clicking on the 'Mission' button, it gets a subtle dashed outline. What I found though using Method #3 was something like this:



In most browsers, the highlighted outline stretched all the way from the nav button to the edge of the browser window (and, in theory, 9000 or so pixels more to the left). This really wasn't acceptable. The problem didn't show up in IE, but who really uses that anyway?

Further research led me to Method #4, which I started playing around with in an attempt to get it to work with anchors. Following the example from above, the HTML for the complete navigation would look something like what I have below. The text and span tags go within our primary tag (here, a list item). The anchors go around both the text and span.

 <div id="navigation">
      <ul>
           <li id="navMission"><a href="#"><span></span>Mission</a></li>
           <li id="navNews"><a href="#"><span></span>News</a></li>
           <li id="navDonors"><a href="#"><span></span>Donors</a></li>
           <li id="navStaff"><a href="#"><span></span>Staff</a></li>
      </ul>       
 </div>

The CSS gets a bit complicated, but I've included the important parts below (for the sake of brevity, I've only included the CSS for the first nav item).

#navigation ul li {
	float: left;
	display: block;
	height: 21px;
	position: relative;
}

#navigation a:link,
#navigation a:active,
#navigation a:visited,
#navigation a:hover {
	display: block;
	height: 21px;
	line-height: 21px;
	font-size: 9px;
}

#navigation span {
	position: absolute;
	top: 0;
	left: 0;
	height: 21px;
}

#navMission {
	width: 67px;
}

#navMission span {
	background: url(images/nav_mission.gif) no-repeat 0px 0px;
	width: 67px;
}

#navMission a:link,
#navMission a:active,
#navMission a:visited,
#navMission a:hover {
	width: 67px;
}

#navMission a:hover span,
#navMission a.selected:link span,
#navMission a.selected:visited span,
#navMission a.selected:active span,
#navMission a.selected:hover span {
	background: url(images/nav_mission.gif) no-repeat 0px -21px;
}

Like in our previous example, what's happening is the text and the span are being set to the same height and width, and the background-image of the span is being placed on top of the text, effectively hiding it from view like two stacked notecards. The anchor tag is being applied to both of them and a hover state repositions the background image of the span to show the dark blue "active" state when moused over. As long as the text underneath isn't too long or sized too large, in most cases this should work fine. Further, the links still work when you disable images whether CSS is enabled (as shown below) or not.



Currently this seems to be the most accessible way to do image replacement. At least until things like the CSS3 content property (which replaces the contents of an element with something else) are supported in the majority of browsers. Since this seems unlikely in the near future, we'll likely be relying on tricky work-arounds and clever hacks for quite some time.

Below you can see the fully functioning navigation. You can turn off images and CSS in your browser and see how it looks for yourself. If you so desire, a quick peek at the source code of this page should reveal all the HTML and CSS involved. If you see a problem with this method or know of a more elegant solution, please leave a comment.

• Mission
• News
• Donors
• Staff


]]> Thu, 07 Feb 2008 11:21:00 -0500 http://uxd.forumone.com/archives/149-guid.html http://uxd.forumone.com/archives/149-Primary-Navigation-Image-Replacement.html