She slid open the door to her cotton candy van and stepped outside. "Hey everyone, welcome to my channel! I'm excited to show you around and give you a taste of what van life is like.”

I watched mindlessly for 12 minutes before catching myself. I’d gone to YouTube to play music while cooking dinner and suddenly I was watching “van life” videos. 

You might relate to the feeling. It’s known on the internet as a YouTube Hole or YouTube Rabbit Hole. In fact, there is an 800,000 person Subreddit dedicated to sharing strange videos people end up unexpectedly watching.

If you've found yourself on a Pinterest board thinking about recipes or laid in bed scrolling for an entire morning on Facebook you’re not alone. We’ve become conditioned to share our lives on Facebook, consume articles voraciously, and watch Instagram stories like TV. 

Behind technology are humans (for now). These humans make design decisions. They create experiences and interfaces, which I’ll be referring to as “Design Patterns”. Design patterns are visual elements that support an objective. Some are malicious, like “dark patterns”, which are designed to confuse and deflect user intent. Some start harmless, like infinite scroll, but have developed into regrettably ugly features. 

There are thousands of patented design patterns and countless more undocumented patterns. Think autoplay, add to cart, related articles, swipe left, pull to refresh, etc, etc... It’s not useful to explore them all, but it’s useful to be aware of their existence. Once you can spot a pattern you can see it everywhere. Once you learn to see it, you can act on it.

Expression and attention

Design patterns yield specific outcomes. These outcomes can be categorized in hundreds of ways. One simplified model is to think of these outcomes as a spectrum with expression on one end and attention on the other. Expressive design patterns encourage you to share or create. Design patterns optimized for attention keep you online as long as possible and have no problem taking you down a rabbit hole.

We can take this model of expression and attention and use it to visualize design patterns on the web. Included below are a handful of annotated popular websites. Red outlines highlight attention-seeking design elements. Green outlines highlight design elements that yield expression. Collectively these elements make up a pattern. The distribution, hierarchy, and balance of elements affect the outcomes of the website. Red elements want you to consume, green elements want you to create.

YouTube is an ad-driven entertainment website. It profits from holding your attention and selling it to advertisers. The design of this page holds your attention in obvious ways, like the autoplay nudge, and suggested videos. It also keeps your attention by building a data-profile of what you like and dislike. There is only one action focused on expression — a small upload video button in the navigation bar.

Twitter shares many of the same design patterns as YouTube, noticeably the suggested conversations panel, but it places a higher priority on expression. The Tweet prompt is given a valuable piece of real estate above the feed, which encourages a stronger balance of attention and expression.

In recent years, Medium has shifted from a self-publishing platform to a member-supported news and entertainment site. The only expressive design element is hidden in the profile drop-down. 

The mission of Behance is to help creatives discover and showcase work. As expected, the homepage has a strong expressive call to action button. It’s also interesting to note the “stories” feature popularized by Instagram and Snapchat.

Browsing the Web

If you use the internet you're being influenced by design patterns. You have the ability to control your behavior if you can spot the patterns. Awareness is a prerequisite for informed usage. As you browse the web, take a few minutes to observe. How is the information presented? What is the first thing you see? Where are the links pointing? What is the brightest thing on the page? What actions are you being asked to take? 

After some time, you'll begin to see what a website wants from you — you’ll think like a designer. You can compare an app’s objectives with your own. Not all expressive patterns are good. Not all attention patterns are bad. It's up to you how to use it and interpret it. 

Building for the web

While all of us are tech users, a smaller number are creators. You could be a web designer or a small business hiring someone to build you a website. If you make decisions about how technology is used then you are a creator. Creators frequently utilize existing design patterns. If you download a Wordpress theme, add infinite scroll to a blog, or ask your designer to add email capture to your homepage, you are making the choice to use a pattern. 

Using existing design patterns is often a smart shortcut. It eliminates the effort of creating original work and capitalizes on familiar user behavior. However, don't assume all patterns will work for you. You must define which patterns support your business needs.

Should an emergency clinic put a blog carousel on the home page? Probably not. Should they create a simple way for patients to reach them? Probably.

If you want to engage with customers give them opportunities to speak their truth. If you need to educate your consumers give them patterns that help them consume. 

Know your business and use patterns to support it.