A proud moment at GA: Integrating the highest lesson rubric requirements into the lesson format

Constant learning is constant humility

career, psychology

This morning I shared a bit of what the learning part of design meant to me in an email, and decided to expand on that.

Working in design means constantly learning. You have to make like a sponge and absorb the field you’re supporting, the user’s language and perspectives, the platform your design is being built with, and so much more. In my career alone I’ve supported users in healthcare SaaS, a social network, several technology companies, shoe retail, a veterinary clinic, an advertising/promotional agency - you get the picture. I’m sure there are agency designers and freelancers with an even more varied set of personas.

Sometimes that can be daunting. Many people in this field suffer from imposter syndrome: the sense that they are faking it, and someone will notice someday. The fact that no one has noticed, and that their work is excellent, doesn’t seem to stop them from this underlying insecurity. I would like to suggest that this is less about actual insecurity, and more about the nature of constantly learning things beyond design in order to perform design.

Go back to childhood. Many people disliked math more than other courses. In large part this is because math never lets you relax or bask in your accomplishments. Instead, the moment you’ve conquered one area, your teacher is using it as a building block for the next area. If you fall behind one unit, you’re lost. Unless you or your teacher are particularly gifted, you begin to resent, consciously or unconsciously, the constant sense of disequilibrium. It’s a rare person who enjoys constantly being a little unsettled.

Design is a bit like that. In every new project, you are learning:

  • User goals and context. This can get huge. For a particularly large project at Dell, I once became an entry-level cloud engineer, running instances on multiple cloud platforms, to learn the challenges of my target audience. Admittedly that’s unusual (and you might say a bit overboard), but the design was innovative and I was well recognized for the results.
  • Business goals and research.
  • Platform and development requirements. Some businesses may even ask you to learn the platform. In my last role I ended up just shy of the Salesforce Trailhead rank of Ranger, their highest level apart from certifications, because Salesforce was the platform and we were expected to be able to work with it.
  • The development cycle: Is it Scrum? Lean? Pivotal? kanban? (God help us, is it still waterfall?)
  • Tool requirements. Many places let designers use the tools that they personally do best with, but some require all designers to use the same tools for collaboration purposes. Some places even create in-house tools (the outstanding Dell DCX Sherpa tool comes to mind) to allow designers to easily create brand-friendly designs and prototypes.

There’s probably more, but that’s sufficient. Please note that apart from the user goals and design tools, none of this is actual design, though it’s necessary for design. This means that every time a designer steps into a new project, they are either learning or failing (flailing?), and this learning may be constant. So you have to make a choice as a designer: live unsettled and constantly learning, or stop learning and perform mediocre design.

The upshot? Don’t believe yourself when you imagine you’re an imposter designer. It’s true that constant learning means constant humility: you are always going to learn from the person next to you, the next user you talk to, the next job. But all that means is you don’t know everything (gasp!), and you have more to learn. That doesn’t make you an imposter. Rather, humility (that vital self-awareness) makes you the exact opposite: a good designer.

[Cross-posted on LinkedIn, Medium.]

Running your parallax image behind a cut-out figure

design, fun

I love parallax, but I wanted to take it up a notch and run it behind the outline of a figure (as opposed to knocking out text). So I played around in CodePen and came up with the below.

Steps:

  • Make an SVG cutout of the same background color as your background.
  • Make a parallax background with CSS. Use the same proportions as your SVG.
  • Place an img of your SVG inside the HTML for your parallax div.
  • Align and size parallax background as you like. Don’t forget to make things responsive!
  • Enjoy!

A note: This doesn’t work in mobile because mobile doesn’t manage background-attachment: fixed well. Also some contexts, such as blogs, may play with your CSS. Adjust accordingly.

Demo

HTML

<div class=”parallax-image”>
    <img class=”cutout” src=”https://aeoneal.com/imagery/brain-reverse-cutout.svg”>
</div>

CSS

