Invitation Process

Typekit is currently in “beta” if you want to call it that. You need to sign up and wait for an invitation or keep an eye out on twitter for people giving them away. I got my invitation in my inbox recently and, needless to say, I was excited to try it out.

After I click on the invitation link in the email, I’m presented with a signup form asking for basic information. Typekit does a good job of not asking me for too much info. Do they really need my phone number? No, so they don’t ask for it.

Bonus points: When landing on the page, the Typekit robot programming ninjas behind the beautifully minimalist sign up form had already filled in my email address. I filled it out before when asking for the invitation so why should I have to do it again? This step may go unnoticed by some people, but those who do notice it will giggle in a fit of joy because they get to start playing with Typekit seconds sooner.

Typekit offers four different service plans. There is some variety to the plans, but conspicuously absent is a “freelancer” plan. I was hoping to see a plan for people who make websites for different clients. This type of plan would have:

• Relatively high bandwidth
• Full font library
• At least 5 fonts per site
• Ability to use on many websites (upwards of 40)

Currently, the best solution for me would be to have each client pay $49.99 a year for the service. This definitely isn’t a bad deal, but I would’ve liked to see a plan with all those features for about $50 a month.

Bonus points (for the Typekit guru): The Typekit plans page lets me know what each feature is with a simple tooltip that clearly explains the feature.

Maiden Voyage

The first page I see once I sign up is an intro page explaining how Typekit is going to work.

This screen does a great job of telling me how to get help, what browsers Typekit works in, and how to install it. It’s as if someone is sitting next to me at my computer giving me the elevator speech about the basics of Typekit.

Suggestions

• Make the copy a little more concise. It isn’t a lot to read, but it is the only thing standing between me and playing with Typekit so I want to get through it as fast as possible.
• Add visuals to emphasize the text and help me scan it quickly. Add browser icons for what Typekit supports (similar to how video games and software boxes have the PC and Mac compatibility logos). Have images or big links to your Get Satisfaction page and email address. Add a picture of the colophon in context of a real website. From reading the paragraph, I’m not clear on what exactly a colophon is.

Adding a Typekit

This screen introduces the concept of a kit to me. It tells me what it is in a conversational tone that, again, makes it feel like someone is in the room showing me how to add a kit. This makes the app more fun and easier to use by breaking down typical barriers between the computer programs that run web apps and the actual humans using them.

What This Page Does Well

• Uses conversational language. Instead of “Enter kit name here” it is “Start by giving the kit a descriptive name”
• Uses personalized inline examples. It makes me smile to see that Typekit has suggested calling my kit “Kevin’s site.”
• Doesn’t include unnecessary fields. I can’t schedule a time for Typekit to apply itself to the site. I can’t add custom port numbers. I can’t pick the fonts I want to use while first creating the kit. Typekit saves that choice for a later step to help break up the entire process and make it more manageable from a usability standpoint.

Installing the Javascript

This step couldn’t be any easier. Unlike other font replacement tools, I don’t have to install a flash plugin or upload any special files to my server. All I do is put this code in the element on each page. It also tells me that this code will only work on iloveusability.com (the domain I added in the previous step) and gives me an option to change it right there. This is a great example of presenting the user with options when he or she needs them most.

Bonus points for the Typekit JS geniuses: What is absolutely everyone going to do with their installation code? Copy and paste it. Typekit knew this and made it easier to highlight all the text. When you click inside the box, all of the text is instantly highlighted for you. It saves me two clicks and a split second, but this shows how Typekit takes usability seriously and makes subtle changes to make the installation process easier for their customers.

Adding Fonts to Your Kit

This font library page uses excellent typographic hierarchy to emphasize the important information about each font. The font demo takes precedence over everything else because it is larger. When you come across a font that strikes your fancy, you look at the listing from left to right and end up at a button that instructs you to “ADD” the font to your kit. This demonstrates well designed and natural flow between seeing an item and instructing a next action.

What This Page Does Well

• Each listing has a clear main action and a secondary action. “ADD” is a green button that contrasts from the background attracting the most attention of users. “View” is a secondary action link that is important, but not as important as adding it to your kit.
• Padding around the little pagination links at the bottom. Typekit makes their pagination links more usable by increasing the clickable area of each number. .pagination a { padding: 3px; } is all it takes.

