Review: Badass: Making Users Awesome


Badass: Making Users Awesome by Kathy Sierra is from O’Reilly (2015). This book is about motivation and skills and progress and brain science. It shows you how to use motivation and skill levels and learning progress by being badass, by modeling badass, and by giving you the badass version of learning how to be badass.

If you know who Kathy Sierra is and what she’s already done as a writer and programmer, you’ll recognize what she’s talking about in this book. It’s been her topic before and she’s come back to it with a powerful teaching device – this book. Kathy’s premise is you don’t just want a great product, you want great users. You want users who find it easy to learn to be experts with your product. Even when your product is complicated and hard to learn to use at an expert level, if you approach helping users the right way, they will reach the badass level as users.

The book if full of lively graphics, funny illustrations, and simple but powerful charts.

A chart showing how an upgrade to software can move users from competent back to feeling like they suck

This chart shows exactly how I feel about every new upgrade of Dreamweaver CC. Each time I open it, I go back into the suck zone on something. Getting the labels on form fields – oh, no, I suck. Creating a new selector in the style sheet – oh, no, I suck. Using the fucking fluid layout grid – oh, no, I suck. Kathy explains how to help users avoid that oh, no, I suck sensation with upgrades and with new skills mastery in general. The people at Adobe are definitely not using all of Kathy’s suggestions to help users move to badass with updates to their products.

A chart showing the good practice is in the zone between what your good at and what you are bad at

Even something as basic as practicing a skill to get better at it has brain science examples to help you design experiences for users that let them practice the right way. There are also chapters on how to help users filter out brain spam so they can concentrate on things that matter. Here’s the table of contents:

The table of contents for Badass: Making Users Awesome

Just looking at the table of contents tells you a lot about how this book works, and how Kathy Sierra uses her deep understanding of brain science and user experience to craft an experience for you that will leave you feeling badass.

If you want to learn how to create and market a product that your users will love using and will recommend to others, read this book. After you’ve read it, go back and look at how it was written. What were you asked to do as you read? How were you helped to understand the points made? How were you helped and supported as a reader to become an expert in making users awesome? What patterns and perceptions sneaked into your brain without you knowing how it happened?

Kathy Sierra has always been about creating awesome users, and this book can help you be about that, too.

Welcome back to the conversation, Kathy. You were missed.

A review by Virginia DeBolt of Badass: Making Users Awesome (rating: 5 stars)

Summary: Kathy Sierra shows you how to make your users keep coming back by helping them be badass at using your product.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy. .

Interactive Video: Think of the Possibilities for Education

Scene from Jack Black's "That Black Bat Licorice" video
Scene from Jack Black’s “That Black Bat Licorice” video

I’ve seen a couple of interactive videos recently. One was an version of Bob Dylan’s “Like a Rolling Stone.”

In the Bob Dylan video, you use up and down arrow keys to move between various visuals, all perfected coordinated with the song. I’m unable to embed the video here, but I urge you to check it out and play with the interactive elements.

The second, which is below, is by Jack Black for his song “That Black Bat Licorice.” In Jack Black’s video use the “3” or the “B” key for 3 different versions of the video. Again, play with the controls as you watch it.

What got me all worked up as I watched these two videos is the educational possibilities. HTML, CSS, JavaScript, apps like Dreamweaver and Photoshop – imagine how something like this could be used to teach those topics.

Tools and Resources for Interactive Video

The folks at PBS’s POV Filmmakers have a great resource list of tools and costs. For each tool in their list, they give examples of work and describe what the tool does. Finding the best tool is also a topic of discussion on Quora. You can do some interactive work with videos on YouTube.

I would certainly be interested in seeing someone experiment with interactive video as a teaching tool. If you’ve seen anything like that on the web, please mention it in the comments.

The Basics of Choosing and Obtaining a Domain Name

Thinking of starting a new website? Two preliminary steps are choosing a domain name for your new site and then buying that domain name. Let’s take a look at some of the basics involved in that process.

Choosing a Domain Name

A good domain name is easy to remember and easy to spell. A domain name that’s easy to spell shouldn’t have characters like hyphens between words. It you want more than one word in the name, run them together like alistapart.com or webstandardssherpa.com. It’s a bit awkward to read, but for someone typing the domain name for A List Apart or Web Standards Sherpa in the location bar of a browser, it makes perfect sense.

Are you starting a website for an established business? Try to make the name reflect the business name and the branding that is already in place for the business. This may be a bit hard if it’s a commonly used name. For example, a Denver floor tile company might have trouble getting the name mountaintile.com. But perhaps denvermountaintile.com might be available.

If it’s a personal website, try to use your name. Karen McGrane owns karenmcgrane.com. How simple is that?

If it’s a blog where you’ll be exploring a particular point of view, pick a domain name that reflects your point of view. A name like Mountain Poet or Lesbian Dad tells you a story about what you can expect from the website before you’ve even visited.

Before you seek out a place to purchase the domain name, it’s good to have a few ideas ready to go. Your first choice might not be available.

Obtaining a Domain Name

Okay, you’ve got some ideas for a great domain name. It’s time to see what’s available for purchase.

There are literally thousands of places where you can buy a domain name. I use the domain name services connected to the hosting company where I do business. I like having the domain name company and the web hosting company connected. But I know people who think this is a bad idea. I think the reasoning of the people who think it’s a bad idea is that if one company shuts down suddenly, at least the other one still operates. If you choose an established company with a good history, I don’t think it’s something you need to worry about.

If you search for domain names on Google you get 84,000,000 results. There are a lot of choices! I’ll just pick one to use as an example. This does not imply that I endorse this company, it’s just an example. Also, prices vary, so the prices you see in these examples may be different from other domain name sellers.

