Show HN: Hacker News Redesign
hilapeleg.io
hilapeleg.io
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.
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.
Of course lots of designers make the wrong decisions about which functionality they have openly on display vs. which functionality they hide away in menus. They often lazily shove a new feature in a menu, rather than find a way to properly integrate it with the design of the app. But that's not the same as saying "menus=bad".
The traditional horizontal menu bar with multiple consistently-titled menus is a system that has worked very well for decades. For developers and UI designers, it's generally quite obvious where menu items should go. For users, it's generally obvious where the developers would have put the menu items for some specific functionality.
The Chrome-style single-obscure-menu-with-everything-poorly-organized-inside-it approach throws all of this away. It results in the worst of all trade offs. It's harder to find, the menu itself is an inconsistent jumble, the amount of functionality within it is less, it's not worth gaining a small amount of screen space for the inefficiency such a broken menu system brings, and it's just plain harder to use. It really is bad in every way.
Why use one of the apps though, isn't this a website, shouldn't it be made accessible through the common web browsers. Individual apps which just apply a style, sample and modify a website and pipe it through a hidden browser object seem strange - we don't need apps for every different bit of content, that's one of the great things about a properly standardised web and high quality browsers.
Different apps for every bit of web content seems perversely inefficient to me.
I have an app for accessing websites and webapps, it's called Firefox, and it even synchs my credentials and history between my various computing devices. Why would I want to use a different app?
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.
The low contrast doesn't help. I decided to just look at the photos because the text was way too difficult to read.
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.
Doesn't work on OS X either.
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. :(
I hope this trend dies soon. Such fonts are very difficult on the eyes.
Relevant case study: German political ads: http://up.picr.de/18272570zq.jpg - Helvetica Inserat vs Helvetica Ultra Light.
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.
And pointing out such flaws in somebody's work is not a criticism of the person. Nor is it an "attack" on somebody to request that they have their house in order before trying to put the houses of others in order.
it is.
There's nothing conceptually wrong with a cleaner who has a dirty house. The measure of a cleaner is their work. If a good cleaner has a dirty house, then that doesn't make the cleaner's work bad by proxy. It just means the cleaner is a bit of a curiosity.
Tomte's comment might have value in a speculative setting (dubious value, but value). No speculation is needed when the work is on display.
- 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 :)
Otherwise, 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.
Exactly. No bullshit. Keep the same visual styling. And improve how the layout breaks at a narrow width. This is how you improve/redesign HN.
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-
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.
I think that speaks a lot of a non-intuitive placement.
All and all i enjoyed reading your comment and will use it (with your permission off course) in my next post.
Stay tuned, and thanks again Hila :)
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.
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...
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]
But I didn't look very hard at the code last time I looked.
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.
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.
It's nice visually, but needs more love in the UX area.
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.
- 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!
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 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.
- 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.
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-)
I then use the hackernews enhancement suite to allow for collapsible comment threads and other niftiness.
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).
P.S. OP font is so thin, I had to stop reading after first few paragraphs.
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.
Get it here: https://chrome.google.com/webstore/detail/hacker-news-+/oiee...
Putting all the comment counts in a column on the right makes it completely impossible to tell how which story has however many comments. (I also suddenly have the idea of coloring the comment balloon to show the "hotness" of the discussion - decide for yourself how to measure that.)
Also your presentation of the concept is a bit style-over-substance; having tiny images of the top left of the page, rotated 45º, with a spurious grey edge to make it look like it's on a slab of thick plastic, and in a circle, tells us nothing about how it actually works in practice. When I saw the list of features your design has versus the actual one, I did a double-take when you said it shows the comments, because not a single picture I'd seen so far had any hint of comments.
I liked the minimization of the name & domain and making that & the comments all in one line. It helps focus the attention on the titles themselves.
However, the issue I have is that the font choice is not legible for scanning. I think Vellum, an NYT project recently posted to HN, does a much better job of making a list of articles easily scannable. Screenshot here: https://dl.dropboxusercontent.com/u/779054/Screen%20Shot%202...
I would also question the validity of the assumption that aesthetics and mindlessness are necessarily correlated. If anything, a better looking Hacker News would just have fewer people complaining about its surface flaws.
- One thing that I think would improve it is putting the starting point in the bottom left corner. It's weird to have that half segment on the bottom.
- I want to see the exact number of points, not a fuzzy visual cue. The first visit each day I am going to look at every story on the front page, and subsequent visits are generally to look at replies to comments I've made. Prioritizing past "here are the stories on the front page" is useless to me.
- From http://hilapeleg.io/media/mockup_720x1981.png I get the impression that the new layout is much brighter than the old. I generally prefer off-white to full-white. It feels easier on the eyes. But without seeing the actual layout its hard to tell which I like more.
- Does this redesign come with comment hiding? This one feature is infinitely more important than an improved visual look.
Screenshot: http://i.imgur.com/qft9Y6q.png
Just skimmed the text and pictures as a result and it feels like it's over simplifying things and hiding too much information(which seems to be the trend with redesigns these days).
Otherwise, i think it's excellent.
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.
"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 :)"
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.
--navigation: putting the comments button so far to the right, away from the title, makes it annoying to navigate between the two. I often like to open both in new tabs.
--visual complexity: humans understand numbers well, especially hackers. scanning down a page, I can read and understand numbers much more quickly than charts.
While I really think the ideas behind some of your aesthetics in the redesign (like the score meter), I think these take away from the usability of HN. HN is a site mostly visited by HN experts, people who use HN everyday, and, as such, I think navigation, especially quickness, is one of the most important principles in the design of its layout.
And can I just say, the inclusion of the search bar at the top pleases me. I hope one day HN has a search bar because sometimes I like to search for content on HN, but have to use third party sites.
Otherwise, this looks like a solution in a search of a problem. Not the first redesign of this kind and certainly not the last one.
http://i.imgur.com/5WJwMUC.jpg
You should really use light weight fonts carefully.
Side notes on my own user preferences: I personally like seeing how fresh something is, as if something's on the homepage and brand new it's probably pretty important -- I also use the number of comments as a gauge, and splitting them to the side might make this harder.
How will this layout work on mobile?
This design at least has the link far away from the title; I can't see the flag link or the comments link, so I don't know whether those are good.
Once a story hits the front page, its points are irrelevant. I rarely notice the difference between, say, 20 and 200 points for example. Comment count is far more important, this is a discussion site more than anything else. The only time I ever notice or care about points, is when it's really extreme.
All that effort put into the premise behind the y-meter, and it's among the least valuable things you could focus on here.
Chrome Extension: https://chrome.google.com/webstore/detail/social-hotness/aha...
Firefox users check out http://userscripts.org/scripts/show/117780
The Y meter for me is not important, and would be unnecessary visual noise. Sure, the amount of (up)voting decides whether I will even see the topic but I don't need to know the amount.
I have no idea whether this makes sense to others.
Personally, I'd like a fixed header and footer (always visible). Didn't see it mentioned.
And for me I think it's going to be tough to move my eyes across the page to see comment count. Would zebra-striping help?
Relating to zebra-striping, alternating colors are still hard to scan with sometimes on long lists. Would a three-shade (or four? or five?) zebra-stripe setup work artistically? And would it help with scanning across the page? I don't know.
I can see the different values on the Y-meter get a nickname btw, dash, L, C, O...
You will catch a lot of flak, because everyone has their own opinion. A significant amount of people read HN with Lynx but will still comment on your design.
There are, however, some nuggets of truth buried in even the most abusive criticism so try to focus on that, and not the negativity.
Thanks for the comment :) Cheers.
the great thing of HN is that shows the "news" as a links, simple, human brain likes lists, makes easier to follow.
I think that accessibility and reading are the main improvements that can be done and HN needs
[1]: http://hubski.com
I've been using it for just over a year, and find it extremely pleasurable to use.
Overall, way too much orange going on. Y Meter is a good concept, but I think it detracts from the title of the post too much (being orange and all).
Are you going to do more versions?
Kudos, and good luck. I hope PG himself, or someone from YC, contacts you :)
I would like to change it to a Unicode char cause the current image is to low res and there is a Unicode char that is that exact icon.
Don't do that.
Mobile first!
Please make the fonts and arrows bigger.
Hila.
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.