Suggestion

• Make the “ADD” button act like a physical button. Change the background to a darker green when you hover over it. Make it simulate being pushed down when clicked (click any button on Atebits to see what I mean).

Typekit Editor

Whenever you click to add a font to your kit, a nifty Typekit Editor pops up in a different window (or tab). This allows you to edit how each font in your kit applies to different areas of your page. It uses CSS selectors, a wise choice by the Typekit guys and gals. CSS selectors have become second nature to anyone skilled enough to replace a font on a page, so they present a usable and convenient way to target specific page elements.

When you first add a new font to your kit, Typekit automatically adds a CSS class you can use directly in your HTML. If I want to use it, the first thing I’ll try to do is copy it and unfortunately things get squirrelly from there:

I try to copy the selector, but end up accidentally deleting it. I have no way of highlighting the font’s default selector. It would be nice if there was a “copy” Javascript action similar to the installation of Typekit I talked about above.

Three Areas of Concern

1. The “Publish” button is all the way at the bottom right corner of the screen. This could go unnoticed by a person who is new to the app and has to scroll to see the button. There should be some kind of warning when I try to close the window without publishing the fonts, like you see in desktop programs when you try to close a document without saving it.
2. The kit editor completely stops working when Javascript is turned off. This may not be a big concern because Typekit’s audience is going to be mostly web designers who are very likely to have Javascript on. Nonetheless, it is an edge case to think about when you’re developing your own web app.
   
3. The “Kit Settings” lightbox is a quick and convenient way to edit the kit’s basic settings, but there needs to be a better way to close the box. Currently, I can’t click on the background shadow to close it and there is no “X” at the top corner like in desktop programs. All it would take to fix this problem is to add a close icon to the top right, like in the “Embed Code” lightbox.

Overall, the Typekit Editor is a beautiful and usable interface that always makes it clear as to what font you’re editing. The use of typographic styles to emphasize and attract attention to meta data is especially nice.

Typekit’s Performance

When I tested it, Typekit performed well, but how it will perform under a heavy server load remains to be seen. It will probably always work for a small web app or blog, but if Twitter decided to implement it on every profile page, how would it react?

Take a look at Typekit loading with and without a full browser cache:

Without Browser Cache

With Browser Cache

Benchmarks

Here are some request times for various scenarios on my Typekit demo page.

Pictures of Demo Page with Typekit (compared to the original page)

Overall

Typekit has an intuitive and beautiful user interface. It is a surprisingly fun and easy to use tool for replacing fonts on your website. It opens up a world of possibilities with its ever-expanding font library. With web pioneers like Jeffrey Veen behind it, Typekit is sure to keep pushing the boundaries of what is possible and pragmatic in web design.

Update: Notable is no longer in beta. It has been officially launched as of Sept. 23, 2009

Homepage

Five-second test

When I land on the homepage, I instantly know what this web app does. I see a screenshot showing the app in action and then a tag line to the left that says Notable is the “Easiest way for teams to provide feedback on websites.” Notable passes the five-second test with flying colors.

The rest of the homepage is pretty standard as far as web app marketing pages go. It has:

• A few of the main features with a little more about them in easily scannable bullet lists
• A clear next action link (Request an Invite») and a secondary “Sign In” link
• Two different options for support: a top tab and the middle of the footer. Notable gives me a lot of choices if I ever do need help, which tells me they have excellent customer service. I don’t have to go through some obscure contact form where I’m not positive I’ll actually get a response.
• Link to the tour of the app. It isn’t in the first place I’d look, but it’s still fairly easy to find.

Suggestion

• Switch the “Sign In »” button with “Take a tour »” and move the sign in link to the top navigation. It’s more conventional because users tend to look to the top right for sign in links.

What the homepage does well

• Doesn’t give me too many choices. On the homepage, my only prevalent options are to “Request an Invite” and “Sign In.” This helps split up Notable’s homepage audience. I don’t have the option to click on the feature list at the bottom to view an even bigger feature list. Notable wants to get people into the app as soon as possible, which should be the goal of your marketing page.

Invitation Process

When I go to the signup page, I’m a little confused as to why I’m requesting an invitation rather than just signing up like usual. Is Notable some kind of VIP-access club that I’ll never be cool enough to go to?

