UXXU 2011: Designing for Good

UXXU Team Structure
UXXU Team Structure

I’m getting totally psyched about taking part in UX4Good’s UXXU 2011 design competition later this month. The event is a very cool idea and a great way to meet and interact with other UX and visual design pros while having fun and trying to solve some of the most challenging social problems of our world.

UX4Good was launched by the cool folks at Manifest Digital in Chicago. Hopefully there are more efforts like this in the future so we can harness all the amazing creative energy in our field. I can’t wait to see what we come up with.

Learn more about UX4Good and UXXU 2011.

Design Pattern Resources

Looking for some new design pattern resources? Here’s a few I’ve been using lately:

Since design patterns first arrived in application development to provide proven and repeatable solutions to common programming tasks they’ve evolved into a great way to standardize design and IA solutions for common interface elements used across a variety of websites. Let me know if there are any helpful new pattern libraries you’re using.

Beyond Mice and Keyboards

The ubiquitous keyboard and mouse that have dominated computing for the last 30 years are getting some company and competition as gesture interfaces become a reality outside the test lab.

Microsoft’s Project Natal for Xbox 360 promises an immersive user experience in which the interface becomes more invisible than ever before. With Natal the user is the interface. Looking to take the user experience far beyond Nintendo’s Wii, Natal uses a 3-D depth camera and microphone for motion, gesture, and audio input. Xbox claims Natal will let people steer an on-screen race car by moving their arms in steering motions and use gestures like actual kicks to move a soccer ball on screen. In one demo, Natal recognizes a person’s face and automatically logs them into their Xbox profile. Think Wii without the controller. Wikipedia has a brief article on Natal’s background and technology.

And if you think this is a just going to be a high-tech gamer toy, look at the opportunities for communication and commerce in this post on Engadget. Imagine manipulating your TV’s menu system with the same gestures you’d use on an iPhone. No convoluted controller or touch screen required. It’s like Minority Report in your media room.

Motion-detecting interfaces aren’t limited to efforts as ambitious as Natal. Here’s a look at Pek Pongpaet using the accelerometer in the WiiMote to control an on-screen X-Wing fighter. Many areas of education, from aeronautics to architecture, could be revolutionized with touchable and movable experiences. Pek also did a recent demo at DePaul University in Chicago where he used the Wii Balance Board to connect to a website through WiiFlash Server to steer a car on screen by leaning in the direction he wanted to steer the car.

It’s clear new ways of human-computer interaction are coming thanks to multi-touch UIs and gestural interfaces. Aching gamers’ thumbs everywhere will be rejoicing.

Convert: Great Mobile App Using Iterative Design

If you ever needed an example of the power of iterative design you need look no further than what the designers of the Convert app for iPhone did with their amazing mobile app.

The tap tap tap team posted a video a while back that plays like a time lapse video of all the iterations the design team went through. It’s amazing to see all the choices they team went through, discarding many and making others integral to the app (see the video below from YouTube).

[youtube=http://www.youtube.com/watch?v=oDSrZ5Nv1dI]

The recognition by the design team that iteration is a key part of the design process is a testament to the value of the UCD process. This app, which is well worth the 99 cents just for the exposure to the interface, is useful, elegant, and, perhaps most importantly, fun to use. But it should be, it’s the product of continual refinement of a great idea.

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.

Designing in Excel

I’ll admit Microsoft Office is not my favorite place to spend time, but while working on a design project last week I discovered the ease of prototyping and wireframing using Excel. It won’t get me to stop using Visio any time soon but there may be occasions when Excel is a faster tool for certain projects.

I was working on a set of screens for a business-facing reporting application for a B2C site and had to work with a lot of charts. To make the screens more realistic, I was creating charts with dummy data in Excel and then moving them to Visio for the wireframes. After talking to a friend I decided to create the wireframes right in Excel.

Here’s how it works. First, use the Formatting Palette to turn off gridlines and get yourself a blank page. I used a screen grab of a long form to create all the input widgets I needed for the interface and put those off on a tab by themselves for quick access. Airline websites are a good place for this since some have nice calendar widgets.

I then used another tab as my data tab, which made cranking out the charts pretty easy.

Finally, for each page or screen of the reporting tool, I used a different tab. Giving each tab a unique name (which Excel requires) makes it possible to link to it from other tabs. Using background shading, borders, and links, I was able to create a serviceable set of tabs for the main navigation. Individual cells can be given a border and background color to create buttons. And adding the links means the wireframes could be the start of a prototype when I move to the testing phase. Excel even allows you to save as HTML, much like Visio, to create a set of HTML pages with your designs embedded as images.

The main drawback I encountered was the rigid grid layout imposed by the rows and columns. I had to scrap a few things until I got it right, but think I saved time overall from the Visio+Excel approach.

I’m not sure I’ll use this technique again unless I’m designing a chart and data heavy site. In those cases the time saved may make it worthwhile. If nothing else, I got to explore a different design approach when the favored tool had limitations.

While Googling around on the topic before writing this I came across this book at Amazon – http://tinyurl.com/dfvtb2. I may pick it up to see what more you can do with Excel.

Paper is Your Friend

Today I learned (relearned unfortunately) the value of digging into a design effort with nothing more than an engaged end user and a blank piece of paper. I’ve been working on a product management reporting dashboard the last few weeks and found myself yesterday morning sitting with a detailed set of requirements and a looming deadline. Not always what you want to see at 8 AM but I thought I could rise to the occasion with a bit hard work and a phone on mute.

I plowed straight into Visio designing what I thought were going to be a useful set of screens detailing the various performance and usage metrics of a new site I’m working on. After a good 15 hours invested in the effort over two days, I looked at my work and had the sinking feeling I had wasted two days designing an absolutely useless set of convoluted screens on par with a federal tax form. So I spent a few more hours rearranging the proverbial Titanic deck chairs before seeing that I was working too hard but not too smart. Not my best days.

So my next move was to scrap the whole effort and start from scratch. I grabbed a few end users and asked them a series of questions about how they wanted to consume the information and how they would be using it. The key point I took from our talk was not so much details of the exact data points as much as their need to consume the information quickly. They was looking for an easy-to-digest set of information that they could process in a few minutes and determine if there was an emerging problem that needed immediate attention. We quickly sketched out some very crude designs and within 30 minutes had a whole new direction. The project is now back on track and some of the users have given preliminary approval to much of what they’ve seen.

This is hardly a new insight but one we sometimes lose sight of on projects with tight deadlines because we are too focused on making progress on the actual deliverables. There are some good resources at A List Apart, UseIt.com, and at the website for Carolyn Snyder’s book Paper Prototyping.