Tags

Nathan Snelgrove bemoaned Microsoft Office’s ribbon interface, like many others, but I actually don’t mind it. Wait! No! Please! Don’t shoot!

I won’t kid that the ribbon is a perfect interface, however I think it is a perfectly cromulent one for what it needs to do. The first version of Microsoft Word for Windows was released in 1989. It didn’t have a ribbon but instead toolbars. It was followed by several further versions, all keeping the same general toolbar design:

In 2007, however, Microsoft overhauled Office’s design to use what they called the ‘ribbon’ – a set of tabs with toolbars harbouring buttons of various sizes, dropdown menus, selection systems, and other interactive elements grouped by relevance. We’ll ignore that they’d already been calling it the ‘ribbon’ since the earliest releases, and that ‘ribbon’ was a common term for such toolbars in user interface design dating back to the 1980s.

I know some consider it sacrilege to say so, but I think the ribbon gets a pass. The grouping of related items together in labelled sections helps with association and understanding of function, even when just an icon is shown. The ribbon also at least displays some textual labels, which is nice for usability over everything being an icon.

Being a bit taller, the ribbon also has room to significantly flatten the hierarchy by exposing items users had to go digging for in the menu bar, so feature discoverability is much improved. Contextual tabs that only appear while performing an action that necessitates them also reduce the clutter of appearing toolbars.

In the ribbon, more commonly used items are larger and exposed more readily, unlike the equal-sized and tiny, uniform buttons, which all looked the same and were needlessly difficult for a user to click with a mouse. This let the ribbon remain consistent while making frequented items prominent, solving a problem that Microsoft had been sloppily trying to fix via ‘adaptive menus’, which would hide less-frequently used menu items (while breaking spatial memory).

For a user only requiring basic functionality, everything they need is top-level, with everything else staying largely out of their way. For a more advanced user, everything is accessible and discoverable with minimal added navigation. A power user can hold down Alt for plenty of shortcuts. I much prefer this to separate ‘simple’ and ‘advanced’ modes, which ruin tutorials or giving instructions and usually overcorrect in either direction.

Office 2007 wasn’t a perfect implementation, but by Office 2010 the ribbon had been refined: some of the extraneous borders and ‘busyness’ removed, and the ability to rearrange and customise it returned. In the versions since, it has been tweaked and improved further, and programs outside of Microsoft Office have also adopted it. The ribbon is good, and there is a reason why we’re still using it some two decades on from its introduction.

I loaded up a website and immediately found what I was looking for, but it was on a carousel and it slid away. The carousel had no buttons and the site markup was a mess so I just had to wait for the carousel to go through a full cycle and return to the start so I could click the link.

Torturous.

It shouldn’t need saying, but please don’t do this. Ideally just don’t do carousels at all.

I was really happy with the new loading behaviour I implemented so I’ve been eagerly showing everyone my beautiful new throbber and now human resources has scheduled a meeting with me. I can only assume they want to see it too.

The police just rolled up to check it out as well.

Lea Verou published a post titled ‘Dark mode toggles: two states are enough’, discussing the UX of light-dark toggles. I can understand the reasoning, but I disagree with it. The system setting option being lumped with the selected theme feels a tad too magical to me (and not in the intuitive way). It feels like it is taking my control away as a user.

I reliably fall exactly into What if users get confused? when interacting with the demo. Even with it front of mind I still stumble over the same interaction while switching it back and forth. It isn’t fitting my mental model of how I expect it to function and it really twists my mind around trying to comprehend it.

Historically, I’ve been lazy with my theme toggle on websites. I’ve typically reached for a cyclical button which toggles between light, dark, and system default. However, this is a far from optimal approach and has major usability issues. It isn’t an intuitive interface pattern:

• You can’t see all the options until you’ve cycled through them.
• Switching between the system theme and the explicit theme that matches it doesn’t trigger a change, which causes a weird interactivity disconnect.

However, it is compact, and compactness is one of the main points Lea argues in her blog post, and I do agree that three-state toggles with a button for each are too much. The approach does show the system setting as an explicit setting, however, which Lea argues shouldn’t be exposed to the user. Instead, I’ve come to find a different approach I prefer:

By default, the page follows the system default. Pressing the light mode icon sets the page to light mode. The dark mode icon sets it to dark mode. If the user wishes to return to the system default, they click on the active theme button again, which toggles it off. It only takes up the space of a two-state toggle while representing all three states in an intuitive way. At least, it has been intuitive and immediately understood by the great majority of people I’ve tested it with. The minority usually assume it can’t be returned to a system setting.

This approach treats the system option as something slightly different, too, which feels correct given that system is fundamentally different to light and dark. It also avoids the pitfalls of too many displayed items or the added complexity of a drop-down. It feels like a reasonable middle ground. I look forward to when we get this toggle as a native part of browser chrome eventually.

