Usability trumps aesthetics in UI design

I recently started checking out an online collaborative desktop service called Kohive. I'm probably not going to bother with a full review because while I am interested in new communication options, the desktop metaphor seemed largely out of place online, particularly since they didn't really maintain any other classic UI elements. The truth is, the thing that stood out to me most about Kohive had nothing to do with the app itself, but instead with a poor interface decision on the landing page.

We've talked previously about the basics of a good landing page, and kohive.com actually does a pretty good job on our checklist. They have a clear call to action, don't have a ton of clutter, but still provide plenty of information "below the fold." I think they could do a touch better on making it obvious what their product does, but if you read through the subtext in the main panel, you get a decent idea pretty quickly. Here's a screenshot of the page when you first load it.

As I was looking around the landing page, I scrolled down to check out the additional content on the page, and the "features | apps | faq" navigation bar stuck to the top of the page as I scrolled, which on first glance seemed like a clever way to focus on the below-the-fold content. After reading through the rest of the page, I decided to sign up and try things out.

If you look at the scrollbar in the screenshot, you'll notice that I've scrolled all the way to the top of the page. The original pane with the video and the old signup button was no longer available by scrolling. Focusing in on the top right of this page, you can imagine what I did next.

I typed my email address and a new password into those two fields and hit enter. After doing so, the entries turned red and nothing else changed. I repeated this process a couple more times before clicking on the "SIGN UP" button, and realizing what I'd done wrong. The sign up button restored the top pane of the page, letting me get to the main sign up form. Those two fields immediately above the SIGN UP arrow in the screen shot are obviously (now) meant for existing users to sign in. Obviously (then) I didn't know that, and as such, I got started off on the wrong foot before I even loaded the main Kohive app.

Given the laborious description I've gone through here, this probably seems like a pretty obvious UI problem on the main page. If you put yourself in the shoes of the site designers though, it's not hard to see how this showed up. The Kohive designers were clearly going for an attractive interface that still had some uniqueness to it. The extra button doesn't take any more clicks to sign up (because clicking the second button opens up the sign up form), and overall, I think the site does look pretty slick and uncluttered. Given all those things, I can imagine how the basic problem of having a huge arrow pointing to the wrong field slipped through the cracks.

I mentioned all this not to make a point about Kohive, but to make a point about design, and how easy it is to get caught up in the look and the feel without thinking about the basic functionality of the page. Whenever Tyler and I mock up a page, we're sure to have the other look over it independently to try and find these types of things. For something as important as a landing page, you're hopefully getting as many people as possible to check things out, but it's also important that some of those people have never seen the page before. Sometimes the most basic problems are only obvious to the people who haven't already poured over the minutiae of the design for hours.