UXcellence Exploring excellent user experience

Designing Glue: How to Mind the Gap

It’s easy to fixate on how your product looks and feels by itself. Truly great experiences, though, are designed from the glue up. What do I mean by glue? Glue is the connective tissue that exists between your product and everything else. Good glue fills in gaps and smooths bumps. It helps make your product more sticky without being tacky. Bad glue, on the other hand, gums up the gears and grinds an otherwise good experience to a halt.

A real world example

Many theme parks focus on the park interface: the rides, the food, the general look of the park. Disney Parks, though, are designed from the glue up. If you stay at a Disney resort when you visit Disney World, your experience starts before you even arrive on their property. You don’t have to get your bags or find a ride from the airport. All of that is taken care of. You just get off the plane and onto one of their buses. You can check in to your resort or head straight to a park, and your luggage magically appears in your room later that day.

The Parks team at Disney has looked beyond the resort experience at how they can make your whole trip great. They found a gap that many travelers found frustrating: the hassle of getting luggage, securing a ride, and getting that stuff from the airport to the resort. Then they smoothed it all over with something that feels magical.

Imagine if we did that with our digital products.

Discovering gaps

Glue fills in the gaps. It joins disparate elements together and makes them stronger than they are separately. In physical products, it’s easy to spot gaps. There’s space between elements that you want to remove. In digital products, those gaps can be harder to discover. So how do you find them?

What happens in between?

One exercise to reveal hidden gaps begins with asking users (or even your team), “What happens in between?” Samuel Hulick wrote a great post about minding the gap where he talks about a common school exercise: write down each step involved in making a peanut butter and jelly sandwich. This exercise uncovers many hidden assumptions behind a simple recipe.

Applying the same question to your own product can reveal countless seams where users can get lost or stuck. These are all opportunities for better glue.

Find the hacks

If you have a sufficiently popular product already, look at how users are already using hacks to fill the gaps. Are they posting about weird tricks, using third-party plugins or services to do unexpected things, or requesting features you never thought about? Pay attention to what your users want to do with what you already provide.

Many of the most powerful features of Twitter, for instance, were pioneered by dedicated users. While they seem obvious in retrospect, the developers of Twitter never considered how users would reply to a tweet, share someone else’s tweet, or group related tweets until their users did it for them.

Field studies

If you don’t have a huge userbase, you can learn more by spending time with a small set of users in person. Observe how they use your product and how it fits in their process. Specifically look at the following questions:

  • What other tools do they use that relate to yours?
  • How do they transition between the two?
  • What connects the two things?
  • What is shared between them? What doesn’t get shared?

By spending time observing what your users do outside of your product, you can find ways to make your product more accommodating.

Designing good glue

Now that you have identified some gaps, it’s time to consider what defines good glue. Here are some basic principles of good glue to consider. Good glue should be:

  • Robust: First and foremost, good glue follows the robustness principle (otherwise known as Postel’s Law): be conservative in what you do, be liberal in what you accept from others. In practice, this means that any thing you send from your product to another should be strictly controlled and adhere to documented standards as much as possible. At the same time, you should be prepared to accept anything from other apps and make as much use of it as you can.
  • Useful: This may seem obvious, but good glue should solve a real problem. You could use these tools to add on “features” that sound cool, but if they don’t solve a real problem, they’ll just get in the way instead.
  • Discoverable: Good glue is documented clearly. It appears when it’s needed and disappears when it’s not. When implemented well, good glue feels natural.
  • Seamless: Good glue helps the user glide smoothly between different products or states. When users interact with it, they don’t feel like they’re moving from one thing to another.
  • Transparent: It should be clear to the user what’s happening when they move from one experience to the next, whether they are leaving your product or returning to it. Users should never end up somewhere they didn’t expect.
  • Tested: It’s easy to get stuck testing flows and interactions that lie solely within the domain of your product. Designing the glue, though, means testing how users move between your product and other tools, and finding the things you can do to simplify those transitions.

