Hollow hearts

An interesting thing that I’ve noticed over the past few years of internetting is how we’ve established conventions around like, favorite, &c. buttons, and how frustrating it is when sites break those conventions. The meaning of such a button is largely determined by its context; saving for later (say bookmarking, or wishlisting) for an e-commerce site, acknowledgement or praise for social media, and somewhere in between those two for blogs and other content consumption platforms. This isn’t a hard rule, obviously. Twitter, for example, has a bookmarking function, but also lets you easily browse through liked tweets. Bookmarking is a more buried option, as its intent isn’t to display praise, and I would guess that because of this intentional design decision, a lot of people simply use likes in lieu of bookmarks.

Iconography is also generally pretty standard, often hearts or stars. This defines context in its own way; users famously had concerns when Twitter moved from stars to hearts. Which makes a lot of sense – slapping a star on the tweet ‘My cat Piddles died this AM, RIP’ has a pretty different vibe than a heart. Since this happened retroactively to everything anyone had ever starred… it was certainly jarring.

Other iconography certainly exists; bookmark-looking things clearly define their intent, pins do the same to a lesser extent, bells indicate notifications1, and sites with voting systems will often use thumbs-up/down or up/down arrows for this tri-state toggle. Medium, notably, went from a straightforward ‘recommend’ (heart) system to ‘claps’, a convoluted variable-praise system represented by a hand. While dunking on Medium is not the purpose of this post, I think it’s worth mentioning that this shift was enough to essentially prevent me from ever reading anything on the site again2. Having to rate any given article from 1-50, and then sit around clicking as I worry about that decision is anxiety-inducing agony, especially when I know it affects authors’ rankings and/or payouts. It also feels incredibly detached from the real-world phenomenon it’s supposed to mimic. Clapping for a performer in an isolated void is a very different experience than reacting in real-time with the rest of an audience. But to get back on track, clapping additionally violates our expectations by no longer being a toggle. It increases, maxes out, and if you want to reset it to zero, you have to hunt for that option.

Which brings me to my point, and my frustration. These things are usually a toggle between a hollow heart or star3 and a filled one: ♡/♥︎ or ☆/★. This is very easy to understand, it mimics the checkboxes and radio buttons we’ve been using on computers for decades. Empty thing off, filled thing on. So long as we know that this icon has meaning, and that meaning brings with it a binary on/off state4, a hollow or filled icon indicates what state the content is in. If a user can’t toggle this (a notification, say), it’s simply an indicator. If a user can, then… well, it’s a toggle, and there’s likely a counter nearby to indicate how many others have smashed that like button.

This is great, and intuitive, and it works very effectively. Which is why it’s extremely frustrating when sites violate this principle. Bandcamp, for example, uses a hollow heart at the top of the page to take you to your ‘collection,’ a library which is a superset of your wishlist. Wishlisting is represented by a separate on/off heart toggle. This toggle, on an individual track/album page, has a text description next to the heart; the collection button at the top of the page does not. This is utterly backward, as the toggle works intuitively, and the button… has no meaning until you click it5. Etsy, on the other hand, uses a hollow heart at the top to bring you to your favorites page. But it does two things right: it has a text label, and it brings you only to things that are directly connected with a matching heart toggle.

GoComics is an equally perplexing mess of filled hearts. A comic itself has both a heart (like) and a pin (save)6. Both are always filled, with the toggle being represented by a slight change in brightness: 88% for off, 68% for on. It’s very subtle and hard to scan. These are actual toggles, however, unlike in their comments section. Their comments also have filled hearts to indicate likes, but they only serve as indicators. To actually like a comment, you must click a text-only link that says ‘Like,’ and isn’t even next to the heart. At this point, the text does the same absurdly-slight brightness shift from #00A8E1 to #0082AE. While it’s difficult to scan the comic’s heart icon’s brightness shift, the comment’s ‘Like’ text’s brightness shift is nearly imperceptible. A comment’s heart icon doesn’t even appear until there’s at least one like, and clicking it just brings up a list of users who have liked it. Suffice it to say, I click this accidentally on a near-daily basis. Humorously, GoComics understands the hollow/filled standard: they use it on their notifications bell icon.

These are just two examples in a sea of designs that prioritize aesthetics over intuition and ease of use. Medium tacks a filled star on after the read-time estimate for no apparent reason. Lex has both a functional heart and star toggle on every post, but no immediate explanation as to what differentiates them. Amazon seemingly has a heart toggle on its mobile app, but not its website, and it’s unclear what differentiates this from the regular wishlist. Ultimately, I don’t think this is a space that needs innovation (like, arguably, Medium’s claps), or one that merits subtle aesthetics. Folks have largely realized the perils of excessively abstracting ordinary checkboxes and radio buttons, and this relatively new breed of binary toggle should intuitively work in exactly the same way.

  1. Bells are used both as a toggle (don’t forget to subscribe and hit that bell!) and as an indicator when a user has unread notifications. This is its own can of worms. ↩︎
  2. To be clear, I have never liked Medium and it has always taken a lot to convince me to click to a Medium URL. Usability-wise, it has always felt a little too walled off and detached from the web to me. Content-wise, it has tended to somehow bring out a lot of long-form writing from folks who have about two paragraphs worth of material. Visually, it takes cues from print that don’t sit well on the web (seriously, look at its drop caps). And, ethically, I’m generally not a fan of this shift to all blogs being hosted/controlled by like three or four major players. ↩︎
  3. Or a bookmark, or whatever; for the remainder of this post I’m only really talking about hearts and stars for their ubiquity, but the concept applies so long as a meaning has already been picked up on by users at large. ↩︎
  4. Voting systems, like Reddit, have a trinary state: upvote, downvote, and no vote. The individual buttons are still binary, however. ↩︎
  5. Or, wait for the tooltip to display ‘collection,’ which… still isn’t very meaningful. ↩︎
  6. Toggling the pin has some interesting behaviors as well. Toggling the pin on also toggles the heart on, but toggling the pin off leaves the heart alone. Presumably the assumption is that if you’re saving a comic, you like it! And if you’re no longer saving it, you probably still like it, just… not enough to keep bookmarked. This makes some sense, but it’s very difficult to perceive due to the subtlety explained in the rest of the referenced paragraph. ↩︎