I find the period where television was transitioning from 4:3 to 16:9 an interesting one. When broadcasting began in 16:9, but people were still actively using 4:3 televisions, broadcasters would commonly either letterbox the content or expect the left and right edges to be cropped. This led to a period where television series direction avoided putting anything too important at the horizontal edges of the frame. Cinema faced similar challenges, and either embraced pan-and-scan, letterboxing, or careful reframing from a wider image.

Content made exclusively for television broadcast, such as news shows, often had all interface elements centred in the image with nothing of substance in the 16:9 exclusive portions:

You can see this effect in action with The Onion’s morning show, Today Now!. Compare Disney Geneticists Debut New Child Stars, which is in 4:3, to Missing Teen’s Friends Go On TV To Plead For Her Release, Gossip About Ugly Classmates, which is in 16:9 but includes all important information within a 4:3 safe zone.

To mitigate the complexities of working with two aspect ratios, broadcasters (mainly in Europe) opted for an aspect ratio of 14:9 as a compromise. It wasn’t optimal on 16:9 displays or 4:3 displays and was pillarboxed or letterboxed, respectively.

The cropping of a wider image reminds me of open mattes, which is where film is captured at a larger size and then matted down to a specific aspect ratio, such as by applying bars on the tops (letterboxing) or sides (pillarboxing). Take the 35mm open matte of Spider-Man (2002). Extra content is there; it is just hidden by the aspect ratio. It is by this method that more full frames can be achieved by merging various source mediums.

The embrace of 16:9 from 4:3 is also tied up in the switch from standard definition to high definition and analogue to digital, meaning that content is large on the screen – especially text, which can be blurred by low-resolution displays and fuzzy CRTs. It is an interesting period of transition, and as a front-end developer I can’t help but think of it in terms of progressive enhancement.

For people without widescreen displays, content functioned and continued as normal without interruption. For people with capable television sets, however, they got an improved experience. As time progressed and 4:3 became less common, it switched from progressive enhancement to graceful degradation on displays still using the old aspect ratio, as we often see as newer technology reaches wider adoption.

Some applications and websites have inbuilt theming capabilities. Others lack anything of the sort but can be themed by external means.

I’d prefer people don’t theme or alter my work, as a painter prefers people not to alter their paintings. Please don’t theme our apps pops to mind. Of course, the web is a medium in which some modification can be expected. From zooming, to forcing fonts, to high-contrast mode, etc, people will modify sites. Particularly on the web, people will theme and modify things as they see fit. It is very much part of the platform’s ethos – user agent stylesheets and extensions and whatnot.

I know that I personally alter websites all the time. Whether that be deleting an element, forcing dark mode, stopping an annoying visual effect, or something more substantial. I also know that people have altered websites I’ve worked on (and icons I’ve designed), and that doing so usually makes me feel something adjacent to bad, conjuring thoughts of ‘Have I failed, such that people must undo or change my work?’.

Another line of thought in my own theming of sites (and indeed, creation of my own bespoke apps) is that I’m being exposed to less design. Exposure to different interfaces and flourishes is inspiring. You find new interface patterns and stay up-to-date with trends by seeing what is popular and in use. As a developer and designer, keeping track with what is ‘in’ is important, as is finding inspiration to motivate oneself and apply to other contexts. By forcing everything existing into my own rigid pre-existing structures, I’m walling myself off. In some cases, this is necessary, such as when the design is really bad or user-hostile, but in many other cases it is something I’m doing out of pure comfort with the known.

‘Did you add an extra page to the site just so the footer links would balance nicely?’

Me? No. Pfft. I— Y’know— Me? Ha. I— I’d never! Not something I’d do… nope…

I love dark mode, but it mustn’t be the only option. For a lot of people, white text upon a dark background is illegible.

Common eye conditions like astigmatism, myopia, and presbyopia can make content look foggy, become hard to focus on, and cause eye strain.

The above effect is especially exacerbated by strong contrast, like pure white on pure black. However, different conditions benefit from different levels of contrast. For example, people with conditions such as cataracts, aniridia, and achromatopsia can benefit from low-contrast visuals. The prefers-contrast CSS media feature is fantastic for tailoring to your user’s needs.

You can’t put important links exclusively in your site’s footer if you have infinite scroll.

You can’t have infinite scroll if you put important links exclusively in your site’s footer.

Please stop.

Growing increasingly frustrated as I attempt in vain to explain how one can modify the browser chrome of a browser that isn’t Chrome to look like chrome. That is, to change the chrome of a non-Chrome browser to look like chrome, without making it look like Chrome.