Haze: Simple, Elegant, Awesome

It’s not every day (or every week even) that an app makes me sit up and say “holy crap, this is awesome!”. But the Haze iPhone weather app did just that for me this week.

Haze for iPhone
Haze for iPhone

Haze is a simple weather app that seamlessly brings together two important concepts of mobile interaction design: keep apps simple and focused, and make them engaging and fun to use. Haze nails it on both counts.

Unlike apps from The Weather Channel and other sources, which offer lots of data, features, and charts, Haze does just three simple things but does them very well — It tells you the current temperature, it tells you the likelihood of precipitation, and it tells you the amount of available sunshine for the day. Haze also uses subtle visual cues in its animated background to show if each of these are trending up or down over the next day.

Haze also incorporates fluid animations and audio feedback as you move between screens to create a rich and engaging experience. You can tap into each of the three main information points to get an expanded (but still highly visual) view of the information, but yet never feel like you’re swimming in data. Even in the “in-depth” view Haze uses the size of the infographic elements to indicate which data points are subordinate to the main one.

And real info junkies can easily swipe down to get five-day forecasts, which are also elegantly and simply presented. Add in different themes for a bit of customization and Haze seals it as a fun way to get basic but important information.

You can download Haze for 99 cents from iTunes.

Wikipedia Redefined Project

A co-worker recently made me aware of a project by design agency New! that was a two-month exercise to redefine and redesign Wikipedia, one of the world’s most popular websites. If only we all had the time for such an interesting effort.

The New! revision of Wikipedia is online at the Wikipedia Redefined website, where the team explains the multi-faceted approach to redefining this internet icon.

It explains its motivation quite simply:

“It all started from a question: ‘If we could improve one thing which we use and love, what would that be’. We have chosen Wikipedia and called our quest Wikipedia Redefined.”

New! started with the brand, moved on to the logo and what it conveyed, and eventually drilled down into the information architecture, user interface, and UI elements like icons that make up the Wikipedia experience. New! approached the site from both the content-creation and content-consumption aspects, and even took on the Wikipedia text editor. The results are impressive.

Of course there are flaws, as there are with all design projects. Some of the icons are not immediately clear as to what they do and some of the color choices are too low contrast for people with less than perfect vision.

But remember, this is a design agency trying to show its creative capabilities. The fact they took on such a challenge should at least inspire all of us to pick a homepage or a web form or a mobile app screen we don’t like and just have a go at making it better. Those exercises would not be informed by the technical or financial realities of the product in question, but they could serve to stir our own creative juices and cause us to look at our own products in a new way.

The Wisdom of Edward Tufte

I finally took Edward Tufte’s day-long information design course last week. Tufte, long a thought leader on the topic of graphically showing quantitative and scientific data, shared his principles for displaying this evidence in any media. Here are my notes:

  • Designers of data displays, either printed or online, should strive to reduce the time it takes to learn the display format and increase the time the reader devotes to thinking about the data.
  • Use “small multiples“, repeated use of the same type of graphic, to reduce learning time. Once a person figures out how one graphic is read, they know how to read all the graphics.
  • Charts and other graphical displays should always tell stories. This often involves displaying information using a time scale.
  • Data displays should supply context as well as information. A price increase from one year to the next tells little unless it is shown in the context of the past five or 10 years.
  • Multi-variate data graphics supply the richest context and tell the best stories. Price increases (or declines) shown over time and compared to wage increases (or declines) for the same period tell a much more powerful story than simply showing the price increase alone.
  • Keep “chartjunk” and “chartoons” to a minimum. Embellishments like gradients or patterns for the backgrounds of charts and graphs only get in the way of the information. Designers should strive for a high ink to data ratio.
  • If content in a display needs to be compared to other content, put the two chunks of content next to each other. It’s unreasonable to ask a person to go back and forth between web pages or printed pages when trying to compare two or more things.
  • Using area to display quantitative data is a risky proposition. Unless the scale of the area of all diagram elements exactly matches the scale of the data, the graphic is lying.
  • In a related thought, the only thing worse than using a pie chart to display quantitative data is using multiple pie charts. It is impossible for people to figure out what percent of the whole is represented by the pie pieces without the numbers being displayed on the slices. And if you need to display the numbers, why not use a simple table instead.
  • When designing line and bar charts, don’t place a legend off to the side. This forces people to have to scan back and forth between the graphical element and the legend. It is better to put the notation near the elements in the graph itself.
  • A graphical user interface should be “invisible” so that people can focus on the information. If we as designers do our jobs correctly, people won’t be aware of our work.

