Posts about Design principles


Classification and Design

Us | Taxonomy | The World 

I’ve been interested in classification and taxonomy for a long time. Categories are everywhere, and we use them intentionally or unintentionally to understand a lot of stuff. They’re also great at slithering away when you try to pin them down. In this short series of posts, I want to explore how classification manifests in design, what its relationship is to other popular design concepts like mental models, and what kind of new lens it can provide for understanding how people understand.

Read More

In this article, I explore how thinking about design work explicitly through a lens of classification. We think in categories and so do the tools that we use, and they make suggestions about how we should classify the world. By paying attention to this process of classification, we gain a new tool to see how people understand the world and how our products can, for better or worse, change how they see the world.

Stop Solutionizing and Start Problem-Solving

I made up a useful word a while ago, though I doubt I’m the first to have done so. The word is solutionize, and it means “to come up with a solution for a problem that hasn’t been defined (and might or might not even exist).” Solutionizing leads to solutionization, or “any outcome of the act of solutionizing.” 

This all sounds like nonsense, because it is nonsense. The word solutionize comes from materials science and has nothing to do with design. 

The word is solutionize, and it means “to come up with a solution for a problem that hasn’t been defined (and might or might not even exist).”

Some blatant examples of solutionizing, as I define it:

  • Designing an iPhone app for users who don’t have smartphones
  • Building an MVP that addresses no customer need
  • Creating UI for a service users want to get from a person

Read More


One Hamburger, Hold the Menu

Hamburger menus are becoming increasingly ubiquitous as responsive design evolves, and the UX community is taking notice. Luis Abreu’s article in Smashing Magazine and Josh Constine’s article in TechCrunch have both recently addressed some of the pitfalls of using this menu option on mobile sites. At Cooper we’ve noticed another concerning trend: the use of hamburger menus on desktop designs. Why are designers using these menus? Could it be:

  • An assumption that hamburger menus create a modern website feel, or convey mobile savviness?
  • An attempt to simplify navigation or create the cleanest page possible?
  • Desire for consistency between mobile and desktop versions of sites?
  • A “design once” approach -- an attempt to come up with one elegant design that works across all breakpoints?

Although there is an elegance involved in creating a single design that is relatively consistent across all screen sizes, the difficulty is that as troublesome as hamburger menus are on mobile, they are arguably more troublesome on desktop. We need to remember that people are using the mobile and desktop experiences at different times. Consistency of the information architecture matters, but consistency of menu design can vary by platform. We also need to recognize that people care more about clarity than simplicity. It’s not helping your desktop design to hide the user’s key choices behind a hamburger icon.

 

Top 4 Reasons for Not Using Hamburgers on Desktop Designs

Cooper has deep roots in both UX design and research. While I was ranting about why these designs were horrible and broke long-standing guidelines for good UX, our amazing research team was actually testing some of these designs for clients. The results have not been favorable. Users have strongly preferred standard desktop menu designs, where menu items are exposed on the page, to hamburger menu designs, where menu items were hidden behind the hamburger icon. Here are four reasons, supported by our research as well as our design knowledge, not to use hamburger menus on desktop designs.

 

1. When Users Search, Hamburger Menus Are a Last Resort

Our user studies have revealed that hamburger menus are consistently a last resort for users searching for a specific piece of content. When looking for something specific on a website, whether on mobile or desktop, users will explore the body of a page before resorting to a hamburger menu. They will force themselves to use what’s available in the body of a page, making many wrong turns in the process, when the answer to their problem is sitting there hiding in a hamburger menu. HyperIsland Screenshot Example: Hyper Island. There is so much to explore on the body of the page that users are unlikely to use the navigation to aid in a search for specific content. Don’t expect users to ever access a hamburger menu on a content-rich page such as this unless they’ve exhausted all other possibilities. If you do use a hamburger on a page like this, ensure that all items in the hamburger menu are also accessible via on-page promos.

 

2. When Users Browse, Hamburgers Hinder Discoverability

If you have content that users are unlikely to know exists, putting it in a hamburger menu is extremely inadvisable. When options are hidden behind a button they become invisible until users take the additional step of clicking. Particularly if there is a lot of content in the body of the page, users are unlikely to ever touch a hamburger menu to try to find more. Hamburgers are also not effective when people deep-link into content. Although many designers repeat their menu items in the body of their homepage, these navigation options are often not repeated on deeper pages. Thus, on deeper pages, users may never discover that additional content exists.HSBC Screenshot Example: HSBC Premier Your Personal Economy. Without going to the hamburger menu, there is no way for the user to know that there is also content about “Legacy” and “Family”.

 

3. Hamburgers Create Inefficiency

