To TV or Not to TV

The YouTube team, writing in its official blog:

Today [May 7], we’re introducing a new feature that gives you access to YouTube TV from within the YouTube app, making it easier to enjoy all the content you love. Existing members can easily access YouTube TV by clicking on “Go to YouTube TV” in the main YouTube app. This update will be available to all YouTube TV members on Roku over the next few days, and we will expand to as many devices as we can over time.

YouTube TV is a streaming video service that provides access to live programs from big networks. It’s called ‘YouTube,’ but users access (and pay for) it separately from YouTube. On Roku devices, they do so through a dedicated YouTube TV app.

Until recently, that is. As the snippet above suggests, YouTube TV users on Roku devices now access the service through a primary navigation option within the main YouTube app.

Image: YouTube
Image: YouTube

This is a significant change to YouTube’s information architecture. Users previously understood YouTube TV as a separate app, but now they must think of it as a feature of another (albeit related) app.

Despite the announcement’s cheerful tone, this change wasn’t occasioned by intentional improvements to either app’s UX. Instead, it’s the result of a negotiation breakdown.

Long story short: Roku’s distribution agreement came up for renewal, and YouTube demanded new terms. As so often happens in such situations, both companies are appealing to their customers to pressure the other side. More details here.

Among the points of dispute are changes to Roku’s hardware (so it can display higher quality videos) and changes to the system’s search capabilities. In other words, it’s at least in part a struggle for control over the system’s UX.

IA is both a point of contention and a negotiating tactic. Findability is a strategic concern for both sides. And folding YouTube TV into the YouTube app — which Roku is unlikely to pull — is “the nuclear option”.

Designers and stakeholders tend to downplay the importance of information architecture. They think of it as mere sitemaps and wireframes. The Roku/YouTube scuffle is a reminder that IA is often where organizations hash out strategic concerns.

Next steps for YouTube TV members on Roku

Cover photo by Creativity103 (CC BY 2.0)

Spotify’s ‘Your Library’ Redesign

With over 356 million active users, Spotify is one of the world’s leading audio streaming services. The company recently released a major update to a core feature of its mobile apps, ‘Your Library.’ The new version promises better findability and discoverability — i.e., it focuses on the system’s information architecture.

‘Your Library’ allows user to access the content they’ve saved on Spotify. This includes playlists, songs, streaming radio stations, artists and albums, etc. As such, it’s a central ‘place’ within the app. Over time, users can build large libraries. This redesign aims to make it easier for them to find content in their collections:

Now, you’ll have a more streamlined way to easily explore your collection and find your saved music and podcasts faster. Your Library’s updated design and added features will enable you to spend less time looking for content and organizing your collection, and more time rediscovering the music and podcasts you’ve loved over the years.

These changes include new filtering mechanisms (a ‘Downloaded’ filter sounds especially useful as people start flying more), better sorting options, ‘pinned’ playlists for quick access, and a new grid view that presents content in a more visually engaging way. Classic IA.

With the transition to digital media, many people have amassed large collections of photo, audio, and (to a lesser extent) video files. Each of these media types presents different findability and discoverability challenges.

Audio is especially interesting from an IA perspective, given the diversity of content it can accommodate. A podcast has different structural needs than a pop song or a classical music album. I expect most of us also interact with our audio collections more frequently than with our photo or video collections.

Improving the information architecture of the user’s personal audio collection is an interesting and impactful challenge. I expect that a well-architected personal audio collection feature can be a major competitive advantage in a competitive industry.

Listeners Can Explore Their Spotify Collections Faster and Easier With a New ‘Your Library’

Ten Years

Ten Years Ago is a compendium of 14 major websites as they looked on February 18, 2011. The site isn’t a significant innovation on its own but is instead a convenient collection of links to The Internet Archive. I’m highlighting Ten Years Ago here because it illustrates a fundamental principle in the design of information environments: the aesthetics of user interfaces change faster than their structures.

Screenshot of Ten Years Ago, a website that showcases the state of 14 major website homepages as they looked in 2011.

(In case you’re unfamiliar with The Internet Archive, it’s a nonprofit organization that manages a browsable archive of the internet. The Archive’s Wayback Machine allows you to ‘roll back’ many publicly accessible websites so you can see what they looked like in the past. It’s an invaluable service that is well worth supporting.)

