As a heavy HN user, I often skim the front page to see what's happening. The point/comment ratio often tells a lot about an article.
First thing I don't like: the Y meter. Most HN readers are nerds, and nerds like exact values (same reason I have the percentage on for my devices's battery)
Second thing I don't like, which breaks the design completely for me: my eyes have to travel a huge distance to see how many comments stories have. It makes skimming the front page much, much worse.
HN's design is about extreme conciseness. There are a few things that could be done better, but if you redesign it that has to be your #1 goal.
I agree about the point/comment ratio. The Y-meter is useful, though, at a glance when I'm looking at 25 stories on a big screen. So... just put the points inside the Y-meter!
I disagree, the Y meter is the best part. I rarely ever look at the number of points until after I look at the article. I just click on what looks interesting on the front-page. Having an easy up-front visible way to discern new vs established articles would be much more helpful than an exact number buried under too much information.
perhaps faint separators between stories - a small, light line, or alternating colors, would be helpful ... that way it's much easier to tie the comment-info to the story.
I'm like you: I also insist on the % showing, not just the icon (though I like the icon, too).
I wonder if it would be useful to show the ratio of comments to article points.
I never feel like any HN redesign is actually needed [1]. Although well presented (as is usually the case for unsolicited redesigns), it fails at acknowledging the primary audience of the website (hackers), and disrupts the information hierarchy (emphasizing the score at the title's expense, harming the connection between an article and its comments…).
On a side note, I'm always concerned with self-proclaimed "UX experts" who, by using an ultra-thin font, make it really hard to access the core content of the Web: text.
Ever used HN via mobile? It's an awful experience. I've accidentally flagged more than one article that I meant to click on instead, due to clumsy thumbs.
I was going to make a comment about the text. I didn't even bother reading most of what was written because it was difficult to read on an iPhone. There's a very good reason people hated iOS 7's thin fonts and Apple reverted it back. And even their font had more contrast with their white backgrounds.
HN could easily be improved with a redesign, but an issue with many attempts is they take it too far trying to make a case.
I don't care about an article's upvotes so I'd put the comment count far left an in an orange shape whose intensity or size changed with the value. This would make it quicker to scan and find the big news stories. Then find a way to introduce a few stories from New into the main screen to get them started.
> On a side note, I'm always concerned with self-proclaimed "UX experts" who, by using an ultra-thin font, make it really hard to access the core content of the Web: text.
The low contrast doesn't help. I decided to just look at the photos because the text was way too difficult to read.
The text on hilapeleg.io is nearly unreadable on Windows 7 with Firefox 30. The font is rendered strange, way too thin and uneven with gaps in the strokes.
The link color is just as washed out as the very light grey of the body text.
Maybe they could design their own site properly before re-designing HN?
Doesn't look any better with Firefox 35. I don't know how brilliant the OS X font rendering must be, but the strokes are 1px thick when the font is zoomed to 300%. How is this supposed to work?
This is exactly what I expected when web fonts came out. Does anybody know how to deactivate them globally in Chrome? I'm really tired of constantly changing fonts via F12, just to be able to skim some random article.
Yeah, this was my biggest issue--especially in the side-by-sides, it is just so much easier to read the text on the old site, black on orange. The white-on-orange thing in the navbar is terrible.
I know that the only people these days browsing HN are nutropic-fed paleo startup bros that are killing it when they're not in the box, but for some of us fat C++ neckbeards with bad vision many web design trends are pretty inconvenient.
EDIT: Thanks for the downvotes...now my post is similar in font to the proposed design. :(
Hair-thin type seems to be a growing trend. I see it commonly in "retina"-resolution-aware apps, as if the designers were trying to show off how small teh pixels are. It's now creeping into advertisement.
I hope this trend dies soon. Such fonts are very difficult on the eyes.
Yeah the main paragraph text is definitely too thin/faint on OS X Chrome even. It was bugging me too so I simply stopped reading after a few paragraphs.
The current presented design doesn't seem to have or suggest at having any of your criticized elements. in fact what you're criticizing seems to be a hastily thrown together front end to a website that can host that one blogpost describing the HN redesign. Your comment is just an attack on the designer.
- This should be coded and turned into a working prototype! I imagine an HN reader with some spare time on their hands might attempt this.
- The square "y-meter" idea is neat, but it's difficult to parse at a quick glance. A circle might be a better alternative, where the size and intensity of the circle indicate the strength of the story.
- The order of each story element in your comp goes like this: Title, username, URL, and finally comments. I think the URL is a lot more important than the user who submitted it.
- The orange •'s in the string are distracting. A significant space, something like three or four 's might be a better way to separate those components.
- Having an arrow in addition to the y-meter is kinda noisy. Those could be combined. Sorta like Svbtle's hold-your-mouse-here-to-vote ... if the y-meter was replaced with a circle, it could expand or :hover into an arrow to vote. Not suggesting hovering will cause a vote, but rather a hover will indicate that you can vote.
- Having the comments encapsulated in the little comment bubble is fun, but at first glance the type looks way too tiny and having it orange is tough on the eyes. It's doing more harm than good.
- The stories could use a bit more vertical padding between them.
Finally, don't take these comments the wrong way. I think 90% of the time something feels great inside of Photoshop, especially after mucking around with it for hours or days, but the only way to prove that the UI is great is to actually build it and play around with it.
I hate to say it, but people keep "redesigning" HN without actually solving any significant problems. The only problem this site has right now is that it's unfriendly on mobile devices. Every other attempt has just been putting lipstick on a pig. That being said, it's a fun exercise and thanks for sharing your version. You put a lot of great thought into this and it's fun to read these.
> The square "y-meter" idea is neat, but it's difficult to parse at a quick glance. A circle might be a better alternative, where the size and intensity of the circle indicate the strength of the story.
Yes, yes, yes. It's funny because the "y-meter" is at the same time the thing that interests me the most & the thing that I find the most inscrutable.
* The scaling feels off. Half the box means 51 points and the whole box means 401? In eighths, the transitions go {1, 3, 4, 5, 7, 8} which just makes my head ache.
* When you have crummy eyes some of the transitions are hard: [51,100] looks too close to [101,200] and [201, 400] and [400, +inf) is just impossible without squinting.
Overall it feels like there is more noise than information, which is a bummer. Maybe if it scaled a little more smoothly or changed lightness as an added visual indication it'd work better for me.
Of course if there's one thing everyone loves to do, it's bikeshed!
I didn't like the position of the comments. For me, I like to read the article, then jump into the comments. With it being all the way on the other side of the screen, I could easily see myself getting lost and clicking the wrong comment button.
Even though I have implemented http://hn.premii.com/, I think current YC is much better. It should be more mobile friendly and remove tables for better accessibility. And also provide APIs so people don't have to scrap for alternate behavior.
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.
Respectfully, I don't care about an abstract graph, nor about having to remember point ranges for its various states. I care about the actual points, and seeing their numerical value is faster and easier to comprehend.
1. Hard to grasp concept of Y-Meter as a new user, and even for those in the know, it's a visual overload. Numbers provide greater clarity.
2. The white is hard to read, because of font and font-weight.
3. Comment bubble to the side is out of direct sight and forces me to divide my focus, thus making it harder to scan.
It's nice visually, but needs more love in the UX area.
- Time ago is important when you are checking out the "new" items on HN
- Domain from where the article came from, seems to be more important then the user
- The HN Meter is nice, but it's more dificult then the point system for new users.
- The ammount of points are too far on the right, to see this, people have to see the right corner and there will be difficulty to see which comment_count belongs to which post.
Although i really like the redesign, it's a hard thing to do for something like HN.. Where it's beauty lays in its simplicity...
I actually really like the Y-meter, though I'm not a fan out completely hiding the numerical rating of the topic. It might be worthwhile to still show the number for those who are curious.
I agree. Actually, showing the number inside of the meter would be nice. I also agree with another commentor, oftentimes im after the comments link, dont stick it on the other side of the page. Id really like the ability to click one link that opens the source and the comments at the same time (RES adds this functionality to reddit for instance)
I believe that your proposed placement of the comments link (or button) would be a big downgrade in the UX. Mostly because it is positioned very far from the main link but also because it seems small. It would be a hard "hit target".
If we assume that HN users value other users' comments as much as the linked content, this could be problematic. Also, as typical heavy users, they would surely value efficiency (faster selection of hit targets, less errors).
Go check Fitt's law (I would call it a model, but it is known as "law"). You don't really need to know the formula, but its implications seem to be very generalisable to HCI in general:
1) Ease of target acquisition is directly proportional to size;
2) Ease of target acquisition is inversely proportional to distance;
3) Targets at the edges of the screen can be considered infinite width, making them a lot easier to acquire (i.e. you can move the mouse in that direction indefinitely). This one should be taken with a grain of salt (and it's not taken directly from the original article).
I know it seems obvious but people tend to forget the basics. :)
tl;dr: you should make the comments button a lot easier to hit.
- The Y-Meter is inconsistent, why is 50 votes half the filled in space whereas 400 is the full space?
- The comments are really far to the right. I often read the comments for every article I click on so this forces me to move my mouse far right/back to left then far right again. Going down the list vertically is more natural and efficient for me.
I think there are good takeaways here. I think having the comments-button contain the # is efficient, and I believe placement on the right side will encourage reading the article first, before diving into the discussion. Perhaps there will be a bit less discussion, but it should be of higher quality. It's worth trying, anyway.
To be honest, though, I'd rather see a better mobile experience first, before a re-design of the normal experience.
Or, ensure the re-design includes an improved mobile experience. No more itty-bitty links (I too often tap the wrong thing), no more itty-bitty text (to be readable, I have to scroll sideways a lot, and please please please no more triangles so small I have to tap the screen like 5x to be sure I don't accidentally hit "down" when I want to "up".
... and do I spy a gradient in the orange header?! I like gradients, when used minimally. 8-)
Nice effort. A larger font is definitely something HN needs (considering a significant amount of HN readers are 30y+)!
It is difficult to determine which comments-count "box" belong to each title, and the reader should not be forced to move her/his eyes/head to the right, considering this information can fit perfectly on the left.
While I like the idea of the Y-Meter, it is more likely HNers like and are used to know the exact amount of votes. I do understand you wanted to make it minimalistic, but an UI should never need an explanation (referring to the Y-Meter explanation in the bottom).
The YMeter doesn't make any sense. Even after reading the description, it doesn't do anything to expose information (up votes) in a meaningful way. Its like trying to read a binary clock.
[+] [-] GuiA|11 years ago|reply
First thing I don't like: the Y meter. Most HN readers are nerds, and nerds like exact values (same reason I have the percentage on for my devices's battery)
Second thing I don't like, which breaks the design completely for me: my eyes have to travel a huge distance to see how many comments stories have. It makes skimming the front page much, much worse.
HN's design is about extreme conciseness. There are a few things that could be done better, but if you redesign it that has to be your #1 goal.
[+] [-] bernardom|11 years ago|reply
[+] [-] antjanus|11 years ago|reply
[+] [-] unknown|11 years ago|reply
[deleted]
[+] [-] BrandonMarc|11 years ago|reply
I'm like you: I also insist on the % showing, not just the icon (though I like the icon, too).
I wonder if it would be useful to show the ratio of comments to article points.
[+] [-] jwgur|11 years ago|reply
Do you have the wireless signal strength as well?
[+] [-] bbx|11 years ago|reply
On a side note, I'm always concerned with self-proclaimed "UX experts" who, by using an ultra-thin font, make it really hard to access the core content of the Web: text.
[1] http://jgthms.com/why-hn-doesnt-need-a-redesign.html
[+] [-] na85|11 years ago|reply
[+] [-] mitchell209|11 years ago|reply
[+] [-] prawn|11 years ago|reply
I don't care about an article's upvotes so I'd put the comment count far left an in an orange shape whose intensity or size changed with the value. This would make it quicker to scan and find the big news stories. Then find a way to introduce a few stories from New into the main screen to get them started.
[+] [-] reledi|11 years ago|reply
The low contrast doesn't help. I decided to just look at the photos because the text was way too difficult to read.
[+] [-] GhotiFish|11 years ago|reply
[+] [-] Tomte|11 years ago|reply
The link color is just as washed out as the very light grey of the body text.
Maybe they could design their own site properly before re-designing HN?
[+] [-] currysausage|11 years ago|reply
Doesn't look any better with Firefox 35. I don't know how brilliant the OS X font rendering must be, but the strokes are 1px thick when the font is zoomed to 300%. How is this supposed to work?
This is exactly what I expected when web fonts came out. Does anybody know how to deactivate them globally in Chrome? I'm really tired of constantly changing fonts via F12, just to be able to skim some random article.
[+] [-] angersock|11 years ago|reply
I know that the only people these days browsing HN are nutropic-fed paleo startup bros that are killing it when they're not in the box, but for some of us fat C++ neckbeards with bad vision many web design trends are pretty inconvenient.
EDIT: Thanks for the downvotes...now my post is similar in font to the proposed design. :(
[+] [-] colanderman|11 years ago|reply
I hope this trend dies soon. Such fonts are very difficult on the eyes.
[+] [-] thathonkey|11 years ago|reply
[+] [-] cmaxwe|11 years ago|reply
[+] [-] reaasdf|11 years ago|reply
[+] [-] ayejay|11 years ago|reply
[+] [-] ohitsdom|11 years ago|reply
[+] [-] Keats|11 years ago|reply
[+] [-] GhotiFish|11 years ago|reply
The current presented design doesn't seem to have or suggest at having any of your criticized elements. in fact what you're criticizing seems to be a hastily thrown together front end to a website that can host that one blogpost describing the HN redesign. Your comment is just an attack on the designer.
[+] [-] jondot|11 years ago|reply
[+] [-] whalesalad|11 years ago|reply
- This should be coded and turned into a working prototype! I imagine an HN reader with some spare time on their hands might attempt this.
- The square "y-meter" idea is neat, but it's difficult to parse at a quick glance. A circle might be a better alternative, where the size and intensity of the circle indicate the strength of the story.
- The order of each story element in your comp goes like this: Title, username, URL, and finally comments. I think the URL is a lot more important than the user who submitted it.
- The orange •'s in the string are distracting. A significant space, something like three or four 's might be a better way to separate those components.
- Having an arrow in addition to the y-meter is kinda noisy. Those could be combined. Sorta like Svbtle's hold-your-mouse-here-to-vote ... if the y-meter was replaced with a circle, it could expand or :hover into an arrow to vote. Not suggesting hovering will cause a vote, but rather a hover will indicate that you can vote.
- Having the comments encapsulated in the little comment bubble is fun, but at first glance the type looks way too tiny and having it orange is tough on the eyes. It's doing more harm than good.
- The stories could use a bit more vertical padding between them.
Finally, don't take these comments the wrong way. I think 90% of the time something feels great inside of Photoshop, especially after mucking around with it for hours or days, but the only way to prove that the UI is great is to actually build it and play around with it.
I hate to say it, but people keep "redesigning" HN without actually solving any significant problems. The only problem this site has right now is that it's unfriendly on mobile devices. Every other attempt has just been putting lipstick on a pig. That being said, it's a fun exercise and thanks for sharing your version. You put a lot of great thought into this and it's fun to read these.
[+] [-] owenmarshall|11 years ago|reply
Yes, yes, yes. It's funny because the "y-meter" is at the same time the thing that interests me the most & the thing that I find the most inscrutable.
* The scaling feels off. Half the box means 51 points and the whole box means 401? In eighths, the transitions go {1, 3, 4, 5, 7, 8} which just makes my head ache.
* When you have crummy eyes some of the transitions are hard: [51,100] looks too close to [101,200] and [201, 400] and [400, +inf) is just impossible without squinting.
Overall it feels like there is more noise than information, which is a bummer. Maybe if it scaled a little more smoothly or changed lightness as an added visual indication it'd work better for me.
Of course if there's one thing everyone loves to do, it's bikeshed!
[+] [-] HilaPeleg|11 years ago|reply
Cheers, Hila :)
[+] [-] gamerDude|11 years ago|reply
Otherwise, I enjoyed the look.
[+] [-] thekingshorses|11 years ago|reply
[+] [-] pseudometa|11 years ago|reply
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-
[+] [-] mzarate06|11 years ago|reply
Respectfully, I don't care about an abstract graph, nor about having to remember point ranges for its various states. I care about the actual points, and seeing their numerical value is faster and easier to comprehend.
[+] [-] nijiko|11 years ago|reply
It's nice visually, but needs more love in the UX area.
[+] [-] msutherl|11 years ago|reply
I also agree with gamerDude that deemphasizing the comments by putting them on the right is not a good idea.
It's funny, despite all its flaws, I don't think I've seen an HN redesign that I like better than HN.
[+] [-] NicoJuicy|11 years ago|reply
- Time ago is important when you are checking out the "new" items on HN
- Domain from where the article came from, seems to be more important then the user
- The HN Meter is nice, but it's more dificult then the point system for new users.
- The ammount of points are too far on the right, to see this, people have to see the right corner and there will be difficulty to see which comment_count belongs to which post.
Although i really like the redesign, it's a hard thing to do for something like HN.. Where it's beauty lays in its simplicity...
Good job though!
[+] [-] nilkn|11 years ago|reply
[+] [-] netcraft|11 years ago|reply
[+] [-] paulojreis|11 years ago|reply
If we assume that HN users value other users' comments as much as the linked content, this could be problematic. Also, as typical heavy users, they would surely value efficiency (faster selection of hit targets, less errors).
Go check Fitt's law (I would call it a model, but it is known as "law"). You don't really need to know the formula, but its implications seem to be very generalisable to HCI in general:
1) Ease of target acquisition is directly proportional to size; 2) Ease of target acquisition is inversely proportional to distance; 3) Targets at the edges of the screen can be considered infinite width, making them a lot easier to acquire (i.e. you can move the mouse in that direction indefinitely). This one should be taken with a grain of salt (and it's not taken directly from the original article).
I know it seems obvious but people tend to forget the basics. :)
tl;dr: you should make the comments button a lot easier to hit.
[+] [-] dpcan|11 years ago|reply
The comments on the far right is bad.
The boxes are worse.
I'm a numbers guy, visual aids like the box do NOT help, but a comment count below the article is already perfect.
All HN needs is to be responsive so it loads on mobile properly.
[+] [-] calbear81|11 years ago|reply
- The Y-Meter is inconsistent, why is 50 votes half the filled in space whereas 400 is the full space?
- The comments are really far to the right. I often read the comments for every article I click on so this forces me to move my mouse far right/back to left then far right again. Going down the list vertically is more natural and efficient for me.
[+] [-] ema|11 years ago|reply
[+] [-] BrandonMarc|11 years ago|reply
To be honest, though, I'd rather see a better mobile experience first, before a re-design of the normal experience.
Or, ensure the re-design includes an improved mobile experience. No more itty-bitty links (I too often tap the wrong thing), no more itty-bitty text (to be readable, I have to scroll sideways a lot, and please please please no more triangles so small I have to tap the screen like 5x to be sure I don't accidentally hit "down" when I want to "up".
... and do I spy a gradient in the orange header?! I like gradients, when used minimally. 8-)
[+] [-] sampl|11 years ago|reply
[+] [-] dvabr|11 years ago|reply
Nice effort. A larger font is definitely something HN needs (considering a significant amount of HN readers are 30y+)!
It is difficult to determine which comments-count "box" belong to each title, and the reader should not be forced to move her/his eyes/head to the right, considering this information can fit perfectly on the left.
While I like the idea of the Y-Meter, it is more likely HNers like and are used to know the exact amount of votes. I do understand you wanted to make it minimalistic, but an UI should never need an explanation (referring to the Y-Meter explanation in the bottom).
[+] [-] laacz|11 years ago|reply
P.S. OP font is so thin, I had to stop reading after first few paragraphs.
[+] [-] geuis|11 years ago|reply
Your font size is way too narrow for either retina or non-retina. This is what it looks like on my cinema display, https://www.dropbox.com/s/2ialdcjqba0wthr/Screenshot%202014-...
The YMeter doesn't make any sense. Even after reading the description, it doesn't do anything to expose information (up votes) in a meaningful way. Its like trying to read a binary clock.