HN Explorer

Ask HN: What makes a great Web app home page?

15 points by gacxllr9 ↗ HN
Designing the home page has proven to be a challenge in the past week. There is so much information to include that I'm not sure what to do. Obviously, I'll have links to the site's Facebook and Twitter page, a brief explanation of what the Web app is and a brief explanation of what the Web app does. I'll also possibly have a newsfeed that spits back the recent activity on the site, ala Facebook's real-time newsfeed.

What should I be thinking about when designing my Web app's home page?

23 comments

[ 1.8 ms ] story [ 69.1 ms ] thread
chime
Your problem reminds me of this story:

    A little boy sat on a stump, contemplating a chunk of wood in his hand.

    "What are you going to do with that?" his father asked.

    "I'm going to carve an elephant," the boy said, confidently.

    "Do you know how to go about carving an elephant?"

    "Easy," the boy replied. "All I have to do is
        cut away everything that does not look like an
        elephant."
Figure out what really needs to be on your home page. Don't put everything on there. In fact, remove as much as you can. Merge the two brief explanations (what web app is + what it does). Put the links to FB/Twitter in bottom or top bar so that they do not detract from the main contents.

Primarily, add a "Get Started" button or some other action cue. If at all possible, include a short video that shows how to use your app. I wouldn't bother with newsfeeds etc. unless it is core to the app's functionality.

[dead] dreadlabs
I like your story, in a weird recursive way your story reminded me of a quote i've remembered.

"You know how you design a plane? You leave out anything that aint the plane, cuz the damn thing gotta fly."

jorangreef
A logo, three sentences (sans adjectives) re: benefits, and a button to start using it immediately (make registration deferred and progressive).
jasonemerick
Create 2 versions of the home page that you like and then A/B test them to see which one performs better. Go with the one that performs better or add some more tweaks and more A/B testing.
pkulak
This is a good idea, but really only works when you have enough traffic already.
j_baker
Tell me what the thing does and why I should care with as few details as possible. Once I care, provide me a way to fill in the rest of the details.
jasonkester
What should you be thinking? Simple:

"I have 5 seconds of this guy's time."

... and then only if you're lucky. Once you realize that, everything else follows easily. Your first goal is to answer "what does this website do" in six words and stick that message in a place the user can't miss.

Next up is a clear call to action. A "Solve My Problem Now" button that takes up a third of the screen and can't be missed or mistaken.

Then you have 3 other elements to play with (At a maximum, a user will be able to process 5 things about a page, and you've already used up two). I'd go for a couple bullet points explaining benefits (not features), and some form of graphic showing that benefit happening in a spectacular way.

And that's it. That's all you get above the fold. Feel free to add more stuff, but make it low key and below the fold. The 4% of your visitors who are still around and curious can read it, but the rest will have bounced or clicked the signup button already. The facebook/twitter stuff you mention goes all the way down in the footer.

Examples (my own):

http://www.fairtutor.com/

http://www.twiddla.com/

Visit each one for 5 seconds, then come back here and see if you can remember what they do. If you can't, I've failed. If you can, I've probably still failed. But if you get stuck and click the "Go" button, I win.

[dead] access_denied
Excellent. Can't support it enough. One minor caveat: you can do all this right and yet completely destroy it with a messed up layout (aka graphic design). The layout has 2 functions:

1) make the points of the Parent 'work (readability and such)

2) instill trust in your business (first impression by well done design)

loewenskind
Your Spanish teaching thing is really cool. Can you do one for French? There are some countries in Africa where you can probably take advantage of similar wage differences.
loewenskind
One nit though: I had to go through a few links before I found out if it had voice or not. I don't believe in learning by reading (how old were you when you learned to read your native language?) and all I saw on the first page was text. Maybe I should have assumed it would have voice but so many people are hung up on learning a language from reading that that's never a good assumption to make.
jasonkester
Thanks for that. I'll try to cram that onto the homepage someplace. If it's not obvious to you, it won't be to anybody else.
loewenskind
Yea, that's why I decided to mention it. I think it's a great idea and really important for learning a language.
jasonkester
French might well be the next vertical.

The plan for now though is to focus on just doing one thing really well. There are plenty of sites that have poured lots of money into doing online tutoring in the general case, and there are plenty of smaller sites that do online Spanish tutoring acceptably. But everybody with funding has thus far gone the way of being generic, so there's a gap waiting for a really good site doing just Spanish.

At some point, we'll outgrow it (hopefully), and "French by Moroccans and Guyanans" might be the next one.

honopu
Great info.

I have noticed this set of graphics on various websites, not necessarily the same characters, but it has the same general style. Are these available as a set somewhere?

jasonkester
Indeed. Ever the ones for brand originality, we're using artwork from iStockPhoto. At some point, I'll probably commission an illustrator to redo it all, but for now it works OK.
jeffepp
wow those are two of the nicer home pages I have ever seen...
ElbertF
What you need is a catchy heading and a brief explanation of the app, not more than a few lines of text (graphics can help too). You want to get your visitors interested enough to click through and not be overwhelmed by to much information. Don't clutter your front page with social media buttons and other needless stuff. Don't show a huge list of features either, you may think it's awesome but most people don't care.

Showing recent activity on the front page might be a good idea if it helps explaining the app (the way Twitter does it).

AmberShah
I decided NOT to put a feed of my twitter activity. The way I see I did it was I first figured out my ideal scenario (the user signs up or does a demo or something) and highlight the most. Then I add some info and other stuff that all focuses the user on doing what I want them to do.

The second biggest link is the "learn more" or "see how it works" (or whatever you want them to do next) link.

I am including (small) twitter and fb links but NOT a feed of activity. The primary purpose of running my twitter and fb account is to draw activity TO my site, so why would I want to send someone away if they actually make it to my site in the first place? I do realize that some people may opt not to signup, but want to stay informed, so that's why I'm including the links at all.

Basically, focus on directing the user where YOU want them to go. If they don't want to do that, what do you want them to do instead? And if they don't want them to do that, what do you want them to do instead?

I think we're so heavily ingrained with the idea that we have to include lots of "stuff" on the homepage (like twitter feeds, etc) that we forget what we're even trying to do.