Most of the sites featured on Ten Years Ago are either media (CNN, The New York Times, BBC, Fox News, etc.) or marketing sites (Apple, Steam, Goodreads.) The lack of ‘product’ sites on the list isn’t a surprise since Archive.org doesn’t index logged-in experiences. Also, many of these sites don’t go deeper than the home page. As a result, this survey doesn’t aspire to be comprehensive. Still, it’s interesting.

Let’s look at five of the sites featured on Ten Years Ago.

Apple

Here’s apple.com in 2011:

apple.com in 2011

And in 2021:

apple.com in 2021

I’ve clipped it here so you can compare both editions’ navigation structures more easily. But Apple’s homepage has grown considerably over the last ten years. This is what the entire page looks like in 2021:

apple.com in 2021
Apple’s homepage has grown in the last ten years.

The most apparent difference between both editions is how much more stuff there is in the newer version. The 2011 page featured five content blocks: a primary one (advertising the iPhone 4) and four ancillary blocks below. The 2021 edition has nine blocks: three primary ones with six ancillary ones below. While the newer version’s blocks are more prominent, they’re visually reminiscent of the ones in the 2011 edition. You can tell this is the same site.

The page layout has also changed. As with many sites of the era, content on the older version of apple.com was fixed inside a 980-pixel wide container. The newer version eschews this fixed layout in favor of a responsive one that adapts to different browser window widths. This fluid approach makes the site easier to read on smartphones, which comprise a higher percentage of browsing devices in 2021.

Another significant layout change is in the site’s footer. Whereas the 2011 site featured a relatively sparse set of navigation elements, the 2021 edition includes a comprehensive menu below a list of clarifications and disclaimers. (While the menu is an improvement, the disclaimers feel like a step back.)

Now on to the main attraction: the site’s primary navigation bar. The primary differences between the nav bars in both versions are visual. The 2011 edition is width-constrained in the same way as the site’s content. The older edition also has a margin that allows it to ‘float’ on the page, as opposed to the 2021 edition, which is set flush with the top of the page and spans the browser window’s width. The 2011 edition also has subtle gradients and highlights that make it look dimensional, whereas the 2021 edition is ‘flat. ‘

That said, look at the navigation elements in both sites: they’re almost identical. The top-level choices in both sites point to Apple’s main product categories. The primary differences are the expected ones, given how product portfolios evolve. For example, ‘TV’ replaced ‘iPod,’ a more important product line in 2011 than today, and ‘iTunes’ has been renamed ‘Music.’ The 2021 edition doesn’t highlight the Store, which is now an integral part of the site today (and therefore no longer worth calling out separately.) The 2021 edition also adds a shopping bag and collapses the search box to an icon. But other than that, the two navigation bars are very similar.

ESPN

Here’s espn.com in 2011:

espn.com in 2011

And in 2021:

espn.com in 2021

ESPN looked very different ten years ago. The most salient change is the loss of the bold gradient background of the older site. This visual design feature would’ve been less striking in 2011, when the most common computer displays weren’t as wide as the ones we use today. Still, it looks dated. (I believe the empty gray zone on the lower right corner of the 2011 screenshot is due to a missing ad in Archive.org’s system. I can’t imagine ESPN would leave such valuable real estate empty.)

The difference in typography between both editions is also striking. As with many older sites, the 2011 edition of ESPN used smaller fonts than we do today. I believe this, too, is an effect of the smaller and lower resolution displays of the era. The older site also featured smaller images, perhaps to accommodate users with slower connection speeds. (I’m assuming broadband access wasn’t as common in 2011 as it is today.) Also, as with many other sites today, today’s ESPN features a responsive layout.

espn.com on a mobile phone

But once you look past visual style and layout, the structure of these pages is similar. Both are dominated by a large editorial block with a featured story. Both have a ‘Top Headlines’ block. Both feature advertising blocks. (Again, I believe the 2011 screenshot above is missing an ad.) And both have similar navigation bars: one for sports leagues (NFL, NBA, MLB, etc.) and another for sports event scores. Navigation in the 2011 edition is more cluttered; the 2021 edition hides some links under a menu button. (The grid next to the search loupe.)

Goodreads

Here’s goodreads.com in 2011:

goodreads.com in 2011

And in 2021:

goodreads.com in 2021

