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.
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
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.
The second one is very confusing.
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.
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.
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.
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.
On/Off text added: http://codepen.io/geoffthibeau/pen/1/2
Though I think someone else’s example is almost identical at this point.
The first one is definitely the best option IMO, I’d only go for the radio buttons if you were offering an alternative to email
Codepen
That’s the only system I would ever use for something like this, unless someone comes up with something incredible.
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.
Not extremely creative, but the following snippet I whipped up seems to work alright: http://codepen.io/anon/pen/8055/
This one is clear and concise – for a general audience this is the one I’d pick.
Of all the submissions I’ve seen, this is my favorite. It’s really, really easy to use, I agree that it would be clear for the general public.
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”.
Colourblind people don’t see everything in black & white (some people do but that is very rare). Most can easily tell the difference between two colours, especially when they are two strings of separate text. Furthermore, the colour in this example is only used as a hint – the meaning is in the words.
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
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.
When it was before the Millennium
I would do something like this:
http://codepen.io/pen/8067/1
I did it the “you have to read something and do something”-way:
http://codepen.io/KMB/pen/gdf/1
The second variant is preferable because its make the selection more obvious. Little gimmicks like changing colors (although I wouldn’t use red because it can be easily confused with an error in the form) or little envelopes behind the sentence with either a green checkmark or a red “x” are optional. My graphic-skills are not really an option, so I spare you the sight.
If the form is not optional (like the x’th step to complete a registration) it’s a good idea to have a preselected “select here” or ” – – -” option with error-handling on form-submit when none of the two real options are selected. This helps to let the user make an informed decision and not just continue with the default selections.
For design-related purposes it might be a good idea to restructure the phrases, so that the select is always at the front (e.g.: “[Don’t send an|Send me an] e-mail when…”.
Last but not least, the language in the options. Omitting the “me” in the negative option makes it more distinguishable from the positive option and has probably some nice psychological effect, because the user is not addressed directly. Contrary to the positive option.
Hey, I really like the idea of completing the sentences, but I wonder if it works out being too many words and harder to scan).
Also using the drop downs requires two-ish clicks for each option, rather than one for the checkboxes.
It might work better if there were three or more options.
Considering that a lot of people are very careful when it’s a matter of their e-mail setting, having them read and apply some more actions might be considered an advantage.
It’s not hard to imagine more useful options (like “message me on Github” or “spam me on Facebook”, etc.).
reading AND thinking boo! :-)
Just one hint here. I think this solution can cause many problems if you have to deal with different languages.
It’s still a nice solution if you want to force the user to read the sttings, but I’m a friend of “look and understand”.
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)
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 :)
And I just went back and had another look and didn’t see the green text at all… I thought it was black LOL!!
I wish there was a link to the entries on https://css-tricks.com/group-design-project-list-with-functions/
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
I agree that checkboxes are the most simple and “un-confusing” way to do this but no harm in dressing them up a little
A quick mock-up with thanks to Elijah Millers awesome toggles.
I guess the added bonus to this sort of thing is that it can just degrade back to classic (ugly) checkboxes if the user has JS turned off.
Wow, I realy like this solution and it’s pretty close to what I had in mind. Thanks to the pretty toggle framework (thx for sharing btw) it just works like a charm.
One hint: Change your heading/text to make it more clear, what this options actually do (send e-mails).
Toggle switches, but with an added text color change.
http://codepen.io/ronaldroe/pen/1/3
Unfortunately, doesn’t work at all on an iPad.
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
Useful: in SCSS you can do hex colours in an rgba. eg. rgba(#000, 0.3)
Oh cool, I’d never used it before. Good to know, thanks!
Updated link b/c I changed it to a custom URL: http://codepen.io/coreyworrell/pen/email-settings/1
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!
Here’s an update.
Just refined the layout a bit.
Lots of icon fonts for my take on this
http://codepen.io/joshrives/pen/1/10
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.
http://codepen.io/thomasplevy/pen/6/9
am i doing it right?
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.
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
I really like the visual appearance of your example.
Obligatory one:
http://codepen.io/pen/8147/6
Super practical.
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
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.
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).. ;)
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).. ;)
http://codepen.io/sliver37/full/2/5
Damn 3G internet… Sorry for double post.
Wish you could delete/edit your comment within say 10mins of posting. :S
Hi guys !
Here is my draft : http://codepen.io/HugoGiraudel/pen/27/4
So, I kinda crossed the table way and the toggle way by embedding the second one into the first.
As far as I can say :
– unchecked by default (meaning “Don’t email if I skip this”) to prevent misclicking the send button and receiving billions of unwanted emails
– the use of green and red colors makes sense and avoid some misunderstanding
– the table (rows / cols) helps reading the different options
– even if I didn’t do it (lack of time), it can easily be improved to fallback into regular checkboxes (checked meaning “Yes” of course) for older browsers
Whatsoever, I guess Chris’ third example (table + radio buttons) is clear and explicit, and propably can’t lead to any mistake. And giving the fact the cleanest way is always the best, I guess we won’t be able to do much better than that. ;)
PS : Thanks @Simurai for brushed metal trick.
This one, so far, is my favorite. Nice work!
I changed the Checkboxen. I think its to much for such a small task. ^^
http://codepen.io/Veiovis/pen/emailsettings/1
New version without JS: http://codepen.io/Veiovis/details/emailsettings/4
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.
That’s my solution
I like verbose things, so it looks like natural phrase
I hope you like this :)
Just a little update of the styles
Sorry, the HTML was broken. This is definitive!
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
Ups just notice that my code was changed in the codepen for some dropdown menu and within the code was added a base64.
Not a good line of code to have in your site. how come?!
You didn’t add that yourself? That would be rather strange. But it’s not dangerous, it’s just a data URI: https://css-tricks.com/data-uris/
Here is mine:
http://codepen.io/Druid-of-Luhn/full/form/1
And I like this one too.
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.
i like your third example and here is my code:
http://codepen.io/Rulicimot/full/6/8
simple enough, but still need more style….
I like this one. First one to think of a “select/deselect all” option. It’s not only that though, its a clean minimalist approach without beeing too “creative” and fancy.
I like it. It feels so clean and natural.
Here is my take on this: http://codepen.io/karimcossutti/pen/8/8
Having the whole sentence clickale is a huge pro in my opinion, also a “never” check should be a must.
I believe that siplicity wins on this.
updated for the looks
http://codepen.io/anon/full/8225/8
Not sure why but this is isn’t working
http://codepen.io/gregorypratt/pen/email_settings/2
Like this one is:
http://jsfiddle.net/gregorypratt/YCrgM/1/
You need to choose jQuery.
Here is my idea. Just some simple slider switches.
http://codepen.io/anon/full/8293/1
And here is my idea:
http://codepen.io/frankspin/full/1/9
Very nicely done.
Choosing whether or not to have any emails in the first place, before then throwing a bunch of options in their face.
This gets my vote.
This one is realy nice
I really like this one easily the clearest and the layout works well. I would just design it up a bit.
Thanks for the feedback
It is always difficult to find a good mix between design and usability. As a designer you want to make things really nice and shiny. In the process you often lose sight of the main questions: What should the user do? What do I expect from the user?
So, do not go too far with your design talents. Keep is simple and clean, and to the point.
Same as the third one, the table, but with <label> tags to expand the clickable area to the whole cell.
http://codepen.io/pen/8317/1
I think the main step is not to mix status.
I mean do not do this:
[ ] send when A
[ ] don’t send when B
instead do this:
[ ] send when A
[ ] send when B
Always have them consistent. Either true or false statement.
this way the user can identify the option quickly. Styling them and doing all the fancy
toggle switch, fancy checkboxes, etc is easy.
Sinan
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.
For those who aren’t bothering to look at my entry before criticizing, it’s a joke. Of course you wouldn’t use captcha; I’m making them solve complex math problems to deregister…
Static link http://jsfiddle.net/sinetheta/vzjrp/
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.
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
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.
Your right! adding a specific color for each choices are the best way for the user to understand it well.. Nice!
This is what i came up with:
http://codepen.io/AntonNiklasson/pen/email-settings
http://codepen.io/AntonNiklasson/pen/email-settings
Here is mine: http://codepen.io/karimcossutti/pen/8/8
Had a fight with the previous versions :P
I decided on custom checkboxes with a few advanced options to give users a bit more control:
http://codepen.io/aklatzke/pen/1/13
Thought I could post live code in that first one –
Here’s the link: http://codepen.io/aklatzke/pen/1/13
http://codepen.io/pen/8662/1
Enjoyed this contest, thanks Chris!
http://codepen.io/pen/8765/3 <- like this one much more, CSS3, no javascript.
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
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
Here’s my newest version: a mix of sliders and envelopes. No JavaScript used, but still with input.
http://codepen.io/Druid-of-Luhn/pen/form/5
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.
First attempt:
http://codepen.io/pen/9358/1
Had fun with:
pseudo :after and :before
generated content
counters
Thanks!
Let’s experiment more.
Wanted to do something with an incredible email icone animation and custom checkboxes but… days are still 24 hours (till this next winter solstice?); so, here is a second version, with a tryin’ not to be too annoyin’ anim:
http://codepen.io/pen/10037/3
(Reset the counter this time, must have deleted this rule in the process somewhere in previous version.)
@Baylor Rae’: thx for your comment down there. (Still, my new try is again in the wrong indentation sense for you…sry)
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.
Sorry the link does not seem to work not sure what I did wrong there, oh well here is the working copy.
codepen.io/magichat/pen/email-options/
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.
http://codepen.io/pen/9817/4
I think the first solution is the easiest to understand. It seems to be the industry standard when it comes to multiple, optional fields. Particularly with email settings.
The third option is also very clear and scannable. I imagine that this one would result in people spending more time reading each option and choosing the one they want.
However, in this particular scenario, the first option is a valid choice. Unless
there are 15-20 choices it should be plenty easy for someone to look through and
choose when they want to be emailed. But, because all the checkboxes are in-line
with each other, it could be easy to miss one that is unchecked.
This leads me to believe that Bart has the best solution*. It still uses the traditional checkbox format, but it changes the indention level when checked/unchecked while being Javascript free.
My only concern is that the indention is backward. In my mind, I think something
that is indented more is chosen or selected. As if it has been pulled out of the
crowd or it has “crossed the line drawn in the sand”.
As a result, I decided to make my own version of Bart’s solution. http://codepen.io/BaylorRae/pen/email-settings/2
* If someone else did this first please reply with a link to your pen.
I really like the second way. Nice done!
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
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
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#controlswith$("#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
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
Should read: “Am I the only one who CAN’T get at these…”