I do a lot of website critiques for others and thought I'd take a look at your redesign. Here is a quick run-down of my thoughts and a few suggestions.
The Y-meter is visually complex with all of its variations so when you look at a full page of articles, it is very messy looking. As you mention you would like to visualize the story points, and I think this is a good goal. The visual should add weight to an article while still enableing the eye so casually slide past articles. A simple light gray bar next to the story points under the title would do this well. Also, given the amount of explenation of how it works and the fact that there is a "key" at the bottom of the page is a clear indication that the Y-meter as designed isn't going to be intuitive and is not likely a good direction to go.
The white HACKERNEWS title is hard to read. The white color works well and lightens up the header. I see that NEWS is slightly more bold, but not enough to distinguish it from HACKER very well. Still, all caps for words of length 4 or more impairs readablility and in this case unnecessarily.
The header links in white and slightly smaller font-size, do look more readable, so that is nice. Getting rid of the vertical seperators was a good choice as it de-clutters the header.
Search bar at the top, thank you! The current location at the bottom is terrible and this would be a welcome addition.
I'm confused by the meter next to the username. This seems to behave differently than the Y-Meters next to the stories. I'm not sure where to go with that one. The current numerical value in parenthisis are not great as there is no label, so it would be worth exploring additional options there.
The comment numbers on the far right are very far away from the story title which makes it difficult to tell what number goes with what story. It is especially difficult with short story titles. Perhaps your intention is that as a user hovers over the story title, the line is highlighted? While highlighting assists with tabular data such as in spreadsheets, it doesn't work on touch devices and is typically used in conjunction with other horizontal means of deliniation.
While placing all of the story meta-data on a single line allows you to make the font larger, overall the readability suffers as a result. Consider alternatives where the meta-data is shown below the story title, but in a lighter font. As you did with the header links, simply removing the pipes | and adding a little space would increase readability.
The "more" text at the bottom is burried on the far left on the same line as the Y-Meter Key and there is no whitespace above or below it. Give it some room to breath. The current Hacker News more button doesn't look clickable, so that is one area that could certainly use improving.
As per the upvote arrows sticking out to the left of the header, it looks like a mistake. I'm sure the intention was to do that, however it comes across as mis-alignment.
Overall, keep it up. I enjoy seeing design alternatives as there are so many ways to design a good website that has its own unique style and branding.
> Search bar at the top, thank you! The current location at the bottom is terrible and this would be a welcome addition.
I think this was originally intended to limit it's use. Before they switched to the current search system it was very heavy/slow. Assuming they achieved that end it was brilliant design but terrible UX.
For a long time, it didn't. It was added a couple of years ago. Prior to that, people would attempt to scrape HN, and create separate sites for search / rest api, etc.
Hi there,
First of all thanks for the profound review.
Second of all, i agree with you on the HACKERNEWS title and i'll take it under considerations in my follow up designs.
Regarding to the meta-data, i did tried to let the eye scan in a horizontal direction and end it there (where the comments are located).
All and all i enjoyed reading your comment and will use it (with your permission off course) in my next post.
Another item I was curious about is how it would look at different screen sizes. The current Hacker News scales reasonably well down to phone size, but could easily be improved upon with a little white-space below each story.
IMO, HN scales very poorly down to phone sizes. Text does not wrap, so I either get to scroll horizontally, turn my phone sideways, or read 2pt fonts. Interacting with the site isn't any better. It's a gamble whether I will hit the comments link or the article link, and the only way to vote on anything is to pinch to zoom in because the arrows turn sub-pixel on a phone.
In the end, while HN's design is firmly in the utilitarian-but-useful camp on the desktop, I feel it is firmly in the failure camp on phone-sized devices. I rarely interact with HN on my phone because of it.
Edit: And I didn't even mention trying to deal with the comment box on a phone...
Plain html[ed] without any graphics would be a major improvement for hn on the phone. Even on the note3, which has about as big a screen as anything called a "phone" could reasonably have, it's pretty awful. It even manages to combine too small text with using too much of the screen/inducing scroll due too poor layout.
I'm not sure why nothing's ever done about it -- style aside hn has three serious usability problems: non-wrapping text, hopelessly small voting widgets ("up", "down" text buttons/links would be an improvement) -- and the comment box on mobile/small screens.
Am I correct in my understanding that there isn't a (current) public repo where one might suggest fixes for this? I really do enjoy the utilitarian "feel" to hn, but these long-standing issues really need to be fixed, and at least fixing the first two is quite easy.
[ed: by "plain html" I mean not simply wrapping the page in a table, and allowing a more normal view. Technically one could use the table markup and just change the css too, of course]
Last I looked, hn was built with functions that wrapped primitive/direct generation of html... I can't imagine it'd take that many replacements to change the structure to use a hierarchy of paragraph-tags or divs (ironically that might also be easier to style with parent-child relationships...).
But I didn't look very hard at the code last time I looked.
Overall, I agree with this comment. (Y-meter is visually too complex, # comments too far right, etc.) One point not mentioned is that UX for viewing comments is much worse for web users, since the link is now so far from other links.
While I think hacker news could use a redesign, I think you focused on the wrong aspects. I think the #1 goal would have to be to make it responsive / mobile-friendly over any sort of new visualization of points. Beyond that, I think the question is more about typography than visual design. A single # seems the simplest/clearest way to represent points, but the question is just where it fits in the visual hierarchy, font, color, etc.
I would not put too much thought into a modern web design that does not consider different screen sizes.
Guess it's a matter of personal preference. I myself like their concept of Y-meter. It is intuitive enough once you understand where the line starts and it has enough states to represent various points thresholds.
The Y-meter is visually complex with all of its variations so when you look at a full page of articles, it is very messy looking. As you mention you would like to visualize the story points, and I think this is a good goal. The visual should add weight to an article while still enableing the eye so casually slide past articles. A simple light gray bar next to the story points under the title would do this well. Also, given the amount of explenation of how it works and the fact that there is a "key" at the bottom of the page is a clear indication that the Y-meter as designed isn't going to be intuitive and is not likely a good direction to go.
The white HACKERNEWS title is hard to read. The white color works well and lightens up the header. I see that NEWS is slightly more bold, but not enough to distinguish it from HACKER very well. Still, all caps for words of length 4 or more impairs readablility and in this case unnecessarily.
The header links in white and slightly smaller font-size, do look more readable, so that is nice. Getting rid of the vertical seperators was a good choice as it de-clutters the header.
Search bar at the top, thank you! The current location at the bottom is terrible and this would be a welcome addition.
I'm confused by the meter next to the username. This seems to behave differently than the Y-Meters next to the stories. I'm not sure where to go with that one. The current numerical value in parenthisis are not great as there is no label, so it would be worth exploring additional options there.
The comment numbers on the far right are very far away from the story title which makes it difficult to tell what number goes with what story. It is especially difficult with short story titles. Perhaps your intention is that as a user hovers over the story title, the line is highlighted? While highlighting assists with tabular data such as in spreadsheets, it doesn't work on touch devices and is typically used in conjunction with other horizontal means of deliniation.
While placing all of the story meta-data on a single line allows you to make the font larger, overall the readability suffers as a result. Consider alternatives where the meta-data is shown below the story title, but in a lighter font. As you did with the header links, simply removing the pipes | and adding a little space would increase readability.
The "more" text at the bottom is burried on the far left on the same line as the Y-Meter Key and there is no whitespace above or below it. Give it some room to breath. The current Hacker News more button doesn't look clickable, so that is one area that could certainly use improving.
As per the upvote arrows sticking out to the left of the header, it looks like a mistake. I'm sure the intention was to do that, however it comes across as mis-alignment.
Overall, keep it up. I enjoy seeing design alternatives as there are so many ways to design a good website that has its own unique style and branding.
Cheers, -d-