4 ms·

A Better HN: Aligned

32 points by nwienert 15y ago

nwienert 15y ago
I do know this breaks the site in many areas. It's just a proof of concept for the home page.
holyjaw 15y ago
Hah looks great. I just use hckrnews.com, though.
- arunoda 15y ago
  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.
captn3m0 15y ago
A lot of other styles for HN are at http://userstyles.org/styles/browse/ycombinator 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 http://userstyles.org/styles/16041/hacker-news-readability
- tommi 15y ago
  Readability looks good until you read the comments. Then it just breaks down.
- polyfractal 15y ago
  I like this version (not a user-style, but a scraped/redisplayed version): http://hacker-newspaper.gilesb.com/ http://hacker-newspaper.gilesb.com/
guynamedloren 15y ago
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.
- arunoda 15y ago
  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.
  - nwienert 15y ago
    The numbers serve no purpose whatsoever, I've never understood why they are used.
human_error 15y ago
It's hard to read the usernames.
kyro 15y ago
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.
- nwienert 15y ago
  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.
  - sandGorgon 15y ago
    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.
- drostie 15y ago
  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.
thebigredjay 15y ago
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.
stevenj 15y ago
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.
- nwienert 15y ago
  Check out the updated version
iamjonlee 15y ago
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 http://www.grooovy.me/HN.jpg
arideden 15y ago
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.
- aw3c2 15y ago
  In Opera scrolling is in tiny increments and eats a whole CPU.
  - danso 15y ago
    Yes, scrolling on an iPad is torturous. What is causing this? An over active scroll handler?
octotoad 15y ago
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.
- polyfractal 15y ago
  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.
- nwienert 15y ago
  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.
twsted 15y ago
Sorry, no.
hxa7241 15y ago
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).
Produce 15y ago
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.
vdugar 15y ago
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.
nwienert 15y ago
I've updated it so it doesn't break article pages anymore.

32 points by nwienert 15y ago

nwienert 15y ago

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

holyjaw 15y ago

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

arunoda 15y ago
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.

captn3m0 15y ago

A lot of other styles for HN are at http://userstyles.org/styles/browse/ycombinator 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 http://userstyles.org/styles/16041/hacker-news-readability

tommi 15y ago
Readability looks good until you read the comments. Then it just breaks down.
polyfractal 15y ago
I like this version (not a user-style, but a scraped/redisplayed version): http://hacker-newspaper.gilesb.com/ http://hacker-newspaper.gilesb.com/

guynamedloren 15y ago

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.

arunoda 15y ago
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.
- nwienert 15y ago
  The numbers serve no purpose whatsoever, I've never understood why they are used.

human_error 15y ago

It's hard to read the usernames.

kyro 15y ago

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.

nwienert 15y ago
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.
- sandGorgon 15y ago
  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.
drostie 15y ago
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.

thebigredjay 15y ago

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.

stevenj 15y ago

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.

nwienert 15y ago
Check out the updated version

iamjonlee 15y ago

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 http://www.grooovy.me/HN.jpg

arideden 15y ago

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.

aw3c2 15y ago
In Opera scrolling is in tiny increments and eats a whole CPU.
- danso 15y ago
  Yes, scrolling on an iPad is torturous. What is causing this? An over active scroll handler?

octotoad 15y ago

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.

polyfractal 15y ago
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.
nwienert 15y ago
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.

twsted 15y ago

Sorry, no.

hxa7241 15y ago

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

Produce 15y ago

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.

vdugar 15y ago

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.

nwienert 15y ago

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