Your friends at Viget present Inspire, a Design & Interaction Blog

Managing :focus styles without breaking accessibility

We’ve all done it at one time or another. The browser’s default focus style for links and form controls doesn’t mix well with a design we’re building, so either at someone’s request or of our own volition, we throw something like this into our CSS:

*, *:focus { outline: none; }

It’s seems harmless. I mean, how many problems could such a small declaration cause?

Using HSB Inputs in Photoshop’s Color Picker

Quick tip, here. Perhaps you already know about and use these. If not, read on!

I've recently started changing color values using the HSB inputs in Photoshop's color picker. If you don't know, HSB stands for hue, saturation, and brightness. One of the things I like about using the HSB inputs is that it feels intuitive (especially compared to RGB or hex values). It corresponds pretty closely with how I already use the color picker when I'm choosing new colors or slightly modifying an existing color I'm working with. In short, the saturation input moves left and right within the color box. Brightness moves up and down. Hue moves the color bar to the right of the box. Pretty simple.

Equating Color and Transparency

Color and transparency are typically treated independently. Choose a color and set its opacity (or alpha, if you prefer). Simple enough. But, how exactly are color and opacity related?

For the purpose of this post, lets just consider grayscale. With a little additional effort, this discussion may be extrapolated to all colors.

In Theory

In the RGB and HEX color modes, there are technically 256 possible shades of gray available for digital screens including black and white. However, confined to only adjusting the opacity of black on a white background, 256 shades reduces to 100 as opacity is typically represented as a whole percentage point from 0% to 100%. For reference, a table mapping 100 shades of gray to the equivalent opacity of black on a white background is attached at the end of this post.

Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study

Last summer software designer Aubrey Johnson published a post on Medium with a specific critique of Apple’s brand new mobile operating system, iOS7. Johnson suggested that Apple’s new “hollow” icons, being more visually complex than “solid” icons, create cognitive fatigue for users that will eventually lead them to tire of the interface and stop using it. The timely, bite-sized post was shared and discussed widely, with some designers affirming it as sensible advice and others criticizing it as overblownoversimplified, and lacking valid evidence.

Solid and hollow icons example

An example of solid and hollow icons in the tab bar of an app in Apple’s iOS7. The selected icon, Top Charts, uses a filled-in "solid" style. The unselected icons use an outlined "hollow" style.

As a graduate student in human-computer interaction and a UX intern at Viget, I saw an interesting opportunity to test Johnson's claim with evidence from real users. To find a definitive answer to the question of whether hollow icons require more cognitive effort for users, I created a web app that measures users’ speed and accuracy in selecting icons with different visual styles. By studying the data from more than a thousand test participants, I found that hollow icons are not necessarily less usable than their solid counterparts. However, the results are actually a bit more complicated.

Three Years, Three Words

As I come up on my three year review, I find myself reflecting on my professional career and how far I've come since I graduated from George Mason University with a degree in Graphic Design. Recently, I had the chance to reflect on this topic further when Tom, Joseph, and I went to speak at my alma mater. We answered questions, gave advice on how students can prepare for working 40 hours a week.

During the session we fielded a handful of questions, one of which I asked myself at my own graduation.

"How do you find your path?"