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. 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:

1. Logo / Navigation / Feature


2. Section Headings / Small Features


3. 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

First impressions are paramount. Especially in the web world. Let's see how this site strikes me - the new user.


We Can Solve It website

GOAL OF SITE
- Recruit users : They use the word "we" EVERYWHERE (The "w" in the logo is an "m" upside down. How clever!) They want you to be part of that "we". The woman in the video, Joylette, encourages you to join today. There a big form for you to type your email behind her head. The first navigation item is "why join we"


- Encourage users to take action : The second most prominent word/phrase is "take action"
- Educate users : Once you dig in, you can find sub-pages with background on solutions.


KEY AUDIENCES
- Young adults : The first person we see is a young woman (Joylette). The design feels young and contemporary - color choice (fresh, light), font choice (sans-serif, rounded, DIN?).
- Tech savvy people : They specifically call out bloggers in the navigation item --> "press & bloggers"
- Media : Again, the "press & bloggers" page is in the nav and it's a very robust page at that. They are seeking credibility and are providing press with the tools and resources to write about their campaign.


SUCCESSES
- Personal ask : The four main sub-pages have a video of a person explaining the section and how it applies to me, the user. It conversational. It's personal. They're real people. They're talking to me. All that makes be more interested.


- Positive language : No scare tactics here. We hear about the climate crisis everyday and how we're going to die any minute because of it. Well, that's an exaggeration, but it's refreshing to talk about solutions and progress for a change. One navigation items even reads "we are succeeding".
- Inclusive language : Like I said earlier, "we" is everywhere.
- Succinct messaging : Content is broken up into small, digestible pieces.
- Lovely execution : I know it's hard to get all the pieces to fit together nicely when building a site. The information architecture is clear. The design isn't broken. Nice work.


OPPORTUNITIES
- Add secondary navigation to sub-pages : Users don't get a sense of the depth of the site because there is no secondary navigation on sub-pages. Every sub-page has the same right column. Not only is that kind of boring and I stop looking at it, but you could put some secondary navigation over there and I can move from one secondary section to another more easily. I'm using my back button more than I'd like to.


- Improve home page feature navigation : There are five features and only one way to move through them. It's mildly annoying. I'd like to move forward AND BACK. Or have some sort of indicator that tells me where I am in the sequence (1 of 5).

