Warning: Declaration of Thesis_Comment::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0

Warning: Declaration of Thesis_Comment::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/comments.php on line 0
Typedia Forms

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.


Fatal error: Uncaught Error: Class 'thesis_comments' not found in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/comments.php:24 Stack trace: #0 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-includes/comment-template.php(1508): require() #1 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/loop.php(92): comments_template() #2 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/functions/loop.php(8): thesis_single_loop() #3 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(66): thesis_loop_posts() #4 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(42): thesis_content_column() #5 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/content_box.php(25): thesis_columns() #6 /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/lib/html/frameworks.php(27): in /nfs/c04/h02/mnt/66302/domains/gettheeye.com/html/wp-content/themes/thesis_16/comments.php on line 24