Topic : Interaction Design

8
Aug 11

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.

21
Jun 11

Touchscreen Design Best Practices

Saturday was Day 2 of the Mobile UX sessions at Nielsen Norman Group’s Usability Week in San Francisco. The focus was on designing for touchscreens. Here are my notes:

  • Allow Users To Go Back and Undo: Make sure users can compensate for accidental taps. Have them confirm any action that would delete their data, erase their work, or process a transaction.
  • Don’t Force Users To Change Device Orientation: Whether your app is a content app like the New York Times or a utility app like American Airlines make sure it can adjust its layout to however a person is holding their device.
  • Pad Those Links And Buttons: Padding a widget can improve people’s accuracy in clicking it. For example, if you display an product image and description in a list layout, make the whole row clickable, not just the image or the text.
  • Padding Can Prevent Errors, But Won’t Increase Efficiency: In cases where you have a clickable invisible padding area around an object, people will still slow the movement of their finger as it approaches the target. Because they don’t know the target is actually larger, they treat it like it is smaller. Fitts’ law is still on the books.
  • Pad Links On Your Wired Site If You Want It Used on Tablets: Many site managers have learned that iPad and other tablets owners are using their wired sites instead of the mobile versions that were designed with smartphones in mind. See Yahoo!’s tablet site for cues on how a wired site can be tweaked to work on a touchscreen tablet.
  • Avoid Localized Swipes: When a left or right swipe only changes one horizontal section of a screen, it confuses people as to what the gesture does. Localized swipes don’t match real world movement, in which pushing something moves the entire object, not a portion of it. Don’t make your app a stack of independent carousels.
  • Provide Cues To Unseen Functionality: Gestures are great for maximizing screen layout but can be undiscoverable by new users. The convention of pulling down on a screen to refresh content that Twitter and other mobile sites use is hidden from the view of new users. Provide cues to new users to help them learn these gestures.
  • Don’t Rely On The Accelerometer For Navigation: People who are new to more advanced mobile devices may not even know about “shaking” as a means for input. Others may find it clumsy or uncomfortable. It’s OK to use the accelerometer, but don’t make it to sole means for input. Urbanspoon’s iPhone app is a good example of an app that uses the accelerometer but also has a big red button.
  • Use Sliders With Caution: Sliders as interface controls are imprecise. Don’t use them if the person has to get to an exact value.
  • Tablets Are Not Smartphones: Don’t be afraid of rich interactions on iPads and other tablets. Tablet users are not “on the go” in the same way as smartphone users.
  • Design A Distinctive Home Screen Icon: Make your app’s icon distinct so it can be recognized on a crowded home screen. If people have to remember your app’s icon, they may never click it.
  • More Is Often Less: Adding features to your mobile app doesn’t always make it better, especially if they add too much complexity. Add features of they make sense in a mobile context, not just because they exist on your wired site.
18
Jun 11

Mobile Design Best Practices

Today was Day 1 of the Mobile UX sessions at Nielsen Norman Group’s Usability Week in San Francisco. Here are my notes:

  • Design For Interruptions: Since mobile usage is out “in the wild” you have to assume interruptions will happen. Support auto-save and user initiated saving of work. Remember what people type into form inputs and never make them type the same information twice.
  • Design For Continuous Experiences: If users can enter information or save things on your wired site, make sure they can access that information on your mobile app/site. And also let them save and add information on the mobile version that flows back to the wired site.
  • Reduce Interaction Cost: Anything you can do to remove typing reduces interaction cost. Even on the most advanced mobile device, typing is annoying at best (I know this because I’m writing this on an iPad). Whenever your design asks a person to type, ask yourself if there is another way to get this information other than the device keyboard.
  • Make Designs Self-Sufficient: Don’t make people have to leave your app/site to get a necessary piece of information. For example, if your site is a banking site that only processes transactions on business days, don’t offer a date picker that includes weekends or holidays. If someone has to get into their device calendar to check if June 19 is a weekend, they may not get back to the same place in the transaction and may have to start over.
  • Don’t Force People To Rely On Memory: Don’t send people an email with a cryptic promotion code and then send them to a site where they have to remember that code. Pass the code in on the URL if they click anything on the email and keep it in memory for the length of their session. If they have to go to their email when presented with a promo code input during checkout, they may never get back to complete the transaction.
  • Preserve Session State Throughout The Visit: Don’t let people click a Save to Favorites icon from a search results screen and then send them back to a screen where they have to reenter their search term(s) to get the same results list. Remember what they were doing and get them back intact when they go down alternative paths. And provide them a way to easily start a new search if indeed they are done with their previous search.
  • Remember People’s History: Don’t make people reenter information they already provided. If someone enters a zip code or selects a gender while shopping for shoes, persist that throughout their session (at a minimum). There’s little that’s more annoying than having to reenter information on a mobile keyboard.

Day 2 of Mobile UX is tomorrow. The focus is on touchscreens. You can follow the live tweets at #nnguw.

