Posts about Techniques


6 before ‘16: Top Design Talks of this Year

Crowd-sourced from everyone  at Cooper, here are some of the most thought provoking and enjoyable design-related talks of 2015: 

Redefining Value: Bridging the Innovation Culture Divide by Nathan Shedroff: 

Rethinking the value that design brings to the table.


Read More

Crowd-sourced from everyone at Cooper, here are some of the most thought provoking and enjoyable design-related talks of 2015: 

Bringing Design Research Beyond the Transactional

Over the past year, I’ve had the pleasure of teaching Interaction Design Foundations, and Design Research, to sophomore students majoring in IxD at the California College of the Arts. It has been an incredibly rewarding experience, and one that I’ll continue in the next year.

While I’ve been teaching my students, they’ve also been teaching me. One of the reason I love teaching so much is because it keeps me fresh—it reminds me of where design comes from and what its core values are, it keeps me questioning the way we do things in the “working world,” and my students help me glimpse into where the future of design might lie. 

In this post, I’d like to share with you a good reminder they gave me related to design research.

Read More


Tree Testing: The Top 5 Reasons You Need It

The science of classifying and labeling content is essential to creating a delightful digital experience. It's the intuitive organization of information that allows users to seamlessly navigate through a site without ever feeling uncertain about where to go next or trying to shake a nagging feeling that they're missing something relevant that's been placed in a different section of the site.

The practice of labeling and organizing information, Information Architecture (IA), is certainly a science. However, any time people's reactions and emotions are brought into the mix there's always room for error. To mitigate the risk of launching an information architecture that users don't understand, we use tree testing to measure how users respond to the proposed structure.

What is tree testing? Tree testing is an effective method of evaluating a website’s IA by asking potential users to complete “tasks” using the site’s IA. Tasks should be based on the services or content the site offers its users. For example, a financial services company could have a task asking users to locate information on loan interest rates while a hospital might want to know if users can find the address of their cardiology clinic. Tree testing software allows us to track and analyze what percentage of participants successfully completed each task. It also gives information on task completion times, paths that participants take through the tree, and rates of direct success vs. indirect success.

 

Top 5 Reasons for Doing a Tree Test

 

1. Inform future research and design.

One of the best things about tree testing is that it always provides actionable results. Users’ overall ability or failure to complete tasks provides you with useful information about whether the site’s IA makes sense to real users. For example, a low task completion rate tells you that your site may need a complete overhaul of its IA and/or labeling conventions.

On the other hand, even high task completion rates can signal the need for more research and redesign if other metrics confirm that your site isn’t performing well. Verifying that users don’t have trouble navigating your IA means that problems may exist elsewhere. For example, a strong IA on a site with low conversion rates means that there are likely usability issues elsewhere in the flow. Tree testing can help you get to the root of users’ problems and uncover navigation issues that may go unnoticed with other types of research.

2. Get solid research for an affordable price.

Tree testing is very affordable when you have a limited budget. On average, participants spend 10 minutes completing the tree testing tasks, so compensation and recruiting costs are minimal compared to other types of research.

3. Easily compare alternate versions of an IA.

Tree testing allows you to test more than one IA to see which one performs best with users. This is worthwhile to do anytime you have more than one idea about how the IA should work. Whether you want to test several IAs prior to launching a site or you want to compare a new IA to the existing one, it’s a worthwhile investment to prevent user frustrations from happening in the first place.

4. Ask the experts.

Are you a designer or information architect working on a site full of esoteric or complicated topics? No one expects you to fully understand the material, but that doesn’t mean you can’t ask the people who do. Put your IA in the hands of those who will actually be using it, whether they be biochemists, stock brokers, or any other group with specialized knowledge. When you’re dealing with a site that is tailored to a specific group of people, you want to make sure they are able to find what they need. Cooper uses detailed recruiting screeners in tree tests to ensure you are only getting results from people who are representative of your target audience.

5. Get clear results, fast.

Tree tests are great when time is of the essence. Compared to more qualitative research techniques, tree testing requires very little time for recruiting, programming, and execution. Graphical representations of the data let you see what problem areas exist at a glance. This means less time spent on interpreting results and more time implementing changes on your site.