At first glance, Goodreads seems to be the exception that proves the rule. Yes, visually, the two editions of the site look different: as with other samples here, the older version has smaller fonts and fewer images. However, the colors and overall feel of both pages are similar. But more strikingly — and potentially damaging to my point — the navigation of both sites is very different. To wit, the 2021 edition of the site doesn’t seem to have a primary navigation bar at all. What’s going on here?

Look at the featured content in both editions of the site. While the 2021 edition promotes user-driven book rankings — i.e., surfacing the unique value of the Goodreads community — the 2011 edition features a signup form. This approach is an excellent example of “show, don’t tell”: the 2011 edition of the site tells us why we should join and gives us a signup form, the 2021 edition shows us. The form is still there in the newer site, but it’s not on center stage.

What isn’t there is the primary navigation, which is clearly targeted at people who are already Goodreads users. This navigation bar is also present on the 2021 site, but only after you log in.

goodreads.com logged-in navigation bar.

As you can see, the current menu is remarkably similar to the 2011 edition. Both feature the same layout and (mostly) the same elements in the same order. Both have minimalistic dropdown menus. There are a couple of differences: in the 2021 edition, ‘Friends’ and ‘Groups’ have merged into a ‘Community’ option, and ‘Explore’ has been renamed ‘Browse’. But otherwise, they’re very similar structurally and visually.

Reddit

Here’s reddit.com in 2011:

reddit.com in 2011

And in 2021:

reddit.com in 2021

Reddit looks very different today than it did in 2011. It’s interesting to note that the 2011 edition featured a fluid layout that spans the browser window’s entire width, whereas the 2021 edition keeps content within a 988-pixel container. This change is the opposite of what we see in most of these other examples. That said, the 2021 edition of Reddit has a mobile responsive layout, something the 2011 edition didn’t.

A more obvious difference between both sites: while the 2011 edition included some small thumbnails, the 2021 edition features large images that dominate the page. The 2011 edition is dominated by a list of ‘old school’ hyperlink entries, whereas the 2021 edition has a more modern ‘card’ interface. Also, the site’s logo has changed. The overall effect is of a more professional and buttoned-up organization today.

Reddit’s site is also interesting in that the site’s primary navigation mechanism has also changed. The 2011 edition featured tabs and a search box. The search box is the primary navigation mechanism in the 2021 edition, and the tabs have been replaced with a set of filters. These filters serve the same purpose as they did in the ten-year-old site, but are more flexible. (Thankfully, the ‘Controversial’ tab has been replaced by a ‘Rising’ filter in 2021.)

While the interaction mechanism is the same — tabs vs. filters — the underlying structure is the same: both allow users to sort and filter the content feed for recency and primacy (based on upvotes.)

IMDb

Here’s imdb.com in 2011:

imdb.com in 2011

And in 2021:

imdb.com in 2021

IMDb is another example of a site that looks very different today than it did ten years ago. The most obvious difference is the dark background of the current site — a better choice for a site that highlights stills from movies. Like some other advertising-supported sites, IMDb can change this background to suit individual campaigns. The result competes with (and in some cases, may overwhelm) site content.

imdb.com takeover ad
IMDb’s 2021 site featuring a takeover ad.

While the look-and-feel of the 2011 and 2021 editions is very different, their navigation structures are similar. Both feature a search box as the primary navigation mechanism, and both have a browsable list of content categories. The 2011 edition showed subcategories using dropdown menus in a primary navigation bar. In its stead, the 2021 edition features an approach more common to today’s responsive sites: a mega menu under a ‘Menu’ button.

imdb.com megamenu
IMDb’s 2021 site features a mega menu.

Plus ça change

What can we learn from this exercise? After all, these are just five websites — not a statistically meaningful sample. Still, I think they illustrate the evolution of common design patterns.

Modern sites feature better (and overall larger) typography. They also have larger and more colorful images. Modern layouts are cleaner and make better use of screen real estate. They’re also responsive, making the sites readable in devices with different screen sizes. Site elements such as navigation and search bars are less fussy and ‘themed’ — for the most part, they do their job and stay out of the way. Modern sites also feature ‘Menu’ buttons, using either hamburger or grid icons. Current sites also seem to devote more real estate to advertising.

But these are mostly cosmetic changes on top of structures that have remained relatively unchanged over a decade. As I’ve said many times before, structure changes more slowly than look-and-feel. These five sites offer compelling proof.

