Beyond the Button

Museums have done an enormous amount of work making their spaces and exhibit interfaces accessible to those with physical differences, limitations, and disabilities. However, we have lots more work before we can claim such progress with digital and media interfaces.

One easy thing we can do right is design websites and media interactives for for the colorblind. An estimated 8% of the male population (roughly 12 million folks in the US) have some form of color blindness that can make it hard to use interfaces that rely on color to convey information.

I use two simple tools that help me test my designs for color blind users. They let me see what my work looks like through the eyes of some one who can't see the various differences between the shades of green, blue, or red.

Color Oracle

Color Oracle is great because it turns your entire screen color blind for a moment. Any movement of the mouse or clicks turn the display back to "normal."

Sim Daltonism

Sim Daltonism gives you a color blindness portal or window that lets you see little parts of your screen color blind live. This can be real nice for flash and moving images. But this can also be more memory and processor intensive if you are on a slow computer.

Both of these apps are for the Mac and I don't have any first hand experience with any PC tools. But Daltonize lets you test your interfaces over the web. You can upload an image and filter it for various types of color blindness.

I'd love to hear your tips about how you work to make your visual interfaces more accessible to all viewers.

The Elements of Typographic Style Applied to the WebDigital displays are standing in for print graphics in more and more physical museum exhibits. Typography plays an important role in any print graphic design but is rarely attended to with as much detail in media displays or web design. Most of this is the result of fluid layouts and a limited number of tools to control the appearance of a web design.

The Elements of Typographic Style Applied to the Web provides many specific examples using HTML and CSS markup to properly display information with text. I am especially pleased to see them covering a great deal of minutiae that the average code monkey wouldn't be likely to consider in designing a website.

I've stumbled across a couple interesting navigation designs recently that have a playful feel that doesn't get in the way of their actual usability.

Hanna Werning's design portfolio uses a randomly placed map of links that is quite simple and nice. It's easy to forget that simple can often be the best approach.

The Museum of Contemporary Art in Sydney, Australia uses a common icon of the art museum, a gallery guard, to liven up the navigation in a way that I kept expecting to get annoying but actually grew to love.

OK, but fancy and fun doesn't cut it entirely when you are thinking about navigation and more broadly, interaction design. You have to consider a broader array of interactions between the visitors and your media. Over on welie.com they've built a rather complete list of all of the common ways that users interact with information on a website and the pluses and minuses of each of their applications. It's unlikely that you've invented a new method of interacting with media or information when designing an experience so this list give you a good reference for how to apply different solutions appropriately.

teens.walkerart.org - WACTACThe Walker Art Center launched a new version of their teen programs website. They took a fun approach to to very different needs that this site must meet. When you launch the site you get to pick whether you are there for business or play (adult or teen, cropped or ponytail). A slider that persists across the site lets you see the official institutional vision of the program or the voice of the teen participants in the program, complete with wicked unicorn background graphics.

mullet: Courtesy Chris FrewinI like to call this the mullet approach (I've stolen this concept from someone....I know...I just can't remember where I saw it first). Up front you've got the business haircut but in back you've got the party locks. It's a great approach for institutions who often need to present some "official information" even though we want to turn control over to our communities as well. Business in the front, party in the back.

Side to side: Courtesy Jorge FerrerGiven the side to side nature of the Walker website I suppose this guy's haircut is a little bit more appropriate of a metaphor. I just don't know what it is called.

Learn more about some of the decisions these wise folks made in building a new site on the New Media Initiatives blog. Beyond the two-face site design, they have decided to really give the youth in the program a voice of their own on the site. This is a great step that I hope we see in more museum youth programs. When will we start to see a similar approach to sites coming from the view of a museum's explainers, tour guides, or docents?