Thank You for 2009

I wanted to take a moment before I start the New Year's reveling with my family to thank all of you for the past year.

It's been a great second year discussing and learning with all of you via Konigi. I've connected with so many awesome UX designers by posting my thoughts and experiments on the site, meeting up in the NYC area at social gatherings and conferences, and in the exchange of little tweets here and there.

To end a great year, I promised to donate 50% of sales proceeds to New York City charities that fight poverty and homelessness, and you guys came through with your support. With your help, I was able to donate $800 ($400 each) to The Food Bank of New York City and Robin Hood.

I thank all of you who bought my little sketchbooks, notepads, icons, and stencils. Every one of them counted, and while the dollars may be small compared to what corporations give, I feel good knowing that this is a giving effort that's been powered by an indie spirit and hand made goods. It's felt so good that I'm going to make the promise to donate of a percentage of sales a regular part of what I do as long as I sell stuff on this site.

So cheers to the great UX community that I'm fortunate enough to be a part of. I wish all of a you an ass kickin' Twenty Ten!


Iain Lamb’s Typograph is cool tool that allows you to explore the relationship between scale and rhythm by modifying the properties of typographic elements in a page of sample text.

It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it."

Wireframe Icons Update v. 1.5 for OmniGraffle and EPS Versions

The OmniGraffle Wireframe Icons and the Royalty Free EPS/PNG icons have been updated.

In the OmniGraffle version, all icons have been converted to vector format so they are editable in OmniGraffle. You can now modify the shapes and easily change their colors. The vector icons also reduce file size of OG documents. In both OmniGraffle and EPS/PNG versions, I've cleaned up all existing icons for consistency and added new icons including: globe, wrench/screwdriver, lightning bolt, spaces, desktop, gun sight, cloud, bug, books, presentation, twitter bird, bullhorn, megaphone, rocket, windows, mac, and more.

If you've purchased either of the icon sets in the past, you can re-download the updated versions by logging in and visiting your user profile. In your profile page, access the Files link below your username to download the new version.

Journal of Information Architecture, Issue 2

Issue 2 Volume 1, Fall 2009, of the Journal of Information Architecture is now available. Includes the following articles.

Byström, Pharo & Resmini
Editorial: Open 24/7

Stefano Bussolon
Card Sorting, Category Validity, and Contextual Navigation

Brigitte Kaltenbacher
From Prediction to Emergence

David Walczyk & Cedomir Kovacev
Mediation as Message

Read Issue 2 of the Journal of IA.

Deconstructing a CSS trick to display form data as tabular data

CSS and Javascript experiments are fun to play around with. I tend to talk about them here because of the questions they raise about whether a technique is worth implementing or if it does more harm than help. Straight forward and familiar are the safe route. Sometimes experiments lead to better ways of doing things, other times they seem like they’re gratuitous.

I came across an interesting, if problematic experiment to convert form fields into editable fields that are masked table cells until each input is in focus. I don't think this would be particularly familiar to a user if they're editing a form for the first time. However, it does provide a nice problem to deconstruct and review.

I'm sure there is a specific application they have in mind here, e.g. displaying a view of tabular data as a masked form to a user that has permission to edit it. But I think that could just be accomplished using javascript to transform individual fields and submit via AJAX. One of the problems with transforming the text to input and back to system text again is that the user might believe that the transition implies a submission, when nothing is submitted in this form, I presume, until the Edit button is clicked. If the case was that editing each input submitted the data, however, this feels like it could be an appropriate concept.

As far as the concept of masking input fields here, I think the issue I have has to do with familiarity, usability, and efficiency. But to make it more usable, the form could give the user a cue as to how to start using this form. The first input might be put in focus so you know that you're able to edit form fields. Clicking an edit icon to start seems inefficient, although tabbing is also possible.

Some tricks run the risk of turning a simple function into what might be perceived as a gimmick, or worse, might fail to perform its primary function of getting the user's data input. Form fields feel like a dangerous place for me to confuse.

The Apple Store's Checkout Form Redesign

I finally made some time to read through Luke Wroblewski’s excellent review of the changes in the Apple store’s redesigned checkout form. According to Wroblewski, "…retail sales data shows that Mac sales were up 21% year-over-year in the months of October and November. So it’s interesting to note that Apple’s primary online sales channel (Web-based checkout) was redesigned during this time.

I wasn't surprised that the single page checkout form is an improvement over the paged version. What I was particularly interested in reading was Luke's observations about the problems with the move to put labels in inputs on so much of the form, and the improvements made with error messaging and breaking up secondary actions via tabbed sections.

I consider this a must read, and as always it's great to read whatever Luke continues to provide as an update to the form book. Read it on Functioning Form.