Privacy and Metadata

The U.S. is emerging from a hyper-polarized electoral season that boiled over in the storming of the U.S. Capitol by followers of President Trump on January 6. Ensuing efforts to hold the perpetrators accountable remind us that we live double lives: one in physical space, where our bodies act, and another online, where those actions are recorded – either by us or others.

Shortly after the mob broke into the Capitol, the FBI sought public assistance to identify the instigators. This type of crowdsourced public investigation is a novel phenomenon. The task is easier because some people uploaded videos and photos of themselves and others breaking into the Capitol to public social networks. Several of these people are already in custody.

Others incriminated themselves unwittingly. Leaked data from the Parler social network revealed over six hundred videos with GPS metadata that located users in and around the Capitol during the attack. A student quickly created a website that uses machine learning to sift through these videos to extract and publish individuals’ faces.

Such developments should concern all of us, regardless of where we are on the political spectrum or whether or not we abide by the law. Although Parler seems to have been remiss in its handling of geolocation metadata, it isn’t the only organization keeping track of its users’ whereabouts. A recent article on The Verge notes that the U.S. Defense Intelligence Agency (DIA) has bought such data from brokers without a warrant.

Another case of publicly available data helping identify the Capitol’s attackers — and one that is more directly relevant to those of us who structure information systems — involves the dating app Bumble.

Among other information, Bumble allows users to state their political affiliation. According to one Twitter user, at least one woman used this feature of the system to lure men who may have been involved in the attack, so she could report them to the FBI. The tweet drew a lot of attention, and Bumble eventually disabled its politics filter in the U.S. “to prevent misuse.”

One can easily imagine why this field exists in a dating app. Few subjects are more contentious than politics, especially these days. People looking for a compatible mate would likely want to know the other persons’ political leanings. However, I doubt Bumble’s designers envisioned their system being used against its users in this way. (“The street finds its own uses for things.” — William Gibson)

I suspect most people don’t realize they’re not just beings with bodies that move in physical space, but also information ‘objects’ described (and identified) with metadata. The events of January 6 prove that the existence of these digital selves can have serious consequences.

While I’m pleased to see the Capitol’s attackers held to account for their actions, I’m also more aware of the implications of being a tagged individual in an information society. The same technologies and information structures that allow us to bring miscreants to justice can also be used for other, less noble, purposes.

Those of us who structure information environments must consider the implications of how we categorize and describe people. Information about people’s identity — including gender, race, nationality, religious commitments, and political affiliation — is especially sensitive.

Creating and maintaining categorization schemes bestows great power. People who design and manage such systems have tremendous ethical and moral responsibilities.

Icons by Maxim Kulikov from the Noun Project

Product and Marketing Navigation

Many SaaS (software as a service) companies make a distinction between their “product” websites and their “marketing” websites. The former refers to the service itself, the tool or application that customers use. The latter refers to the site where customers learn about the service before they sign up. Although the audience for both is often the same, product and marketing sites serve different purposes. As a result, it’s not unusual for these sites to have different navigation structures. Few companies illustrate this distinction as well as Mailchimp.

Let’s start by looking at Mailchimp’s marketing website. Here’s the site’s primary navigation bar:

Mailchimp's marketing site primary navigation

Clicking (or tapping) on any one of these top-level navigation elements (except Pricing) reveals vertical menus, which swipe in from the left edge of the screen:

Mailchimp's marketing website's first level menus

Selecting one of these menu items reveals a second level of menus:

Mailchimp's marketing website's second level menus

These are the mechanics of navigating Mailchimp’s marketing site. Let’s also look at how the site is structured — the main distinctions it asks users to understand:

  • Products: the company’s offerings, framed in terms of the value they provide to users (“We’ll help you…”) and features of the Mailchimp platform.
  • Resources: content meant to help users get started or become productive with Mailchimp, including documentation, examples, access to relevant third parties, etc.
  • Inspiration: ancillary content such as podcasts, blogs, videos, workshops, etc.
  • Pricing: leads to a page that does more than explaining mere pricing: it also lays out the company’s business proposition in terms users can understand (and that hopefully relate to their needs.)

