Grow your CSS skills. Land your dream job.

UI Pattern Ideas: Email Settings

Published by Chris Coyier

Last week I asked people to participate in some group design thinking around a specific design pattern: email settings. This was the premise:

Imagine there are three events that can happen in a web app that could trigger an email. We want to allow the user to decide whether or not they receive emails when those events happen.

I looked through all the responses and these are the ones I thought were the most interesting and effective. This is not a comprehensive list. To see all responses, look through the comment thread on the original post.

Note: I don't care about the browser compatibly of these. That's a different problem. There is always a way to get a design to work. That part should happen after the best possible solution is found.

The Styled Toggle

It's essentially the same as a checkbox (on or off), but the styling and ingrained text may make things more clear:


View Pen

This one uses a table layout:


View Pen

And iconography:


View Pen

The Don't Email Me

These take one step back and first ask the user if they want to be emailed at all. If they don't they shouldn't need to make any individual choices. At it's simplest, it's like this:


View Pen

A bit fancier:


View Pen

The more choices there are, the more it makes sense to have an option to check all / uncheck all:


View Pen

Or just having a clickable "Never" option:


View Pen

The Finish the Sentence

These are intentionally verbose, forcing a user to read and comprehend before altering.


View Pen

The Drag and Drop

This forced interaction would likely leave little doubt to the user as to what's going to happen:


View Pen

Pick Three

I said I'd pick three of what I thought the most interesting and success were, so I figured I'd pick them from different categories. Blake Pemberton, Frank Spin, and John. I'll email about the access.

Great job, everyone.

Comments

  1. Jeff
    Permalink to comment#

    I dig John’s drag-n-drop, but I would have figured the left-pointing arrow would have auto-moved all into the action box. For that matter, he could add a right-pointing arrow to remove ‘em all. In the demo, moving options into the box isn’t “sticky” enough. Seems some can land half-way in/out. when I move a green option out of the box and release when I’m way off target, it moves back into the box and turns blue. Flaw? And finally… certainly a metter of opinion, but Jay Leno “*is* funny (and Falon *is not*). ;-) Ultimately, my fave is Frank Spin’s take, although visually I like Blake’s the best. Combine those two for a winner! :-)

  2. Thomas Williams
    Permalink to comment#

    Hi Chris, great job working through some alternatives and discussing implications of design choices. IMHO the original design (which seems a little like MS Outlook’s rules) was not satisfying. I’d pick [http://codepen.io/frankspin/full/1/9], though with an intelligent default that demonstrates that “yes” adds value – otherwise the “No thanks” option might look too inviting.

  3. I think the “don’t email me” and the toggle should be combined. Having a slide toggle that will unlock email notifications with toggles for each option.

  4. Frank Spin
    Permalink to comment#

    Hi Chris,

    Thanks for this great reward. I look forward to your adventure, can’t wait.
    I want to thank everyone for the positive feedback and the discussion. I have seen many interesting things during this ‘contest’.

    Love this site!

  5. Rich O'Kelly
    Permalink to comment#

    Hi Chris,

    One of the things that I notice a lot is the usage of green for positive and red for negative in UI design. Though this is fine for most users it can be challenging for those with colour blindness (specifically: protanopia; deuteranopia; protanomaly; and deuteranomaly). The ‘Or just having a clickable “Never”‘ option relies on the fact that people can distinguish the two colours. This would unnecessarily render the notify when functionality almost impossible for a colour blind user.

    Excellent blog by the way, keep up the good work.

    Rich

  6. Ryan M
    Permalink to comment#

    Love this comparison. Have been working through a similar challenge. Thanks for putting it together.

    I prefer the option with green rows and the checkboxes at the end (…check all/uncheck). Seems the simplest, quickly understandable, least likely to be misunderstood. The one right above it (…a bit fancier) is my second choice, but to improve scan-ability, the radio buttons should be stacked rather than horizontal.

    The rest are somewhat difficult to understand, and take a few seconds to determine their meaning.

    Would be interesting to see how these perform in user testing.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".