

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

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.<p>What should I be thinking about when designing my Web app's home page?
======
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.

~~~
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.

------
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.

------
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.

------
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.

------
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).

------
jorangreef
A logo, three sentences (sans adjectives) re: benefits, and a button to start
using it immediately (make registration deferred and progressive).

------
inaequitas
I think Matt Legend Gemmel's post "Your App's Website Sucks"[0] is applicable
to all webpages. As others have said, you get a few seconds. Don't waste
customers' time with what _you_ think is important.

[0]: <http://mattgemmell.com/2010/06/20/your-apps-website-sucks>

------
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.

------
iterationx
I really like <http://www.boxee.tv/> 's little Einstein trick.

------
keefe
based on what you have said so far you should be thinking :

    
    
               less is more

