Dave Zohrob

Here's another easy win—never make users log in to unsubscribe from email notifications. For nearly every website, there's no security risk in allowing users to unsubscribe without logging in, and there are many benefits, including goodwill from users and fewer spam reports. Unfortunately, most popular sites don't take the simplest approach to solving this problem.

Bad approach: Twitter & Facebook

Twitter sends a lot of different kinds of notifications, and their approach to notification management is complex—as evidenced by their incredibly complex footer text, which wouldn't fit into 2 tweets, let alone one.

When you get a specific kind of notification (e.g. "@dzohrob is now following you on Twitter!"), you can disable *only* that notification type with one click. However, any other action requires you to log in, which means trying to remember your password and potentially going through a reset password process.

Let's say you remember your password—now you're presented with a list of 21 different notification types, some of which have sub-options. And of course, there's no way to unsubscribe from all of them. What an awful user experience.

Facebook takes a similar approach, allowing you to opt-out of one notification type, but requiring a login for any other management. Their notification management page is slightly better than Twitter's, but there's still no way to unsubscribe from all notifications with one click.

Good approach: Yelp

Yelp does it right. Even though they send many different types of notifications, like Facebook and Twitter, their unsubscribe link lets me manage the email I receive from them, and even lets me unsubscribe from all emails with one click. Nice work.

Bad approach: Feedburner

I'm not sure what kind of problem the "unsubscribe confirmation" page actually solves. Accidental clicks on unsubscribe links? Forwarded emails? Either way, it makes users do extra work for little benefit. I hope this pattern disappears over time.

Good approach: Campaign Monitor & MailChimp

Thankfully, companies like MailChimp that specialize in email delivery offer much better subscription management links. For example, I just got an email from SXSW—clicking through results in an instant unsubscribe, with the option to resubscribe.

Doing it the right way is easy

It's easy to choose a UI pattern for your unsubscribe links.

If your service sends many different types of email, follow Yelp's lead -- let users click through and manage all notification types without logging in. If you're sending a newsletter, let them unsubscribe with one click.

Make the right choice. You'll make your users happier and reduce your spam reports.

We've been making interactive web applications for since at least 1995, when Netscape shipped JavaScript (née LiveScript). Yet I still see the same basic usability mistakes on many websites.

I've started a list of the ones I think we should all agree on—a set of UI Rules, if you will. First on the list is one of the easiest to fix.

Rule #1. Focus on the first text field.

Most important for login and signup pages, but this rule applies to almost any form on any page (with the possible exception of pages with lots of separate forms). Why not save your users a click when they're performing the primary action on a page?

Let's look at some examples. I don't mean to pick on any of these companies—my methodology here was picking randomly off the list of trending startups on AngelList.

Swiftype fails in the basic case—there's a signup form on the front page, but the text isn't focused. The same is true of their login page.

Assembly does a better job—when you click "Login" on their page, the email address box has focus. They fail in a more subtle way, however—when I click "Signup," it takes another click to set focus on the Username field. (Perhaps they expect me to click on the Facebook signup option).

This is a common pitfall—when developers get deep into modal Javascript UI, details like input can get overlooked. Just to illustrate the complexity: if you visit their signup page directly, focus is set—and focus is kept when switching to the Login tab—but it's lost again when switching to the Signup tab.

The Fix

Developers often use JavaScript to solve this problem, but there's an even easier solution—the autofocus attribute on input fields. It's supported in all modern desktop browsers, but not on mobile (potentially for usability reasons according to this explanation from Wufoo).

Let's all agree to follow this rule from now on—however you do it, focus on the first text field on the page. In almost every case, you're saving your users time, which will lead to increased engagement and conversion rates. Together, we can make the Web a less frustrating place.