Hiding a full navigation structure behind a hamburger menu when it’s not necessary creates an extra click for users each and every time they want to navigate to a new section. Squarespace Screenshot Example: SquareSpace . Imagine as a user you want to know both about pricing and what templates are available. The hamburger menu doubles the number of clicks necessary. Is the simplicity worth it?

This problem is worse on sites with large amounts of content and broad/deep information architectures. Having to house a complex menu structure within a drop-down hamburger menu can create unwieldy designs that can create frustration for users.

 

4. Hamburgers Cause Excess Cognitive Load

Hiding a full menu structure behind a single icon forces users to remember where options are. This places undue load on a person’s memory. Recognition is easier than recall. This means that it’s much easier for a user to have their options laid out in front of them in a full menu than to force them to remember the existence of menu options hiding behind an icon.

Huge homepage screenshot.

Huge navigation screenshot.Example: HUGE. Out of sight, out of mind. As a user who navigates to the “Work” page, it’s quite possible that I’ll forget there is an “Ideas” page to explore, because it’s not visible as global navigation.

 

A Desktop Hamburger Menu is Less Egregious When...

Though we would not typically recommend going this route, there are some desktop sites where hamburger menus may be more acceptable.

  • Familiar content: When a site has fairly standard navigation options (e.g., the site is a news site, and the user knows it is likely to have a Business section, a Politics section, etc.).
  • Browse-oriented design: When a site is much more oriented to browsing for interesting content than seeking out specific content, and it’s not critical that users be able to find the content in a hamburger menu (or they can infer that only supplemental information is in the hamburger menu).
  • Hamburger menu content repeated: When a site repeats the items of its hamburger menu -- even the deep IA items -- in the body of the page, so that it’s not critical users see the menu to access important content.
  • Minimal page design: When the pages of your site are extremely minimal and users have no navigation choices but to use the hamburger menu. (This is still inefficient, however!)
  • Minimal information architecture: When you have so few pages in your IA that users won’t have an issue with recall, and/or won’t be navigating much between sections.
  • Utilities: When the only things you’re hiding under the hamburger menu are utilities that are considered less important and less commonly accessed, such as “About Us” or “Privacy Policy”.

 

The Bottom Line

Why are we making it harder for our users to find content that’s relevant to them, particularly on desktop designs where screen real estate is not at a premium? Just as there are very few circumstances where a hamburger menu makes sense in a mobile design, there are even fewer circumstances where they make sense in a desktop design. Designers, let’s not take the easiest way out in this case. Though it may be easy to design a single menu and be done with it, I implore you to consider how to use the space available to you on mobile and desktop (and all breakpoints between) as separate, but related problems. The key is designing a single information architecture that can be exposed through different menu designs, depending on the context.

 

Recommendations for Those Considering Hamburger Menus on Desktop

  • Test, test, and test some more! If you are considering using a hamburger menu in any design, mobile and/or desktop, it is absolutely critical that you test your design and implementation with users. Let us know if we can be of service in this regard.
  • Avoid using a hybrid approach, where you have some global menu options and hide others in a hamburger menu. This can create even more confusion (trust us, we’ve tested it) — unless the hamburger is the last item in the menu and is used as “overflow”. Foolproof does this fairly well:

Foolproof Screenshot

  • If you’re sure you want to use a hamburger menu, ensure that you’re using it with a lean or extremely well-balanced IA, where you’ve both minimized the breadth of your site map as well as the depth. Having people navigate through too many options within a hamburger menu is not advisable.
  • If you use a hamburger menu, consider designing your page in such a way that the opened menu can be persistent on the page, i.e., that the user can choose to have the hamburger open all the time.
  • If you hide your navigation behind a button, ensure that it uses the text “MENU” in some way. Did you know that Medium’s “M” icon opens up its own navigation? How’s that for poor discoverability?

 

Medium Screenshot

Although there is an elegance involved in creating a single design that is relatively consistent across all screen sizes, the difficulty is that as troublesome as hamburger menus are on mobile, they are arguably more troublesome on desktop.

Inside Goal-Directed Design: A Conversation With Alan Cooper (Part 2)

We continue our conversation with Alan Cooper at Sue and Alan’s warm and welcoming ranch in Petaluma, CA, which, in addition to themselves, is home to sheep and chickens, a cat named Monkey, and a farmer who works the land.

Part 2 brings us up to present-day, and discussions around the applications and fundamentals of Goal-Directed Design that support its success at Cooper and beyond.

From Theory to Practice­­

Read More

