5

I'm creating a Windows desktop application with Material Design (using Material Design in XAML Toolkit), and I'm wondering how to indicate that a specific button is the default button (i.e. will be triggered if Enter is pressed anywhere in the form).

In normal Windows applications, the OK button is visibly highlighted to indicate this (see the top row in the following image from this question), but I can't find any mention in the Material Design guidelines (Dialogs), Buttons) of how the default button should be indicated (nor does the toolkit I'm using highlight default buttons in any way).

Enter image description here

4

There are some hints that indicate a similar behavior in Material Design that you can get as a reference for this sate.

To use some parallelism from the Windows Desktop UI, if you press the tab key you will note that the focus is moving from the current input element to the next and the visual input is the same.

The best demo I found to reproduce this in Material Design is the flat button component from Material-UI.

In their demo page, if you use the same Tab press sequence you will see that the active buttons are shown with the Material's ripple effect. This is the closest to the Windows desktop UI behavior and I believe that this is the language to be used in your case.

You can see this effect in the official Material Design documentation for buttons in the "Behavior" section with an animated example.

The static version will be similar to the following, a flat button and below a raised button:

enter image description here

enter image description here

If you want to draw more attention to that specific element you can use the animated version by default. But taking into consideration that you are creating a desktop app and the hover state is also needed I would keep it static and the animation only when hover (just like in the Material-UI demo).

  • Thanks for the tip. What about flat buttons? I have a dialog with two flat buttons (Cancel/OK). – cmeeren Feb 18 '18 at 17:38
  • The example is for flat buttons. The raised button go with the shadow. Again, you can take a look at the Material-UI demos for reference. – Valdemar Feb 18 '18 at 17:41
  • @cmeeren I've included a raised button example – Valdemar Feb 18 '18 at 17:47
5

It's not in the documentation you linked, but a relatively common solution (apart from using color) is to use solid vs ghost buttons.

enter image description here

  • What about flat buttons? (I have a dialog with two flat buttons) – cmeeren Feb 18 '18 at 17:38
  • 1
    In that case I would use color to differentiate between the two levels of importance (and make the secondary button lighter). – Yisela Feb 18 '18 at 18:18
1

It's in the guidelines as an image under "Specs":

enter image description here

You can also use the Material Component documentation for developers to see how it's implemented on other platforms and to and view a demo.

EDIT: Rereading your question, I have a better understanding of what you were going for. There isn't a specified standard for default buttons as separate from focused buttons, and I'd suggest you either:

a) use the "focused" state. For all intents and purposes, it's as if the button was focused, as it can be interacted with with a keyboard. Yes, two UI elements might be focused at a time—that isn't a problem, as both can be interacted with with the keyboard. Keep in mind that, if your form contains e.g. checkboxes or radio buttons, a default button could get in the way—sometimes enter would submit, sometimes it wouldn't...

b) don't differentiate a default button—use standard button appearance. "Enter" is generally used for submitting something, whether it be in a search field or an address bar or in a simple form. It's a common pattern that's relatively well-known. If you're not using "Enter" for submission, then I ask you to reconsider, as tying e.g. "Cancel" to the enter key would be grossly counter-intuitive.

Either way, neither of these might be immediately understood by users (you can test it and see). If you want a clear indication of what "Enter" will do, you can always add a text label like "Press enter to submit".

  • 2
    That doesn't answer the question; I'm not talking about the style when it's focused. I'm talking about the style when another control has focus, but pressing Enter will "click" a certain button (that is not focused). See the top row of the image in my question. – cmeeren Feb 18 '18 at 15:49
  • @cmeeren Added to my answer based on your comment. – Tin Man Feb 18 '18 at 22:23
0

enter image description here

See how the subscribe button changes its state on tab press from the input field. The button state is changed to 'Focused' which is depicted in Tin Man's answer.

0

Great question. I think Material Design gives less attention to this aspect than the Windows styleguide does, simply because it is more oriented towards touch-based interaction.

However, there is a designated style for primary buttons:

default-vs-primary-button

The decision which button is the primary action should correlate with which button is triggered when you press enter most of the time, so I would suggest to use the primary button design for buttons that activate when the user presses enter. At least for HTML forms with a submit button, this is already what users experience on most websites.

  • 1
    Using default as the name of the button that's not the default is a bit confusing. – user2313067 Feb 19 '18 at 5:48
  • This is certainly a possible solution, thanks. However, since most buttons in MD (at least flat buttons in dialogs) are primary (colored) by default, this solution de-emphasizes the Cancel button instead of emphasizing the Submit button. Not sure how fond I am of that. I'll try it and go with my gut feeling, I guess. – cmeeren Feb 19 '18 at 7:42

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.