This week’s RTO kicks off with some advice for approaching your work to ensure you do the best you can. From there, a look at Amazon from an outside user and the usability problems that plague their system. Next we share a resource for quick CSS snippets with explanations. Our next to last trip is to CSS-Tricks to see if front-end development is being treated like a problem and then finally we wrap up on our look at microstrategy with microcopy.

Followup Resources

  1. The 6 rules to own Design
    1. Jordan Peterson’s book 12 Rules for Life: An Antidote to Chaos
  2. What If Amazon.com Actually…Is A Horrible Website?
  3. 30 Seconds of CSS
  4. Front-end development is not a problem to be solved
  5. The Bastard Child of UX: Microcopy

Transcript

Why did the database administrator leave his wife? She had one-to-many relationships.

This is Real-Time Overview for Wednesday, November 28th, 2018. In today’s episode, RTO turns the big four-oh, as we hit the 40th week of web news on the podcast. Speaking of episodes, Monday was episode 24 of The Drunken UX Podcast. If you haven’t listened to it yet, you can queue it up next, or save it for later in your app of choice. Build Process guest Sean Marcia returned to join Aaron and I in a discussion of the Ruby for Good program and their project DiaperBase, along with talking about how you manage a volunteer open source project. There’s a ton of great advice for anyone looking to start a project or contribute to an existing one, so be sure to sit down and give it a listen. For today though, I present the following choice pieces of web development content for your consideration.

Let’s start off really running this week by checking out an article by Rick Veronese called The 6 Rules to Own Design that’s been published at UX Collective.

Notwithstanding the fact that Rick is also a Gentleman of the Beard, this article can serve as a gut punch to anyone questioning how to do their best work, and how to build confidence in the work you’re doing. And don’t be tricked by the title. While he talks about designers in a general since here, the suggestions he makes are great points for just about anyone in any field.

Taking inspiration from Jordan Peterson’s book 12 Rules for Life: An Antidote to Chaos, Rick builds, block by block, a lesson for how to build yourself up in your field.

His lesson includes exercises for you to help you focus on reinforcing your competence, self-care, networking, and more. He also does it in a great way, giving you questions to ask yourself and ideas for action, along with some other helpful collateral like videos and more reading to reinforce each step of the message.

It all builds to his parting statement, that “you need to work on yourself before you can produce your best work.” Whether you’re new to the industry, or a seasoned veteran, it can be easy to let yourself get bogged down in the business and politics of our industry, not to mention that little voice in the back of our head that constantly points out how our work isn’t good enough.

All of that can be beaten though, and his article is a great starting point I recommend everyone go check out. It’s over at UX Collective, and of course we’ll it linked in the shownotes. And if you want to check out Jordan Peterson’s book as well, there will be a link to it along with the one to the article.

Okay, hear me out on this next one. It’s from BuzzFeed News, but don’t hold that against it or anything. The piece, by Katie Notopoulos, considers the question of What if Amazon.com Actually… Is a Horrible Website.

I love the bold-faced candor Katie shows in this article. It’s something we’ve all thought about at one point or another, but deep down, I think we’re all a bit afraid to say out loud. After all, Amazon is successful. And we’ve all heard and shared stories about how they test incredibly small changes to design in order to affect conversions.

And yet.

Really, it’s extremely healthy to question the elephants in the room when it comes to success. At Amazon’s scale, it becomes difficult to fully moderate everything that goes in and out of the system. Without going too far down the rabbit hole, everything from photos to descriptions to reviews and much more is all up for gamesmanship. While we want to believe every little thing is calculated and considered, there’s a whole lot that definitely isn’t.

Katie’s story starts off quite simply, calling out a strange combination of Amazon features on an item – a bassoon strap – that just didn’t make sense in context. And things go on from there. We’ve all seen it at one point or another, a weird subscribe-and-save, a senseless protection plan, or bizarre Dash buttons.

All of this is to raise the question, how could we build a better solution? Katie is a writer, not a web developer, so this article is more about a user observation of a problem in the wild, and not necessarily the prescription of a solution. But, that is something that we can think about. This is hardly all inclusive of the frustrating user experience people have on Amazon, and as their scale and inclusiveness grows, it layers on challenges for how to present… well… everything to a user.

Spend a few minutes today on a thought exercise for this. Maybe sketch an idea or two down, or research a pattern that’s in use. Ask yourself the question, how would you make Amazon better, and shoot us a message on Twitter or Facebook to let us know.

30 Seconds of CSS is a simple curated list of CSS snippets from the team behind 30 Second projects. They put together tools that give you bite-sized pieces of information you can review and learn quickly to help you add things to your toolbox.