We continue our conversation with Alan Cooper at Sue and Alan’s warm and welcoming ranch in Petaluma, CA, which, in addition to themselves, is home to sheep and chickens, a cat named Monkey, and a farmer who works the land. Part 2 brings us up to present-day, and discussions around the applications and fundamentals of Goal-Directed Design that support its [...]

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 [...]

CascadeSF UX Night: Planning for Responsive Layouts

Recently at Cooper, we updated our website with a focus on responsive web design. Working with Cooper’s other great developer, Elisha Cook, I learned a lot in the project, though at times it seemed my head would explode trying to figure out solutions to various problems presented by responsive web design, so when I heard that CascadeSF was hosting a presentation on this very topic, I was eager to attend and see what I could learn.

CascadeSF is a collective of San Francisco-based web designers and developers who meet periodically to keep up-to-date on design trends, standards, and techniques. On July 24th, the presenter was Pauly Ting, a Lead UX Designer at Tigerspike SF, founder of Feedia, and co-founder of TwoCents. The MeetUp was hosted in the offices of the residential real estate site, Trulia, just a block away from the Cooper studio.

http://www.slideshare.net/PaulTing1/content-planning-for-responsive-design

Digital Evolution: From Fixed to Responsive Layouts

The focus of Pauly’s presentation was on planning content for responsive layouts. Responsive layouts present new challenges for organization and delivery of content. We are accustomed to the page-based approach to organizing content, largely because that is how content has always been organized and delivered. For example, the printing press has a fixed width and height based on the page size. The Gutenberg Press revolutionized content delivery in the 15th century by organizing content as hand-set letters and graphics arranged in rigidly determined rows that could then be mass produced. It was a new paradigm, taking book production from the hands of scribes locked up in monasteries, and distributing books more widely, making education of the masses possible for the first time, which of course changed the world.

 

Read More

Recently at Cooper, we updated our website with a focus on responsive web design. Working with Cooper’s other great developer, Elisha Cook, I learned a lot in the project, though at times it seemed my head would explode trying to figure out solutions to various problems presented by responsive web design, so when I heard that CascadeSF was hosting a [...]

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 AgeTake 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 [...]

Zoom Out—It's Not Just About the Product.

Bay Area Video Coalition alumni Amy Li attended Cooper U's Interaction Design course in May. After 4 days of user research, synthesis, and persona and scenario creation, here are the some of the powerful concepts and practices she learned from Cooper U.

Recently, I had the opportunity to attend Cooper U’s Interaction Design course. This extensive four-day course explored many techniques and practices useful to designers, developers, marketers, project managers, and design enthusiasts. Here are some concepts and tips that resonated with me.

Your product doesn’t work in a vacuum.

Understanding the product ecosystem helps designers see the bigger picture and the elements that will be affected by their design, such as who will use it, where, and in what situation.

Creating the product ecosystem helps establish the product domain and identifies design opportunities, challenges and unexpected connections.

To create a product ecosystem, designers should seek answers to these questions:

  • Who might this product affect?
  • What kinds of activities and actions might be related?
  • What are some unique places where the product might be used?
  • What trends and technologies might be leveraged for this product?

After a designer understands the product domain, their next step is to ensure the design will be relevant and meaningful to the people who use it.

Read More Here

Bay Area Video Coalition alumni Amy Li attended Cooper U's Interaction Design course in May. After 4 days of user research, synthesis, and persona and scenario creation, here are the some of the powerful concepts and practices she learned from Cooper U.Recently, I had the opportunity to attend Cooper U’s Interaction Design course. This extensive four-day course explored many techniques [...]

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 [...]

UX Boot Camp Goes to Europe

Guest post by Francesca Di Mari at Sketchin, a Swiss user experience design firm based in Lugano.

At  Sketchin we strongly believe that design can improve lives and foster social good. We first heard of Cooper’s UX Boot Camp when we visited Cooper in September, 2012, and we fell in love with their idea of using design to educate and foster social good by bridging design students with non-profits. This idea was conceived of and developed by Kendra Shimmell, the Managing Director at Cooper U, and it launched our determination to be part of a design revolution for social good. Our first step was to create our own UX Boot Camp modeled after what we experienced at Cooper. So in May of 2013, together with Talent Garden Milano and Frontiers of Interaction, we organized the first Italian UX Boot Camp in Milan, modeled after the Cooper UX Boot Camp. Here is a look back at what we created and discovered in the process. UX Bootcamp Milano 15

Read More

Guest post by Francesca Di Mari at Sketchin, a Swiss user experience design firm based in Lugano. At Sketchin we strongly believe that design can improve lives and foster social good. We first heard of Cooper’s UX Boot Camp when we visited Cooper in September, 2012, and we fell in love with their idea of using design to educate and [...]

1 2 3 4 5