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;
}

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.

Actual, practical UX strategy

design, strategy

Paul Bryan, of the LinkedIn UX Strategy and Planning group, contributed There is no such thing as UX strategy, on UXmatters. Bryan’s clearly got a handle on the subject, but some of the user responses (“This UX Strategist role should be a skill of a PO;” “I thought we decided there was no such thing as UX Strategy…and that UX was strategy?”) revealed a widespread lack of understanding on what it is and who should do it (and no, it’s probably not product owners. A PO truly gifted in UX is not only extremely rare, but has many non-UX roles to fulfill. Adding this to their plate is the wrong call.)

While I agree with Bryan’s thesis that there should be better understanding and use of UX strategy, but in the article he behaves as though this is a goal. Having seen UX strategy happen and consciously done it myself for the better part of a decade, I submitted the following comment:

It is real, and it’s happening in some places. I think the reason for the confusion lies in lack of definition about not simply what UX means, but what strategy means.

For me – and I’ve been doing user experience under one title or another for over 14 years now – UX is “everything that is the case;” it’s everything the user experiences in the context of your brand. Designing good UX is not possible without understanding product strategy; designing great UX is not possible unless product strategy integrates UX strategy. Frequently the only person who can do that is the UX designer, unless you’ve hired product people with design backgrounds, which is rare. User experience rests on the three pillars of user research, usable IA/UI/IxD, and purpose-driven vision. You have to understand your users’ goals, your client’s goals, and be able to bridge them.

So there are different flavors of UX strategy, and a good UX strategist uses them all at different times.

  • Brand-integrated user experience design that is not only usable and delightful, but actively furthers the brand. For example, it’s not enough to simply provide a space for a promo on a page; the UX designer should help drive which promos will not hurt the purpose of the page, and may even increase user value and enjoyment. You have to integrate the web, print, TV, off-site advertising, enewsletter, and other items to have an integrated UX strategy. (Yes, this does actually happen at times.)
  • UX evangelism strategy. Figure out how to get people thinking in user terms. At a highly numbers-driven social network, I introduced them to the concept of measuring not just user-generated content (UGC) but user-generated activity (UGA), lumping it all under user-generated experience (UGX). Product owners and others measured UGA on their own, which forced them to think from the user’s perspective.
  • Research-driven UX strategy. In the example in the second bullet, UGX became a strong driver of overall UX strategy – we consciously presented activities to users in a particular order, based on user research and testing, designed to both optimize their experience and increase the ROI on their activities. We also studied communication patterns of UGA and UGC, determining where the best user value and ROI lay there as well.
  • Road map strategy. As user advocates and researchers, UX strategists can contribute significantly to road map work. For example, putting on our analytic hats we can show product strategists how to objectively measure concepts they tend to consider intangibles, such as competitiveness. We can also show how UX focused strategies such as the ones above can be integrated into their road map for the benefit of both user and company.
  • Last but certainly not least, there is perspective-drive UX strategy. Here, the underlying narrative/perspective of the users on the site should drive UX strategy. For example, examining user personas recently to get the unifying “hook” behind a software app, I realized that while the users themselves were very different in many key ways, they were all concerned with the same ultimate goal. It’s actually not in the app itself, but putting that goal first in my design immediately became the underlying theme/narrative behind all my UX choices. If a design choice doesn’t further that goal, it’s probably the wrong choice, and it’s out.

These are some of the many aspects of UX strategy I’ve used, and I’m sure I’m not the only one. While which ones work for you depend on your role, good UX designers should probably consider all of them as much as possible in our work.

Thanks for the great conversation-starter.


Originally posted on UXtraordinary.com.

Content strategy: nouns and verbs

design, writing

One of the first things I did for Kinnser Software was begin to establish content strategy guidelines, and this was the first one. It was published in the Kinnser UX blog I started and maintained, as well as the living (coded) style guide I created.


When writing for headers, buttons, navigation links, and similar items, the guidelines are simple:

  • Use nouns for things.
  • Use verbs for actions.
  • Avoid generic terms like “Submit,” as the action may not be interpreted correctly. Instead, describe exactly what the action will do. This is particularly important for our users, since the term “submit” can have multiple meanings. For example, Medicare claims are submitted. An example of good button text can now be seen in the Approve Claims area of Billing Manager [a key Kinnser feature]. Instead of “Submit,” the button helpfully says “Approve Claims for Submission.”
  • Avoid gerunds: verbs functioning as nouns by adding “-ing” to the end of the word. For people for whom English is a second language, this form can be confusing.

UX design as contract

design, psychology

Back to William James again, and my favorite quote: “My experience is what I agree to attend to.”

Previously I wrote about what this said regarding the range of experience UX designers could leverage to engage users (UX happens everywhere).  But there’s more behind this statement than the observation that where a person’s attention goes, there goes their experience of the world. There’s an ethical responsibility implicit there as well.

