Day 100: Tumblr’s Inactive Account Notification What it is: When your Tumblr account goes inactive, they send you an email asking if you’d like to keep your username. Why it’s good: I figured that since I started this blog with talking about Tumblr,...

Day 100: Tumblr’s Inactive Account Notification

What it is: When your Tumblr account goes inactive, they send you an email asking if you’d like to keep your username.

Why it’s good: I figured that since I started this blog with talking about Tumblr, I might as well end it that way as well (And since this account will be going inactive, it just seemed so perfect)

First, note the conversational tone. Tumblr isn’t begging to have you back (Which some companies do, and it’s just straight up weird.) It very clearly tells you that your content isn’t disappearing, you’ll just lose rights to your amazing and unique username.

The business decision behind this is so amazing that I want to shake someone’s hand for it. This is such a great way to handle the scourge of inactive accounts—allowing new users to grab names without invoking paranoia in the less active.

After you hit the “I’m still me” button, it requires you to reset your password. Not only is this good for security, it also is a pretty intelligent guess that you won’t remember your password if you haven’t signed in for months. It gives a small barrier to cross too, so it isn’t trivial to squat on a ton of usernames.

That’s the last one, folks. Thanks for coming along for the ride.

100DaysProject 100daysofgoodux
Day 99: Twitter’s Follow Cards What it is: When you mouse over a username on Twitter, it pops up a small card that gives you information on their profile and allows you to follow them. Why it’s good: Tooltips are such a fantastic way to dig deeper...

Day 99: Twitter’s Follow Cards

What it is: When you mouse over a username on Twitter, it pops up a small card that gives you information on their profile and allows you to follow them.

Why it’s good: Tooltips are such a fantastic way to dig deeper without breaking context. In this case, Twitter provides me with just enough information that I get a good understanding of who I’m moused over. There are a handful of links scattered through this tooltip that navigate me to different parts of the profile (many of which are colored the “link color” that is active on the given page.) The follow button’s different treatment indicates the different action, and the immediate state change gives me a great way to find more content and relevant users on Twitter.

100DaysProject 100daysofgoodux
Day 98: HP’s Cleaner Sheet What it is: Every so often, this HP printer (a Color Laserjet 4700) prints out a page with instructions that is used to clean the rollers. Why it’s good: The printer spat out this page without any prompting after a...

Day 98: HP’s Cleaner Sheet

What it is: Every so often, this HP printer (a Color Laserjet 4700) prints out a page with instructions that is used to clean the rollers.

Why it’s good: The printer spat out this page without any prompting after a particularly large print run that I did.

This decision is so smart to me because it gave me the tool that I needed at exactly the time I needed it. Instead of blocking future action with an alert and requiring me to clean the printer before moving forward, it simply gave me this page with a few concise directions. It didn’t railroad my task or require me to go get a special cleaning sheet from somewhere else. Instead, the designers and engineers used the limited elements available to accomplish the task.

100DaysProject 100daysofgoodux
Day 97: Dyson’s Signifiers What it is: Any part that is used to disassemble a Dyson DC50 is a bright, solid red. Why it’s good: Just as a note of clarity, occasionally people use affordance when they mean signifier. In this case, the affordance is...

Day 97: Dyson’s Signifiers

What it is: Any part that is used to disassemble a Dyson DC50 is a bright, solid red.

Why it’s good: Just as a note of clarity, occasionally people use affordance when they mean signifier. In this case, the affordance is mechanism that allows me to disassemble the vacuum, while the signifier is the bright red plastic.

The fact that this vacuum can be so thoroughly disassembled without tools is itself a feat of fantastic, user centered design. The bright red plastic mechanisms make it self evident. I bought this vacuum refurbished and it didn’t come with a manual, yet I could fully disassemble it just by looking for red pieces.

The red pieces also offer a way to navigate the user manual. If you look carefully, you’ll see small pops of red on the manual printout that I have the assembly resting on. In each case, the vacuum itself is rendered in monochrome except for the piece that you need which is bright red. There’s no ambiguity about what you should use and when.

100DaysProject 100daysofgoodux
Day 96: Kanger’s Units What it is: Kanger Nebox uses temperature instead of wattage as its user settable scale. Why it’s good: A good friend of mine replaced smoking with vaping about a year ago. In the past year, I’ve watched him sell or attempt to...

Day 96: Kanger’s Units

What it is: Kanger Nebox uses temperature instead of wattage as its user settable scale.

Why it’s good: A good friend of mine replaced smoking with vaping about a year ago. In the past year, I’ve watched him sell or attempt to sell a wide variety of people on the various systems that he uses. Observing the faces of his intended mentees, I often see a pretty familiar look: “This is complicated.”

There’s a lot to keep track of when you go from smoking to vaping. You learn a lot of new terms about electricity, like Ohms, watts, and amperage. It feels complicated, which is important when you are dealing with potentially dangerous levels of energy or batteries shorting out.

He showed me this box today, with the tremendous difference of listing temperature as its settable parameter. Most boxes require you to set wattage, which doesn’t necessarily have a direct relationship with temperature. Setting the temperature requires some extra safety features, if you just hold down the button it taps out and doesn’t let you set anything on fire, but it’s built in and doesn’t require you to know that up front.

The important aspect here is using a metric new users understand. Wattage isn’t something the average person deals with, so they have to learn what it means and what relationships it has towards heat and power draw. Temperature is much more accessible, and feels like something that you can be a part of, even if you are an amateur.

