Responsive Footnotes

harvard-footnotes

I love web design like this. Both beautiful and useful: footnotes in context so you can read and return without leaving your current place in the text. Two examples—that work in desktop down to mobile—from Upstatement: NPR Code Switch and the newly redesigned Harvard Law Review.

Hat tip: Jack Lenox.

ChangeOrder: The User is Out

ChangeOrder: The User is Out is an insightful take on why designers shouldn’t be called on to speak for users. Instead, ask the users themselves.

Of course, it is a bonus when you are your own client—if you use your own product, then you can answer user experience questions from both a professional and a personal perspective.

Color Blindness and User Interface Design

As a user-centered designer and developer I am always looking for ways to improve interfaces to be useful to all people, including color-blind people. Particletree has a great guide, Be Kind to the Color Blind [editor’s note, October 2012: link now offline], that nails the essential pitfalls and best practices in designing for color-blindness.

My rule of thumb is to use color only as a secondary indicator. This means that an important detail in my user interface should not rely on color alone to indicate meaning.

This type of design decision came up recently in my work on DF Studio. As part of a redesign for version 5 of the software, the design called for colored icons to show status for a photographer’s online portfolio. A green icon for an active portfolio and yellow icon for a disabled one (a disabled portfolio is not accessible to public viewers).

portfolio-status-version1

The problem with the icons being only differentiated by color is that a color-blind person that can’t distinguish yellow versus green would not be able to easily know the portfolio’s status.

The solution was simple: add a lock overlay to the disabled yellow icon. You can now easily tell that one is “locked” and one is not.

portfolio-status-version2

It is always good to run your design through a color-blind testing tool like Colorblind Color Filter or Vision Simulator. The DigitalFusion development team is fortunate in that the CTO of the company (who is also our product development manager) has a color vision deficiency; since he is constantly looking at the interface we have a way to find color-blindness issues in early stages of development.

If you work on websites or any kind of visual user interface, I would highly recommend reading the Particletree article, including the Additional Reading links. Knowing about the problem is half the battle, and you’ll be able to keep color-blindness in mind when developing and designing your interfaces.