Nope. They just haven’t fully released their product to the public yet. On the signup page, I’m told that I’m requesting an invite to the private release, which makes me feel a little bit cooler. This page could benefit from adding a sentence explaining that the product is still being built and is not available to the public yet. I assumed that after a little while, but adding a clarifying sentence might help prevent some unnecessary confusion.

I request an invitation and get an email the next day inviting me to join the party! I’m impressed by their speed and it shows once again that Notable cares about their customers.

I’m immediately impressed by the fun copy in the email. It actually got me a little bit excited to try out Notable.

Things they do well

• Notable has real people behind it. Instead of getting an invitation email from the DO-NOT-REPLY robot mailer, I get one from “Bryan Zmijewski.” Just simply putting a name on the company emails gives me confidence in Notable and the people behind it.
• Notable has personality. Every instance of copy in Notable is conversational, which keeps me entertained and happy.

Inside the App

Once in the app, I’m greeted by a beautiful blank slate explaining my three options for uploading designs:

The bookmarklet option is perfect for me because I’m using Safari. They also make clever use of the cursor: move; CSS property for the bookmarklet link. As soon as I mouseover the link, I know to click and drag it because the mouse changes. It’s a subtle change, but it makes a world of difference.

Still riding the high from Bryan’s email, I get right into uploading screenshots. I upload them with bookmarklet: works perfectly. I upload them from a URL: again, works perfectly.

I get instant feedback saying the upload is in progress and I’m even informed I can leave this page while the request is processing. Bravo!

Suggestions

• Have an introduction video or link to the tour on the blank slate. The interface is intuitive so I don’t need help with that, but I’m worried I might be missing some cool trick Notable has up its sleeves and watching a 4-minute video demonstrating everything the app has to offer will give me more confidence that I’m using Notable to its full potential.
• Improve the readability of the yellow/orange action buttons throughout the app. Either make the text bigger or darken the color of the button for more contrast. They are a bit hard to read and they are an important part of the app.

The new buttons are not as pretty, but they are definitely more readable.

Adding Notes To Captured Sites

Adding feedback to sites is easy and intuitive. I just click and drag a box over the part I want to comment on, type my feedback, and hit “Save.”

Oh, and it’s done without a single bit of Flash.

This is the core functionality of the app; the bread and butter of Notable. It needed to be great and Notable pulls it off.

• It is intuitive. Anyone who has used Photoshop or even Facebook picture tagging is able to use this without a problem.
• It doesn’t have unnecessary features. I can’t add categories or tags to the notes, connect them to a bug report, or assign the design fix to a person.

The main goal of this screen is to provide feedback on a website design and I can do that without getting distracted by anything frivolous.

After I left my feedback on the visual side of things, I’m pleasantly surprised to find that I can also leave feedback on the underlying code of the site. This gives team members an easy way to give feedback to each other to improve the page’s coding. Just imagine the alternative: having to copy and paste code into an email that needs to be sent out to everyone and replied to by the right people. Sounds like it could quickly get messy.

Notable’s code comments provide a much cleaner way of leaving feedback on the code that makes the page go ’round.

Suggestions

• Title the post for me whenever I capture a site from a URL. Use the website title. It eliminates one step in my upload process and I can always edit it later.
• Make the “Cancel” button on the add note screen a link instead. It would attract less attention if it was just a lighter link. It is good how it is now, but it would be great if it was harder to mistake for the “Save” button.
• Give the “Note Tools” icons a tooltip to explain exactly what they are. Also, make the crop icon a bit more like the standard one in Photoshop and every other photo editing program.
• Put a “Save” button at the bottom right of the page. Although this isn’t a typical web form, I looked there for the “Save” button first and was confused when I didn’t find one. I eventually found the one at the top right, but it wouldn’t hurt to have another one down there.

Account Administration

On my account page, I can control my workspaces, users, billing, and my personal information. When I click the “Account” link in the top right (the first place I looked) I default to the workspace management screen. The navigation on the top right of the administration screen shows my options.

I really enjoy the immediately-noticed and concise title on each administration screen. Each description gives me more detail about what exactly this page does so I’m never left wondering.

Suggestions