A few good tools

You’ve found some gaps, and you’ve identified basic principles for gluing them together properly. Now what tools do you have at your disposal?

Social media cards

One oft-overlooked tool is the social media meta tags that can be added to any web page. By adding a few meta tags to a page, you can improve how links to that page appear across Twitter, Facebook, Slack, Apple Messages, and more. When someone adds a link on Twitter for instance, that link will automatically expand into an embedded card with more details.

Screenshot: Twitter cards can show the page title, a brief description, and an image when users share links to your site.
With just a few meta tags on a page, you can improve the experience of sharing links to various services dramatically.

Mobile extensions and intents

For mobile apps, extensions give your product tendrils reaching into and out of other apps. Extensions in iOS and Android intents enable users to share data between apps and integrate directly with system services like photos, contacts, and voice assistants. By understanding and implementing these properly, you can help users make better use of their data, share with other people and apps, and integrate better with the rest of the ecosystem. Apps with great extensions are like great team players: they assist each other and improve the whole platform.

Notifications

Notifications are such a broad category of tool that they really deserve an article all to themselves. To keep it short, though, notifications let users know when things have changed or when to pay attention to something. They can take many forms: push messaging, email, SMS, badges, overlays, and more. The best notifications should:

  1. quickly tell the user what they need to know,
  2. get them where they need to go, and
  3. let them get back to what they were doing previously

Great notifications have a clear strategy behind them. Like great design patterns, they feel cohesive when viewed together. They share common language and personality. They are purposeful and help the user, instead of using the platform to distract or hinder the user.

Icons and favicons

Icons may seem like an odd tool for this list, but hear me out. Icons are often the face of your product when coming from either the operating system or other sites and apps. Your product icons (like your favicon, mobile app icon, and others) should not only communicate your brand, but also help your users know what to use it for. In some cases, your icons can communicate specific actions users can take when using extensions. In others, you can add badges or other signifiers to show that something has changed in your product.

Screenshot: The favicon for Basecamp has a small orange circle appear when you have new activity to check.
Basecamp’s favicon changes when you have notifications, giving a subtle hint from the tab that you should check it.

Feeds and APIs

There will be times when your users just want access to the raw data of your product, whether their own or general use data. Providing useful feeds and APIs is crucial to enable users to create their own glue. If you provide data hooks, document them and make them easy to use. Even better, provide examples and demos of how they can be used.

Add your service to popular automation tools like IFTTT and Zapier. Using tools like these can enhance your product and enable better interoperability with other services. By creating some demo applets on these services, you can show potential users how they can better use your service with others. Digging into how users integrate your service with others through these can open up new ideas and help you improve your data feeds.

Support

It amazes me how frequently support tools are disconnected from the products they are meant to support. Think of your typical phone tree experience: you call customer support for, let’s say, your internet service provider. At some point they’ll ask for your phone number or your account ID. Then you continue through the automated steps and eventually get to a customer service rep. What’s the first thing they ask for? Often the SAME ID or phone number you already gave. Why? Poor glue.

Choose support tools that enable you to provide smarter support. Look for tools that will let you share data (securely) from your product to theirs to better inform service requests. Imagine if your customer didn’t have to add things like customer account info, referral location, error codes, and more to their support request. All because they were automatically shared when the support request was created. That would save them time and your team effort from tracking those details down.

One of the little details I added when I created the 404 page for UXcellence was a button to let people report the error. I could have left it as a simple link to the contact page, but I went an extra step. The link contains a couple variables that prefill the message subject and also tell me what URL the 404 was at. This saves the user time and gives me more information to work from without putting more of a burden on the user.

And more

The tools above are just a start. There are countless other ways to connect your product with users where they are. The next generation of opportunities may come from artificial intelligence, bots, voice assistants, augmented reality, or somewhere else entirely. Explore outside the boundaries of your own product. Find the gaps where your users are struggling. And fill them in to make a smoother experience.

Like this? Please share:

Explore more like this