I’m sure there are points I missed. All of Tufte’s principles are covered in four of his beautifully produced books that came with admission to the course. They are themselves examples of Tufte’s principles.

Newspaper Website Redesigns

After spending some time looking at the recent redesign of the Chicago Tribune and Los Angeles Times websites I have to give the Tribune a slightly better grade for usability and learnability than the Times, mostly based on some simple design choices and the treatment of links, while the Times easily wins for sharp visual design.

The key area where the Times lacks is in how it handles navigation. In the new design almost all text is black, strongly mimicking the look of a print newspaper. From a visual design perspective this is just flat. The Tribune in contrast makes its headlines blue. The headlines of both sites are links, are not underlined, and give rollover feedback. The blue text on the Tribune site just seems to stand out more and makes it easier to scan the page. The different color also hints at clickability and invites exploration. Blue is one of the Tribune’s brand colors, so this also makes sense from a marketing perspective. There is no reason for the Times to mimic print design to such an extreme.

Los Angeles Times
Los Angeles Times
Chicago Tribune
Chicago Tribune

While most news website users will expect that headlines are links, the all black text treatment of the Times makes it harder to scan for relevant content and triggers. The Tribune, while using the same template, makes it easier to scan down the page and find links. Blue is clickable, black is not.

Both papers use the same template, not surprising since both are owned by the Tribune Company, but the way the Chicago paper executes the design makes it is a little easier to learn how to use the site. The key differences are:

— On the Tribune homepage, the tabs in the global navigation are visible no matter what the user does. On the Times homepage, the user has to roll over the global navigation before a tab background image appears. While the Times global navigation is pretty clear, the Tribune makes it a little more obvious that it is navigation. Once you go beyond the Times homepage, section tabs are revealed.

— On the Tribune homepage a global navigation item for “home” is selected, giving the reader a clear sense of where they are in the site hierarchy. As you navigate away from the homepage, the “home” tab provides a nice target to get back to a starting point. The Times homepage in contrast shows nothing as selected, thereby losing a chance to educate users about the navigation. After you navigate away from the homepage you have to click the logo to get get back. That’s hardly a fatal flaw, as most web users have figured out that a site’s logo links back to the homepage, but the Tribune’s design again just makes the navigation choices a little more obvious.

— Another difference is how the sites handle weather in their header. To the right of the Tribune logo is the temperature and an icon indicating whether it’s cloudy, sunny, raining, etc. The Times uses that real estate for date and time, but no weather. Weather is more volatile in Chicago, so maybe this makes sense. But to replace it with date and time doesn’t seem to offer the user anything. Usage metrics may show that Times users don’t spend much time on the weather page, but how about a highway gridlock meter icon that links to a real-time expressway traffic page or something else useful.

When it comes to typography and general visual design, the Times wins hands down. It has settled on a nice serif font — Georgia — that is consistently applied and easier to read than the Tribune’s Arial, especially for the articles. If the designers were looking to mimic the typographic sense of style of the New York Times or A List Apart, they hit their mark. It just looks classy. If they add some color to the headlines, they’ll have a real winner.

The Times also handles the homepage areas that feature content from other sections of the site in a more stylish and cleaner way than the Tribune, which has bulky colored headers for features like Sports and Entertainment. Aside from the lack of color in some of the fonts, the Times overall has more appealing visual design. And the faux ink splatter at the footer of the page is a fun design element.