• Have a basic account page that just lists my options. Right now, it takes me a second to realize where the other administration screens are because the navigation is in an awkward place.
• Allow me to cancel my account. I doubt I ever will, especially after using the app for a couple hours, but some people will inevitably want to leave. Take a page out of Kindling’s book and allow your customers to cancel and fully backup their data.

Brand

One thing I wanted to mention about Notable and ZURB, the company behind Notable, is how well they keep their brand consistent across each of their websites. ZURB’s homepage, blog, the Notable homepage, and even their emails have a thin border of color running across the page. It is accomplished in a few simple lines of CSS, but its effect on every customer is valuable. Repeat visitors instantly know that they are on a ZURB site and feel at home.

Ask yourself this when you’re making your next webpage:

How can I design and style the page so that a visitor will recognize it even if the logo and company name disappeared entirely from the site?

Another thing that impressed me about ZURB is how well they practice what they preach. There are little usability easter eggs hidden everywhere and it is an absolute delight to see some of them in action. They take the usability of this web app from good to great with subtle detailed changes.

For example, Notable’s signup page uses inline form labels. These labels mimic the functionality of the ones on MobileMe and are just as usable, if not more, than typical form labels. Inline labels help keep a visitor concentrated on filling out the form as their attention is always focused on the form field itself.

For more info about how they did this, see their blog post about inline form labels.

Overall

Notable was probably a bad pick for my second review simply because it sets the bar so high for the rest of my reviews. It is one of the most usable web apps I’ve ever used and with a couple little (and I mean little) improvements, it would be perfect. I felt instantly comfortable using the app and always knew exactly where I was thanks to helpful page titles and descriptions. Notable hasn’t even been released to the hungry masses yet and it already impressed me beyond what I thought possible for a “beta” site. I’m looking forward to more great things to come from the talented people behind Notable.

Homepage

Whenever I’m reviewing a site, I always time myself to see how long it takes to determine what the site is actually about. If I can’t answer “what does this site do?” within 5 seconds, there is a problem.

Five-second test

When I come to Kindling’s homepage, I focus on the logo because of its dramatic contrast with the white background. My eye then goes to the animated flash banner. It is a nice touch, but mostly unnecessary: it doesn’t help me understand what Kindling is. The headline to the right of the video is exactly what I’m looking for. I come across it in the first few seconds of coming to the site, but it should be given more visual weight. Make it bigger and bolder.

I see a screenshot in the top half of the page and I’m immediately intrigued. I soon realize it is a video, too. Oh goody! I click the play button and a lightbox takes over my screen. I patiently wait for the video to load, but it never begins to play. I have to click the play button again. That’s a lot of things that happen just to play a video.

How it should be

1. I click on the play button
2. The video begins playing immediately in the same place, similar to how it is on the features page.

If the video was bigger, it would make sense to use a lightbox, but in this case why waste the user’s time with the fancy lightbox.

Signing up for the free trial

The homepage provides a clear next action by having a large button directing me to “Sign up for a free trial.” I’ll pretend I run a small online retailer that:

• has 35 employees in different locations
• has many different categories of products

Based on my company, I have two choices of accounts: the Standard or the Pro. The biggest difference I see is the number of users and the number of rooms. I could give access to all of my employees with both plans, so I move onto considering the number of rooms. I soon realize I have no idea what a room is. I thought this was an app about sharing ideas, not some sort of chat room.

The mouseover text doesn’t help me either, it just puts the “10 rooms” into sentence form. It doesn’t tell me their use.

Since I don’t know what a room is, I decided to go with the “Standard” plan. The signup form is pretty standard (no pun intended).

Real time validation (using JavaScript) prevents errors and helps me get through the signup process as quickly as possible, which will get your customers right into your app.

I am concerned about giving my credit card information. I thought this was a free trial…

Kindling wants to have your credit card info on hand so they can charge you as soon as your free trial is up. This practice is understandable from a business perspective, but it can have consequences from users who sign up and accidentally forget to cancel their account.

Blank Slate

After I log in on my customized login page, I get to a page that tells me how to get started.

This page is pretty helpful, but it could use a little work to make my experience better as a first time user.

Suggestions