There are three other elements in the site’s primary navigation bar: the company’s logo, search button, and the “user” menu. (If users are logged in; if they aren’t, they’re shown buttons for logging in and signing up instead.) The logged-in user menu isn’t revealed with the left-to-right swipe of the main navigation elements, but is instead presented in a more traditional dropdown menu:

Mailchimp's user menu
Note the View Dashboard button. This is where the (logged in) user can cross over to the product site.

This marketing navigation system is standard fare; I’m sure you’ve seen lots of site structures like this one. Mailchimp’s product navigation, on the other hand, is unique — and very different from the one in the company’s marketing site. Here’s what you see after you click on that View Dashboard button:

Mailchimp's product website navigation bar

The first thing to note is that the navigation bar is no longer laid out horizontally across the top. Instead, we’re shown a tall and narrow vertical bar aligned with the page’s left edge. A thin vertical yellow bar draws our attention to this navigation bar.

This navigation bar starts with the Mailchimp logo. Unlike the logo in the marketing navigation bar, this instance doesn’t include the Mailchimp wordmark. In fact, none of the items in this navigation bar have obviously visible labels. Hovering the pointer over the icons reveals what they are:

A label over an option in Mailchimp's product navigation bar

This mechanism is essential because most of the icons in the product navigation bar are somewhat obscure.

(Perceptive readers may have noticed I’ve been sharing screenshots from my iPad in this post. I’m using an Apple Magic Keyboard with my iPad Pro, which includes a trackpad that makes mobile Safari behave more like a desktop browser. For touch-only interactions, the labels appear on the first tap and the menu appears on the second tap. This additional interaction adds a bit of friction to the experience on large-screened mobile devices. In devices with smaller screens, Mailchimp’s product navigation structure collapses to a hamburger menu that shows labels next to the icons by default.)

These are the labels for each icon in Mailchimp’s product navigation bar:

  • Dashboard
  • Create
  • Audience
  • Campaigns
  • Automations
  • Website
  • Content Studio
  • Integrations
  • Search
  • Profile

Look again at the screenshot above. Do these labels come to mind when you look at those icons?

As with the marketing navigation system, clicking (or tapping) on each icon reveals a vertical menu:

Mailchimp's product website's first level menus
Note the yellow background, which evokes the narrow vertical line that first drew our attention when we first saw this navigation system.

Helpfully, these menus start with the icon’s label. The options in these menus are all “places” within the product. But unlike the marketing site, people don’t visit these places to learn about the system but to do things: create a survey, write an email, configure steps in a customer journey, etc.

Still, being able to use any system effectively requires that the user form an accurate mental model of what each option does and how it works. Navigation isn’t just a means for moving around; it also helps users grok the main elements of the system, how they relate to each other, and how these relationships can help users get things done.

While these elements may be labeled using ordinary words, the words carry particular meanings in this context. As such, these distinctions aren’t as obvious as the ones in the marketing site. Revisit the list I transcribed above. Do you have a sense for what they do just from looking at the list?

To wit, “audience” and “campaign” are central elements of Mailchimp’s platform, and they have particular meanings in the system. Users can’t effectively work with this system if they don’t understand these meanings. These concepts become clearer as users move around in the system, getting a sense for the distinctions-within-distinctions that characterize multi-level navigation structures like this one.

I suspect the absence of recognizable icons and visible labels in the first level of Mailchimp’s product navigation structure slows down this learning process. The first time users see this navigation structure, they must hover over all the icons and hold their names in short-term memory to get a sense of the whole.

After a while of using the system, even the most obscure icons acquire meaning in the user’s mind. For example, after several months, I’ve come to associate the third icon in Mailchimp’s product navigation with “audience” and the fourth (the megaphone) with “campaigns” — the two parts of the system I use most. However, I still don’t remember what some others do. I explored these other parts of the system while preparing to write this post and found useful features that I can use for my business. I wonder if I’d discovered them sooner had they been labeled more clearly.

It’s worth noting that unclear labeling isn’t a problem with the marketing site; its primary navigation labels and their underlying menus go to great lengths (and a relatively large amount of screen real estate) to explain themselves to the user. This effort is understandable: visitors to the marketing site are fickle; they must understand the main points as quickly as possible. You can’t assume visitors to the marketing site will stick around to expend time and energy learning the system.

