Group Design Fun: Email Settings

Avatar of Chris Coyier
Chris Coyier on

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.