What is an example of a standard (easily recognized) visual effect to indicate which button is the default ("if in doubt, click this").

In my application, the buttons are in a column (necessary b/c of other design constraints). The default button is listed first but this is for brain injured users (it's speech therapy software) so I want to make the default button really clear.

Buttons are:

  • Next Lesson in {name of Class}
  • Extra Practice in {name of Class)
  • Different Lesson

Windows has always had a visual indicator for that. I think browsers may too, but it's a very subtle visual indicator (maybe a dashed line). The user population I'm dealing with is brain-injured so things need to be really obvious.

Bonus Points: if it can be done in CSS, that's even better!

What I've considered

I'm thinking maybe some sort of glow effect or something but wanted to ask for examples of what that might look at (don't need the code right now) Bonus points for a pointer to source code.

  • if you're asking for implementation / code then this isn't the place for that. We can help with the UX side of things, but once you've decided what you're going to do you'll have to try elsewhere for the how.
    – JonW
    Jun 21, 2013 at 23:43
  • Assuming "Next Lesson in xyz" is the default button, I would consider relabeling it to "Go to Next Lesson in xyz" or "Continue to Next Learn in xyz", which guides user more explicitly using action-oriented term.
    – Jung Lee
    Jun 26, 2013 at 22:07
  • I do not get what you mean by 'default button'. Is it a help button or something similar? Else, you can just use a different color button at the top of the visible screen to serve the purpose. Think what websites do to their 'DONATE' button.
    – rk.
    Jun 27, 2013 at 3:47

1 Answer 1


This is less of a 'source code' question and more of a visual design question.

The answer is that the default button should be the most obvious/noticeable.

One way to do that is positioning:

+-------------+                                     +--------------+
|  Default    |                                     |   Secondary  |
+-------------+                                     +--------------+

Another is to style them differently. I'm a fan of having just one main button, and any secondary options being rendered as simpler text links

|  Default    |     Secondary

And you can differentiate them with color, size, type, contrast, outlines or any combination of any of the above.

But the key isn't specifically what they look like, but that they look different enough from each other.

  • Definitely, putting the default first (top left) is a good idea. I'm devided on making the secondary a non-button. That works if the secondary is truly sort of a secondary choice (almost like "See More" or "View Details") But in this case, they are all equally valid option, it's just that if they aren't sure they should pick the first. I'm a bit concerned that making it look completely different may confuse them and have them wondering "why is this different". Jun 22, 2013 at 0:58
  • 1
    I usually treat the 'non-buttons' as things that will break the path the user is going in. So cancels or deletes or what have you. If you have two buttons going in the 'same direction' I'd probably consider making them both quite similar, and then highlight one...perhaps with a thicker border or a glow like you suggest.
    – DA01
    Jun 22, 2013 at 2:18
  • The positioning convention depends on the operating system. Mac puts the Next or Submit or Default or whatever button first and cancel (or whatever) second. Windows puts 'Cancel' first and 'Next' second. Jun 26, 2013 at 21:42
  • @TylerLangan true if you're building a native app for the OS, but if it's a web app, the key is really to be consistent regardless of which side you place them.
    – DA01
    Jun 26, 2013 at 22:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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