On the flip side, users of the product already expect a learning curve. They want to get things done, and once they’ve learned the system’s conceptual model, navigation shouldn’t be in the way. So, the tradeoff is between a more obtrusive and somewhat redundant navigation system and one that aims to occupy as little space as possible and stay out of the way until the user needs it.

Apart from aesthetic considerations — i.e., color and font choices — Mailchimp’s marketing and product sites are very different from each other. They only share two navigation elements in common: the company logo, which in both cases leads to each system’s version of “home,” and search, which presents different interfaces on either site. Everything else — including, as I’ve pointed out, the navigation bar’s position and orientation on the screen — feels very different.

These differences may be appropriate, given that both sites serve different purposes and create very different contexts. However, given my challenges with using the product site, I wonder if they may be too different. Perhaps clearer labeling (as evidenced in the marketing site) would make the product site easier to use. In any case, the sharp contrast between these two navigation systems makes for an interesting case to study.

The Order of Marvel Movies

A few months ago, I wrote about the poor information architecture of most streaming services. One of the quotes in that post highlighted Disney+ as the best of the bunch, but called out issues with the service, such as the difficulties of watching Marvel Cinematic Universe (MCU) movies in the correct order. An article on The Verge points out that Disney has now fixed this problem:

When Disney Plus launched, the Marvel Cinematic Universe movies weren’t exactly organized. There were rows for featured titles, movies, and TV shows, but everything was kind of strewn together. Almost every Marvel Cinematic Universe movie you wanted was here — you just had to spend a minute finding it. Now, however, it looks like Disney has changed around the Marvel section a tad to make it, well, make sense.

In the screenshot below (taken from a Disney Plus US account), the Marvel films are separated into their specific phases, and then there’s an additional row for people who want to watch the Marvel Cinematic Universe in order as the events occur within the universe timeline. (There are some arguable inaccuracies in the Timeline Order row, but that’s for another blog post.)

Screenshot: The Verge
Screenshot: The Verge

The selection and granularity of categories are noteworthy. Most streaming services organize movies based on category, such as the genre of movies. Here’s part of Netflix’s list:

Within each category, Netflix groups movies based on sub-categories. Here’s an example from the “Action” genre:

Some of these sub-categories are other genres (e.g., Drama), while others are a mix of genres (e.g., Action Comedies). Some aren’t genres at all, but sets based on popularity (e.g., Trending Now), obscurity (e.g., Hidden Gems for You), tone (e.g., Suspenseful), etc.

Disney+ also has genre-based categories. However, it gives greater emphasis to brands such as Marvel, Disney, Star Wars, and National Geographic. I expect they can get away with this because these brands correlate with genres: Disney stands for family entertainment, National Geographic is educational, Marvel is superhero movies, etc.

Tapping on these brands leads to sets of movies organized in particular ways. The Marvel movies are grouped into “phases,” a construct that is understandable to Marvel movie fans. There’s also a set that shows the Marvel movies in timeline order. The sets are specific to each brand. For example, groupings in the Star Wars category include the sequence in which the movies were released to theaters and the sequence in which the story unfolds in the Star Wars universe. (Intriguingly, the latter is sorted in reverse-chronological order, with the newest parts of the story shown first.)

These groupings may seem like a small detail. After all, having streaming access to this content is already a big “ask.” However, the organization and sorting of content changes how people experience the service. They’ll enjoy it much more if they can see content organized in meaningful ways. As The Verge’s article points out,

Streaming services, as a blend of technology and entertainment, need both to create good experiences for subscribers. That means not only bringing as much content to a platform as possible and ensuring said platform runs, but also understanding how people are likely to watch what’s there.

The article’s subtitle says it more succinctly: “We love a good organization structure.” What better argument for prioritizing mindful information architecture?

Disney Plus finally understands how fans want to watch Marvel movies

Browse by Color

Most website navigation systems rely on words. Terms like Products, Industries, and About Us have become standard; many companies have such phrases or subtle variants on their websites. Other labels are more particular to each company or industry. But in general, website navigation systems are primarily verbal.

Some websites break that norm. Color Palettes is an interesting example.

Color Palettes site header

Let’s examine this site’s header. The most prominent element is the site’s name. Below the name, in the position usually occupied by the primary navigation bar, is a list of choices:

  • Warm Palettes
  • Cool Palettes
  • Pastel Palettes
  • Contrasting Palettes