When you partner with Cooper to conduct a tree test, you get the benefit of having a trained team of professionals who provide expertise in the areas of recruitment, test design, analysis of results, and recommendations. To find out more about tree testing and how it can best serve your needs, send us a message.

The practice of labeling and organizing information, Information Architecture (IA), is certainly a science. However, any time people's reactions and emotions are brought into the mix there's always room for error. To mitigate the risk of launching an information architecture that users don't understand, we use tree testing to measure how users respond to the proposed structure.

What does Pair Design look like?

If you’re trying to figure out whether Pair Design is right for you or your organization, it’s useful to have a model of what it looks like across an interaction design project. So, let me paint you a picture.

I’ve broken down our typical goal-directed design process into broad phases that should be relatively easy to map to your own. But, if this is your first time reading about Pair Design from Cooper, I recommend reading up on the distinctions between the generator and synthesizer roles I’ve written about before, as I’ll be referencing those terms

Read More

If you’re trying to figure out whether Pair Design is right for you or your organization, it’s useful to have a model of what it looks like across an interaction design project

User Research Beyond Usability Testing

Each week at Cooper we get numerous inquiries about usability testing services. We love this! It is incredibly satisfying to help our clients uncover usability concerns with real users and, better yet, help them strategize about how to improve their digital products.

But, our user research services go far beyond basic usability testing. In this post, we'll share some new and interesting user research services that may help you overcome a hurdle in your product's design.

 

Q: How do I learn who is coming to my site?

To understand the basics of who is visiting your site, we suggest a site intercept survey. We place a snippet of Javascript on your site that will show a pop-up to each visitor. These visitors are invited to answer a few questions about who they are, why they’re visiting and what their experience is like, usually in exchange for a chance to win a prize.

Benefits of this type of user research:
  • Quick and easy. These kinds of surveys are easy to roll out. All they require from you are a discussion with us about what you'd like to learn most about your users, and the placement of some code on your site.
  • Provides insight about your site's users and their expectations. These surveys can provide valuable information about your site's audience, including their demographics, psychographics and technographics. The surveys also allow your visitors to provide feedback about any parts of your site they find difficult to use.
  • Useful as recruitment for other user research. Are you considering in-depth user research techniques in your project? Site intercept surveys can be a fantastic way to reach participants for later user research activities.

 

Q: How do I make a website user experience that's already working fairly well even better?

If you have an existing website and just want to fine-tune, consider using site intercept interviews. In this process we put a tiny snippet of code on your site that prompts site visitors with an invitation to participate in live research.

That's right, participants are essentially asked, "Can we call you in the next 5 minutes and watch you use this website?" We call participants, ask them to share their screens with us, and follow them as they perform the tasks they originally came to the site for. And, if you’re skeptically asking yourself, “Do people actually agree to this?”, they sure do. We’ve watched people do a variety of things, from shopping for clothes to finding a doctor.

Benefits of this type of user research:

  • Real tasks. Unlike lab-based usability testing, this kind of research has no imposed script or pre-determined tasks for users to do. Whatever users came to your site to do, that's what we watch them do. Thus, we see users performing a lot of different tasks on the site, several of which we might never have dreamed up for a lab-based study. This allows us to explore nooks and crannies of a site that are having a big impact on the site's user experience, unbeknownst to anyone.
  • Real-life environments. Unlike in an artificial lab environment, this kind of research allows us to connect with users in their natural environments, complete with real web browsers and real distractions. The other day we got to speak to a mother using Internet Explorer 8 who was watching over her baby at the same time as using the site. Talk about real life!

 

Q: How does my online experience compare to my brick-and-mortar store experience?

A client of ours recently came to us with this question; we recommended a large variety of user research activities to get the true answer, with one of the most interesting being store shadowing. With store shadowing, we've been visiting our client's brick-and-mortar stores and asking shoppers if we can observe them while they shop, make purchases and returns. This allows us to identify qualities of the offline shopping experience that could be translated online, as well as better understand customer shopping behaviors across channels.

Benefits of this type of user research:

  • Going to the source. We can use a variety of qualitative and quantitative techniques to hone an online experience, but if brick-and-mortar stores are out-selling a website or app, the best way to learn why is to go straight to the source: the stores themselves!

 

Q: Which design option works better? 

If you're trying to narrow down design options, consider using a remote unmoderated usability study. In these studies we still evaluate the success of designs with real users, but we do it without a moderator (as opposed to a regular usability test, which includes the use of a moderator).

