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 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.
To add to what you've said, 9 times out of 10 I'll actually click to scan the comments first, not the article. Comments often provide some summary that indicate whether an article is worth reading or not.
Hi mzarate - In the first draft, the comments were inside the "Y-Meter" - I do too check out the comments first to see the buzz around the article. Later it was overload with information right at the beginning.
Thanks :)
Yup. When I discovered HN about 3 years ago, I read most of the posts and maybe some comments.
Now, it's opposite. I read a lot of comments and usually don't read the links themselves. From my experience, the value of the links decreases after some time as things inevitably start repeating. Not the same links, but the same ideas, concepts (not always, of course).
I view HN as a forum, where the title of the link is the topic for a thread.
Thank you for showing us. I have two pieces of feedback.
1) The score isn't most important. The headline is. This is why the headline is in black, and the score is in gray. We don't come here to compare news importance, the site already does this for us by sorting. We come to read news. And having a small pale gray score replaced by a big attention-drawing glowing orange square goes against where the focus should be.
2) I do part time design and understand the temptation to style your presentation so it enhances your concept, like add perspective, drop shadows, and so on. My team does this when presenting business card designs to clients, because the actual graphic looks so simple and boring on a monitor, the client won't "get it", if we'd show it as is.
But a website isn't a 3D slab floating in space, so in this case the styling is a distraction from your presentation, not an enhancement. Keep it simple, when simple works.
Dunno about the y-meter... Would rather see a number than something visually unintuitive (for me). Also from afar it looks like a bunch of checkboxes.
Also from an eye tracking/heat map standpoint the number of comments being entirely on the right is really tiring... I want to easily just sweep my eyes down on the left to click on articles and the voting score + number of comments are good indicators.
I like the color/font changes that make the site pop a bit more but that's a minor thing. I also appreciate these design docs for their discussion of visual value but these changes also reflect a certain lack of awareness from a usability standpoint -- it just doesn't add much in value, but rather detracts from it by pushing in new design. I'm thinking more Digg 4.0 than FB revamp here.
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.
I've been using that for a while and have quite liked it. I almost find it jarring when I look at HN on someone elses computer as I forget what it normally looks like. :)
For what it's designed to communicate, I like the Y-Meter. However, I question whether what it's trying to communicate is in line with the HN ranking system.
The ranking system combines several signals to give the front-page order and is designed to give new, possibly interesting but currently low point links more prominence by being higher up the ranking. This gives them visibility so people can then vote on whether they're interesting, and hence should be kept at a higher rank for longer.
Without promoting new low point content, it's difficult for anything to rise to the top.
By making the current ranking more prominent, the Y-Meter would have the effect of reducing views for newer low point content.
- 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...
- 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!
Not feeling the square meter to indicate interest at all. Actually, that's the only thing I don't like about it. I'd rather see things with more gravitas given larger sizing, similar to how twitter's treating retweeted and favorited tweets on their new profile pages.
I feel the Y meter is too complected to the eye; especially if you are doing a quick scan to see the top voted posts that you've missed. Even with a number you can make a rough guess without actually reading the number by the length (number of digits). I think a subtle horizontal bar, or a boxes with varying color intensity would do a much better job.
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.
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 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!
Why represent the data twice? That's not minimalism. Besides, if you were the OP on an article, you couldn't tell the addition of even say, 5 points without the number itself, making the Y-meter useless. Plus, all data outside 0-400 is completely lost. Something with 401 votes looks exactly the same as 2000 votes.
Maybe minimalism isn't the real goal. The data might be represented twice, but functionally the representations are not redundant. The number provides maximum granularity, but the Y meter facilitates instantaneous comparisons of many stories simultaneously.
I'm not sold on the design overall but there is nothing in principle wrong with representing data in both a imprecise and precise form. A lot of user interfaces do this.
Some have three layers.
[#######---] 73% 9441/12890
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.
A point made is that the Y meter obscures an otherwise instantly understandable metric with a visualization that must be deciphered. If you don't care about that number, sure, it's less information and thus perhaps less clutter. For myself, it's chart cruft.
> the Y meter obscures an otherwise instantly understandable
I'm not sure I agree with that, because it takes me a noticeable amount of time and effort to look at the scores for two different stories, located at two different parts of the page, and to compare them. It's far easier to get an instant notion of how a story is performing compared to other stories using the Y meter, for me at least.
My recommendation for the Y meter is dead simple: just also show the number.
Nice design, but I'm not sure I like the Y-meter myself. I don't like when websites/apps change to hide information or remove detail. My eyes already do a pretty good job discerning big numbers from small numbers. Now I have to understand a 70% full square versus an 90% full square?
It bothers me a little that (<)100 is half-way around the meter while (<)400 is all the way around. I don't usually quibble about small details, but if you're going to make a meter, just make it sensible.
Why not have a continuous (or at least less discrete) meter?
I want to know exactly how much percentage I have before my battery dies, i.e. measuring the remainder of a finite resource AND estimating rate of depletion.
I don't care if my signal is -65 vs. -66 dbM, because that's largely out of my control and polled every 5-10 seconds, so even if I did choose to use that to try and find a better signal, the response granularity isn't enough to help me make a decision before my call is dropped.
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).
202 comments
[ 3.1 ms ] story [ 216 ms ] threadOtherwise, I enjoyed the look.
To add to what you've said, 9 times out of 10 I'll actually click to scan the comments first, not the article. Comments often provide some summary that indicate whether an article is worth reading or not.
Now, it's opposite. I read a lot of comments and usually don't read the links themselves. From my experience, the value of the links decreases after some time as things inevitably start repeating. Not the same links, but the same ideas, concepts (not always, of course).
I view HN as a forum, where the title of the link is the topic for a thread.
I can see the different values on the Y-meter get a nickname btw, dash, L, C, O...
1) The score isn't most important. The headline is. This is why the headline is in black, and the score is in gray. We don't come here to compare news importance, the site already does this for us by sorting. We come to read news. And having a small pale gray score replaced by a big attention-drawing glowing orange square goes against where the focus should be.
2) I do part time design and understand the temptation to style your presentation so it enhances your concept, like add perspective, drop shadows, and so on. My team does this when presenting business card designs to clients, because the actual graphic looks so simple and boring on a monitor, the client won't "get it", if we'd show it as is.
But a website isn't a 3D slab floating in space, so in this case the styling is a distraction from your presentation, not an enhancement. Keep it simple, when simple works.
Also from an eye tracking/heat map standpoint the number of comments being entirely on the right is really tiring... I want to easily just sweep my eyes down on the left to click on articles and the voting score + number of comments are good indicators.
I like the color/font changes that make the site pop a bit more but that's a minor thing. I also appreciate these design docs for their discussion of visual value but these changes also reflect a certain lack of awareness from a usability standpoint -- it just doesn't add much in value, but rather detracts from it by pushing in new design. I'm thinking more Digg 4.0 than FB revamp here.
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.
I then use the hackernews enhancement suite to allow for collapsible comment threads and other niftiness.
http://i.imgur.com/5WJwMUC.jpg
You should really use light weight fonts carefully.
Hila.
For what it's designed to communicate, I like the Y-Meter. However, I question whether what it's trying to communicate is in line with the HN ranking system.
The ranking system combines several signals to give the front-page order and is designed to give new, possibly interesting but currently low point links more prominence by being higher up the ranking. This gives them visibility so people can then vote on whether they're interesting, and hence should be kept at a higher rank for longer.
Without promoting new low point content, it's difficult for anything to rise to the top.
By making the current ranking more prominent, the Y-Meter would have the effect of reducing views for newer low point content.
- 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!
- 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.
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!
Cheers, Hila :)
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.
Otherwise, i think it's excellent.
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'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.
Cheers, Hila
I'm not sure that's a bad thing.
I'm not sure I agree with that, because it takes me a noticeable amount of time and effort to look at the scores for two different stories, located at two different parts of the page, and to compare them. It's far easier to get an instant notion of how a story is performing compared to other stories using the Y meter, for me at least.
My recommendation for the Y meter is dead simple: just also show the number.
Why not have a continuous (or at least less discrete) meter?
Do you have the wireless signal strength as well?
I want to know exactly how much percentage I have before my battery dies, i.e. measuring the remainder of a finite resource AND estimating rate of depletion.
I don't care if my signal is -65 vs. -66 dbM, because that's largely out of my control and polled every 5-10 seconds, so even if I did choose to use that to try and find a better signal, the response granularity isn't enough to help me make a decision before my call is dropped.
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).