A typical domain name search form.
A typical domain name search form.

At domain.com, you see something similar to what you see on any site where you want to purchase a domain name. You enter the name you are hoping to purchase. The site will tell you if the name is available. If it’s not available exactly as you want it, the site will suggest alternatives that are close to what you want.

I searched for vdebolt.com, my own domain name. Here’s what the tool told me.

The .com is gone, but other top level domains for that name are available.
The .com is gone, but other top level domains for that name are available.

I can’t buy vdebolt.com (duh, I already own it) but other top level domain name types are available like vdebolt.net or vdebolt.org. (Domain names are cheap. Many people buy several variations and direct them all to one site.)

If the name you want isn’t available, choosing whether or not to go with a .net or .org or some other .whatever is an option.

If you don’t want the .org or .net or .whatever, the tools usually suggest variations of the name based on your original search. Here are a few suggested to me:

A few of the suggested variations on my domain name.
A few of the suggested variations on my domain name.

Even better, create your own variations like the denvermountaintile.com example and use the search tool to see if it is available.

If you can’t get a name close to what you originally wanted, go back to step one and brainstorm a new idea. Keep trying until you eventually find a name that will work and is available.

You can buy the name for 1 year or for several. You’ll probably save a few dollars if you buy several years at a time. Don’t forget to renew it on time, or you might lose it!

You’re all set. Go build something awesome.

[Note: This post was originally published on Blogher.com.]

Twitter Wants Photos, Not Links, from Instagram Users

Virginia DeBolt's Instagram banner

It made news this week when Twitter asked Instagram users to post images directly to Twitter instead of posting a link to the photo on Instagram. When an image is posted on Instagram, the user can choose to send a link to the image to Twitter. An image from Instagram will show up on Facebook when shared there, but Facebook owns Instagram.

Yesterday I heard an interesting talk from Meagan Rhodes (@MeaganNRhodes) about using social media. (She’s worth following on Twitter if you’re interested in social media for your business.) She talked about how millennials are all on Instagram. She’s a young woman herself (at least when compared with me) and much more in touch with what millennials are doing with social media.

I personally don’t mind clicking through from Twitter to see a photo on Instagram, although Meagan said most younger people won’t click. But Twitter wants the original image to be put on Twitter and for the link to Instagram to go away.

There are more active users on Instagram now than there are on Twitter. That’s a big change. There are some reasons for this.

  1. Instagram is all visual. The world is rapidly becoming all visual.
  2. Instagram allows more than 140 characters.
  3. Instagram allows a number of hastags in each post. And additional hashtags can be added later in a comment on your own photo.
  4. Comments on Instagram photos are directly under the photo and don’t require searching back through different threads on Twitter. That means any hashtags associated with photo are right there on the page with the photo.
  5. The Instagram accounts of people who visit and comment on your photo are right there and easy to Follow.

When you list some of the reasons for Instagram’s heavy use by millennials, it becomes clear why Instagram is taking the lead over Twitter and winning the lottery for eyeballs.

It would be good for Twitter if users took their advice and actually posted their photos directly on Twitter. But how would it benefit anyone’s brand, traffic, or image sharing from the Instagram side of things? It would not.

A while back I wrote about adding Instagram photos to your own blog. Everything I said in that post still applies for two reasons. It your blog. It’s not a link to a photo as with Twitter.

CSS4 May Include Some Useful Pseudo Classes

The editor’s draft (emphasis on draft) for Level 4 Selectors from the W3C mentions some potential new pseudo selectors that the W3C describes as functional.

The matches-any Pseudo Class

This allows you to create a selector that targets a comma separated list of selectors. Here’s the syntax.

E:matches(selector1[, selector2, …]) {
    /* declarations */
}

For example

h1:matches(section, article, aside) {
    color: blue;
}

Another example, which selects a list of classes:

blockquote:matches(.pull, .feature, .break) { 
    color: blue; 
}

The negation Pseudo Class

The syntax:

E:not(negation-selector1[, negation-selector2, …]) {
    /* declarations */
}

In CSS3, only one selector was allow for this pseudo class. Now you can have a comma separated list as the syntax shows.

For example:

a:not([rel="prev"], [rel="next"]) {
    color: red;
}

The has Pseudo Class

This is a relational pseudo-class. It’s mentioned in the W3C draft document I mentioned, but it’s not mentioned in other places. I’m not sure if that means it’s brand new or was already discarded.

For example:

a:has(> img) {
     border: none;
}

That selector would remove a border from an <a> element that contain an <img> child.

Support?

You can check your efforts to work with these new CSS4 potential selectors using the test at css4-selectors.com. There’s also a list of all selectors from CSS1 to CSS4 on that site, but it does not mention the :has selector.

Resources for Material Design

Material Design is a set of design principles created by Google for developers creating apps for Android. They call it a design language. The concepts don’t apply only to Android, of course. Some of the resources I’ll mention below can be helpful to anyone.

You may be familiar with the way things designed this way look and work, because Google has deployed it on most of its sites since last June.

color blocks for picking a color scheme
The opening page of materialpalette.com

Material Palette is a bold color picking tool. Simply pick two colors and you are offered a color palette.

a group of colors with color codes
The color palette for blue and deep orange

Material Palette is quick, simple, and useful to any app developer.

To back up a bit, a definition and description of what Material Design is all about can be found at developer.android.com. It deals with more than color choices. The design concepts also involve animations, shadows, and drawables.

Google also provides a set of basics about Material Design. The Google site discusses the goals and principles of Material Design and goes on to explain style, animation and many more aspects of development using the concepts.

MaterialUp.com offers inspiration in the form of daily examples of how the concepts have been used in websites and apps. This site and Material Palette are interconnected.