Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
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 '13 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 '13 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 '13 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.

share|improve this answer
    
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". –  Clay Nichols Jun 22 '13 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 '13 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. –  Tyler Langan Jun 26 '13 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 '13 at 22:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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