To the right of the name is a standard “hamburger” menu icon. If you click on this icon, you see a list of choices rendered with words.

Color Palettes expanded menu

So far, this is all standard stuff. These choices are rendered using words — including the hamburger icon, which has the label Menu.

But look at the other half of this header. If the left side features mostly words, the right side is primarily visual. The most prominent elements on that side are two (unfortunately large) social media icons. Again, standard stuff. Below these icons is where things get more interesting: there’s a row of twelve colored squares followed by a button labeled “2 colors.”

These colored squares are a key part of the site’s navigation system. For example, if you click on the violet square, you’re taken to a page that lists color palettes that include violet.

Color Palettes violet palettes page

The “color palette” element that shows up in these pages is the core object in this system. Each of these color palettes has five colors, identified by their hex values, and a numeric identifier. The palette also includes a photograph that features its constituent colors.

Color Palettes individual palette page

Palettes also have metadata, including ratings and tags. The latter consist mostly of color names, spelled out in English. Some tags also include use cases (i.e., “beige shades in room decor”)

The site’s primary navigation system lets you find palettes that meet one of two criteria: they either correspond to one of four types of color sets (warm, cool, pastel, and contrasting) or feature one or more specific colors. The latter is where the colored boxes are useful. A violet box is less ambiguous and subjective than the word “violet.”

This site’s navigation also offers the option of finding palettes that feature two colors. If you click on the “2 colors” button next to the colored boxes, a panel with more options is revealed below the site header:

Color Palettes "choose two colors" menu

When I first saw this expanded panel, I thought the two colors were gray (represented by gray squares) and one of the twelve colors that frame the gray squares. But when I clicked on a color, I realized that the gray squares are checkboxes. Using this mechanism, you can select two colors. (You can un-select them by clicking the “X” button.) If you press the (curiously labeled) “Pick Up” button, you’re shown a page that lists color palettes that feature your two selected colors.

Color Palettes with two colors selected

This “2 colors” panel is modal: You can’t pick individual colors while the “2 colors” panel is expanded, and vice-versa. This switch is more obvious when you use the site on a mobile device.

Color Palettes menu in a mobile device

Non-verbal navigation isn’t unique to this site. Navigation bars that rely on visual elements aren’t uncommon in mobile devices. Small screens are cramped, and icons can take up less space than words or phrases. However, icons can also be ambiguous or have different meanings for people in different cultures.

But what Color Palettes is doing is different. Whereas icons represent particular concepts (e.g., the “hamburger” icon represents a menu), Color Palettes’ colored squares don’t stand for anything. Violet = violet. What more direct way to browse than by using not a representation — whether verbal or iconic — but the thing itself?

Sync to Furthest Page Read

It’s challenging enough for a product’s conceptual models to be internally coherent. But it’s even more challenging to maintain coherence within a family of products. One of my favorite examples is Amazon’s Kindle.

The Kindle product family started with a dedicated e-reader device in 2007. Over the years, the line has grown to include several devices with different capabilities, ranging from relatively simple readers with e-ink screens to fully-featured tablets. Besides dedicated devices, Kindle also encompasses apps that run on other hardware platforms, such as Android phones, iPads, and personal computers running Windows and macOS.

This widespread availability is one of the system’s most attractive features. It means you can read your e-books on your preferred device. Alas, this variety also presents design challenges. These devices don’t have the same features and capabilities. Some have touchscreens, while others use a mouse or trackpad. Some have larger screens than others. Some have color displays, while others are monochromatic. And so on.

Also, even though they’re all labeled “Kindle,” not all Kindle products have the same capabilities. Dedicated Kindle e-ink readers (such as the Kindle Oasis) are optimized for reading books. The Kindle apps on other platforms, such as Windows and iOS, are also optimized for reading books, but run in the context of a third party’s operating system. In some of these platforms you can peruse and buy from the Kindle bookstore, while you can’t do so in others. As a result, Kindle’s user interface is different on each platform.

That said, all of these products must provide a basic set of functions for users to experience them as “Kindles.” That set includes, at a minimum, giving users access to their book library. They must be able to open a book and read it. They must be able to move around in the book, including navigating its table of contents. They must be able to search in the contents of the book. They must be able to highlight key passages and leave notes in the book. Those changes — especially users’ highlights and notes and their reading location in the book — must synch with other instances of Kindle. I don’t think you can call a product — be it software or a dedicated device — “Kindle” if it doesn’t provide these basic features.