100DaysProject 100daysofgoodux
Day 95: Song Exploder’s Format What it is: In the smash hit podcast Song Exploder, host Hrishikesh Hirway rarely if ever appears on the final recording of the interview. Why it’s good: There is a brilliant editorial position that is embedded in this...

Day 95: Song Exploder’s Format

What it is: In the smash hit podcast Song Exploder, host Hrishikesh Hirway rarely if ever appears on the final recording of the interview.

Why it’s good: There is a brilliant editorial position that is embedded in this decision. As you listen to these stories, the flow of them becomes enveloping. You step into the world of the artist’s decisions, and become part of their process. It almost feels like Hrishikesh sits down and the story comes pouring out of them.

It’s clear that this isn’t the case though. At times, he leaves in the audio of himself asking a question when the context is important, or when the musician reacts to his question. In this full 15 minute episode you hear him ask one question at about 5:40. This isn’t an accident, it’s a purposeful choice in the structuring of the program.

I don’t know if there’s a precedent set for it, but the closest thing that I can think of is ghost writing a biography. Hrishikesh gets that he isn’t the focus, but that exact understanding is what makes the final work so powerful, and makes him so perfect for the role.

100DaysProject 100daysofgoodux
Day 94: UserOnboard’s Email Signup What it is: UserOnboard gives you a modal window to sign up for their mailing list at the end of a slideshow. Why it’s good: I spend more time than I’m really proud of shouting about modal windows. If you’d like to...

Day 94: UserOnboard’s Email Signup

What it is: UserOnboard gives you a modal window to sign up for their mailing list at the end of a slideshow.

Why it’s good: I spend more time than I’m really proud of shouting about modal windows. If you’d like to provoke a lot of colorful language and my immediate departure, just throw a modal in my face in the middle of what I’m doing.

This, friends, is how you ask people to sign up for your mailing list without being an ass. First, and most importantly, the modal appears upon user action. This is not something that comes up in the middle of my task, I literally have to click on something to trigger the window. Second, the modal appears after I have consumed the value from the site. Samuel could have put this in the middle of the slideshow, but he didn’t because that’s insane and narcissistic behavior. Third, the modal window tells me exactly what I can expect to happen, and indicates how and why my email will be used with clear value propositions and purpose.

If you are resorting to slapping your user in the face with an unexpected sign up form, you are wrong. I can’t think of a simpler way to put it without expletives or name calling. Don’t do it.

100DaysProject 100daysofgoodux
Day 93: Skillshare’s Auto Play What it is: When a lesson ends in Skillshare, it autoplays the next lesson. In the meantime, it tells you what you just watched, the next lesson up, and gives you robust play options. Why it’s good: If you’ve been...

Day 93: Skillshare’s Auto Play

What it is: When a lesson ends in Skillshare, it autoplays the next lesson. In the meantime, it tells you what you just watched, the next lesson up, and gives you robust play options.

Why it’s good: If you’ve been following this blog for a while, you might notice a habit of me enjoying fairly verbose interfaces. To be clear, I don’t necessarily prefer copy-heavy interfaces, but in the words of Luke W., obvious always wins.

Skillshare does a lot here to tell you the current system state, where you are in it, and what is about to happen. It doesn’t expect you to intuit what’s happening, but gives you all of the details and controls.

100DaysProject 100daysofgoodux
Day 92: Codepen’s Animations What it is: Codepen’s web editor animates states when showing the settings panel, and when changing the layout of the screens. Why it’s good: Having an interface tell you how to use it is… well, generally pretty lame. One...

Day 92: Codepen’s Animations

What it is: Codepen’s web editor animates states when showing the settings panel, and when changing the layout of the screens.

Why it’s good: Having an interface tell you how to use it is… well, generally pretty lame. One of my favorite “Not actually UX but has the same ethos” videos is Sequelitis - Megaman Classic vs. Mega Man X (Note: This video is profane, inappropriate, and frequently in very poor taste. Watch at your own risk.) One of the main points that the author makes is that Mega Man X teaches you how to play the game by letting you play it with carefully considered constraints. He has this fantastic graph of “Yeah I get it” over time:

“Yeah, I Get It” over time

Codepen uses animations to teach you the relationship between the interfaces, and the flexibility in editing your settings. The settings window pops down from the top right, seeming to originate from the large “Settings” button. The relationship between the Settings Panel and the smaller Settings cogs becomes clear after a few clicks, and you can feel the flexibility that the interface allows you (That is, you aren’t tied into a single path to get to the specific section of settings.)

Animating from a point of origin is a topic that is frequently touched on in Material Design, but it is vital in any design language. Any animation adds meaning, so we should always harness its ability to clarify our work.

100DaysProject 100daysofgoodux
Day 91: Sketch’s Verbose Guides What it is: Guides in Sketch have a constantly visible tooltip that tell you the exact pixel value it is placed on. Why it’s good: Visual design and our desire to make designs “Clean” can lead to a whole host of...

Day 91: Sketch’s Verbose Guides

What it is: Guides in Sketch have a constantly visible tooltip that tell you the exact pixel value it is placed on.

Why it’s good: Visual design and our desire to make designs “Clean” can lead to a whole host of usability problems. I remember one designer in days of yore that I argued with repeatedly because they didn’t care for breadcrumb navigation. All of the research that I found supported out how useful and helpful breadcrumbs are, so we never quite saw eye to eye.

Sketch sacrifices some visual purity for the benefit of being declarative and obvious. Pixel values that I’m adding guides to are usually important, so having the values visible instead of requiring me to guess is a safe bet.

100DaysProject 100daysofgoodux