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.