- Show participation in campaign : Another way to build credibility is to show how many people are currently involved in this campaign.
- Create clearer Take Action icons : I was immediately turned off when I saw an image of people picketing next to the "Advocate for Change" link. All of the illustrations on the Take Action page are a little complex (Too many people. What's going on?) and don't provide much additional information, which makes me wonder if they should be there at all. If icons are used they should be extremely simple and iconic (duh).

The Culprit
Fly-out menu: a navigational solution.
When a user puts their mouse over a navigation item, a menu automatically appears or "flies out". Items in that menu are clickable. Often used with intentions of de-cluttering the space and enhancing the user experience.

Examples:
Iowa Dept of Elder Affairs - Do they really expect the elderly to use this site?


Booz Allen Hamilton - Tabs meet fly-outs


Abt Associates - Two sets of fly-outs! Wait, three?


Lockheed Martin - Note the sub-sub-menu under Customers. Eek.



The Crime

• 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

The Evidence
UIE did some usability testing on sites with fly-out menus and found the following:

• 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."

Questions to ask yourself before you act

• 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?

Best Practices - if you're going to do it

• 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

Examples:
Crate and Barrel
Target

Disagree? Have other thoughts? Send the bail money my way!

Sites I referenced and may have directly copied text from:
Nielsen Alertbox: Low-Literacy Users
Welie.com: Fly Out Menu
456 Berea St: Usability and Fly-out Menus
UIE: Users Decide First; Move Second

Seems like you can't forget a holiday if you're on the internet.













Didn't Google start this trend?

I'm specifically looking at the Poetry Tool. You can get to it from the global navigation or from a feature on the home page.




Clear Action Points

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

Visual Progression
The size of the box is reduced as you drill down. Since the fourth box can't get much smaller, there's a slight color difference. See that?





Opportunities to Continue Exploring
Once I select a poem, I can not only read the poem, but also see the poet's picture, learn more about the poet, and view other poems by that poet.





Things I would do differently

• 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.

How can you be upset with an error page that contains a ASCII art dog?!

Sometimes we get requests from clients to "utilize every pixel" on a page. When asked to expand we hear something to the effect of, "There's an empty space in the header. What can we put there? We need to use that space." What they may not realize is that every pixel is being utilized, but that doesn't mean that text or a graphic occupies the space. It's white space! That space provides a balance between the positive (filled) and negative (empty) space on the page, thus creating an aesthetically pleasing experience. And, most importantly, the white space provides a place where users can breathe or rest. Today we are so bombarded with advertisements, that the absence of them is what actually catches our attention.

Here's a great example of an effective use of white space:


Apple is doing a couple of good things here:

• they've purchased all of the ad space in the upper half of the page, and are choosing not to fill it with stuff. See the areas beside the title "New York Times"


• the ad spans across parts of the page as "PC" climbs up the ladder. Nice use of movement and space.


• the ad's minimalism makes the other content on the page feel less cluttered and much more digestible to the user's eye.

Now take a look at nytimes.com on a typical day:


Aaaaaah!

A List Apart talks about how white space relates to brand positioning:

Designers use whitespace to create a feeling of sophistication and elegance for upscale brands. Coupled with a sensitive use of typography and photography, generous whitespace is seen all over luxury markets. Cosmetics, for example, use extensive whitespace in their marketing material to tell the reader that they are sophisticated, high quality, and generally expensive.

See a difference?

Photography

Great sense of place and activity.


Photo illustrations (not clip art) are well done. Detailed and placed contextually on site.

Typography

Display typefaces are used sparingly and appropriately. You wouldn't use this for navigation, but it's appropriate for a few features.


Type varies on the page, adding interest. The smaller typefaces are legible and interesting. All typefaces feel like they belong together; they're part of the same family.

Color Palette

Earthy, strong, bold, aged.

Personal feel

Users can identify with visitors like themselves. You can speak directly to audience and their interests with photos and quotes.

Flash

Used sparingly and appropriately (for maps mostly).

Things I would do differently:

• add a breadcrumb to sub-pages


• get rid of the drop down menus

Thanks MH

Reuse, recycle, but don’t reinvent the wheel unless necessary.
- Brian Christiansen

Factory Joe has put together (and neatly organized) examples of everything from tag clouds and video players to headers and footers. Very handy.

My favorite collection: 404

Sunday evening I joined the design geeks in the DC area and went to see a film about a font. This sans-serif font is both loved and loathed. It is Helvetica. Massimo Vignelli says it's one of three acceptable fonts in this world. Stefan Sagmeister says it is uninteresting and screams "I am boring". I say it's clean and legible. It communicates information clearly, thus I love it.

Overview
Because Helvetica is easily read, straightforward, and friendly, it has become ubiquitous in signage and “power logos” around the world.

Helvetica Stats

• Born: 1957


• Parents: Max Miedinger with Eduard Hoffmann


• Grandparents: Haas Type Foundry, Stempel and Linotype


• Bio: Helvetica was born into a world of hand-lettered type, nuptual scripts, and ornate serif fonts. As a young sans-serif, Helvetica had trouble making friends. With the help of it's grandparents, Helvetica was pushed into the limelight. In it's 20s, Helvetica could be seen with government logos (like NASA), global brands (like Microsoft, Panosonic, and Nestle), and general signage. Helvetica turns 50 this year and is taking life less seriously. Recently, the sans-serif has been spotted on billboards and posters with scantily clad women (American Apparel).

The Film
The producer/director Gary Hustwit started the night off by welcoming the sold out crowd. It went something like this (not a direct quote) – Thanks for showing up. It’s amazing that you people will stand in line and pay $10 to see a film about a font. If I hadn’t made the film, I would be out there in the crowd with you. There’s Q&A after the film. If you are going to ask dumb questions like, ‘Will your next film be about Times New Roman’ you should leave now. Enjoy!

Overall, the film was pretty good. The crew traveled around the US and the UK interviewing designers and getting their thoughts on Helvetica and why it is so ubiquitous. Their personal feelings about the font are often involved in the answers to those questions. Here's the jist of what some of them said:

• Michael Bierut - Helvetica is everywhere. It's like air. You can't help breathing it in.


• Paula Scher - Helvetica is the font of the Vietnam war.


• Erik Spiekermann - Helvetica is awful. It's widely used and carries no meaning.


• Massimo Vignelli - Helvetica is king of all fonts. Everything was fine until this disease called post-modernism spread.


• David Carson - Helvetica has no emotion. It doesn't say caffinated!

The film will be back in DC on September 13 at the Corcoran Gallery of Art. This time there will be a panel discussion and Q&A with the director and designers! Check out all screenings.

If you can't make it to the next showing, at least view the trailer/clips.

I Am a Geek Because I:

• Arrived at the movie theater an hour early to get a good seat. I was happy to see that I wasn't the only one.


• Got very excited when I saw (on screen) famous designers whose work shaped my design aesthetic and education. The list includes: Erik Spiekermann, Matthew Carter, Massimo Vignelli, Wim Crouwel, Hermann Zapf, Neville Brody, Stefan Sagmeister, Michael Bierut, David Carson, Paula Scher, Jonathan Hoefler, Tobias Frere-Jones, Experimental Jetset, Michael C. Place, Norm, Alfred Hoffmann, Mike Parker, Bruno Steinert, Otmar Hoefer, Leslie Savan, Rick Poynor, Lars Müller, and many more.


• Laughed and booed when Hustwit said he hoped someone would make a parody film based on Helvetica, but using the dreaded Comic Sans. Hustwit – “The audience focus will be 3rd graders and soccer moms.”

I recently participated in a UIE webinar on personas. The presenter was Steve Mulder, consultant for Molecular, and author of The User is Always Right. Here are some of my take-aways.



DEFINING
A persona is:

• A realistic character sketch


• An archetype to represent your users


• Based on research


• Defined by goals and attitudes

Benefits of personas:

1. Bring focus to team and organization
   Rather than trying to please all users, your organization can focus on primary and secondary users through identified personas


2. Help build empathy
   Personas have “real” names and photos, making them seem like real people. It’s easier to relate to a persona than a spreadsheet of stats.


3. Encourage consensus
   It’s simple - Would our persona named Carol like feature X?


4. Create efficiency
   When making decisions, your team doesn’t need loose time rehashing stats, user testing, etc. Just refer to the personas, which are based on all of your research.


5. Lead to better decision-making
   See 1-4.

RESEARCHING
Why both field studies and stats analysis? What people say is not always what they do.
Steve told a great story about an electronic company who did tons of research, focus groups and user testing for a boom box they planned to sell. They had narrowed the colors for this boom box down to yellow or black. Their focus groups finally came to agreement on yellow. Their audience was saying, “Yes, the boom box should definitely be yellow. It’s vibrant and energetic!” When the focus groups were done, each person was rewarded with a boom box. On the way out they could choose a yellow boom box or a black boom box. They all chose black.

Field Studies – what users say
Based on field studies like user interviews, user testing, and focus groups, you can glean information regarding:

• Goals
  What are people trying to do on your site?


• Behaviors
  How often do they go to your site?
  What other sites are they looking at?
  What sections do they visit most often?


• Attitudes
  What is there perception of your organization?
  How much domain knowledge do they have?

Stats – what users do
Because people do not always do what they say, you should also review the site traffic stats. These stats will allow you to back up the personas with hard data. Helpful items to review: entry pages, exit pages, common paths, feature usage, search terms, conversion rate, duration, and frequency

CREATING
You’ll create a couple of different personas. When defining your different personas, focus on key differentiators (examples: job, experience in the domain, etc).

The actual document should be one page and include:

• name for the persona


• photo for the persona (preferably not a stock image)


• quote from persona


• personal information (age, job, hobbies, personality)


• business objectives as they apply to the persona (what do we want the user to do)


• user goals (why the user comes to the site)


• persona priority (primary, secondary)

USING
As your organization moves forward and makes decisions, you can always check them against your identified personas.

Use personas when considering:

• Business strategy


• Features and functionality
  Prioritize what you build for users


• Content development
  Write articles, instructional text, and error messages in language that your personas would understand


• Usability Testing
  Recruit based on personas

"There's no computer where the chickens are!"

• Janet Stevens
  Director of the Web Services Staff for the Food Safety & Inspection Service, USDA
  audience research finding while visiting a slaughterhouse

The overarching question for the recent F1 User Experience and Design Event last Thursday was: How do you engage the 5% of your audience that are most important to you?

Step 1: Look at the current stats
When doing research on the World Bank's audience, Nam-ho Park (Forum One) found that the bulk of the their web audience was college students and consultants. The audience the World Bank was most concerned about reaching (government officials and NGOs) were not visiting the site as often.
Key point: Just because a lot of people are coming to your site does not mean the top users are those you really want to reach.

Step 2: Visit your users or survey them at least
How well do you know your users? Visit them. Talk to them. Get to know them better. If you know your users, you can better design and organize your website. Janet Stevens (USDA) joined up with the Public Affairs office and tagged along to visit users in slaughterhouses, import facilities, warehouses, etc. In one location, she learned that they rarely used the computer. It was the fax machine that was doing all the business. In the slaughterhouse, they weren't logging on to the website from work. Usually it was on the weekend, at home. Needless to say, Janet rethought her web strategy based on these findings.
Key point: "There's no computer where the chickens are!"

Step 3: Give them what they want
The USDA manages food safety for meat, poultry, and eggs. Not peanut butter. Not spinach. Did you know that? Very few of us do, so we read Department of Agriculture and think food, all food. Janet Stevens (USDA) had to figure out a way to communicate that with her web audience. Users were coming to the USDA site, getting frustrated, and leaving unsatisfied. The solution: USDA added a Recalls page.
Key point: Help the users get what they want.

Step 4: Develop an ongoing dialogue with your users
AARP's Patrick Fitzgerald utilizes surveys (see Step 2) to gauge new members and direct communications strategies. When 10% of respondents replied "Yes, I am caring for an aging parent," AARP knew more about their members and could better direct information to them. Caretakers wanted to connect with other members in the same situation. AARP connected them and now they have a membership base that is talking each other.
Key point: If you do Steps 1-3, Step 4 is easy.

Step 5: Track, evaluate, test. Repeat.
Not only will this help understand your users, give them what they want, and develop an ongoing dialogue, you'll also have some stats to compare and see your progress. There is a population of computer-savvy, blog-posting, You-Tube-watching, online-community-living users who are changing the way we think about communication. Are you ready?
Key point: Your website is an ongoing investment. You must evaluate and adapt continually.

Image: Peter Morville's honeycomb diagram showing the facets of the user experience

"The best designed products won’t even need manuals."
Don Norman

In 2001 Steven Heller interviewed usability expert Don Norman for Print Magazine.

SH: Do you believe, as I do, that the designers of instruction manuals make confounding guides? In other words are there built in handicaps for usability, and if so, why?

DN: Those who write instruction manuals know what it is like to be in hell. They are given unusable objects and told to write clear, intelligible instructions. And, of course, they must also heed the legal warnings. They have an impossible job.

Want to know what designers of manuals should do? They should design and write the manual before the product is designed. Make the manual simple and elegant. Then insist that the designers build it the way they have described it. Then we might actually get usable products. and simple manuals.

The best designed products won’t even need manuals.

What products have manuals? VCRs. Shelving units. Phones. Vacuum cleaners. Cars. You. Websites?

There are no website instruction manuals for users that I know of. What a bad idea. Can you imagine having an instruction manual for every website you visit? How thick would each manual be?

Don Norman does a good job explaining what we do at Forum One. We write the manual for a website (legal warnings and 508 compliance considered). We design the website based on the manual. Lastly, we launch the website. The usability of the website depends on the how well we write the manual, design it, and test it. It's a hard job, but somebody's got to do it! Seriously, nobody's got a manual.

Interview: first published in Print, 2001 ‘Backtalk’ column. Read it here.
Photo: Michael Graves ‘Nana’ teapot

Steve Krug has come out with a second edition of Don't Make Me Think! A Common Sense Guide to Web Usability. It's short. It's funny. I read all the footnotes.

The first edition was published nearly five years ago. Since then the state of the web has changed considerably. However, most of Krug's lessons and recommendations remain pertinent.

What has been added? There are three new chapters:
Usability as common courtesy - about the importance of treating users well
Accessibility, CSS, and you - about accommodating all users
Help! My boss wants me to            . - provides ammunition against bad design decisions

What has been deleted? The three chapters in the first edition about user testing have been condensed into one. You can still find the original chapters on Krug's website.

Some quotes I enjoyed:
"If you're not sure whether something is happy talk, there's one sure-fire test: If you listen very closely while you're reading it, you can actually hear a tiny voice in the back of your head saying, 'Blah blah blah blah blah....'"
- from the chapter Omit Needless Words (pg 46)

"On the face of it, 'number of clicks to get anywhere' seems like a useful criteria. But over time I've come to think that what really counts is not the number of clicks it takes me to get to what I want (although there are limits), but rather how hard each click is - the amount of thought required, and the amount of uncertainty about whether I'm making the right choice."
- from the chapter Animal, vegetable, or mineral? (pg 41)

"We're thinking 'great literature' (or at least 'product brochure'), while the user's reality is much closer to 'billboard going by at 60 miles an hour.'"
- from the chapter How we really use the Web (pg 21)