Posts about Information design


Speculative Tools for Learning about Politics

Cooper has just published the third in a series about Elections for UX Magazine. Below is an excerpt from the article "Speculative Tools for Learning about Politics" written by Joe Kappes. Read the full article on UX Magazine.

Read More

With all the noise of an election cycle, it can be difficult to parse out what you really believe when it comes to key political issues and with whom you actually agree. 

Read More

Stretching Google Material to make better desktop navigation

My revised “Single Artist” view for Google Music: it allows for better horizontal navigation across albums and artists 

a.k.a., Making Google Music (on desktop) more like iTunes 

a.a.k.a., Tweaking Google Material for broader data sets 

a.a.a.k.a., Google Music annoys me sometimes, so I drew up some fixes instead of just getting over it like I probably should

Original article posted on Medium.

I like Google Material. It’s a well-documented and thoughtful end-to-end visual/UI language that’s adaptable to a lot of consumer apps. It’s obviously a mobile-first UI language: the card-first patterns are highly tangible and tractable, and its navigation structures tend to be very vertical. Take, for example, Google Music’s navigation structure:

The current Google Music navigation structure, from library to song 

This highly “vertical” navigation structure tends to work well on mobile devices: you don’t have the space needed for persistent on-screen navigation, and (perhaps) mobile use cases trend towards finding a particular item rather than, browsing around. But when you apply this pattern to desktop, you see limitations: that’s a lot of navigating up and down (a version of “pogo sticking”) if you’re navigating across multiple categories… think, “I want to listen to something from my music library, but am not positive which artist/album/song I want to listen to yet.”

A sampling of Google Music’s current desktop screens (June 2016). Lots of white space 

On desktop, Google Music's simple, vertical navigation leads to lots of white space, heavy-handed photography, and "clicky" navigation.*

While the “browsing” scenario I described above isn’t necessarily common — in fact, Google's research may have found that users tend to look for something specific in the app, so that’s what it’s optimized for — browsing can still be accommodated. Just look at the classic (and current) iTunes app navigation: persistent, scrollable list menus with immediate selection and visual feedback.

*It’s puzzling that they don’t at least use back arrows on Desktop (as they do on mobile) to help the user go back up the navigation ladder. This leads to troubling “get me outta here!” moments.

An older version of iTunes (left), and a newer version (right, June 2016). Plenty of persistent navigation.

I wanted to emulate some of this on Google Music’s desktop site, using Material Design, without breaking Material’s established patterns. I think I partially succeeded by employing some “cheats” that Google has used on other Material products. I also spruced up some of the UI according to my own tastes (sorry, couldn’t help it).

Read More

Using Google Music's Desktop app as an example, we try to improve the navigation of a Google product using only elements from the Google Material toolbox.  

Read More

How much interface does your analytics product need?

Original article posted on Medium.

While working on a project earlier this year, an interesting tidbit emerged from research: users tended to have just a few simple needs when it came to accessing data. Given that the tool we were working on is pretty robust, the lightweight nature of the most common use cases was a surprise… there is more “tool” available than what is necessarily needed. 

This reflects a broader trend among analytics providers: there’s a popular interface-first reflex when it comes to building data products. We opt for flexibility over convenience, often attempting to satisfy all plausible use cases rather than optimizing for the most frequent ones. Here’s an outline of some analytics use-cases, addressed in a one-size-fits-all way:

The approach is, in a way, straightforward. Give the user access to the data. If they have a question, they can go to the interface and “tell” it what they need. They then digest the information, isolating some meaningful insight (hopefully) before disseminating the information to their peers, supervisors, or other stakeholders. 

The interface-first approach is capable of satisfying many use cases for end users. Analytics tools can be used for all sorts of purposes — from status updates to fact-finding to open-ended exploration — but it’s not unusual to see a user base rally around a few lightweight ones (hint: open-ended exploration is usually not among them). Let’s think through a simple use case: a gym owner wants to know if member attendance has changed this week, as weather has been especially nice. Here’s how that scenario looks for an interface-first analytics tool:

Read More

Taking a look at different approaches to analytics products: interface as a "tool" vs technology as an "assistant." Inspired by research done in the field. 