The other papers in the Tribune portfolio (Baltimore, Orlando, Ft. Lauderdale, Hartford, Allentown, and Newport News) also are using the same new template, but the Chicago and LA papers have the best executions. The others lack personality and could easily be mistaken for any other news website.

If the Tribune Co. had mixed the visual style of the Times with the usability advantages of the Tribune, they’d have had a truly stunning design.

Bing – Inconsistently Anticipating User Needs

I noticed an interesting thing while playing with Microsoft’s Bing web search — certain terms return a results page with only one result. Well, that’s different.

A Bing search for Google returned a results page with one result (Google.com) labeled “Best match”. Beneath that was link to “Search for other results containing google”. While this is inconsistent with the other search engines people are familiar with, I think it’s a good example of anticipating users’ needs. Most people searching for something other than Google’s homepage would likely use more than just one term, for example “google jobs” or “google stock price”.

What I don’t like is how Bing inconsistently applies this rule.

Searches for several major global brands were handled differently than Google. Searches for Apple, Nike, Motorola, Sony, Coca Cola, Budweiser, Playboy, and Paris Hilton all returned standard search results pages, with either a “Best match” followed the full list of results or a set of image search results (Motorola and Paris Hilton) followed by standard search results. Perhaps the standard results page is used when the search algorithm doesn’t rank the top result high enough on some other internal relevancy scale. But that wasn’t clear to me and made the interaction with Bing a bit confusing.

Switching from consumer brands to baseball I searched for New York Yankees. The search returned the current box score of the Yankees-Devil Rays game followed by a standard results page. Sports team searches do deserve a different treatment since fans are often looking for the latest scores. When I searched for Chicago White Sox, I got the box score for the Sox-Twins game followed by a standard results page. The same was true when I searched for their crosstown rivals the Cubs.

When I searched for the Arizona Diamondbacks, whose game that night had not yet started, I got a page with no box scores and standard search results. What was odd was that in all three baseball searches the official team site was the top result, but it was not labeled “Best match”. I again wonder if some internal relevancy threshold that was not met by the highest ranked result.

Moving to newspapers a search for New York Times returns the single link results page with a twist — a link to news stories labeled “Top headlines” and a search within the Times text box. I got the same results page design I searched for Chicago Tribune. This would be helpful for someone searching for a particular online media site.

Moving to media and content portals outside of newspapers, I tried MSN, Yahoo, AOL, and CNN. MSN, Yahoo, and AOL got the special one link plus search box page. CNN, however, only returned the Best match and top headlines with no search within box.

Looking at social media sites, Facebook and MySpace got the special one link treatment, but only MySpace got a search within box. Twitter got a standard results page plus search within text box. Meebo got a standard results page.

Technology brands Dell, HP, Compaq, Sun, Oracle, Linux, Firefox, and Microsoft, all returned one of the previously seen variations of a standard results page (with or without search within or Best match). Ironically the Microsoft search did not have the top result (Microsoft’s homepage) labeled as a Best match or a search within box.

Searches for online retailers yielded more consistent results. Sears, Crate and Barrel, Gap, and Amazon all returned a standard results page, as did Staples, CDW, Barnes and Noble, and Walmart (most with search within boxes). One difference was most the searches for the bricks and mortar retailers all had a map of the stores nearest my location with addresses and phone numbers.

There were many other cases where Bing offered content of value to the searcher beyond the standard results page we are familiar with. It makes sense that searches for sports teams in active play return results with boxed scores, that newspaper searches include a search box and links to top headlines, and searches for retailers include a map to store locations, especially if the behavioral data shows that’s the content most people are looking for when doing those searches. This kind of content is nothing new as Google has long handled its searches this way.

Providing valuable content and removing clutter is useful, but the on-again off-again Best match label and the inconsistent use of the one-link results page may leave some users wondering what they are doing wrong. Bing needs to improve on that.

Take a look at an interesting site that shows side-by-side comparisons of Google and Bing. It’s a nice way to compare how the two sites handle the same search.

Bing also has a page that explains a little of what’s behind Best match.