#navigation

Navigation and orientation features / 8 posts

Newsletter
  • Get a newsletter digest every Friday:
Contact

Send me feedback, tips, bug reports, and anything else:

About me and the blog

My name is Marcin Wichary (he/him). I’ve worked as a UX designer, typographer, front-end person, and manager at Google, Medium, and Figma. I’ve also written a book about keyboards and typing, gave talks, and published essays about design, typography, and technology.

Unsung is my blog about software craft and quality.

More info about Unsung

Send me feedback, tips, bug reports, and anything else:

More info about Unsung

System Settings and its last mile problem

macOS’s System Settings app might be a contender for the worst piece of software Apple released this century. Its 2022 redesign was based on wrong assumptions, the execution of that already bad redesign idea has also been subpar, and the situation not only hasn’t gotten any better in recent memory – I can point you to years-old bugs – but now it is spreading like gangrene to other apps.

Among System Settings’ numerous UI crimes stands a simple, but incredibly important one: the app does a bad job at conveying to the users where they are, in a place orientation feels very important. A lot of this is self-inflicted, with bad search and confusing pop-ups partying with truly embarrassing bugs…

Actually, one literally just happened to me. The only thing I did was opening System Settings:

Which section am I in? General, right? That’s the one highlighted? No, turns out that “Software Update Available” added itself post launch and stole the content pane, but didn’t update the nav on the left:

This is embarrassing because it highlights that Settings are built in a shoddy way that allows the content and the left nav to get disconnected. The end result is yet another design problem that makes it hard for me to build in my mind the accurate map of all the settings, and to understand where each one goes and how they all connect. And I have a feeling I’m not the only one.

But this is not actually what I wanted to show you. (I just got distracted by a bug on the way to where I was going.) The problem I wanted to share is more universal and helpful to know about.

Let’s say I search for “hide dock”:

The first result is what I wanted, and clicking on it gets me there:

Type and click! It all seems great on the surface. The topmost option on the right is what I want; I can toggle it and move on with my life.

But I might not realize that the right pane has been scrolled down to that option, and there’s a bunch of stuff above it, too.

This is tricky, because sometimes it’s useful to know what the whole section’s name is. Or, maybe, the option I wanted is influenced by the option just above it, which I might now not even realize exists.

Mostly, auto scroll is disorienting. The shy scrollbars are on by default, so they won’t lend a helping thumb. The light separator line that appears below the header is hard to notice. So is the blurred appearance of the closest scrolled-off thing underneath it. I am certain most people arriving at any scrolling container already pre-scrolled will assume the container is just… shorter.

This is a problem you see on the web, too. There are solutions out there: you can animate-scroll to the right place on entry, or you can leave some space above (a clever trick is to calculate the distance so that one of the options left above is cut in half, conveying more stuff in that direction) – although both of these work better for section headers rather than specific elements like here.

What would probably be best for setting would be to… point to the found thing. And what’s interesting is that Apple already built a fun mechanism for it:

It’s a little goofy, seemingly inspired by those tabs for signing documents…

…but most of its complexity has more to do with two menus next to each other. The pointing does its job well.

And, even if it could use a refresh or some improvements, in a perfectly functioning ecosystem the System Settings team would grab that interface, reuse it, polish it, and give the newer revision back to the Help menu as well. In the process, the user would benefit thrice: first by seeing help improve, second by getting a better orientation mechanism for the settings, and third by experiencing and learning a consistent pattern across many surfaces.

(Lastly, many among you might have already realized this: scrolling as a method was doomed from the beginning. If the found item is closer to the bottom of the container, like below, there is just no way to pull it all the way to the top anyway.)

I added a new tag, navigation, to collect posts like these. The title of the post is a reference to a logistics term.

Interesting web design moments

Here are a few nice and interesting design decisions I spotted on various websites in the last months.

The pinball repair forum Pinside shows specifically how much time has passed between posts. This is great for orientation and especially when catching up or revisiting – history always gets flattened, and this gives the original story a much more truthful cadence:

In a post from Reimar Servas I mentioned yesterday, you can see generous linking through the writing…

…but also a nice “link summary” at the bottom. I like this because I think this accommodates both people who branch out in the moment, and people who might prefer to read in full, and then explore. Also, it’s just easier to click all of the links if they’re laid out like this:

In the same space, Frank Tisellano provides these interesting callouts. They feel perhaps a little too eager, but I perhaps the eagerness is intentional: they build on how browsers show the URL on hover in the corner as a hint:

I liked kottke.org’s annotation when something is a gift link (here to the New York Times):

This website by Andrew Murphy has a swear toggle:

And lastly, it was fun to see an interview (by Infil) presented this way:

And it’s not just the interview – solo posts employ the same treatment to convey emotions:

Tap to top: Ivory

Safari broke tap to top for tabs (say it three times fast), and Bear added two-fingers gestures. Ivory – a Mastodon client for iOS – tries a different approach in a slightly different setting.

The normal tap to top gesture works as expected, but tapping the top again returns you back where you were before:

I believe this is meant to be a small gesture of help if you tap to top accidentally, yet I am not entirely sure it’s effective. Would you, in a moment of panic, decide to do the same thing again, after years where every other gesture like this in the entire system taught you those taps are idempotent?

It gets a little bit worse, too. There is another established standard of going to the top – tap the selected tab again. This works across the entire operating system, too. But Ivory changes it, requiring you to tap twice, not once:

I don’t have access to the combined feedback of Ivory’s users, but I am much less of a fan of this than of Bear’s approach, as it doesn’t feel like it comes together as a system.

At the bottom of the screen, the interface teaches you that you have to tap one more time than usual, likely putting in your fingers the idea that you just have to tap many times, especially if you never figure out it’s a double tap and not two taps that trigger the interaction.

But then, at the top, this is how the interface reacts like this when you do exactly the same thing:

It feels like a system that’s well-intentioned, but inconsistent not just with the rest of iOS, but also with itself.

Tap to top: Bear

I praised the note-taking app Bear before for its memory; the app would always remember your last-visited note and the precise place within it, even if it had every right to forget it.

But there is a general problem here: memory that kicks in when not expected can be frustrating, as you have to undo its results and “reset to normal.” For Bear that’s not a problem, though, right? The whole iOS has a nice “tap near the top to scroll to the top” gesture that would work here as well, making it easy to recover if you return to the note where you last happened to type.

Except, with any writing app, the very bottom is as valid of a destination as the very top.

Bear designers understood it and tried to solve it in a new way, by adding two gestures: a two-finger swipe up takes you to the very top, and a two-finger swipe down to the very bottom:

It doesn’t quite work as well as I hoped – for some reason, it scrolls way too far down, and does feel a bit sticky mechanically.

It’s also, like any complex gesture, not very discoverable. But here’s where Bear tries to help, by… adding even more gestures atop these two. There is a two-finger swipe left or right for jumping back and forward in history…

…and even a two-finger tap to reveal a navigation menu.

That last one feels like overkill to me, but there is something interesting about the app building an entire little universe of compatible gestures – “Come here for all your navigation needs!” – knowing that it increases the chances users will develop a habit of learning and using them. (The gestures also work whether you’re in view or edit mode.)

I am curious, though: Would allowing to tap somewhere near the bottom edge not work as the “obvious” solution to get all the way down?

Xcode’s clever minimap

Minimaps are an interesting UI element because they often feel very exciting – something about things being small, or responsive, or maps just being cool? – but fail to actually be useful.

I find minimaps for coding particularly tricky because, at least in my world, code all looks very much the same from far away. Seeing a thumbnailed/greeked version of it felt just like a more expensive and distracting version of a regular scrollbar, without any benefits.

But Xcode does something interesting. It allows you to use MARK to create a sort of a “header” for the minimap anywhere you want:

The minimap then shows those headers not greeked, but as human-readable text:

I thought this was clever, allowing you to see the bird’s eye view of the code not just in the most obvious visual sense, but also as a sort of “table of contents,” adding so much more utility.

This, of course, is technically no longer a “zoomed out view” but then again, it’s not that there is some sort of rule that it has to be. As a matter of fact, quite the opposite; it all reminded me of the famous London subway map by Harry Beck, which also broke the expectations in a similar way.

The original, geographically accurate map of London’s tube looked like this:

Beck decided to take liberties with the geography and reimagine the map as a diagram to help the travellers, and ever since he’s done so in 1933, many transit maps followed suit:

“Each one of these buttons has four distinct purposes.”

A nice blog post by Nathan Manceaux-Panot on Pending Design about the subtle design of the tabs underneath the search results in the programming editor Nova:

Through buttons right below its text field, the bar also lets you filter results: only show files, only show symbols, or only show symbols in current tabs. Here’s the thing, though: each one of these buttons has four distinct purposes. They’re not just for clicking.

