Demonstrating focus on buttons: the Mac OS X window interface approach

Question

I was using my Mac OS Sierra system the other day and came across this dialog box:

I'm sure Mac users out there have seen this dialog box countless times before as well.

I want to bring your attention in particular to the two buttons:

As you can see, there is an outline on the "Cancel" button (which generally represents focus), yet the "Shut Down" button is blue.

Intuitively, both type of "focuses" indicate that pressing the "Enter" key will trigger them; however, if you press the Space key on your keyboard, the "Cancel" option will be selected; however, if you press Enter, the "Shut Down" option will be selected.

Are there any usability principles that support this particular interaction? FWIW I found it quite confusing. I don't understand why Apple doesn't simply use one type of focus (i.e. either the outline or the blue color), instead of enabling both to appear within the same interface, generating confusion.

Answer 1

Your screenshot is not of the standard configuration—a typical user would not see this.

The functionality in question is a power-user feature known as Full Keyboard Access, and it's disabled by default. When off (the default configuration), the user can only focus onto controls that accept text input. If you open System Preferences → Keyboard → Shortcuts tab and enable full keyboard access from there (or use the keyboard shortcut Ctrl-Fn-F7), then it behaves as you're describing.

Answer 2

Actually, only one button represents focus here. The other is a Primary Action Button

When it comes to action buttons, there many different types: Primary Action, Secondary Action, Negative Action, Plain Action, Step, etc.

Over here Shut Down is the primary action but it is also a terminal in nature, so the other option is in focus to avoid accidental clicks.

IMPORTANT NOTE: From a UX point of view, focus on buttons should not be represented by a different color.

Button focus should be represented by a colored border like it is seen in the image. While the active state or clicked state should be represented by change of accent or, in case of a positive/negaive button, by change of color, state or animation (optional).

Check out this article by UX Planet about primary and secondary action buttons and how they are represented. Hope this clarifies your doubt

Answer 3

I'm not a Mac user, but referring to your comment in post:

As you can see, there is an outline on the "Cancel" button (which generally represents focus), yet the "Shut Down" button is blue.

Intuitively, both type of "focuses" indicate that pressing the "Enter" key will trigger them;

I agree with you, and I think Apple should rethink on this interaction type.

When users choose the Shut Down option; they make an informed decision. Users hardly click on the Shut Down option by mistake - so there is no need to confuse them by putting two actions in active state.

Yet, they might have thought of Keyboard Users who may not prefer using mouse even when they want to Shut Down their system. So space is to Cancel and enter is to Proceed.

However, Many applications use space key to trigger mouse event on active element (Expected/Positive Action). Thinking of this it appears to me, a confusing behavior.

What if users assume that by hitting the space key will Shut Down the system? Eventually, it's also a matter of Mental Model.

Answer 4

I agree with you about the space key.

I would also suggest that the esc would be the cancel/negative action, and as you said enter for the confirmation/positive action.