Disclosure Triangle of Sadness

13 January 2023

One of the advantages of not being a full-time iOS app developer is that I can spend an unreasonable amount of time on minuscule details of app design. Paying attention to the details is important and a sign that you care — but it’s rarely noticed nor rewarded by others, while shipping something that works is. In any case, sweating the details is a luxury I can afford now, which brings me to a UI design curiosity of Apple’s that sent me down a rabbit hole. Consider the empty tab page on Safari:

Safari New Tab Page on Mac with highlight around disclosure control pointing down

I’ve circled the disclosure control next to the ‘Shared With You’ section that lets you expand and show more items. Now consider the same New Tab page on iOS Safari:

Safari New Tab Page on iPhone with highlight around disclosure control pointing down

On the Mac, the control for expanding ‘Shared With You’ is a downwards-pointing chevron; it becomes upwards-pointing when you expand it. On iOS, it is downwards-pointing after you expand it, while it points to the side when the section is collapsed.

The first thought that came to mind when I noticed the different direction of the disclosure links was Gruber’s post on what disclosure controls ought to do:

In the iOS/Mac style, a right-pointing chevron (or triangle, depending on the OS) indicates the collapsed state, and a down-pointing chevron indicates the expanded state.

Based on that article, I thought I had found another instance of Apple’s own apps not following the HIG, but that isn’t the case. Based on my reading of Apple’s HIG, this control is a disclosure button on the Mac, but a disclosure link on iOS. Now I have two questions:

Why do disclosure links show state and imply action while disclosure buttons show action and imply state?
Why is it a button on the Mac and a link on iOS?

I feel like there ought to be a clear answer to the first one, but the examples in the HIG don’t elucidate the differences to me. Regarding the second question, I think its a mistake by whoever designed it. Disclosure links are all over macOS and they do exactly what this disclosure button in Safari does: expand a list of items to show more. Why should this control be different?