What and how we attend to things matters to our quality of life. Psychologists, medical doctors, and Buddhists have known this for some time (Buddhists have known it a bit longer). Focused attention is used in mindfulness-based stress reduction programs for cancer patients; an excessive level of difficulty in maintaining focus is a diagnosable disorder; “right mindfulness” is part of the Buddha’s Eightfold Path. The very process of therapy involves drawing attention to specific patterns of behavior.

But attention isn’t the whole story. If William James is correct, then experience involves not just attention, but an agreement to attend. When a user agrees to give us (UX architects) some of their attention, they are in effect agreeing to make us a small part of their experience of the world. They are allowing us to have an effect on their quality of life, small or large depending on what our product or service is.

As the other half of that agreement, we enter into an unspoken contract with users to make that experience worth their while.


Originally posted on alexfiles.com (1998–2018) on January 2, 2011.

Simplicity is not a goal, but a tool

design, design thinking

Simplicity in design is not a goal by itself, but a tool for better experience. The goal is the need of the moment: to sell a product, to express an opinion, to teach a concept, to entertain. While elegance and optimal function in design frequently overlaps with simplicity, there are times that simplicity is not only not possible but hurts usability. Yet many designers do not understand this, and over the years, I’ve seen the desire to “keep it simple, stupid,” lead to poor UX.

I was therefore glad to see Francisco Inchauste’s well-thought, longer version of Einstein’s “as simple as possible, but no simpler” remark.

From the column:

As an interactive designer, my first instinct is to simplify things. There is beauty in a clean and functional interface. But through experience I’ve found that sometimes I can’t remove every piece of complexity in an application. The complexity may be unavoidably inherent to the workflow and tasks that need to be performed, or in the density of the information that needs to present. By balancing complexity and what the user needs, I have been able to continue to create successful user experiences.

Plus, as I’ve commented before, messy is fun!


Originally posted on former personal blog UXtraordinary.com.

Evolutional UX

design, design thinking

This was originally posted on the UXtraordinary blog, before I incorporated under that name. Since then this approach has proven successful for me in a variety of contexts, especially Agile (including Scrum, kanban, and Lean UX – which is an offshoot of Agile whether it likes it or not).


I subscribe to the school of evolutional design. In evolution, species change not to reach for some progressively-closer-to-perfection goal, but in response to each other and their ever-changing environment. My user experience must do likewise.

Rather than reach for pixel-perfect, which is relatively unattainable outside of print, (and is probably only “perfect” to myself and possibly my client), I reach for what’s best for my users, which is in the interests of my client. I expect that “best” to change as my users change, and as my client’s services/products change. This approach makes it much easier to design for UX.

Part of evolutional design is stepping away from the graceful degradation concept. The goal is not degraded experience, however graceful, but differently adapted experience. In other words, it’s not necessary that one version of a design be best. Two or three versions can be equally good, so long as the experience is valuable. Think of the differences simply resizing a window can have on well-planned liquid design, without hurting usability. Are the different sizes bad? Of course not.

This approach strongly supports behavioral design, in which design focuses on the behavior and environment of the user. You might be designing for mobile, or a laptop, or video, or an e-newsletter; you might be designing for people being enticed to cross a pay wall, or people who have already paid and are enjoying your service. You might be appealing to different demographics in different contexts. Evolutional UX thinks in terms of adaptation within the digital (and occasionally analog) ecology.

Evolutional UX also reminds the designer that she herself is part of an evolving class of worker, with many species appearing and adapting and mutating and occasionally dying out. We must adapt, or fall out of the game—and the best way to do that is to design for your ever-changing audience and their ever-changing tools.

And now, some words of wisdom from that foremost evolutional ecologist, Dr. Seuss. Just replace the “nitch” spelling with “niche” and you’ve got sound ecological theory, as every hermit crab knows.

And NUH is the letter I use to spell Nutches,
Who live in small caves, known as Nitches, for hutches.
These Nutches have troubles, the biggest of which is
The fact there are many more Nutches than Nitches.
Each Nutch in a Nitch knows that some other Nutch
Would like to move into his Nitch very much.
So each Nutch in a Nitch has to watch that small Nitch
Or Nutches who haven’t got Nitches will snitch.


Shirky on purpose

design, design thinking

You know you’ve got a good piece of software when people use it for purposes for which the designers never intended or designed.

— Clay Shirky

Context, the writer’s con

design

Context is a sci fi/fantasy conference in Columbus, Ohio. I had the pleasure of doing a couple of program covers. This is one I most enjoyed: a dragon, captivated by a book to the exclusion of the alien invasion and vampire drama raging around her.  

Cover, Context XIX program. Ink + digital color; my concept and art.

The actual program printed in black and white, but I typically enhance my stippling with watercolor or digital color.