
Because I’m a massive nerd 🤓, I’m deep-diving into the design of macOS Big Sur’s Wi-Fi menu.

I know. Weird. But there’s plenty to talk about!

This case study is inspired by _About Face: The Essentials of Interaction Design_. 🙌🏻

## Part 1: The icon

![The new Wi-Fi menu, introduced in macOS Big Sur.](/assets/articles/big-sur-wifi-menu/1.jpeg)

My goal for this case study is to solidify my learning and to connect with other design folks. Say hi! 💬

I think my opinions have merit but they aren't steadfast. I don’t have insight into Apple’s research nor a tonne of design experience. Let’s have an idea smackdown.

The first and founding layer of design is intention. What problem are we solving and why?

We need to have a good answer to this question before we can make any judgements about an existing design, or start a new one. The answer defines our design values. 🎯

The intention question is, IMO, the most interesting as it’s the frame for innovation. ✨ But we could get lost down a rabbit hole 🐇 pretty easily. Let’s make an assumption to ground our discussion.

Let’s assume the Catalina version of the menu does a good job of achieving its functional responsibilities.

This way, we can comment on the design’s iteration over more existential questions (😅).

So, with that, let's take a look! 🚀

Because people only need to change their wireless connection settings when something is wrong or they’re away from their usual networks, we can safely say that this menu is used fairly infrequently. (Hopefully you don’t have too many connection issues. 😬)

Its occasional use gives it the status of a *daemon* app (👹?), which means it sits quietly in the background doing its thing with minimal interaction required.

Daemon apps need to be clear and simple as infrequent use means people don’t remember what they did last time.

The Wi-Fi icon lives permanently in macOS’s menu bar by default. Without opening the menu, I can see at a glance what my MacBook’s connection status is.

Apart from its visual appearance, which I’ll touch on soon, there’s no change from Catalina.

