When people think of user education in products, they’re often thinking of certain set of UI patterns. In some cases, these patterns can be helpful. But, in most other cases, the patterns are overused and applied inappropriately to many situations. They quickly become anti-patterns.

I’ve illustrated that slippery slope by drawing these “patterns” as if they were Pokemon evolutions. You know, when a seemingly harmless pattern can turn into a formidable beast.

Carouhell > Autopuh-lays > Sideshow

From carousels, to auto-playing videos, to lengthy slideshows, we often see products increasingly attempting to serve up attention-grabbing content. The more aggressive and front-loaded these things get, the less appealing they become.

Cooltip > Drooltips > Encroachmarks

The occasional tooltip can be helpful, especially if it appears in direct response to a user’s action. But they can quickly grow out of control. Sometimes they come in packs, in the form of walkthroughs, or clumped together as a blocking overlay called “coachmarks.” These things force someone to memorize UI instructions without addressing the underlying issues.

3 illustrations: The first ("Cooltip") shows a happy little tooltip hovering over a navigation bar; the second ("Drooltips") shows 3 tootlips, each growing out of the former's mouth and dripping saliva, reading "1 of 3," "2 of 3" and so forth; and the third ("Encroachmarks") shows an illustration of a multi-headed and -armed beast overlaying UI.

Chat-o-the-wisp > Chatling > Bantershee

Many different plugins make it easy for businesses to add customer service bots to their websites that float at the bottom of the user’s screen. While exposing an entry point to a help agent can get customers to information faster, these things have evolved to proactively push messages.

Illustration of 3 mobile screens: the first ("Chat-o-the-wisp") shows a tiny, friendly looking fairy-creature quietly hovering in the lower left; the second ("Chatling") shows a larger fairy create now asking "Hi, have any questions?"; and the third ("Bantershee") shows a larger fairy creature spewing multiple speech bubbles that read, roughly, "aaaaaaaaaahhhhh"

Cookie peek > Cookie sheet > Cookie eat

We want to make sure people are aware of websites that want to use cookies to track web activity. However, these cookie notices are pushing for consent at the detriment of all other content. Navigate to https://bda.org/ on your mobile device, for example, and check out the resulting prompt.

3 illustrations of a web page: The first ("Cookie peek") shows a small banner character at the bottom of the screen timidly asking, "Mayhaps cookies?"; the second ("Cookie sheet") is slightly large, with a button to accept cookies in its mouth; and the third ("Cookie eat") takes up the entire screen, and is inhaling everything outside of the webpage into its massive mouth.

Overlay > Overload

And, finally, overlays. Easy to implement, but oh-so-easy to lose track of until they all suddenly collide at one time. There’s not often an in-between state.

Comments are closed.