1) it's harder to visually skim down the page looking for interesting links because the row spacing is too high. The background being white and the text black also doesn't help this. Softening either the font color or the background is a common trick to making things feel more comfortable.
2) clicking into the comments being way over the right is something of an anti-pattern, infact all the information placed to the right of the post title/link is far less useful than the link to the comments to the point where the user that posted it and when it was posted is entirely irrelevant to me yet logically due to the position has higher priority.
3) points should be on the left as the up arrow and points are implicitly linked in a functionality -> data relationship.
4) the margin between the left border and the index number and the other margins is jarringly inequal. I'm guessing it's double due to the way you've specified margins.
Similarly the margins that create the leading between the rows on the first (and bottom margin on the last) and subsequent rows has an unpleasant inequality.
5) the uneven baseline (the HN in the logotype and the K) in the header over-emphasises the height of the font used for the title and links in the header and gives the impression that it might not all quite line up when it does.
6) also in the heading the kerning is too tight for the size and color choices of the font which makes it feel more blurry and rough than needed/intended.
Biggest problem that I wish someone would address is usability for mobile. About 1/3 of my time on the site is with my phone. Trying to select the Comments link instead of the article link is like playing Operation. Same for upvoting.
I'd like the following in HN:
1) Keep not requiring JS
2) White background; the low-contrast design of HN is one of the things I hate secondmost
3) Move upvote/downvote arrows, article title, submitter, flag, etc. apart, so someone using an iPhone/iPad never hits the wrong thing.
Ideally, also make actions like voting revocable, and show my current vote for confirmation (e.g. if I've upvoted something show me a highlighted upvote arrow which I can select again to remove; don't just disappear the arrow.
You also would ideally support the "special" HN functions -- e.g. when YC sends out questions to an applicant, it might not be seen if you never use the "real" hn site, so a reskin might be an issue.
The mouse distance to go from the link's text to the comments seems really far, IMO that's the most important link per row. I thought the points section was the comments.
- Zero-indexing the post list is cute, but I don't think it helps with clarity.
- On a similar note, you've made the ranking a lot more visible, whereas before it was information I largely ignored. I'm not convinced it's actually important information
- I prefer chunky triangles to thin arrows to signify upvotes.
- By moving the secondary post information (points, author) to the side, it's become less clear that it's not part of the title. I'd increase the typographic contrast here.
- Number of comments is probably the 2nd thing I look at after the title, having it over on the right makes it harder to visually associate the comments count + link with its submission. Zebra-striping could help, but I'm not convinced having it on the right is a good choice.
- You've dropped the ability to flag posts, is this deliberate or an oversight?
Overall I like what you're trying to do here, but obviously any changes to the design are going to be a hard sell.
I've never been too fond of how HN looks, but the more attempts I see to improve it the more I realise how good the current design is. It may not look pretty but it works very, very well.
It got updated maybe a few weeks ago. The style was tweaked and I think there were some changes to fix how the 'Last Visit' break is shown. When I go to read HN I type hckrnews.com.
I think the non flashy design of HN is a feature. eg. hilariously unstyled login page. It means people need to use their brains to realize why all these people congregate here : for the content and discussion.
If the site is altered to make it easier to post and comment faster then I am guessing the quality of conversation would go down. Currently you are aware that the comment needs to be well written and not frivolous. Anything about the interface that makes it faster to read and comment will move the usage in the direction of frivolity.
It's very reminiscent of early reddit, with its ugly interface. The ugly interface was actually a feature and a usability bonus. It kept out a lot of riff raff that tried to migrate to reddit from Digg (which at the time had a larger community).
I think HN should have an element of difficulty to its UX, because that keeps the user standard high.
* I made the background not white, which seemed to be hard on the eyes; I decided to keep the color scheme from orignal HN.
* Changed vote button icon; moved point count together with the button.
* Moved comments from the right to the left, closer to the link and vote button. Reason: it's too important of an element to have it be all on the very far right.
* Moved less important content (time and poster) to the far right.
* Internal stuff: I'm using localStorage APIs to cache the data I'm scrapping from a third party hackernews API source. This is because the source kept getting hiccups.
Here are my questions to the rest of those who are still interested in this endeavor:
Should I go with grey text on white, or black text on tanish grey (like it is now)?
Are the icons too distracting? Are they good, or would you suggest I do something else? Maybe I should ditch the orange background on these icons, and go with orange text when mousing over the buttons?
Some idea I have planned:
* Search field in header
* Automatic next page loading with ---page n--- separators (if I can get this to work with the API I'm using)
* Replace submit button with a visually persistent composer item.
This is a continuation of a post I made a couple days ago, title "Hacker News Redesign". It was a link to a jsbin. This time, it's a Github Page, which means it can update, so check back often.
I plan on accepting feedback on this redesign. I already took some feedback from the last post. This time, I can update the project upon feedback, and keep a dialog about the design.
Some straight-to-the-point feedback on the design:
The font could be bigger/wider; the white on orange on the "top-bar" (what do you call this?) looks weird.
Also, on a wide screen and with the browser window maximized, the number of comments information is very far apart from the title-author-time. I have to move by eyes from the left to the right part of the screen to see this information. I noticed that that distance is adjusted by the browser window width; I would recommend to set a cap on this distance.
Nice to see that you've changed the hovers to being the HN grey, I think I said on the first one that it was too 'Black text on white' and this time your subtle improvements have made a big difference to legibility so far as I'm concerned. Well done!
Love it :) One minor nitpick is that the upvote arrows aren't in the same place when the post number is a bit bigger (i.e. hover over the arrow for post 9 then 10).
Header? It's because it's Arial Narrow. It's one of those differences that's fairly subtle (like not a completely different font family) but different enough that it completely stands out, so obviously, the worst.
Requires JavaScript while the current site doesn't which is an automatic black mark in my book.
Also having the comments link on the exact opposite side to the story link is annoying for me since I usually middle click the link and the comments link in succession
Why did you remove the domain? It's super useful to see the domain the article is on because it gives a little more information about what the link might be.
A little off-topic, but I've just discovered Hacker News 2 [1] for Android, and I love pretty much everything about it (except its icon perhaps). I love its sidebar menu, that some of Google's apps use, too, and I hope it becomes a default way to do menus in Android. And I also prefer its "greyish" background, which I think is much better for the eyes than simply a white background. I strongly recommend everyone with Android tries it. It even has a "night mode":
no, thanks.
Too much wasted space. Too much contrast (white background). Too much effort to associate the right column with the title on the left (lack of zebra). Tabular form is something of the past ;-)
The single improvement I see for HN would be to remove the number at the left of the titles.
weego|13 years ago
1) it's harder to visually skim down the page looking for interesting links because the row spacing is too high. The background being white and the text black also doesn't help this. Softening either the font color or the background is a common trick to making things feel more comfortable.
2) clicking into the comments being way over the right is something of an anti-pattern, infact all the information placed to the right of the post title/link is far less useful than the link to the comments to the point where the user that posted it and when it was posted is entirely irrelevant to me yet logically due to the position has higher priority.
3) points should be on the left as the up arrow and points are implicitly linked in a functionality -> data relationship.
4) the margin between the left border and the index number and the other margins is jarringly inequal. I'm guessing it's double due to the way you've specified margins.
Similarly the margins that create the leading between the rows on the first (and bottom margin on the last) and subsequent rows has an unpleasant inequality.
5) the uneven baseline (the HN in the logotype and the K) in the header over-emphasises the height of the font used for the title and links in the header and gives the impression that it might not all quite line up when it does.
6) also in the heading the kerning is too tight for the size and color choices of the font which makes it feel more blurry and rough than needed/intended.
softbuilder|13 years ago
neeee|13 years ago
drpancake|13 years ago
unknown|13 years ago
[deleted]
obeattie|13 years ago
taproot|13 years ago
lukeholder|13 years ago
rdl|13 years ago
Ideally, also make actions like voting revocable, and show my current vote for confirmation (e.g. if I've upvoted something show me a highlighted upvote arrow which I can select again to remove; don't just disappear the arrow.
You also would ideally support the "special" HN functions -- e.g. when YC sends out questions to an applicant, it might not be seen if you never use the "real" hn site, so a reskin might be an issue.
lucb1e|13 years ago
orta|13 years ago
andrewingram|13 years ago
- Zero-indexing the post list is cute, but I don't think it helps with clarity.
- On a similar note, you've made the ranking a lot more visible, whereas before it was information I largely ignored. I'm not convinced it's actually important information
- I prefer chunky triangles to thin arrows to signify upvotes.
- By moving the secondary post information (points, author) to the side, it's become less clear that it's not part of the title. I'd increase the typographic contrast here.
- Number of comments is probably the 2nd thing I look at after the title, having it over on the right makes it harder to visually associate the comments count + link with its submission. Zebra-striping could help, but I'm not convinced having it on the right is a good choice.
- You've dropped the ability to flag posts, is this deliberate or an oversight?
Overall I like what you're trying to do here, but obviously any changes to the design are going to be a hard sell.
k-mcgrady|13 years ago
glomph|13 years ago
etcet|13 years ago
alptrv|13 years ago
jvzr|13 years ago
mynameisvlad|13 years ago
Blahah|13 years ago
crucialfelix|13 years ago
If the site is altered to make it easier to post and comment faster then I am guessing the quality of conversation would go down. Currently you are aware that the comment needs to be well written and not frivolous. Anything about the interface that makes it faster to read and comment will move the usage in the direction of frivolity.
yashodhan|13 years ago
I think HN should have an element of difficulty to its UX, because that keeps the user standard high.
samholmes|13 years ago
* I made the background not white, which seemed to be hard on the eyes; I decided to keep the color scheme from orignal HN.
* Changed vote button icon; moved point count together with the button.
* Moved comments from the right to the left, closer to the link and vote button. Reason: it's too important of an element to have it be all on the very far right.
* Moved less important content (time and poster) to the far right.
* Internal stuff: I'm using localStorage APIs to cache the data I'm scrapping from a third party hackernews API source. This is because the source kept getting hiccups.
Here are my questions to the rest of those who are still interested in this endeavor:
Should I go with grey text on white, or black text on tanish grey (like it is now)?
Are the icons too distracting? Are they good, or would you suggest I do something else? Maybe I should ditch the orange background on these icons, and go with orange text when mousing over the buttons?
Some idea I have planned:
* Search field in header * Automatic next page loading with ---page n--- separators (if I can get this to work with the API I'm using) * Replace submit button with a visually persistent composer item.
Let me know what you think of these ideas too.
samholmes|13 years ago
I plan on accepting feedback on this redesign. I already took some feedback from the last post. This time, I can update the project upon feedback, and keep a dialog about the design.
Hope you enjoy it! :)
fabriceleal|13 years ago
The font could be bigger/wider; the white on orange on the "top-bar" (what do you call this?) looks weird.
Also, on a wide screen and with the browser window maximized, the number of comments information is very far apart from the title-author-time. I have to move by eyes from the left to the right part of the screen to see this information. I noticed that that distance is adjusted by the browser window width; I would recommend to set a cap on this distance.
hipsters_unite|13 years ago
RossM|13 years ago
andyhmltn|13 years ago
hwaal|13 years ago
sthkr|13 years ago
xwowsersx|13 years ago
mynameisvlad|13 years ago
rurounijones|13 years ago
Also having the comments link on the exact opposite side to the story link is annoying for me since I usually middle click the link and the comments link in succession
nightson|13 years ago
unknown|13 years ago
[deleted]
aaronpk|13 years ago
vansteen|13 years ago
1/ You cannot visualize which link has been previously visited. Important for me!
2/ It's harder to read. Too much white spaces maybe.
jpswade|13 years ago
pestaa|13 years ago
mike_g|13 years ago
mtgx|13 years ago
A little off-topic, but I've just discovered Hacker News 2 [1] for Android, and I love pretty much everything about it (except its icon perhaps). I love its sidebar menu, that some of Google's apps use, too, and I hope it becomes a default way to do menus in Android. And I also prefer its "greyish" background, which I think is much better for the eyes than simply a white background. I strongly recommend everyone with Android tries it. It even has a "night mode":
[1] https://play.google.com/store/apps/details?id=com.airlocksof...
webreac|13 years ago
dariot|13 years ago
EugeneOZ|13 years ago
samholmes|13 years ago
conradfr|13 years ago
spajus|13 years ago