Read More

A Public Display of Interface

Graphic Design from the Collection, May 14–October 23, 2016, SFMOMA, Floor 6

The last time I visited SFMOMA was 3 years ago, just before they closed for a major expansion of the museum. I worked on an interface that had just won an interaction design award several months prior to my visit and was on a designer’s high, daydreaming as I walked through the museum, wondering, would a modern art museum, like SFMOMA ever feature the design of something like an interface? Maybe I could be part of that history, contributing to an innovative interface or at least one little icon. 


Amused by the idea that one day there could be an exhibition detailing the mode of interface style throughout the years, I imagined the possible exhibits celebrating a functional, digital aesthetic.

Consenting Affordances: Web vs. Desktop and their Lovechild, Mobile

Wistful Analog: Skeuomorphism and the Rise of Flatland

Extravagant Limitations: Evolution of the Application Icon

Window Shopping: The Armors of Netscape, Explorer, Firefox, and Chrome


Could something like a 16x16 icon be on display in a modern art museum? Would something so tiny and digital be considered too silly and insignificant to rest under the same roof as a Rauschenberg, O'Keefe, or Warhol? With the awakening of a new SFMOMA, the interface daydreaming stopped and revealed a new reality: the recognition of an artform whose infancy rivals that of Pop Art but until now has yet to be collected, to tell a new story, found on floor 6 in the exhibit: Typeface to Interface.

Typeface to Interface.

I was reunited with those interface exhibition dreams during the opening of the overwhelmingly airy and far-too-much-to-see-in-a-day new SFMOMA. The 170,000 square feet of exhibition space turns the museum into one of the largest art museums in the United States (larger than the New York MOMA and The Getty Center in Los Angeles) making SFMOMA one of the largest museums in the world specifically focusing on modern and contemporary art. 

The exhibit takes selected work from the museum's permanent graphic design collection (spanning as far back as 1950) and joins it with examples of graphic design that has shaped the development of the interface – our modern day means of visual communication. Posters, visual communication systems, and annual reports are interwoven with a variety of technology platforms: the desktop interface, the stylus, and the mobile touchscreen – the tools and methods we’ve used to communicate via the interface. Underlying all of this are the foundations of visual design and as a result an understanding of human behavior.

Read More

With the awakening of a new SFMOMA, the interface daydreaming stopped and revealed a new reality: the recognition of an artform whose infancy rivals that of Pop Art but until now has yet to be collected, to tell a new story, found on floor 6 in the exhibit: Typeface to Interface. 

Read More

Presidential Election 2016: The Best UI

With each leap year comes a new race to the White House. Candidates are constantly being compared with regard to their positions on health care, international policy, civil rights, and the economy. However, one important issue has fallen off the radar this election: the strength of design of the leading candidates' websites. In this article, I'll compare and assess the designs of the five leading candidates' official campaign website homepages.

Disclaimers 

  • Candidates were selected based on their performance in the primaries at the time of this writing.
  • Candidate names are displayed in alphabetical order.
  • The messaging and imagery of candidate sites can (and do) change on a daily basis.
  • Content may appear differently depending on when you view the site.
  • The websites were viewed in New York City using Google’s Chrome browser. Content may appear differently depending on where you are.

Splash Pages

With the exception of Donald Trump, nearly all of the candidates’ websites use a redirect to a splash page in an attempt to solicit campaign donations or get users to join their cause. All of these splash pages appear on a user’s first visit to the site and most contain a hard-to-find call to action to reach the actual website.

Besides Donald Trump, who does not have a splash page at all, Hillary Clinton has the least obtrusive splash page -- mainly because it isn’t truly a splash page. Most times her site displays a small, easily dismissible pop-up, over a full-screen, transparent background. On rare occasions, after clearing cookies for the site in order to view it as a first time user, an actual splash page appears, asking for donations.

Ted Cruz and Bernie Sanders sometimes display a splash page to promote an upcoming state’s primary or to gather support and collect donations after a win.

Marco Rubio appears to have a persistent splash page for first time visitors, which is always displaying a donation module.

Splash Page Comparison 

Read More

