6

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

Shut Down 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:

Cancel and Shut Down

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.

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 PreferencesKeyboardShortcuts tab and enable full keyboard access from there (or use the keyboard shortcut Ctrl-Fn-F7), then it behaves as you're describing.

  • Ah I see - I didn't even know I enabled this functionality, must've been by accident a while back. I do like Full Keyboard Access - I was just intrigued by the design choices made by Apple, and curious as to how they made sense, UX-wise. – Lucas - Better Coding Academy May 26 '17 at 1:19
1

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

  • Thank you for differentiating between focus and primary action - this really opened my eyes on a lot of concepts, and definitely puts Apple's design choices into perspective. – Lucas - Better Coding Academy May 26 '17 at 1:16
  • In that case; shouldn't the Primary action button be in focus, because it represents the Primary action? – DPS May 26 '17 at 7:15
  • @DPS - Yeah see that's the thing. A primary action button is designed in such a manner that it stands out to direct the user's attention towards it but at the same time you don't want them to accidentally click on say Shut Down or Delete All. Hence the focus is not on the primary action. You can refer to UX guidelines for buttons and you will find out that this rule (more like a best practice) is explicitly mentioned – Shreyas Tripathy May 26 '17 at 7:25
1

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.

  • 2
    I do agree that the difference between pressing Space and Enter is highly elusive. – Lucas - Better Coding Academy May 26 '17 at 1:17
  • Only one button in the image is in the active state; the Cancel button. The other is a Primary Action Button. I would also like to point out that all actions (especially those with terminal outcomes) must have a check or a reversal action. The Shut Down option is very close to the Sleep option so a click by mistake is possible – Shreyas Tripathy May 26 '17 at 6:34
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.