/* Parallax CSS. Change image and size to suit your needs. */
.background-oregon-grapes {
    background-image: url(“https://aeoneal.com/imagery/blog/oregon-grapes.jpg”);
    background-size: 100%;
    height: 560px;
    width: 560px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .background-oregon-grapes {
        height: 330px;
        width: 330px;
    }
}

/* Image CSS */
.cutout {
    height: 100%;
    width: auto;
}

This is my blog. There are many like it, but this one is mine.

nondescript

Seriously, I’ve made many blogs and posts over the years. The demise of old social networks, hackers, and just plain time have ended the usefulness of many of these.

My hope is to make aeoneal.com a place to gather the best of the old and whatever is new under one roof. If you see blogs you previously read on UXtraordinary, aleXfiles, LiveJournal, cognitions.net (no longer mine), offmostcharts, Medium, or anywhere else online, that’s why. Dates are from original posting, or occasionally from the time of an event. Dates after this post are as they happen.

Enjoy!

Beautiful, accessible traffic light colors

design

Cross-posted from my Medium blog.

Gorgeous red, yellow, and green autumn leaves from enneafive of Flickr
Autumn leaves showing off a glorious red/yellow/green palette. Photo by enneafive of Flickr, under Creative Commons by 4.0 license. Links below.

Everyone uses them: Green, yellow (or orange), and red. We use them in data visualization, we use them in buttons, we color text and icons with them and put them into alerts. They are often used in crucial moments, when we are announcing success, or breaking bad news. We abuse them, too, using them to draw attention where they aren’t relevant. What we don’t do, far too often, is make them accessible.

A significant minority of people are color blind, and most of those have red-green color blindness. Since 2011 I’ve had to solve for color accessibility in important interactions, such as alerts for patient vitals, quality of patient care, cloud server status, or executive sales analytics. Here are some accessibility tips I’ve picked up along the way, as well as my personal template for a usable, accessible traffic color palette.

Use icons as well as color

You may design a beautiful, color blind-friendly palette, but it never hurts to reinforce the message. Instead of changing text to red or green, put a differently shaped red or green icon next to the text. That way, even if you have no control over your color palette, or the chart has been printed in black and white, or your user sees only in grays, you’ve made your point.

Case in point: Excel. Excel offers icons in traffic light colors to help tell your data story. Make sure you use differently shaped icons as well as different colors! Here’s why:

Normal and colorblind comparison of cons from Excel, Office 2013
Desktop Excel, Office 2013. Pay attention to the red and green circles — could you tell them apart easily? Microsoft resolved this issue in later versions.

Deuteranopia and protanopia are two common types of red-green color blindness. Testing your colors against them will optimize for most of your users, but icons help seal the deal.

Don’t trust preset color palettes

There are many extremely useful frameworks and boilerplates online. Each meets many needs, but not all have had the time to optimize their colors for color blindness.

Popular present color themes that fail colorblindness accessibility
Examples of popular preset color themes that didn’t check for accessibility in color usage. (Or, “Why not to use orange.”)

The most important question when looking at your reds, greens, oranges, and yellows is, “Will my users recognize this color when they see it by itself?” Don’t trust the people who created your framework to have thought of this. Check it out for yourself.

Common colorblindness checking with Adobe

How do you do that, you ask? For many years the only solution I found for testing was Adobe’s PhotoShop, which offered protanopia and deuteranopia views of whatever I was creating. The options are under View → Proof Setup (see image below).

Path to colorblindness previews in Adobe Photoshop
Screenshot: finding the colorblindness previews in Adobe Photoshop.

Recommended online colorblindness checker

The Corblindor Coblis (Color Blind Simulator) is now my go-to tool. Just do a quick screen shot of your work, and see how it looks for many different types of colorblindness.

Plan ahead with a color template

I’ve done a lot of data visualization color work over the years, and a pattern has emerged that I find helpful. I’m offering it here, in the interests of making data more usable. I strongly recommend considering this approach when you’re developing a brand color palette.

Example of an optimized set of traffic colors, with colorblind views.
Notice how light vs. dark and warm vs. cool differentiate the red and green. Your yellow should be significantly lighter than either your red or green!

Here are the key guidelines:

  • Use a light, medium, and dark shade. Your yellow should be your light shade.
  • Use a warm green and a cool red, or a cool green and a warm red. Just don’t have both cool or both warm.
  • No orange. Because it’s so much lighter, using yellow instead of orange makes it much less likely your “warning” color will conflict with your “success” green to color blind users, or look too much like your “serious problem” (errors, e.g.) red.

That’s it! Thanks for reading. Go forth and have fun telling good stories with your data.

I presented Narrative Taxonomy at Austin UXPA!

career, taxonomy

Slide "storytelling and taxonomy" from UXPA Narrative Taxonomy presentation.I was thrilled to be able to share my design-focused narrative taxonomy concept and process at the Austin UXPA, hosted by Rackspace. Great crowd, great discussion, great experience. Thanks to organizer (and user research guru) Candice McFarland for organizing this!

Narrative Taxonomy UXPA presentation

Originally posted on former personal blog UXtraordinary.com.

The man my great-uncle didn’t kill

career, psychology

Cross-posted and expanded from my LinkedIn account.

My grandfather and great-uncle during WWII
My grandfather and uncle talking at the German-run camp my uncle was in during World War II.

Everyone demonstrates the fundamental attribution error—a variation of correspondence bias (pdf)—to some extent. We look at the action and assume it’s the character. Even when we know there are extenuating circumstances we do it. The defense lawyer, doing his duty to provide the best defense possible, is seen as supporting crime. The debate student, assigned to defend a certain position, is seen as believing it; no matter the usefulness of the role or the purity of intent, every devil’s advocate runs the risk of being seen as devilish. And of course, the criminally negligent incompetent person driving the car that just cut us off.

In the workplace this can create misunderstandings, usually small but sometimes project-killing or even career-destroying. It’s a problem because the only way to overcome correspondence bias and not commit the fundamental attribution error is to constantly question your assumptions and opinions, looking for the larger context.

Since we’re all story-driven creatures, sometimes an anecdote can help. This is a story of a time a life was on the line, and it’s the best example of correspondence bias I know.

My mother’s uncle was a man named Jara. He was my grandmother’s brother, an artist when he could be (I saw beautiful sculptures and drawings in his widow’s home). His best friend, whose name I don’t know, was a professional artist.

Watercolor portrait of Uncle Jara by a friend
A watercolor portrait of Jara by his best friend, faded but still showing great talent.

During Hitler’s occupation of Prague, Jara and his best friend were sent to a labor camp. At the camp worked another man whose name I don’t know. Let’s call him Karel. Karel worked as an overseer, managing his fellow citizens for the Nazis. Karel was hated. He treated everyone “like a dog,” Jara said, swearing at them and driving them mercilessly, generally making the labor camp experience every bit as awful as you imagine it to be.

Watching Karel’s behavior, day in, day out, Jara and his friend eventually realized Karel could not be allowed to live. It was obvious to them. Karel was a traitor, a collaborator with the enemy, and responsible for much misery. They were young, and passionate about their country. They made a pact together, that if all three of them survived the war, Jara and his friend would hunt down Karel and kill him. They viewed it as an execution.

The war ended, the labor camp closed, and life continued for all three men. Jara and his friend discreetly found out where Karel lived. They obtained a gun, and one day they set out to his home.

Karel lived outside Prague, in a somewhat rural area. When Jara and his friend arrived, Karel’s wife was outside, hanging laundry. When they said they’d known Karel at the labor camp, she smiled and invited them in, calling to Karel that friends from the camp had arrived. They followed her to the kitchen, where they found the monster they sought.

Karel was sitting by the table with a large tub of water and baking soda in front of him, soaking his feet. He was wearing rolled-up pants, suspenders, and a collarless, button shirt, the kind you could put different collars with under a jacket. He greeted them with a broad smile, immediately calling them by name and introducing them to his wife. Jara said Karel was so happy, he had tears in his eyes. He asked his wife to give them coffee, and she brought out pastries, and all sat down to talk about old times.

Jara and his friend were dumbfounded, but did not show it. During the conversation they realized that Karel had not thought of himself as collaborating with the Nazis, but as mitigating their presence. He was stepping in so no one worse could. His harshness was protective; the Germans could not easily accuse the workers of under-producing when Karel pushed his fellow Czechs so hard.

They stayed several hours with Karel and his wife, reminiscing and privately realizing no one was getting shot that day, then took their leave. On the way back they threw the gun into a pond. Jara went on to work at the Barrandov film studios, where he met his wife, Alena (she was an accountant). They married, lived a long life, and were happy more often than not.

Jara and Alena with their dog.
Jara and Alena and a canine friend.

Jara was transformed by this experience. Never again would he take any person’s actions as the sum of their character. And I do my best to see things in context and not judge, in part because of the man my great-uncle didn’t kill.