With each leap year comes a new race to the White House. Candidates are constantly being compared with regard to their positions on health care, international policy, civil rights, and the economy. However, one important issue has fallen off the radar this election: the strength of design of the leading candidates' websites. In this article, I'll compare and assess the designs of the five leading candidates' official campaign website homepages.

Read More

Visual Design for White Labelled Products

Designing a product with the intention of being “white labelled” means that you are creating a software for a client to incorporate into their existing (visual language) system. Every now and then design consultants are hired by another consultant to work on a third party’s existing system. This what you call a super white label. Here, you not only have to consider your client’s needs, but your client’s client’s needs, too. It can be easy to start designing with everyone’s goals in mind and eventually lose focus, leaving no one satisfied in the end. These are some basic tips I’ve found that to help start and manage a white labelled project. 


It can be easy to start designing with everyone’s goals in mind and eventually lose focus, leaving no one satisfied in the end.

Read More

What you'll like for dinner

Or: How persuasive design saved my lunch

While I was on route to Amsterdam for IXDA14, something struck me about the way the dinner options were presented to passengers. Here’s what was happening. The flight attendant delivered the menu in the same way to each row:

“Would you like barbeque chicken, beef strip, or vegetarian?”

I’ve been a vegetarian for twenty years now, and I’m a little sensitive to these moments. At first, my identity hackles were raised. “Hey!” I thought, “Why wouldn’t it be ‘Chicken, beef, and spicy red-beans-and-rice?’ We eat food, not a category of food! Those options should be presented as equals because we’re equals…Blah blah blah…ramble ramble…”

Fortunately, as is my habit, I caught myself mid rant, and tried to consider what was good about it. And sure enough, on reflection it’s the exact right way to present these options. Cooper’s been paying more attention to persuasive design of late, so let me explain, because that’s exactly what’s going on. The flight attendants are using choice architecture to keep vegetarians fed.

You see, one of the problems that vegetarians encounter when eating buffet-style with omnivores is that when there is a veggie option present, if it’s too good, there’s a risk that the omnivores will eat all the veggie stuff before we get to the front of the line, leaving us poor suckers with empty plates and sad-trombone bellies.

If the attendant presented “chicken, beef, and spicy red-beans-and-rice,” that’s exactly what’s at risk. An omnivore hearing that might think, “Hey, I’m a huge fan of spicy red beans and rice! Cajun spice is awesome. Bam! Let’s kick it up a notch!”

 

 

But when hearing a menu consisting of two easy-to-visualize options and the category of "vegetarian," omnivores are more likely to be turned off by that third option. “Vegetarian? Screw that. I’m not a vegetarian. I like my meat heaping and with a side of meat. Meat me up, attendant, with the finest, meatiest meatings you have!” They’re less likely to ask after the actual contents of the vegetarian option, as they’re busy thinking about whether they’d like chicken or beef.

Meanwhile the vegetarians (even if their delicate identities are a bit bruised) are relieved when they hear that their needs have been considered. The unlucky ones in the very back of the plane (who failed to arrange a special meal in advance) might even get to eat.

 

descriptive optioncategorical option
omnivoresMight choose :)Less likely to choose, still :)
vegetariansLess to eat :(More to eat :)

It’s not foolproof, of course, but I’ll bet if we could do a plane-by-plane comparison of “vegetarian” vs. “red beans and rice”, the categorical option would result in much more of everyone being happy. And that’s one of the powers of well-done choice architecture.

Or: How persuasive design saved my lunchWhile I was on route to Amsterdam for IXDA14, something struck me about the way the dinner options were presented to passengers. Here’s what was happening. The flight attendant delivered the menu in the same way to each row:“Would you like barbeque chicken, beef strip, or vegetarian?”I’ve been a vegetarian for twenty years now, [...]

Read More

Amber Alert: The Tragedy of Bad Design

If you live in California or New York and you own a cell phone, you probably recently experienced the new Amber Alert capabilities. And by “capabilities,” I mean “the government’s newfound ability to disturb your sleep with non-actionable information.”

