

Ask HN: Review the landing page of my web TV app - ww520
http://www.topchan.tv/about123

======
sinaiman
Looked like one of those fake ad landing pages at first glance. I think the
reason for this is that there is a lot of whitespace (maybe off-white would
work better) and the header text isn't stylized.

Additionally the slogan "Watching Web Videos Is as Easy as Watching TV" seems
too long, I had to read it before I really understood it...imagine that! It
really is a simple sentence, but somehow the meaning was a little obfuscated
by its layout and sizing. I think the main reason for this was that the text
was too big...bigger than the "Topchan.tv" text at least.

The 3 steps could definitely pop a lot more. Adding background colors to those
boxes should help with that. They have to look separated, not really mixed in
with all the other text.

You could replace the text "Watching Web Videos Is as Easy as Watching TV" and
"Let you watch web videos like regular TV" with just "Watch web videos like
regular TV", much more concise.

The try it now button seems uninviting, probably because of the mechanical
looking font.

You could probably reduce all 3 steps into 1 step of "Try it now!" and just
have a button.

You could get rid of everything else and just have the text "Watch web videos
like regular TV" (centered) and under it have a button that says "Try it now"
and I think it would come across better. You should then also have a "Learn
More" button where you can have more text. Text is distracting, your goal is
to get them to click the button, make it a focus.

Just my 2cents

~~~
ww520
Marketing message is kind of weak. I like the more concise text.

You are right. The 3 steps are superficial. I have trouble coming up with 3
steps. It's really just 1 step.

Great feedback. I'll make the changes to simplify the page.

------
crikli
1) Compress all of that stuff into a dickbar at the top of the home page (not
the landing page you've linked to...get rid of that altogether) along with a
button that allows them to dismiss the explanatory/walkthrough text. E.g. a
nice 100px high welcome bar that says who/what/why. Alternatively you could do
a screen overlay. But get me right to the content.

2) Once I get to the page, the iconography isn't very intuitive. I have to
hover over each icon to see what it does. You're making me figure out that
there are channels and segments and clips. I assume that segments are made up
of clips and are shown on channels? Or are clips made up of segments? Probably
that one. But you see what I mean? Maybe put the hover text beneath each
action icon.

3) Adopt a more common convention for your icon organization. You've got this
2x5 grid but...people's brains are used to media interaction icons being
horizontally organized from left to right, from "previous" to "next", with
play/pause at the center.

~~~
ww520
Great feedback. I like 1, to have an overlay popup window for explanation.

Basically, channel contains segments, segment contains clips. Segments are
groups of clips, for grouping time-related clips or topic-related clips.
Youtube videos are often broken into multiple clips (show1 to showN). You are
right. It's kind of difficult to explain the hierarchical organization in one
shot. Viewers just want to watch TV; don't care about organization.

The 2x5 control grid is supposed to mimic TV remote, to place on right hand
side vertically instead of horizontally to avoid obscuring the vertical screen
space. There's a scrollbar at bottom for finer playback control.

------
ssharp
It feels like a spam page. Pages that look like this usually are littered with
AdWords. In fact, after my one-second initial scan, I thought the category
links were AdWords. Aside from that, here are my quick thoughts:

1) The banner / feature being incorporated takes away from the initial impact.
Separate these out and place the feature image with the headline text. Here
are some WooThemes that illustrate this:

<http://demo.woothemes.com/?name=sealight>
<http://demo.woothemes.com/?name=delegate>
<http://demo.woothemes.com/?name=optimize>

2) Spruce up the "Start watching on Topchan.tv..." section. The typography
isn't too bad, but it's bland. Play around with backgrounds, borders, and
images, to make it more visually appealing.

3) The logo is blurry and the Topchan.Tv text next to it doesn't really feel
like a logo. Make your logo stand out a bit more. To do this, try making the
text and image work together. Also, don't feel like the Topchan.Tv text part
of the logo needs to be HTML text. It can, and probably should, be an image.

4) The category links don't stand out at all. The text could be bigger. I'd
play around with styling that a little more as well. Mix bold with regular
text. Use lines to separate them. Let them breath with some whitespace.

5) The "Try it Now" button: make it orange instead of blue and change the
font. I'd make the bevel a little more subtle as well.

~~~
ww520
I don't realize too much white space make it feel like spam page. Those
WooThemes are nice.

The Try It Now button probably makes it feel like asking people to buy
something. The site is completely for free.

Yes, needs a new logo.

Great feedback. Thanks.

------
vellum
The logo - Carve a logo out of the banner and stick it in the top right.
You're wasting a lot of screen space. Shrink the height to around 85px.

The Try It Now button → Use a more normal font and regular capitalization.
Also, change the button text to “Start Watching! >” Increase the padding or
shrink the font. Also, use a lighter gradient. Top part is whiter, bottom part
is darker. Make a hover state for the Try It now button. You can just reverse
the gradient.

Get rid of the header and entire paragraph underneath "Watch Web videos like
regular TV." Put "Watch Web videos like regular TV." under or next to the logo
as the tagline. The description isn't helpful and for a video product, you
want to show not tell.

I'd make a series of screenshots and arrange the steps alongside vertically
instead of horizontally. Make them animated and include big arrows and Labels.
"Surf channels by clicking here" "Surf categories by clicking here."

The remote control -> Put small labels or mouseover css overlays for the
buttons. People aren't going to wait for the alt text mouseover.

One of the strengths of web video is the ability to have more information
about what's next. Put some information about what the next channel and
previous channels are.

Also, think about prefetching the screenshot previews of the next few channels
so they can load faster.

~~~
ww520
"Watch web videos like regular TV" is a good tagline.

Actually the page has little content. I'm struggling to put more on it.
Shrinking the header image bar to 85px would make the screen more empty. Also
I'm taking up suggestion by others to reduce the 3 steps to 1.

Screenshot is a good idea.

Showing tooltip right the way on mouseover on the control's buttons is very
good idea.

I actually deliberately not showing preview thumbnail strip on the screen. I
found them distracting. I rather let the viewers concentrate on the current
video. However, the Channel Guide can definitely use more preview thumbnails.

------
acrum
Interesting idea I guess, but the design looks horribly outdated... could
really use a designer's touch.

"Watch web videos like TV" and "try it now" are the two things that people
really need to see. Your "try it now" button should attract more attention..
you can try repositioning it, or increasing the size, or changing the color.

Add a header above the channels at the bottom saying "our channels" or
something. I didn't realize what those links did until I clicked them.

~~~
ww520
Definitely can use a designer's help. Yes, shorter messages are better.

------
MatthewB
Little bit boring to be honest. The green color used for the topchan.tv is
pretty ugly.

I think you should really highlight the 3 steps, put boxes around them or
something. Make them the centerpiece to your landing page.

~~~
ww520
Green color probably doesn't work too well. What would be a good color?

I'll reduce the 3 steps to 1 like others suggested and simplify the message.
Thanks.

~~~
MatthewB
I'm not a designer but I know when something looks good:)

Just try to keep the color scheme consistent.