The tabs are clickable as they normally are, but they’re also a treasure map (to tell you something is possible), a cheat sheet (to remind you how to do it again), and an onramp for faster keyboard navigation.

I’d add two more things to the celebration:

  • I myself often forget onboarding is not just about the first run, but also about reinforcement. Here, this UI does a lot of reinforcing over time, helping you build the habit. Pressing the key highlights the tab. Clicking on the tab adds a key as if you pressed it, and so does using an advanced shortcut (e.g. ⌃⌘O instead of ⇧⌘O). Even slash as a symbol comes from path names, so you might naturally associate it with files.
  • The search pop-up always has a nice contrasty appearance: dark when the background is light, or vice versa. Many modern interfaces go for white background for every UI element and surface. This seems like solely an aesthetic choice, but has more consequences when it comes to visibility of things, and even hierarchy. I am personally always excited when I see a duochrome app these days, because it feels like the team knows what they’re doing and isn’t just chasing visual trends. (Below is an example from Bear.)

Safari and system design, pt. 1

To me, “tap anywhere at the top to scroll to the beginning” is an amazing and underappreciated mobile gesture:

It not only provides an alternative to desktop‘s Home and ⌘↑ keys, but the student laps the teacher here; it’s actually better than every way to scroll to the top on desktop (do you like pressing ⌘↑? do you even have a Home key?), and it’s an icing on a cake of a regular flick to throw the page to the top already being pretty nice.

Tap to return to top is also distinctively mobile in that it allows you to tap just anywhere near the top edge that’s not already a tap target; as far as I can observe, traditional GUIs detest being imprecise in this way, always asking you to click on something specific (although window moving on macOS in the post-title-bar era is also starting to feel similar).

The iPhone gesture seemed to work so well that, over the years, more patterns started borrowing from it. In Bluesky and tons of other apps, you can tap on any tab with scrollable content a second time to scroll all the way to the top. (Again, something that’s hard to imagine on desktop, where you pretty much almost never think of clicking on an already-selected item.)

It’s not just the top, either. In Podcasts, tapping Home goes back to the left:

And in Photos, to the bottom:

To me, the whole “tap to return to the beginning” gesture universe feels ascended to be the core property of the interface. In that way, it is similar to scrolling, undo, copy/​paste, arrow keys moving the text cursor, and so on, all inducted to the National Register Of Historic Gestures.

Why? Because these gestures can only blossom if they work consistently, everywhere. You need to start trusting them so much they slide into your subconsciousness. Breaking the gesture in one place will make it less trustworthy in other places, too, ejecting it from motor memory back to the level of deliberate effort, and therefore making it a lot less usable. “Does this thing work here or not?” is a death knell of flow.

The fact that tapping on tabs is idempotent means there’s also no penalty; if you’re already at the beginning but are not sure, tapping it mindlessly won’t hurt or send you back somewhere else.

This is all great. And this is why I’m unhappy Safari started mucking with it.

Safari has tabs at the bottom – starting with two (regular set and “private” set), although you can add more. Above is a long list of site cards, with newest at the bottom. It’s exactly the same situation as in Photos, and yet tapping on either tab doesn’t restore the scroll position. Instead, it opens the settings dialog:

And, tapping around the buttons does nothing.

I would imagine Safari is a pretty important app used by many people, and so this feels like a bad place to introduce an inconsistency that could have a more serious consequences of un-teaching people about tap to scroll to top in the long run.

The funny thing is that the solution is already there: you can tap ··· in the upper left corner to get to the same functionality. The long press on the tab also opens the same menu.

Messing with a “tap to go back to the beginning” system gesture like this means to me the design team doesn’t fully share the understanding of the value of their own creation, or maybe that stewards of the gesture system are not vigilant… or perhaps the awareness is there, but the caretakers aren’t recognized, rewarded, or empowered enough.

It’s similar to the “no, thanks” example I shared before, a possible worrisome tragedy of the UX commons in the making if the respective teams do not change course. Because, wedging that sort of an exception in – even if you have a great set of reasons in the moment – creates a precedent. Inevitably, from my experience, the next team that will want to override scroll to top, or misuse “No, thanks,” will now require less of a justification.

Designing table of contents

I added a table of contents UI to the most elaborate essays on my site, and then wrote about some of the design details and choices I made there. Let me know if this is an interesting case study! I tried to do something new here with tons of mini videos.

At the bottom, I will also be collecting other implementations I see that are interesting alternatives to my approach.