In California, the alert that set all this ablaze was in reference to a man, James Lee DiMaggio, who may or may not have killed his friend and her son, burned his house down with them in it, and fled with her daughter. Not that you would have known that from the Amber Alert: “Boulevard, CA AMBER Alert UPDATE: LIC/6WCU986 (CA) Blue Nissan Versa 4 door.” Certainly, Twitter has been all a-buzz about the alerts, and there are dozens of articles on the subject (my personal favorite headline: “Shaquille O’Neal: Yeah I Got That Amber Alert”).

Read More

If you live in California or New York and you own a cell phone, you probably recently experienced the new Amber Alert capabilities. And by “capabilities,” I mean “the government’s newfound ability to disturb your sleep with non-actionable information.” In California, the alert that set all this ablaze was in reference to a man, James Lee DiMaggio, who may or [...]

Read More

UX Boot Camp with Marketplace Money

Old School Radio Meets the Digital Age

Take a look inside Cooper's June, 2013 UX Boot Camp with American Public Media’s Marketplace Money radio show, where students explored the next horizon of audio programming—a paradigm shift from broadcast to conversation-based platforms.

The Challenge
Students rolled up their sleeves to help the show respond to the trend away from traditional radio by finding the right mix of alternative distribution platforms. Marketplace Money came equally ready to take a radical departure from their current format in order to create a new model that redefines the roles of host, show, and audience in the digital age. To reach this goal, students focused on designing solutions that addressed three big challenges:

  1. Engage a new, younger audience that is tech savvy, and provide easy access to content via new platforms, such as podcasts, satellite radio shows, and the Internet.
  2. Inspire audience participation and contribution. Facilitate conversations and inspire people to share their personal stories so that listeners can learn from each other.
  3. Design ways for the host to carry an influential brand or style that extends beyond the limits of the show and engage with the audience around personal finance, connecting with listeners in ways that are likeable, useful, and trustworthy, making the topic of personal finance cool, fun and approachable.

At the end of the four-day Boot Camp, student teams presented final pitches to Marketplace Money, and a panel of experienced Cooper designers offered feedback on their ideas and presentations. In the following excerpts from each day, you can test your own sensory preferences for receiving content as you see, hear and read how design ideas evolved at the Boot Camp, inspiring new relationships between people and radio.

Marketplace Money Class

Read More

Old School Radio Meets the Digital Age Take a look inside Cooper's June, 2013 UX Boot Camp with American Public Media’s Marketplace Money radio show, where students explored the next horizon of audio programming—a paradigm shift from broadcast to conversation-based platforms. The Challenge Students rolled up their sleeves to help the show respond to the trend away from traditional radio [...]

Read More

Explore New Interaction Paradigms at UX Boot Camp: Wikimedia

Advance and apply your UX design skills to a meaningful real-world problem in this intensive, hands-on workshop

BootCamp_WEB

This September, join Wikimedia, Cooper, and design-thinkers from around the world as we find new ways to spread knowledge through mobile Wikipedia. In this four-day workshop, you’ll use new UX skills to make mobile content contribution more approachable, intuitive, and less reliant on traditional input methods like typing. If you’ve wanted an excuse to explore new interaction paradigms and stay ahead of the design pack, this is your chance. Best of all, you get to do all of that in the creative classroom setting of Alan and Sue Cooper’s 50-acre ranch in Petaluma, CA.

Register now: UX Boot Camp: Wikimedia September 17-20, Petaluma, CA

What’s in it for you?

  • Learn new interaction techniques and approaches under the guidance of industry leaders, including Alan Cooper
  • Learn how to think through a problem from both a design and business perspective, rather than blindly applying methods by rote.
  • Energize your practice and make new connections by working on a real-world challenge with peers from around the world.
  • Beef up your portfolio with a smart, new design concept
  • Pick up leadership and collaboration skills that will help you better navigate your work environment.

Read More

Advance and apply your UX design skills to a meaningful real-world problem in this intensive, hands-on workshopThis September, join Wikimedia, Cooper, and design-thinkers from around the world as we find new ways to spread knowledge through mobile Wikipedia. In this four-day workshop, you’ll use new UX skills to make mobile content contribution more approachable, intuitive, and less reliant on traditional [...]

Read More

1 2 3 4