In this case, that’s CSS. The page, which is hosted at github.io, is divided up into various sections like Layout, Visual, and Animation. Each section has individual examples listed out, complete with code, example, an explanation of what’s going on, and other useful information about the technique.

It’s the explanation that’s really the money part of this tool, as they go into depth explaining just what everything’s doing. This can be incredibly useful in helping you understand more complex pieces of CSS involving concepts like keyframes, for instance.

There’s not much more to it than that, really. You get a few dozen CSS examples, with explanations, that you can learn in about 30 seconds each. You’ll probably know some of them, but I’ll guarantee you don’t know all of them.

Stop by their GitHub page, which will be linked in our shownotes, and give it a scan. If you’re feeling squirrely, maybe even submit an example of your own for inclusion. Let us know what you found most helpful or surprising from their list.

Robin Rendle at CSS Tricks takes our fourth spot this week with his article that makes the case that Front-End Development is Not a Problem to be Solved.

This post is an interesting take on the way we approach HTML and CSS, and how over time we continue to layer on tools and processes with the goal of reducing the amount of it we have to write.

In fact, he frames this very argument by pointing to Bootstrap and its ilk and their presence on resumes as a “skill.” The problem is, they aren’t skills, they’re tools. Front-end development is a skill. Likewise, jQuery is a tool, JavaScript is the skill. If you can only work with Bootstrap and jQuery, then you’re gonna be in for a bad time when it comes to problem solving for challenges in front-end development.

I’ve made this argument a different way in the past, but to the same point – that you can’t code by muscle memory, by blindly issuing commands you don’t understand to have it spit out code you can’t write. Aaron made the joke in the latest episode of The Drunken UX Podcast of the “cargo cult,” which is the same idea.

Tools are incredibly important and useful to make really complex processes easier. But we have to understand the foundational concepts and practices too. The goal in using the tools cannot be to avoid dealing with the output. And likewise, this is where the cargo cult metaphor comes in. If you don’t have that understanding, and you just run commands on the tools, you’re setting yourself up for failure by simply trusting what the tool is doing without truly understanding how it works and why.

Where do you side on this? Is the future of front-end development one where we avoid actually writing plain HTML and CSS manually? Or do you think it’s a skill we need to teach and foster? Run by CSS Tricks to read Robin’s full article.

In recent weeks, we’ve covered articles that tackle the large topic of micro UX. From micro-experiences to micro-interactions, we’ve made the argument that the small things have big impacts. We wrap up this week with a trip to +SixZero to tackle the third prong of the micro-trinity: Microcopy.

Microcopy is an important component of the fuel that drives good UX. It can be a part of micro-interactions and micro-experiences. But it can be more than that as well. Good microcopy ensures that users are motivated, engaged, and reinforced throughout their journey as a user, regardless of the conversion you’re pursuing on your site.

Microcopy works better than animation, color, or sound as an interaction feedback mechanism because it can deliver a complete message to the user. In this way, words are powerful. It can help push a user to make a decision by providing bite-sized chunks of information relevant to what they’re thinking about. Or it can give them advice on how to use a tool.

In the end, what we’re talking about is doing as much as possible, by writing as little as we can. It’s a lesson, ultimately, in communication efficiency.

Their article includes a good list of assorted examples to break down all the different ways microcopy can affect the usability of a site. The implementations are diverse and cover a lot of different purpose, which help showcase just how powerful the idea of microcopy is.

Ultimately, I think of it a lot like salt. Microcopy is meant to be sprinkled into a layout to give it flavor. And while we’ve created a fancy name for it, we’ve been writing microcopy not just for years, but decades. It takes root in print and television advertising from the past, and has reached forward into web development. The name isn’t the important part, it’s the principle.

Like the CSS Tricks article, I agree with +SixZero that I wouldn’t suggest you try to brand yourself as the next microcopy expert. It’s just a tool. Copywriting, content marketing, and user experience are the skills you want to focus on. All of these different micro-concepts we’ve brought up recently are techniques you apply to improve overall success.

Thanks for listening to Real-Time Overview today and we hope you found these selections helpful for whatever it is that you are working on this week. For The Drunken UX Podcast, I am Michael Fienen. If you want to get the links to any of the articles from today’s episode, be sure to swing by our website at drunkenux.com, we’ll have all of them linked in the shownotes there.

The Drunken UX Podcast is now available on Stitcher and TuneIn Radio for anyone who prefers to listen to us over there. Just open the app, click on search, and type in “Drunken UX,” we’ll be the first result that pops up. Be sure to add us to your library.

For now, the last thing I can think of to leave you with is to keep your personas close, and your users closer.