A Better HN: Aligned | Hacker News Reader

A Better HN: Aligned

natewienert.com

32 pointsnwienert29 comments

I'm sure it's been said before, but I don't see why there's this obsession with fixing what isn't broken. Seems like change for the sake of change.

The current layout puts the most important element ahead of all else: the headline, the link title, or whatever you want to call it. Everything else is secondary.

I don't particularly care who submitted it, what the amount of comments are, or the ranking, until AFTER I've read the article/page. If it's good content, upvote it. Isn't that the point?

I have liked some of the styling/design ideas people have come up with, but every one, as many have pointed out, just breaks things up in a way that makes it more difficult to digest what's being presented to me.

To be fair, HN is a usability disaster. Grey text on all "Ask HN" posts? Grey text on comment headers? Horrible wall of text on the frontpage? The fact that the New page shows too few posts and everything scrolls off so fast?

Hell, I literally browsed HN for my first month without realizing that there was a "Front Page". Yes, I only read the "Ask HN"/new/comments sections because that's all I thought there was. I'm not the sharpest knife in the drawer, but HN is no epitome of design intelligence either.

As per your critique, the updated version of this still keeps every priority. All it does is add some much needed spacing, fix some alignment for easier browsing, and simplify the coloring.

This is a critique I had with the other HN redesign: I don't think making a submission's point score front and center is a good idea. You're making it important, even more so than the actual story is by placing it on the same line to the left of the story title, and also by increasing its weight.

The left side is correct for a very particular reason: things on the left can be lined up into nice little columns, where it's easier for your eye to visually ignore them if it doesn't care.

I think you might be right, though, about the weight gain of the points. Points should be clearly labeled as points by putting a + sign in front of them. Comments should clearly be labeled with a comment icon, rather than the text -- this was actually something the other design got kinda right, but it put them in an ugly place (on the right, where they add to visual clutter), and it insisted on placing the number inside the comment bubble for no good reason.

That leaves the bottom bar to contain something like:

    ( ▴ | ⚑ | @meteor.com | nim, 3 hours ago )

although I guess if you really want we can keep the upvote button off to the far left.

I actually agree and I've made updates and updated the code on the article. I'll update the article with the proper screenshot here in a second.

actually i disagree for a different reason - it has less to do with what is important, but more to do with usability. there are two things you can click in a story - the story itself or the comments. i actually like putting the points+comments to the left (302 points...21 comments) and making this part clickable.

really helpful especially on a mobile phone.

A lot of other styles for HN are at http://userstyles.org/styles/browse/ycombinator .

I personally am a fan of hckrnews.com though.

My current userstyle for HN is Readability[1]

[1]: http://userstyles.org/styles/16041/hacker-news-readability

I like this version (not a user-style, but a scraped/redisplayed version):

http://hacker-newspaper.gilesb.com/

Readability looks good until you read the comments. Then it just breaks down.

I like yours but black and white text becomes VERY tiring to read after a while.

I'd like to suggest this one:

http://www.grooovy.me/HN.jpg

I support the effort of these HN redesigns, as I think innovation is important in any field or hobby.

But I just haven't come across one yet that I think is better than the current site.

One of the things I like most about the design of the site is its consistent use of one style. For example, the styling of the entire second line of a submission (below the title) uses the same color, font, font-size, lowercase-type, and spacing throughout.

It's also nice that all of the relevant information for a submission is contained in that second line -- # of points, username, submission time, # of comments.

Check out the updated version

Hah looks great. I just use hckrnews.com, though.

Hmm, Somewhat looking great. But we can't vote and comment there ne? If it is having a way to read comments, that would be nice at least. Because most of time I refer Hacker News because of it is having a great community voice.

IMO, this is worse than the current. Displaying the points, author and comment links as floated on the right (for widescreen), and under the story link on narrow screens is a better improvement.

I skim submission titles and consider everything else subtext. The titles aren't distinguished enough for me here, I find my eyes jumping around more than I'd like them to.

Put the color back (top bar and background) -- that is pretty much the entire graphical identity of the site (i.e. a distinctive, recognisable visual character).

Not bad. I appreciate the fact that there are no numbered rankings, simply because I think it's unnecessary information that provides no value. Though I would probably flip the positions of the points and upvote buttons; there's an association formed between the title and voting, and you're essentially breaking or fragmenting that connection by moving the button away from the title.

Numbered ranking is good but now with this UI, it get distracted for the reading. I suggest a way to put the rank as just as it is now. The design is neat to me.

The numbers serve no purpose whatsoever, I've never understood why they are used.

I do know this breaks the site in many areas. It's just a proof of concept for the home page.

The linked to website's CSS doesn't work with Firefox - under Safari its all nicely centralized, but with the most recent stable Firefox there's a massive white sidebar on the left hand side so you have to scroll to the right to see all of the image.

In Opera scrolling is in tiny increments and eats a whole CPU.

Yes, scrolling on an iPad is torturous. What is causing this? An over active scroll handler?

Design tweaks are beneficial if they actually make using HN easier. I really have no problems with the current layout, and I don't see how a more aligned HN helps me or makes it "better". Functional is nice. Or it could just be me.

I've updated it so it doesn't break article pages anymore.

It's hard to read the usernames.

Sorry, no.

Reply on news.ycombinator.com