• Make the next action links bigger.
• Make it clear exactly where I’m going from the link text. “Take me there now!” doesn’t tell me much.
• Have more instructional videos displayed on the page, like the ones on the features page.

Adding an Idea

The process to post an idea is very simple, which encourages users to post more often. They don’t need to assign to-dos, permissions, or tags when they first submit it. The entire form is concentrated on the idea itself, obviously the central part of this app.

Voting for Ideas

The “Vote on Ideas” tab is an excellent way to get your employees involved in the decision making process. This is where the real magic of this app happens. Your employees can see every idea that’s been posted and vote for their favorites. Popular ones gradually rise to the top and to the attention of the decision makers in the company.

The colorful badges that show the number of votes make this app engaging and fun to use. I also like having a certain number of votes because it makes me think about what I want to happen.

Viewing an Idea

When I view an idea, I see all the information I could ever need, and even probably a little bit too much. I’m presented with 8 options on the left side. I’m still getting familiar with the app, so I’m not sure what each one does.

I like the comment forum. It encourages discussion about the idea and also informs users of changes in the status of the idea.

Suggestions

• Blend the eight options better with the design. Possibly integrate them into the idea information itself or consolidate them into a single dropdown button menu.
• Use tooltips for the options to help explain what they do. Expert users who know exactly what they do will never have to see them because they will click them too quickly. All it takes is adding a title attribute to each link.
• Put a video on the page for first time users explaining how to use the page and what each option means.
• Make the status changes look different than regular comments.
• Highlight the comments and changes made by the decision makers (CEO, COO, President, Marketing Manager, whatever it may be for your company). This will help let employees know that their voice is being heard by the people upstairs and encourage them to come back.

Making an Idea Happen

Once an idea is approved, it appears on the “Make it Happen” page. Here, an employee can volunteer to implement an idea and view ideas that other people have taken responsibility for. Once I click the “I’ll do it” button, I can click on the title of the idea and get to the idea page again.

It is mostly the same as before, but I see a green notice at the top letting me know. This is a nice touch to the design and also prevents any confusion for a person viewing this idea from any other page.

I then click the “Complete” button on the idea page (once I’ve actually done it, of course). I can head on over to the “Greatness Achieved” page to admire my hard work.

Suggestion

• Make a tooltip for each viewing option on this page. I have an idea of where the “Greatness Achieved” tab will go, but I want to be sure. Again, it’s just a simple title attribute for your link anchor.

Account Management

What I really love about this page is its simplicity. It doesn’t have the option to add your phone number, website, or title. This isn’t a contact management app, this is simply an idea sharing app. This eliminates unnecessary complexity.

Suggestion

• Make the default email notification “Comment” rather than “Always.” Getting an email for each status change, comment, and posting for every single idea can overwhelm your inbox pretty quickly.

Administration

For the final section of this review, I’ll take a look at the administration panel. It is accessed through a tiny link at the top of each page.

This panel probably won’t need to be accessed that often, so the text link provides plenty of accessibility.

Kindling offers some ability to customize your company’s page. The app does a great job of displaying a lot of options in a way that it easy to understand.

You have top level navigation on the left and individual options taking up most of the screen on the right.

I have the option to customize the default email notification (remember how I was hating on that before). I will give Kindling credit for letting administrators choose, but they should still default the entire thing to “Commented On.”

I retract my preview criticism.

If you want to cancel your account, you can easily do so from the “Payment Information” page. It is a bit confusing to find at first, but at least you can cancel your account without sending a request to Kindling’s support.

I’m kindly reminded that I will lose all my data if I cancel my account. I expected that, but what I didn’t expect was to be given instructions on how to export my data right on the cancellation page. Kindling is a helpful app, even if I’m on my way out.

This leaves me with a good impression of Kindling and even though I’m canceling, I might recommend it to a friend. Had it been a pain to cancel and no warning about my precious ideas (the future of my company) was displayed, I would’ve remembered Kindling as a horrible application, even if it was just my last moments that were sour.

Overall

Kindling is an excellent idea and it is well executed. I was confused at certain parts (mostly with what exactly a “Room” is), but that could be fixed with a better blank slate for first time users. For a small company, it might be a bit pricey at $49 a month, but it is definitely worth it to get feedback and ideas from your employees. Their the ones on the front lines so they know what is really going on.