Typedia Forms

by Zack on August 27, 2009

Typedia Forms Critique

I’ve written before that forms are not the place to get creative. I still believe that, but not creative doesn’t mean not good. There is a new service available called Typedia. It works like Wikipedia for fonts. It was created by Jason Santa Maria and a list of other well-known designers, so it’s no surprise that it looks good and feels good.

A few days ago I was adding the article for one of my favorite fonts (FF Scala Sans) when I stopped and took a moment to realize how great the edit form was. The interaction was smooth and clean, the fields were clear, and (with a few minor exceptions) it did what I wanted without getting in the way. So why do the forms on Typedia feel so good? Let’s take a look at some of the details.

While we look at the details I’ll also suggest some places where there is a little room for improvement. Jason Santa Maria once said that the web as an art form needs critics. I agree, so I’m adding a pinch of constructive criticism along the way.

You might want to see Typedia in action before you read the rest of the article. Go ahead, I’ll wait.

1 Vertical rhythm

vrhythm

The vertical rhythm of the form is pretty close to flawless. In a couple of places the alignment doesn’t match the rest of the page, but within the form it is super tight to the grid.

2 Strong title and subtitle

title2

The form starts off with the simple title “Edit a typeface.” This title is action-oriented, clear, and large without being imposing. The subtitle let’s me know what font I’m editing with a nice yellow background to offset it. The effect is please overall, but it does make me wonder if they could have combined the two as “Edit FF Scala Sans.”

3 Mostly unobtrusive JavaScript

add_designer

The form makes heavy use of JavaScript without overwhelming you. The dynamic components just show up when you need them. When I add a new designer I click the “Add another” link and the field fades in nicely. However, this is one of my biggest critiques of the form. There are a few places where I have to click too many times. The interaction for the “This typeface is part of a family” checkbox is a good example.

typeface_name

I click once to select it:

name_selected

The family members field fades in, which is good, but then I can’t unselect the checkbox. I have to press the change link before I can unselect. This goes against my expectations about how checkboxes work and takes a few too many clicks.

name_change_warn

I guess I understand the need to warn me about losing the family members, but this is a good example of why you should never use a warning when you mean undo.

4 Unobtrusive AJAX

ajax

The AJAX they use to suggest potential designers and type foundries has the natural ease found in every well-worn tool. There are hundreds of AJAX typeahead controls, but this one is especially nice. The only change I would make is allowing the escape key to close the popup.

5 Mixed field layout

fields

This form contains some short fields (like the typeface name) and other long ones like the background. For most of the short ones the labels are on the left and the field on the right. They mix it up to give the long ones some more space and that works very well. However, I would add a resizer to the text area. It makes it much easier to edit long background descriptions.

6 No cancel button

This is my only pure critique. They should add a cancel button. When I make changes it is a little unclear how to back them out.

There are a few places where this form gets a little too fancy, and a couple of minor bugs, but overall this is one of the best web forms I’ve ever used. Simple, clear, and it just works. You need to register before you can edit, but it’s free and well worth it. So go try it already.

The T from the Typedia logo was created by John Langdon and is used here under the Creative Commons license.

{ 2 comments… read them below or add one }

Jason Santa Maria August 28, 2009 at 5:46 pm

This is a great write-up, definitely well considered and thoughtful. There’s not enough of this happening online, and I thank you for this critique.

The Add/Edit form was easily the most time consuming piece of the site. I plan to post something about the first iteration of it (it’s comical how awful it is by comparison). We labored over this page so much because it’s the most key point of interaction to the site and getting people to participate. I can address a few of your points:

#2 I actually had combined these two in an earlier iteration and the system message helped direct your attention a bit better and strengthen the messaging system. For instance, when you save the page, the page refreshes and the message reads that your changes have been saved. But, you’re still on the Edit page, so the title needs to stay intact as “Edit a typeface”. Having them split gave us much more flexibility.

#3 Yep, we originally had the checkbox as just a normal checkbox, but found that it was actually way too easy to uncheck it by accident and not realize it. So we decided to make it a much more conscious action. And whoops, that warning message should be red like a real warning :)

#5 We didn’t put a resizer on the Background field because most modern browsers have this built into their UI by default now, and it’s one less bit of javascript to include on an already JS heavy page.

#6 The cancel button is an interesting idea. I’ve only heard this from one other person so far. Obviously, I’m so used to the form now that it’s second nature to just trash or erase a field to “cancel” things. I usually tend to avoid placing cancel and reset kinds of buttons in forms because I’m one of those people that always seems to hit them by accident. With all of that said, I’d definitely be interested in ways to improve this form, possibly by conducting some testing with different options.

As I’ve said, this was a very thoughtful critique and I appreciate the time you put into it. I hope you’ll do more too :)

Zack August 28, 2009 at 6:21 pm

I’m glad the critique was helpful. I’m often reluctant to write critiques for fear of offending someone.

Forms are an often overlooked part of a design, but the difference between a good one and bad one is huge. I’ve been showing the Typedia edit form to the rest of my team as an example of the type of forms I wish we designed.

Would it be possible to stop unchecking the “This typeface is part of a family” checkbox from clearing the family information? It could just hide the fields and then show them if the user checked the box again. You wouldn’t need to delete the family information and it would be there if the user changed their mind.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: