HN Explorer

Ask HN: What's wrong with the landing page of my website?

12 points by pankratiev ↗ HN
I built an aggregator of programming stuff, which provides to every user a personalized feed of posts according to his interests. Users have the option to submit links, notes, code snippets and discuss them. The key feature is that you see only posts that are relevant to you.

It seems that the landing page has some concerns with explaining this idea.

Could you please give your feedback about it?

Website: http://tagmask.com

Thanks

32 comments

[ 3.1 ms ] story [ 92.0 ms ] thread
grovulent
Too much text. Distil the value proposition of your service into a single sentence or two and put it in a nice big font so that I can get the gist in a couple of seconds.

The extent to which you already do this isn't really effective:

"Your personalized view of the programming world"...

doesn't mean anything to me. Plus you've used a relatively soft colour to this header - which doesn't really attract the eye all that much.

If the value proposition at a first glance seems interesting to me - then I'll expend the effort in reading more text.

my two cents...

pankratiev
Thank you for the feedback! I see my mistake with texts, I definitely should rework them.

> Your personalized view of the programming world

I wanted to point on a personalized feed, but didn't tell anything about that it's a community site/aggregator of programming stuff. Definitely need another sentence. Thank you again!

vladd
Put the text into bullet point lists, they are easier to read visually, they separate ideas clearly and it's easy to jump to the next item on the list.

Consider an iframe or a sample of http://tagmask.com/posts if you don't want to actually have that as a homepage. People are much more likely to "get it" by showing an example rather than a description.

pankratiev
Thank you for suggestions. I think I should make the demo of a posts filtering, which will allow visitor to try Tagmask in action without registration.
_pdeschen
Yes. Maybe change your sign up button for a get started call to action, allowing one to play around without registration then offer registration as part of the top nav in order save a user state. Something like that.
gohat
It needs some graphics and touching up to look nicer.

The very popular style for this type of website is to have the Your personalized view of the programming world and sections underneath in a highlighted box with the other elements, Use your personal posts-filter, etc, as small, clickable boxes underneath.

See: http://tweetingmachine.com/ (not the best example, but first one I can think of)

hope that helps, cheers

snsr
It's not immediately apparent to me where my tags will select/filter content from. HN? Twitter? Everywhere?
pankratiev
It's about filtering posts submitted on Tagmask.
nametoremember
How do you filter spam? Can't I just submit a post and give it tags that aren't relevant?
pankratiev
Unfortunately there is no automatic mechanism to identify such posts. For now, I should delete spam manually. Fortunately, I didn't see any spam-post yet.
andrewcooke
second this. also, because "Demo" was a different colour, i assumed i was already on the demo page...
zenspunk
As others have already stated, you need to make the important info stand out, and cut the rest. Read a few design blogs to get some tips.

Aside from that, how is tagmask different from reading your favourite programming reddits? i.e. reddit.com/r/python+django+haskell+ruby+rails ?

reddit has more features, is easier to use, and has a larger community.

How is tagmask going to differentiate itself?

pankratiev
Tagmask provides more flexible filtering.

1. You can block posts with particular tags. For example, you can see post with the tag "javascript", except posts with the tag "asp.net".

2. You can block posts by a particular user in case if his posts is not interesting to you.

3. Tagmask provides filtering by your personal points for a user, it's sum of your "Likes" minus "Dislikes" for a user. When it becomes less than threshold you specified, you will not see posts from this user anymore.

In other words, Tagmask main purpose is to provide only relevant posts to every user.

Another key feature is that it's fully focused on programming, so we can add to it any special features, which make sense only for programmers. For example, it supports the post type "Code snippet" http://tagmask.com/posts/add/code_snippet Feel free to submit.

_pdeschen
I would get rid of the full text. Create a few sliding banner with h1 headers with one including a sample of how it looks then move explanation details in a separated "How it works page" available as a top nav link.
iambot
yeah i agree with other peoples mention of lists vs solid copy, and i think a nice combination of headline font and body copy font would help, at the moment everything is very same same.
tylerdiaz
Took a minute or two to offer a suggestion template: http://pixeltweak.net/uploads/tagmask-20110501-103238.jpg

It's simple, so you don't overload the visitor with information. But it does the 2 things I assume you want the best: What Tagmask does, and how to get started.

gpambrozio
Wow, cool job. I was just going to suggest the 1-2-3 approach to his landing page. You're really talented! Only 2 minutes, wow....
jodoherty
Click on Posts. See how it shows "All posts (unfiltered)"? Make that your front page. Put a tag cloud at the top. Change the page title to say "Share programming links and filter them with tags" instead of "your personalized view of the programming world."

It took me 5 minutes to figure out what your site was with all the vague copy writing everywhere, and that's only because I clicked on Posts. If you had simply presented the functionality of your site on the front page, I'd have known what it was right away.

jodoherty
Also, I'd suggest letting people set up tag filters without accounts. Even if they don't persist beyond a single visit, it allows users to see just how useful this tag concept is without any commitment, making them more likely to use the site. They'll also be more likely to sign up for an account since they already spent some time making a filter and might want to save it.
pankratiev
You're absolutely right! I've added your suggestions to my to-do list. Will be ready soon. Thank you so much!
allenc
Some things just from a design and aesthetics standpoint:

- More white space. It's the easiest way to lose the "cluttered" feel of having giant blocks of explanatory text.

- Vary the fonts and font sizes. In particular, your nav. bar's font sizes are too big and distract from the section titles; you can lose the nav altogether for a landing page.

- Have a consistent coloring scheme. Pick 2-3 colors (maybe the ones from your logo) and stick with them: one color for the titles, one for links, one for text. E.g., using light purple for your secondary title text at the bottom makes them look like links.

- Make the "sign up" button stand out more. That's your call to action, and right now it blends in with the background.

pankratiev
Thanks a lot for useful suggestions. Actually, I am not a web-designer, so sometimes it's hard to choose the right color and size. I've added your comments to my todo-list of improving Tagmask. Thank you again!

I am curious, what do you think about the logo?

allenc
Right. The general idea is: the bigger the font size, the more people will notice it, so make the irrelevant stuff small and the attention-grabbing stuff big. As to colors, I just saw something someone else posted that can help you develop a coherent color scheme:

http://www.techiemania.com/5-awesome-free-tools-to-help-you-...

And another article with good design pointers submitted to HN:

http://www.visualmess.com/

As to the logo, the same ideas apply: more whitespace between the title, tagline and "beta", vary the font faces to provide contrast, and try using contrasting primary colors to make it a bit more dynamic.

pankratiev
Thank you very much for the comment and links. They are very useful to me. I would like to show you Tagmask after reworking.

And what do you think about the picture itself in the logo? I am worried that it is too ugly.

allenc
Eh, I can't draw myself, so I probably can't comment on good logo design. I think as long as it's clean and distinctive - branding your app - it should work well. You can always hire a designer to redo it when you gain some traction.