Participants are given tasks to complete online, and we ask them survey questions after each task to assess their success and comprehension of what they just did.  We can also glean useful information for each task like the average time spent, where people are clicking on each page (using heatmaps), and the various paths people are taking through the website.

Using this technique, we can economically scale up the number of participants who see a design, and be completely confident in the results. Instead of 12 participants seeing your design, we can get hundreds if we want to! We can even have participants video themselves while evaluating a site, meaning we can see where people are having difficulties as well as understand why.

But I can just do an A/B test, you say! This is true, but building out versions of pages can be laborious and expensive. A/B testing also fails to provide information on why one design is fairing better than another.

Benefits of this type of user research:

  • Power in numbers. We can tell you which design is superior to the rest, based on any number of criteria, with statistical significance.
  • The best of quantitative and qualitative. When combined with video of participants, this technique can provide the best of both worlds.

As the inquiries come in, the new research methods keep rolling in with them. One of the most exciting parts of being a consultant is getting to work with a variety of companies on a whole host of problems to be solved. We get to take something we learned with one client during a meeting in the morning and completely rethink how it might be applied to a project that we’re discussing later that afternoon.

If you have a research issue that’s been on your mind, or you have a question that you don't know how to answer about your digital product, give us a call. We can’t promise that we’ll be able to address every concern that you have, but we do promise straightforward answers on what we can do and innovative techniques to get you the most valuable feedback.

User research services go far beyond basic usability testing. In this post, we'll share some new and interesting user research services that may help you overcome a hurdle in your product's design.

Easy Win: Photoshop

Being an interaction designer means you're aware of improvements that can be made in the things you use every day. This one is about the crop tool found in the most popular digital image manipulation software, Photoshop. Hey, Adobe! Here's an easy win.

Easywin01.png

Read More

Being an interaction designer means you're aware of improvements that can be made in the things you use every day. This one is about the crop tool found in the most popular digital image manipulation software, Photoshop. Hey, Adobe! Here's an easy win.

Cooper U's Interaction Design Training in Sketchnotes

A few days ago, during Cooper U’s Interaction Design training, we stumbled upon Evelyn Ma’s gorgeous sketchnotes. They captured the key takeaways from the class in such an elegant and visually intriguing way, we thought we’d pass them along to you.

Design is creativity with a goal.

This is one of the founding principles of Cooper.

Read More

A few days ago, during Cooper U’s Interaction Design training, we stumbled upon Evelyn Ma’s gorgeous sketchnotes. They captured the key takeaways from the class in such an elegant and visually intriguing way, we thought we’d pass them along to you.Design is creativity with a goal.This is one of the founding principles of Cooper.Cooper’s goal-directed design process revolves around understanding [...]

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.

The Creative Habit


Most of us follow a daily routine. We awake at about the same hour, maybe hit the snooze a few times, grab breakfast and a shower, dress and hit the road. Usually it’s the same road -- and the same mode of transportation, with maybe a beverage of choice on the way, and then in the door at work at roughly the same time, with all the familiar tasks awaiting.

Some might find this a seriously limiting portrait, a sort of Dilbert Dullsville, unconducive to creative production or flights of imagination. But actually, inside that predictable routine lies genius, if you know how to tap it. For many of the great artists, writers and designers, this very kind of structure proved key to their success.

Read More

Most of us follow a daily routine. We awake at about the same hour, maybe hit the snooze a few times, grab breakfast and a shower, dress and hit the road. Usually it’s the same road -- and the same mode of transportation, with maybe a beverage of choice on the way, and then in the door at work at [...]

Designer's Toolkit: A Primer On Using Video In Research

In our last post, we explored a variety of methods for capturing user research. Yet a question lingered—how can you effectively use video in your research without influencing the participants?

Here are some tips and tricks to minimize the impact of using video in research engagements. Keep in mind, these tips are focused on conducting research in North America—the rules of engagement will vary based on where you are around the world.

Read More

In our last post, we explored a variety of methods for capturing user research. Yet a question lingered—how can you effectively use video in your research without influencing the participants?Here are some tips and tricks to minimize the impact of using video in research engagements. Keep in mind, these tips are focused on conducting research in North America—the rules of [...]

1 2 3 4 5 6 7 8