28
Mar 11

Tobii and Lenovo Experiment With Eye-Controlled Laptop

Eye tracking equipment maker Tobii recently demonstrated an experimental laptop designed in collaboration with Lenovo that uses a person’s eye movements to interact with the computer’s user interface.

The interactions involve combining mouse clicks or keystrokes with eye movements to provide an enhanced user experience. The eye tracking dimension of the demonstration shows that eye movement would be used to complement, not replace, keyboard and track pad input from the user’s hands. Anders Olsson of Tobii demonstrates in the video below the modified Windows 7 user experience.

See Tobii’s press release for more details.

17
Mar 11

Features Meant to Assist Should Support Efficient Use

Tools meant to make things easier for people shouldn’t slow them down. I ran into this situation when I was signing up for a webinar through GoToMeeting this week and tried their Show in my Time Zone features since the meeting was scheduled using Pacific Time.

Clicking a link exposed a layer with a select menu of different time zones, but they all led with the offset from GMT, such as (GMT-06:00) Central Time (US and Canada). So the user has to shift their focus to the middle of the options to scan the list for the first characters of meaningful information. Why not format the list as: Central Time – US and Canada (GMT-06:00)? It’s admittedly a small detail, but as Charles Eames said, “The details are not the details. They make the design.”

GoToMeeting Time Zone Selector

GoToMeeting Time Zone Selector

16
Feb 11

Visualizing the Futures with Kevin Henry

I attended a fascinating lecture tonight on product design given by Kevin Henry, an associate professor of design at Columbia College in Chicago. Henry’s talk explored techniques industrial and interactive product designers can use to visualize their designs and visions.

While his talk, organized by the Chicago chapter of the Interaction Design Association, focused heavily on industrial design, it also looked at how interaction design techniques like sketching and prototyping play important roles in product discovery and envisionment.

This video is of a similar lecture he gave at the Segal Design Institute at Northwestern University in December.

26
Jan 11

Yahoo Bus Stop Derby

Now this is just fun and cool and engaging.

Yahoo recently rolled out a marketing campaign for its mobile apps called Yahoo Bus Stop Derby that lets people at 20 San Francisco bus stops play games against each other. The derby features four games played on 72-inch LED touch screens at the bus stops. The games allow people to indicate the neighborhood they live in for an added element of citywide competition. The campaign ends Thursday and the winning neighborhood wins a concert by the band OK Go (North Beach was winning this afternoon).

Further proof that the convergence of wireless and multi-touch technologies is changing everything.

24
Jan 11

Marty Cagan and Designing Great Products

Last week I had the good fortune to spend two days learning about designing great software from Marty Cagan of the Silicon Valley Product Group. Cagan’s approach to creating great consumer software products comes from years of working on wildly successful ones, such as Netscape, AOL, and eBay, and is a radical change from the traditional approaches many companies still use.

Cagan’s two-day seminar presented the topics raised in his 2008 book Inspired: How To Create Products Customers Love along with advice tailored directly to the audience, in this case my company, Cars.com.

One of the key aspects of Cagan’s approach is a focus on a core working relationship between the product manager, the lead engineer, and the lead interaction designer supporting a product. His method places heavy emphasis on a great user experience as a key part of making software people really want to use. He also advocates delegating product design decisions down to the product manager and empowering that person to make the right choices, while people managers and other leaders are tasked with doing what needs to be done to develop their product teams so they can be trusted to execute.

The book is a quick read and well worth the time as it opens up a new way of thinking about product management and software design.

9
Jan 11

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.

28
Dec 10

The Right Tool at the Right Time

Someone on the Interaction Design Association’s LinkedIn group recently asked how other people were using wireframes at work. This inevitably led to the age-old question of what is “the best” wireframing tool. Not only is there no best tool, but it’s not really a good question to begin with. The question should be what tools are best for the different phases of a design project.

For example, I use iRise on my job at Cars.com. iRise is an extremely powerful prototyping tool that allows you to build dynamic prototypes with real data records behind them. It’s one of the best prototyping tools available, but it’s also time intensive to use and not geared toward the early exploration of ideas.

For early product ideation the good old sketch pad or white board still work best. Sketching is fast, cheap, easy, and accessible to your business partners so they can participate in design exercises.

Balsamiq is also great for rapid idea generation, but you need to have a computer handy with the software installed. And it won’t work for impromptu design sessions in a conference room or coffee shop. The mechanics of working with the program can get in the way of the creative design process.

OmniGraffle and Visio have their place when you need to create annotated wireframes that can be easily printed or shared electronically. Where wireframing fails is in showing interactivity. To demonstrate rich interactions using Ajax or HTML5, it’s probably best to code it in HTML or create a quick Flash prototype.

And, of course, time and financial constraints will also influence what tools you use. For a more comprehensive look at the many wireframing and prototyping tools available, see Holger Maassen’s recent post on UX4.com.