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.