Grow your CSS skills. Land your dream job.

Group Design Fun: Email Settings

Published by Chris Coyier

Let's have a little fun tackling a design problem! We've done this once before when tackled solutions for a List with Functions. Let's do it again and tackle an Email Settings area.

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.

There are lots of ways we could design around this. For instance, perhaps we start extremely simple, just a header and list of checkboxes.

That might be perfectly fine. But is it absolutely perfectly clear? Does a checked checkbox absolutely mean "do email me" and an unchecked checkbox "do not email me"? Could we add clarity with color and specific text?

Is that more clear or less clear? I go back and forth.

Maybe we could get more complex and use labeled radio buttons to be very specific about Email being on or off.

Let's experiment together (and win stuff)

So those are the details and some basic thinking to get us started. If you have some ideas for design patterns around this simple concept, build them out on CodePen and post a link in the comments. I'll pick three of the most interesting and successful ideas and make sure they have the highest level access for six months to this adventure.

For the record, the idea for this came from CodePen itself where we're tinkering around with how to display these settings. It's likely to inform that choice.

Comments

  1. EstherH

    I think the first example you gave (basic checkboxes) is the most clear, is found most often on sites, and leaves users fairly certain of what they have chosen.
    The second example is just plain confusing. Do not email me – yes I want that, but it’s not checked, hmm…
    And the third – clear, but overkill for a list of three settings. I can see the radio buttons working nicely for a long list where you want to easily see which options are in the email me column and which are in the no-email column.

    just my two cents

  2. I always get frustrated when I see settings like your second example with “Email me…” and “Do not email me…” as part of the labels. Check boxes often mean “I agree to this phrase”, which completely breaks down if the label text changes upon clicking.

    If my goal is to NOT receive an email “when something different happens”, I would be tempted to check the box next to the phrase that says “Do not email me when something different happens”, but that is exactly opposite of what the form is trying to convey.

    This problem can often be seen on iOS-style toggle switches where “On” and “Off” are written on the buttons themselves. I can never tell if it means it’s on when it says “On”, or if I should press the “On” button to turn it on.

    Summary: The control is the checkbox itself. Leave the label outside of the control.

  3. The second one is very confusing.

  4. Laurie

    I agree with EstherH; the second option conflates the option (send me email when X happens) with the option state (yes or no). Slide toggles á la iOS work well for making state more explicit without conflating, although they may be less usable with a pointer device than a touch screen.

  5. Michael

    The first one. For the reasons given by Esther above. It’s the most clear and leaves the user knowing exactly what they’ve done.

  6. Geoff

    How about toggles? http://codepen.io/geoffthibeau/pen/1/1

    Could use some polish. Threw together in a few minutes.

    • I was thinking toggles as well; something similar to the iOS ‘on/off’ switch seems like it would be extremely clear and familiar to a wide range of users.

    • Geoff

      Apparently when I created an account, it didn’t apply a rewrite rule.

      Sorry about that. Here’s the new link: http://codepen.io/geoffthibeau/pen/1/1

    • See that’s how I would approach it as well – the only concerns I would have are clarity/usability. I would add a clear ‘On’ and ‘Off’ text to make sure that color-blind users or people quickly scanning the toggle would have an easier time of understanding what the toggle meant.

      Otherwise I think it’s a perfectly usable, familiar system.

  7. Codepen

    That’s the only system I would ever use for something like this, unless someone comes up with something incredible.

  8. I think that version 1 is the most clear and functional. Toggles are pretty great, but still think that regular old checkboxes are the way to go. In fact, I think this problem is mostly because of language.

  9. One should never use color for cases like this. The color blind may not be able to see the distinction you’re aiming for. Colors also have different meanings in different cultures. Avoid color for imparting meaning.
    My suggestion would be to go with the first option, but maybe make the text a little more explicit by making it read “Yes, I want to receive email when someone does something” and so on. Maybe with a line of help-text above reading “Check the options for which you want to receive email”.

  10. Lukas

    This is more or less the same as the your second method, but with invisible checkboxes. I just don’t like how they look different on each OS.

    http://codepen.io/Kukkimonsuta/full/1/3

    • Gabe Casalett

      I like Lukas’ solution, it looks good and it’s pretty clear to understand. However, it’s been my recent experience (I’ve been working at a nonprofit) that people don’t read directions (even when they’re h2′s).

    • I like this one too.

  11. Rozebottle

    When it was before the Millennium
    I would do something like this:

    http://codepen.io/pen/8067/1

  12. I agree that the second option is confusing, and the third probably overkill. The first option would be improved by different copy.

    I’ve just changed the wording, and added a placeholder for a “NO EFFING EMAILS” button for someone who feels like they are being spammed.

    http://codepen.io/plusplus/pen/1/3

    I guess I like the labels with uppercase at the beginning, and a heading that someone can find faster on the page (One word), and using para after to explain the labels.

    The no e-mails link could be replaced by a magic checkbox at the top of the list which would disable and hide all the other options:

    http://codepen.io/plusplus/pen/1/4

    Oh, and I used an ID for styling. Shoot me. (I wouldn’t do it elsewhere)

  13. MarkV

    Just a quick point on the second option. I’m red/green colour blind and the red text doesn’t highlight the importance as much as it may to someone who is not. Just a thought :)

    • MarkV

      And I just went back and had another look and didn’t see the green text at all… I thought it was black LOL!!

  14. I wish there was a link to the entries on http://css-tricks.com/group-design-project-list-with-functions/

  15. CathyMacars

    I believe that the first option it the best, and good enough. But if you MUST go fancy, I think I’d do something like this:

    http://codepen.io/CathyMacars/pen/2/20

    Cheers :D

  16. Toggle switches, but with an added text color change.

    http://codepen.io/ronaldroe/pen/1/3

  17. The first. It’s all you need. Most clear, easiest to use.

    Just match your UI, for example:

    http://codepen.io/coreyworrell/pen/email-settings/1

  18. Here’s mine: Design Challenge Entry

    I wanted to make it clean, simple, and intuitive. A much harder task then it sounds!

    The image used was hacked together in five minutes. Not for production purposes. But it gets the idea across.

    Thanks for the practice, Chris!

  19. Lots of icon fonts for my take on this

    http://codepen.io/joshrives/pen/1/10

    • Qbit

      Hi, the icon fonts don’t work for me (FF 13).

      I guess this has something to do with the way you refer to the fonts (http://…) and the Same Origin Policy which is implemented differently. Unluckily this seems to be the only possibility in CodePen.

  20. Dan

    How about a question/answer structure? Something like this: http://codepen.io/dragn/pen/2/1
    Clear enough. Texts may vary, e.g. it could be “Should we send you an email when something happens? Yes/No”. Also there could be a header “Send an email when…” and questions like “this thing happend? Yes/No”, “that thing happend? Yes/No”, etc.

  21. I went with a simple approach with Iconography to really drive home when email rule is on and off.
    Let me know what you think!

    http://codepen.io/ForTheJim/pen/1/18

  22. John

    Obligatory one:

    http://codepen.io/pen/8147/6

    Super practical.

    • John

      Gah wrong version

      http://codepen.io/pen/8147/6

    • Pretty cool, but it tooks me a few seconds to know what I had to do on the non-commented version. :D

    • Qbit

      For me it was clear what to do and I like this fany but non-practically approach. ;)

      Some notes: You can’t undo your selection and the draggables should somehow snap to the list after dropping/selecting them.

    • John

      Updated it slightly for the sake of playing around with codepen.

      So far I really like it, love the shortcut key style. Definitely see myself using this regularly. (codepen, not the drag thing).. ;)

    • John

      Damn 3G internet… Sorry for double post.

      Wish you could delete/edit your comment within say 10mins of posting. :S

  23. veiovis

    I changed the Checkboxen. I think its to much for such a small task. ^^

    http://codepen.io/Veiovis/pen/emailsettings/1

  24. whyl_

    I agree ith the first option beeing the best approach, but I liked the third, so I went with it, here’s my take on it.
    It’s pretty close to the original one, I tried to make it easier to use by not beeing forced to sharshoot the radio buttons, and adding icons/colors for claritys sake.

  25. That’s my solution
    I like verbose things, so it looks like natural phrase

    I hope you like this :)

  26. carla franca

    Here is my code.
    I’m using opacity to highlight the signup option.
    but it could change the color between red/green or icons…

    code

    http://codepen.io/carlafranca/pen/4/

    full

    http://codepen.io/carlafranca/full/4/1

    thanks

  27. Scott

    I think basic tick boxes are the better solution. However, this problem is ignoring the most important part, which is the *wording* of the options themselves.

    Whatever your solution you need to have clear, non-verbose options. Instead of “when some third thing transpires”, could you just use “third thing”?

    Below this comment form for example is the option: “Notify me of follow-up comments by email.” This could be replaced by “Email me follow-up comments” or “Email me replies” perhaps.

  28. Nathan

    Here is my idea. Just some simple slider switches.

    http://codepen.io/anon/full/8293/1

  29. I believe it’s of vital importance to be super sure that a user intends to deregister for an email list, so my email settings include some simple captcha ;)
    It’s a jSFiddle since the docs for how to attach external resources on CodePen don’t seem to be complete yet and I haven’t had a chance to look around. If someone knows how to do this I would be happy to move it over.

  30. Antonio Lettieri

    Here’s my take on it. Doesn’t look great from a design point of view, just thought of it more of a proof of concept and fun little experiment.

    http://codepen.io/alettieri/pen/4/19

    Thanks for putting up these challenges @Chris. It’s always interesting to see what the community comes up with.

  31. I feel a lot of these efforts are overkill. Especially all these iOS like sliders…people using a desktop computer expect check boxes. If you start swapping desktop and mobile UI elements around, it’s going to create confusion. There’s very good reasons we don’t use iOS sliders on desktops.

    Sure, if you’re thinking about mobile devices, then perhaps you would use them, but for desktop use I think they’re a big no-no.

    I also don’t agree with having a Captcha, sweet lord if every time I change minor settings in my email I have to do a Captcha, I’m literally going to be bald by tomorrow.

    I personally think we have to adopt an Ockhams Razor approach here, the simplest solution is going to be the best. Quit with the colours and the fancyness, lets keep it basic.

    So I took the second idea by Chris, but removed the colours, going with opacity instead. Opacity is possibly more noticeable for the colour blind, as there is a noticeable change in contrast, that isn’t necessarily there with colour. Also, it’s extremely common in UI to show that something is disabled by having it faded out.

    So for me, personally, I think this idea works best. The jQuery would need to be adjusted so each label can have different text but apart from that…I like it.

    http://codepen.io/pen/8450/1

    • carla franca

      totally agreed, I went on the same root.

      you could even make it a single option but keep the checkbox.
      adding a unique class to the input and jquery it.

      “var $unique = $(‘input.unique’);
      $unique.click(function() {
      $unique.filter(‘:checked’).not(this).removeAttr(‘checked’);
      });”

    • The negation is confusing. Wouldn’t users just want to check the “Don’t Email me” boxes?

    • I’m not sure I follow? You want to labels to say “don’t email me” when unchecked.

  32. Your right! adding a specific color for each choices are the best way for the user to understand it well.. Nice!

  33. Here is mine: http://codepen.io/karimcossutti/pen/8/8
    Had a fight with the previous versions :P

  34. Andrew Klatzke

    I decided on custom checkboxes with a few advanced options to give users a bit more control:

    http://codepen.io/aklatzke/pen/1/13

  35. Anthony Delorie

    http://codepen.io/pen/8662/1

    Enjoyed this contest, thanks Chris!

  36. Interesting point to raise and a great excuse for me to finally start using codepen.

    Here is my take on it; checkboxes with strike through labels!

    http://codepen.io/JamesMatthews/pen/strike-through-checkboxes/1

  37. Red

    http://codepen.io/pen/8792/3

    Keep it simple!
    I kinda feel if I “check it” I want a result. Not the absence of one.
    You wouldn’t have two light switches, just so one would only “turn on” and other “turn off.”
    Well that my two cents anyway. :)

    P.S. I notice you only have “TWO” options on this site.
    “Notify me of follow-up comments by email.” and
    “Notify me of new posts by email.”
    WHERE’s my third option? It’s driving me crazy! :D lol

  38. BitWise

    This is one of the instances where keeping it simple is the right thing to do.

    I haven’t met a computer user who wouldn’t understand the concept of check boxes, and if there was one, he’d certainly be even more confused by whatever funky stuff the web designer comes up instead.

    You can go crazy on site design, but parts that require user interaction should be as clean and as generic as possible. No color coding (what about color blindness, red-green actually being the most prevalent case of), no fun fonts. I don’t understand the current fad of on/off sliders either.

  39. Neil

    I was not sue if this would be better or not but if you take the “tick-box” out of the check-box and have it as a confirmation ratherthen a option it may be better.

  40. Second way is really giving practise and experience good enough for me. You know? You are not only copying and pasting. But actually first one is really simple. It is good especially if we dont have too much time.

  41. I really like the second way. Nice done!

  42. Permalink to comment#

    Here’s my shot at it. I’m pretty new to this stuff and still learning but quite proud of my efforts:

    http://codepen.io/pen/10359/1

    Matt

    • Permalink to comment#

      Bit of an update – the checkboxes 1,2 and 3 remained clicked when selecting the ‘Changed my mind’ option.

      http://codepen.io/pen/10359/2

    • Permalink to comment#

      Sorry..a couple more changes. Added label elements for the checkbox text – a bit more user friendly.

      http://codepen.io/pen/10359/4

      I’ll leave it alone now. Promise.
      Matt

    • I know you didn’t ask for feedback, but I would like to give you a few pointers.

      Your code looks good and there isn’t a lot I would change. The only thing I noticed you could do is improve your jQuery selectors and add variables.

      You can select all of the checkboxes inside of div#controls with $("#controls input[type=checkbox]").

      This will allow you to add more checkboxes without needing to hardcode the selector each time.

      In addition, saving each jQuery object in a variable will keep jQuery from searching the document for the same element multiple times. While in your example it probably doesn’t matter, it’s necessary on a full site.

      Here’s what your Javascript looks like after my changes.
      http://codepen.io/BaylorRae/pen/9/3

  43. Miles
    Permalink to comment#

    Am I the only one who get at at these CodePen linked pages?
    Did half of these get deleted or something?
    For instance…

    http://codepen.io/BaylorRae/pen/9/3

    …takes me to….

    http://codepen.io/BaylorRae/pen/9

    • Miles
      Permalink to comment#

      Should read: “Am I the only one who CAN’T get at these…”

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".