June is LGBTQ Pride Month in the U.S., and organizations are expressing support in various ways. Some have overlaid rainbow Pride flags on their logos. Others have created dedicated marketing campaigns. Microsoft is celebrating by adding a new option to its Office app preference panels.
Some preference panels are more complex than others, depending on the complexity of the app. Apps with more features usually have richer preference panels. Still, most are utilitarian: they offer options simply and without fuss.
Also, preference panels tend to change infrequently. UI redesigns usually focus on headlining features. Preference panels are a necessity, not a differentiator, so you don’t often see them trumpeted in app marketing materials.
Which is why I was surprised a few days ago when I opened OneNote’s preferences and saw a new option.
TL;DR: I’ve pulled the plug on The Architecture of Information as a separate site. The posts I published there are now hosted on this site. I’ve set up a redirect, so links don’t break.
Longer version:
For the last few years, I’ve published posts here about information architecture under the rubric of The Architecture of Information, or TAOI. Last year, I undertook an experiment: I migrated those posts to a separate blog in a different domain.
The goal was twofold:
Create a more neutral (i.e., not associated with me personally) repository of IA examples from around the web, and
Create a separate site where I could experiment with IA structures.
Readers received the site with a burst of excitement, which encouraged me. But traffic soon tapered off, and now it’s a fragment of what jarango.com serves. At this point, I expect it’d take years to build towards goal #1.
I planned to write one new TAOI post per month. I sustained that pace for a while, but then fell behind. Whereas I treat jarango.com as a public scratchpad, TAOI felt more formal, which led me to spend more time on each post there. Eventually, writing became a chore.
Furthermore, I’ve been too busy with other projects to work towards goal #2. At one point, I considered moving the site to Jekyll. I learned the system and created a new template, but eventually decided not to devote more time on that project.
Recently, I’ve been spotting items I want to write about under the TAOI rubric but aren’t fit for the format of the other site. I missed writing here and didn’t see an upside to maintaining a separate site and social media accounts. The experiment had run its course.
So, I’ve migrated the nine posts I published at thearchitectureofinformation.com to this site, and set up a redirect, so the links don’t break. I will continue publishing in the TAOI line, but from now on, posts will appear on this site.
Thanks to everyone who checked out or shared my writing on the other site. I hope you stick around as I continue to write about IA and related subjects. (If you want to stay in the loop, please subscribe to my newsletter.)
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
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.
[Spotify] 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.
Streaming media apps offer access to at least two sets of content: the ‘global’ collection, which includes as much stuff as possible, and the user’s ‘personal’ collection, which is (at a minimum) a one-off subset of the former.
The two sets have different objectives. The global collection aims towards discovery and findability, whereas the personal collection aims towards curation and familiarity.
Both parts of the environment must be distinct from each other to accommodate particular affordances and make clear to the user what s/he is looking at, yet maintain enough similarities to seem part of the same system.
This is a tricky line to walk. It’s interesting to see how major players like Spotify are doing it.
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.
A core principle of information architecture is that user interfaces change faster than their underlying structures. Given how quickly digital things change, this principle is easier to contemplate in the abstract than in practice.
“Bored coder” Neal Agarwal recently published a one-page website called Ten Years Ago, which showcases fourteen websites’ homepages as they looked in February 2011 (through the graces of the amazing Internet Archive, which deserves your support.) I took Neal’s page as a prompt to look at how websites have changed in a decade.
In Ten Years, I examine Apple, ESPN, Goodreads, Reddit, and IMDb. As expected, the sites look different than they did ten years ago. (Some more so than others.) However, their core navigation structures remain remarkably consistent.
As expected, the sites look different than they did ten years ago. (Some more so than others.) That said, their information architectures remain remarkably stable. As I’ve said many times before, structure changes more slowly than look-and-feel. These five sites offer compelling proof.
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.
(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.
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’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 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.
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.)
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.
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 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 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’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’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.
My latest post for The Architecture of Information delves into some implications of crowdsourced efforts to serve justice to the perpetrators of the attack on the U.S. Capitol. To wit,
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.
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.”
I know a friend of a friend who changed her preference on Bumble to Conservative. She’s matching with MAGA bros and they’re bragging and sending her pics and videos of them in the Capitol. She’s sending them to the FBI.
— Allison #FreeThemALL Norris (@allisonnorris) January 8, 2021
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.
You must be logged in to post a comment.