![Mac's Wi-Fi icon, highlighted in the menu bar.](/assets/articles/big-sur-wifi-menu/2.jpeg)

The icon is a *rich, visual, modeless feedback* (RVMF) technique. [It’s dynamic](https://support.apple.com/en-au/guide/mac-help/mchlcedc581e/mac) which makes it rich in feedback. Icons are visual, obvs. 😉 And it’s modeless as users don’t need to switch away from their current task to understand their connection status.

RVMF evolved from the idea that well-behaving digital products should volunteer information without interrupting the user’s flow.

By having the network status persistently shown but neatly tucked away, users can choose when they act on information. 🙋🏽‍♀️

A con of RVMF is that it often depends on *idiomatic* (meaning learned) contextual numbers, symbols, icons, and colour coding. While you and I are experts (I’m sure 😁), part of Apple’s brand promise is that of simplicity and ease of use for newbies.

Although we’ve had an opportunity to learn what the icon and its variants mean, there may be some people who haven’t. This is where a tooltip, presented when the cursor hovers, would be useful. Tooltips are a great way to teach rich, visual, modeless feedback.

![A tooltip, which appears when hovering over the Wi-Fi icon, reads, "Wi-Fi: The Matrix (Strong Signal)."](/assets/articles/big-sur-wifi-menu/3.jpeg)

It’s surprising that the menu bar icons don’t already offer tooltips, considering other apps, like Notes, generously show helpful tooltips for toolbar buttons.

Working in a design system team, I know how important it is that design elements fit within a cohesive system.

Ideally, UI elements should look and work the same way to make learning and using macOS as easy as possible. The mismatching tooltip behaviour between toolbar buttons and menu bar icons highlights the need for a more cohesive approach to learnability.

![A tooltip which appears when hovering over a button in the Notes app's toolbar, which reads, "Make a checklist."](/assets/articles/big-sur-wifi-menu/4.jpeg)

Clicking the icon opens the menu. The UI here, too, could be improved as the icon doesn’t give any clues about its receptivity to being clicked—but that’s a tangent I’ll leave for later.

## Part 2: The menu

The menu itself has changed quite a bit from macOS Catalina.

![Catalina's Wi-Fi menu.](/assets/articles/big-sur-wifi-menu/5.jpeg)

It’s also worth noting what's stayed the same. Both menus are divided into sections: Wi-Fi control, available networks, and advanced preferences. From the order, it would be fair to assume that people most frequently open the menu to turn Wi-Fi on or off, as it comes first.

![Big Sur's Wi-Fi menu.](/assets/articles/big-sur-wifi-menu/6.jpeg)

Let’s look at the menu through a visual design lens. The dividing lines, along with the comparatively small section labels, and bolded title promote a *visual hierarchy*, a guide to our eyes as to what’s important and how elements are grouped together.

Smaller elements are less important than larger ones. In this case, the labels of menu controls themselves are more important to users over the helpful but secondary section labels. The icons and section labels are shown in a matching grey to reinforce their secondary nature.

![The visual hierarchy of the elements in the new menu.](/assets/articles/big-sur-wifi-menu/7.jpeg)

Other changes to the visual design help reinforce Apple’s brand of simple-but-powerful. Menu elements have been given space to breathe with the addition of negative space in the margins of the menu and in padding between menu items, making the UI feel more relaxed.

![The negative space in the new menu.](/assets/articles/big-sur-wifi-menu/8.jpeg)

The menu’s rounded corners match the new aesthetic across both software and hardware for all of Apple’s new OSes and devices. Even the icons have been adjusted to have a softer, simplified look.

Both menus make excellent continued use of rich, visual, modeless feedback. Without having to open a dialog or any additional menus, the Wi-Fi menu offers information about network security and signal strength. It even shows my iPhone’s signal strength and battery charge! 👌🏻

![Indicators in the new menu give a lot of feedback without taking up a lot of space.](/assets/articles/big-sur-wifi-menu/9.jpeg)

## Part 3: Skeuomorphism

The switch is an example of *skeuomorphic* design, which means it’s based on a real-world representation. In this case, a digital switch works in the exact same way as a real-life, physical switch in that sliding the knob from one side to the other toggles something on or off.

![The toggle switch to turn Wi-Fi on and off looks like a real-life toggle switch.](/assets/articles/big-sur-wifi-menu/10.jpeg)

Because people use switches _a lot_ IRL, it’s not a huge ask for macOS users to understand how digital switches work. However, thereʼs a threat to this understanding: *flat design*. Flat design is a style of UI design which doesn’t include three-dimensional cues, like shadows.

Although we don’t want our interfaces to look like a sculpture garden (unless your brand is all about the building blocks of language and you’re Duolingo; they love it 😆), some indication of depth creates an *affordance*, or a clue about how something should be used.

![Duolingo.](/assets/articles/big-sur-wifi-menu/11.jpeg)

Notice that with the real-life Magic Keyboard switch, the knob is raised slightly from the surface, and we can clearly see that it sits in a track, because of the shadows cast by its components. We intuitively know that knobs can slide along tracks.

![Apple's Magic Keyboard has a (tiny) on-off toggle switch which looks like the ones used in macOS's UI.](/assets/articles/big-sur-wifi-menu/12.jpeg)

Although Apple’s digital switch is now largely flat, it retains some (very) subtle shadows.

The whole point of a skeuomorphic design is to enable us to leverage our users’ knowledge of the real world. Within reason. 😬

All-out skeuomorphic attempts, like early versions of the Calendar app which appeared as a literal wall calendar, are easy for newbies to understand. But, they become a burden when users learn the UI because they ignore the benefits of a digital platform. 🙈

A digital calendar that doesn’t scroll between months, because its real-life counterpart can’t, is kinda missing the point. Thankfully, the macOS Calendar has always allowed scrolling.

![The month view of the Calendar app.](/assets/articles/big-sur-wifi-menu/13.jpeg)

*Metaphoric* design is now overlooked in favour of idiomatic design because it caters to the majority of users: *perpetual intermediates*.

An example of an actual metaphor is the desktop/files/folders 🗂 UI still around today.

New users don’t want to be new. They just want to learn how to get good enough. Most users will stay intermediates, although a few will become experts. Some experts may stop using your app for a while, but then when they come back... yep, they’ll be intermediates again. ☯️

Designing for intermediates is where we should be putting most of our effort. That’s why subtle visual affordances as part of small sprinklings of skeuomorphic design strike the right balance between real-world recognition and digital appropriateness.

## Part 4: Interaction design

The most benefit Apple gains from using a switch here, as far as I can tell, is that it begins to unite the interaction models of its two most popular product categories. iPhone users are now used to seeing on/off commands being represented as switches.

![The toggle switch is being used more on iOS.](/assets/articles/big-sur-wifi-menu/14.jpeg)

It seems to be part of Apple’s strategy to bring together the traditional touch-only UIs of the iPhone and iPad with the trackpad-only MacBook, especially since the introduction of the [iPadOS’s cursor](https://developer.apple.com/videos/play/wwdc2020/10640/).

Because the MacBook isn’t (yet) touch-enabled, this design choice does present an issue: it makes toggling Wi-Fi on or off harder. Why? Because the interactive area of the control has changed size and shifted position.

In the old menu, you could click anywhere on the “Turn Wi-Fi On/Off” command menu item. It extended underneath the space occupied by the menu’s icon. This meant you could click the icon and then move the cursor straight down to the menu item and click for a second time.

Because this is a largely up-and-down movement, it doesn’t require much dexterity from your hand or finger on a mouse or trackpad. We can use *course motor movements* from our arms or hands to reach and activate the toggle easily.

![Toggling the Wi-Fi on or off in the old menu.](/assets/articles/big-sur-wifi-menu/15.jpeg)

he new menu’s switch can only be toggled by clicking the switch itself. The interactive area has shrunk by so much that we now need to use *fine motor movements* to move the cursor sideways, as well as down from the icon, to find the target.

![Toggling the Wi-Fi on or off in the new menu.](/assets/articles/big-sur-wifi-menu/16.jpeg)

This is much harder and takes longer than if we could just click the switch’s label. Clicking a control’s label to activate it is actually already a solidified pattern on the web because it is widely accepted as a usability benefit.

It’s also puzzling we can’t just click the label, because if you click and hold your cursor on the Wi-Fi icon, and then drag your mouse to the switch’s label, the switch and its label are highlighted! When you let go, the switch toggles and the menu disappears.

![](/assets/articles/big-sur-wifi-menu/video_1.gif)

Both the _click-and-click_ and _click-and-drag_ interactions for the menu bar were working harmoniously for many versions of macOS. It’s an admirable way of neatly supporting a divided user base in which there is a split preference. Clicking the label should toggle the switch.

Also, a switch is different from a menu command item in that the switch remains visible when you toggle it. Compare this behaviour with the previous one, in which clicking the command menu item issued the command to toggle Wi-Fi on or off and then dismissed the menu.

![](/assets/articles/big-sur-wifi-menu/video_2.gif)

Currently, the switchʼs label isnʼt interactive, but I have to click it before I realise that. 😞 The lacking clues about interactivity seem to be a problem on most desktop environments and are in stark contrast to how the web works.

Most web UIs use hover, focus, and press states to indicate *pliancy*. Pliancy shows an element’s readiness to accept interaction. Obviously, providing visual affordances like shadows or handles hint at pliancy, but dynamic affordances to indicate pliancy is important, too.

Dynamic pliancy is achieved using a couple of techniques. The first is to visually change an element when a cursor or finger interacts with it.

GitHub’s buttons darken and raise up slightly when hovered over.

![GitHub's buttons.](/assets/articles/big-sur-wifi-menu/17.jpeg)

The second is to use *cursor hinting*, which is to change the appearance of the cursor to hint at what will happen when the user clicks.

macOS’s cursor changes to a resize handle if it’s hovered over the edge of a resizable window.

![An example of cursor hinting in macOS.](/assets/articles/big-sur-wifi-menu/18.jpeg)

When the web was in its infancy, cursor hinting was used to indicate when the user’s cursor hovered over a link. These days, most interactive elements on the web indicate pliancy using cursor hinting and dynamic changes in visual affordances.

Interactive elements which don’t respond to the cursor _feel_ broken ⚡️, like a button that refuses to change its appearance to acknowledge a hover or a press. Likewise, it’s hard to tell something isn't interactive when the usual dynamic pliancy cues are lacking everywhere.

Looking at how these patterns are replicated across macOS it becomes clear that a lack of pliancy is a problem for many parts of the system and not just this menu, which means any change would need to be considered holistically.

But, it’s my opinion that the cursor should hint at this control’s pliancy by changing to a pointed hand as it does on the web. The switch could even suggest it is about to be toggled on hover, and show a darkened state on the press or touch event.

![My opinion is that macOS should adopt cursor hinting for controls like toggle switches, too.](/assets/articles/big-sur-wifi-menu/19.jpeg)

Letʼs talk about why designing for cancellable interactions is important, and how the menuʼs switch breaks the rules.

What do we mean by *cancellable interactions*? Well, have you ever filled out a form, for example, and realised that youʼve made a typo _as youʼre pressing down_ on the Do The Important Thing button?

Did you have a brief moment of panic 🙀 and then give in? Or did you work out how to change your mind?

Most UIs allow users to cancel a button press. During a click or touch, you can slide the cursor or your finger away from the control to cancel the action.

![](/assets/articles/big-sur-wifi-menu/video_3.gif)

A well-designed button uses a change in its visual state to communicate that itʼs currently being pressed. This helps us understand it will activate when the mouse button or touch is released. Pressed means “about to activate”.

A button from which weʼve shifted our cursor or finger visually pops back up (if itʼs not flat) or otherwise changes its visual state back to its original presentation. Unpressed means “you have to press me first”. Cancelled!

![](/assets/articles/big-sur-wifi-menu/video_4.gif)

Unfortunately, the macOS switch violates this principle in that if I click and hold the switch and then drag my cursor left and right, it slides the knob and triggers the toggle even if the cursor is no longer positioned near the switch.

![](/assets/articles/big-sur-wifi-menu/video_5.gif)

A switchʼs state is obviously easily reversible. But it is worth acknowledging that macOSʼs switches currently go against the principle of cancellable interactions.

Good designers always think of systemic effects. What if this switch controlled something else?

Real-life consequences of accidentally flipping a switch arenʼt as reversible.

What if this switch unmuted my computerʼs sound in a quiet lecture hall? Turned off Do Not Disturb during an important presentation? Unblocked messages from a toxic someone?

We should always have the option of changing our minds. Good UIs donʼt punish us for being human.

macOSʼs switches should allow us to change our mind and cancel the toggle by sliding the cursor away from the control.

Let’s talk about how the Wi-Fi menu has been de-cluttered since its previous incarnation.

The next menu section is dedicated to showing which network we’re connected to and which networks are options for connection. The Wi-Fi menu from macOS Catalina overwhelmingly showed all of the available options, even if I was already connected to my preferred network.

![All the available networks shown in a long list.](/assets/articles/big-sur-wifi-menu/20.jpeg)

Big Sur’s menu is designed to *progressively disclose* complexity by separating out newly discovered networks from the user’s preferred networks and placing them inside a collapsable section. This way, I only have to scan the list of available networks when I’m away from home.

![](/assets/articles/big-sur-wifi-menu/video_6.gif)

The eagerness of the menu to pop open is evident from the overshoot and following bounce of the expansion animation. This gives the impression that the UI is meant to feel energetic and responsive. There is no motion when collapsing the section, though, which seems weird. 🤔

The use of the outlined expansion icon here is visually inconsistent with other uses of collapsable sections throughout macOS and gave me pause. Using a regular sideways arrow here matches the other collapsible controls in the OS but clashes with its use to indicate sub-menus.

![A macOS disclosure icon.](/assets/articles/big-sur-wifi-menu/21.jpeg)

I think the best solution here would have been to replace the regular collapsable control throughout the OS with the circular version to make it distinctive.

Managing coherence is a difficult job, but users get frustrated when they have to relearn slightly different concepts.

Network selection is also necessarily modelled on a radio group as only one network can be connected at a time. The old design uses a checkmark to show which network is connected but didn’t hint at its mutual exclusivity.

The upside to the new presentation of this section is that the round toggle icons resemble radio controls. They also closely match the idiom in use in iOS’s control centre, further strengthening the coherence between the two operating systems.

![Toggle icons are used to show whether a network is connected.](/assets/articles/big-sur-wifi-menu/22.jpeg)



During lockdown in 2020, I re-read Alan Cooper’s excellent interaction design book, About Face, and applied what I learned to a case study which examines how the Wi-Fi menu was updated for macOS Big Sur.

I’m Ryan, a product designer obsessed with customer success

Join my mailing list

Latest articles