4 ms·

Ask HN: Review the landing page of my web TV app

9 points by ww520 16y ago

sinaiman 16y ago
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 16y ago
  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 16y ago
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 16y ago
  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.
acrum 16y ago
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 16y ago
  Definitely can use a designer's help. Yes, shorter messages are better.
MatthewB 16y ago
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 16y ago
  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 16y ago
    I'm not a designer but I know when something looks good:) Just try to keep the color scheme consistent.
ssharp 16y ago
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=sealight http://demo.woothemes.com/?name=delegate http://demo.woothemes.com/?name=delegate http://demo.woothemes.com/?name=optimize 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 16y ago
  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 16y ago
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 16y ago
  "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.

9 points by ww520 16y ago

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 16y ago
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 16y ago

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 16y ago
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.

acrum 16y ago

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 16y ago
Definitely can use a designer's help. Yes, shorter messages are better.

MatthewB 16y ago

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 16y ago
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 16y ago
  I'm not a designer but I know when something looks good:) Just try to keep the color scheme consistent.

ssharp 16y ago

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=sealight http://demo.woothemes.com/?name=delegate http://demo.woothemes.com/?name=delegate http://demo.woothemes.com/?name=optimize 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 16y ago
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 16y ago

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 16y ago
"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.