It’s not necessary that the UI that provides access to these features be identical in each platform, as mentioned above. However, ideally, the underlying structural relationships would be maintained throughout all instances. For example, I expect the features that allow me to navigate within books — e.g., the table of contents, jumping to a particular page, synching to the furthest location read — to be grouped together. I also expect that these features would only be available in the context of reading a book. (As opposed to the level of the library of books.)

In fact, this is how these features are grouped in the iOS and iPadOS Kindle apps.

Navigation menus within a book in the Kindle for iPadOS app. The screen on the right shows the contents of the "hamburger" menu.
Navigation menus within a book in the Kindle for iPadOS app. The screen on the right shows the contents of the “hamburger” menu.

The Windows and macOS versions of the Kindle app (which are very similar from a structural perspective) feature a dedicated “Go To” menu. The “sync to furthest page” feature has a dedicated button, and it’s located next to the “Go to” menu.

Navigation menus within a book in the Kindle app for macOS. Note the dedicated "Sync to Furthest Page Read" button next to the "Go to" menu.
Navigation menus within a book in the Kindle app for macOS. Note the dedicated “Sync to Furthest Page Read” button next to the “Go to” menu.

However, the “Sync to Furthest Page Read” feature is in a different location in the dedicated Kindle e-ink readers. Instead of being grouped with the book-content navigation features, in these devices, “Sync to Furthest Page Read” is in a generic menu alongside seemingly unrelated features such as “About the author” and “Share.” This menu — which is signified with a vertical ellipsis — is also present at the library level, where it shows a different set of options. Note that the e-ink Kindle devices also have a dedicated “Go To” menu, which lists the book’s table of contents and user notes, but “Sync to Furthest Page Read” isn’t close to this menu.

Navigation menus within a book in a dedicated Kindle device. The middle screenshot shows the contents of the "Go To" menu. The one on the right shows the generic "vertical ellipsis" menu.
Navigation menus within a book in a dedicated Kindle device. The middle screenshot shows the contents of the “Go To” menu. The one on the right shows the generic “vertical ellipsis” menu.

So, three different platforms that share the same feature set but present it within very different structures. I’ve chosen to focus on “Sync to Furthest Page Read” because this feature is especially useful for people such as myself who use Kindle in more than one device. If there is one feature that should be located consistently between platforms, this is it. I’ve used Kindles concurrently in multiple devices for many years, and I still make the frustrating mistake of looking for “Sync to Furthest Page” read in the “Go To” menu on my Kindle Oasis. There’s a lot to be said for maintaining structural coherence across a family of products.

The Bad IA of Streaming Services

Alan Sepinwall writing in Rolling Stone:

The part of the streaming shell game that I’ve never been able to fully understand — and that has somehow gotten worse with each passing year and each new service debut — is just how bad the user experience is on all of them.

The article lists several aspects of today’s streaming services that offer a subpar experience to viewers. Among them, it includes bad information architecture:

With the exception of Disney+, which has several clearly delineated brands and genres that are easy to explore(*), the streamers seem to go out of their way to encourage endless browsing, as if time spent on the service is valuable to them even if you never get around to actually watching anything. Browsing is difficult, direct searching is somehow worse, and the whole thing seems to have been made by one of those men Alfred tried to warn Bruce Wayne about, who just want to watch the world burn.

(*) And even they’re not perfect — all the Marvel movies are arrayed pretty randomly, which makes it more difficult to attempt to, say, rewatch the MCU in order.

I’m a customer of several of these services, and have experienced all of the issues listed in the article. I get the impression these systems have been designed “screen-first”: lots of investment on the front end and little on the underlying UX architecture.

Problems such as searching and browsing large catalogs have been solved in other domains. Why are streaming services so hard to use in 2020? I suspect the answer is a mix of business models that aren’t aligned with customer needs/wants and a lack of awareness of IA best practices. The latter is relatively easy to fix.

As a way of experiencing video content, streaming is better than the old broadcast model. But all of these services could be so much better with some mindful IA and conceptual modeling. Do you know someone who works in one of these companies, or work there yourself? If so, I’d love to talk — please get in touch.

Who Loses Big in the Great Streaming Wars? The User