Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Hacker News Redesign (hilapeleg.io)
380 points by jondot on July 8, 2014 | hide | past | web | favorite | 198 comments



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!


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


" Plus, all data outside 0-400 is completely lost. Something with 401 votes looks exactly the same as 2000 votes. "

I'm not sure that's a bad thing.


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?


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 faint separators. I'll take under consideration in my follow up post - Stay tuned.

Cheers, Hila


Just a little more whitespace would help.


> (same reason I have the percentage on for my devices's battery)

Do you have the wireless signal strength as well?


Duh, no.

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.


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.

[1] http://jgthms.com/why-hn-doesnt-need-a-redesign.html


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.


Why not just use one of the apps? I know we have half a dozen on Android, and I've seen at least one iOS one, and a couple mobile targeted web versions...


>Why not just use one of the apps? //

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've switched to http://hn.premii.com/ on mobile. Give it a try.


If HN is as technologically in-touch as we like to say we are, then the site itself should adhere to web standards. The current standard is responsive design that is device-independent. "Just use an app" is a terrible way to look at the mobile view problem.


> Why not just use one of the apps?

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?


MiniHack for iOS is currently my favorite way to browse HN now.


I just got in the habit of "reverse pinching" before trying to click anything.


It's not just the impossible click targets, it's the layout, too. It's pretty much impossible to read, even in landscape mode, without constant horizontal scrolling.


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.


At the minimum, hacker news needs an HTML overhaul. How am I supposed to apply user styles to the crazyness that HN's servers are spitting at me?


Where does it proclaim "UX expert"?


If you click the hamburger button it opens up a sidebar that has a statement proclaiming expertise. http://i.imgur.com/X6msOCj.png


And this is why hamburger buttons are horrible UX


They really are. It doesn't matter if they're used on websites or in web browsers or in any other context. Time and time again it has been shown that they do nothing to help make functionality obvious and easily accessible, and instead actually make functionality much harder to discover and use.


I have seen various complaints and 'studies' about this, but I don't agree at all, as a user. Of course the functionality hidden away in menus is not 'obvious' or immediately accessible, that's the whole point. It's for stuff you don't use very often. With most apps I use, there's a handful of features I don't want to have on show all the time because it would be distracting, but I want to be able to find it when I go digging for it.

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".


Menus aren't merely about hiding functionality. They're about organizing oft-used functionality in a way that's easily and consistently accessible, while at the same time not consuming too much screen space.

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.


The sidebar says "Hila Peleg is a UX expert and designer living in Israel" - it pops in if you click the tre striped icon in the top left corner of the page


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?


A screenshot (Windows 7, Chrome 35): http://i.imgur.com/I7KTlZs.png

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.


I don't know how brilliant the OS X font rendering must be, but this font is 1px thick when zoomed to 300%. How is this supposed to work?

Doesn't work on OS X either.

http://i.imgur.com/J4Avl0Q.png?1


Weirdly, it's teetering towards unreadable on FF, but looks reasonable in Chrome, here on Debian (though it's still subject to that stupid gray-on-gray fad).

http://i.imgur.com/QNwMQC6.png


Thanks for the heads-up. I'll check it out in a more detailed way.


I think just changing the font-weight from 200 to 300 makes it a lot better. http://i.imgur.com/9XucxQh.png


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.


> It's now creeping into advertisement.

Relevant case study: German political ads: http://up.picr.de/18272570zq.jpg - Helvetica Inserat vs Helvetica Ultra Light.


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.


Looks bad on Windows 7 Chrome as well.


Chrome 35.0.1916.153 m. Font is barely readable. Far too thin.


Here's how it looks for me. Good in Firefox, average in IE, bad in Chrome. http://gyazo.com/4600558863db35890b9ca60f304c47be


My thoughts exactly, have to strain to read it on Windows 7 using Chrome. Would expect more from a post on design...


Font is rendered ok on chrome/ubuntu but the text is way too light to be readable


your comment is not constructive, that's not ok.

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.


Nonsense. Tomte's comment points out some serious and real flaws with the design of the website that severely impact its usability. It's very constructive to point out such problems.

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.


> 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.


fixed, sorry :)


No, it's not - http://imgur.com/yeLrLlY - W8/FF30


Still does not look good -- Look how lightly some colors show in vertical lines (zoomed in 8x): http://i.gyazo.com/38415091f10db0cba694f55dcb3cbff4.png


I'm sorry, it definitely isn't. I had to increase the font-weight from 200 to 300 to even get basic legibility.


Still looks broken to me. I see Roboto, 18px, 200 weight, which is really hard to read. 14px 300 looks much better to me.


Few comments, take these with a grain of salt.

- 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 &nbsp;'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!


Given that it's eighths, I would have expected an appeal to the 'hacker' part, and use powers of 2 for the scaling.


Hey there! I appreciate your insights - i took some good notes. Stay tuned for my follow up post.

Cheers, Hila :)


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.

Otherwise, I enjoyed the look.


Agree.

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.


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.


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 :)


Exactly - I look for articles with a high number of comments, and usually jump into the comments first.


Its a good question - what are the habits of a HN reader?


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.


That's a really cool re-design. Two things I liked about it: collapsible comment threads, and comments that are readable on mobile. Honestly, if the HN design remained exactly the same but fixed those two paint points I'd be happy.


> Honestly, if the HN design remained exactly the same but fixed those two pain points I'd be happy.

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 hckr news plugin for chrome/safari has a few nice things including collapsible comments. Maybe you should check it out.

http://hckrnews.com/about.html#extensions


Thanks for hn.premii.com! I love it and use it daily!


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.

Cheers, -d-


> 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.


I have just now reliazed there is a search box at the bottom.


Yeah I honestly always thought HN never even HAD search. Crazy


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.


Same as drsintoma, I had no idea there was a search bar!

I think that speaks a lot of a non-intuitive placement.


+1, never noticed that before.


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.

Stay tuned, and thanks again Hila :)


Sure, feel free to use it.

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]


Well, fixing them might be harder than you'd think without a front end rewrite. HN is built with tables, last time I looked...


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.


You are correct, the comment pages are a disaster on the phone. The main page does wrap as expected for me.


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.


Here is a redesign (as a chrome extension) that is sort of based on the comments here http://vpj.svbtle.com/hacker-news-redesign


The Y-meter isn't very useful to me.

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.


And the fact that it requires a legend… probably adding the values directly into the meter could do the job.


Visual sometimes do the work. Specially when you having a glance look due lack of time.


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.


I find the Y-meter a bit gratuitous and not very readable. For a better solution that works right now, check out HN Colors: https://chrome.google.com/webstore/detail/hacker-news-colors....

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.


I like it, here some few points though.

- 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!


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.


I absolutely disagree.

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.


Some thoughts:

- 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.


The Y-Meter is sorta logarithmic.


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-)


If you just want a prettier HN, try this Chrome plugin: https://chrome.google.com/webstore/detail/hn-special-an-addi...


I'm a massive fan of http://hckrnews.com/ for viewing the "front page".

I then use the hackernews enhancement suite to allow for collapsible comment threads and other niftiness.


Too much orange for me. I much prefer HackerNew: https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...


Likewise: another stylesheet overload for Hacker News is Readable HN - https://chrome.google.com/webstore/detail/readable-hn/jpnbja...


Personally, I like Hacker News Enhancement Suite: https://chrome.google.com/webstore/detail/hacker-news-enhanc...


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. :)


Thanks so much for that, just installed it and loving it! Always found HN a little difficult to read.


This extension has made viewing HN for me much more pleasant since the author first published this.


This post was posted in #startups.

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).


I am one of few who thinks that HN has to have a redesign but it should not be that much radical. Typography, responsivity and let's call it a day.

P.S. OP font is so thin, I had to stop reading after first few paragraphs.


Quick note about your own page.

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.


Uhm for me says a lot about design when the website can't be even read http://i.imgur.com/vzDeQuW.png


To this day, i still find the HackerNews+ (or simply HN+) chrome overlay by @jarques quite awesome. It has a Google-esque look to it and does a great job in keeping the overall style readable, breathable and minimalistic.

Get it here: https://chrome.google.com/webstore/detail/hacker-news-+/oiee...


That hotness meter is pretty spiky and cornery. Not at all inviting. If you want to be minimal and engage the non-visual brain to transmit "hotness", why not create a palette ramp from, say, a deep purple, to the HN orange, and color the entire title link based on hotness? (Warning: Do NOT make the 'cold' color fade into the page. Keep it contrasty but still different.)

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.


Most comments are focused on the y-meter... and I understand why: it's the most different from the current page and is visually complex so it draws attention. I'm also not sure what all it adds outside of some graphical interest... I don't actively really need to know the # of votes as the current rank is supposed to be a better indication of what I should pay attention to. The argument over remembering 5-7 things doesn't really apply to the y-meter, but simplifying the numbers to give some relative scale can help I suppose.

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...


This isn't to criticize your design itself, but I've always suspected HN was designed to be less than aesthetically appealing for a reason: to prevent a culture of focusing on appearances. HN that looks sexy (for example, I noticed you increased the padding between items in the navigation) isn't HN, the way Cambridge with good weather isn't Cambridge.


I've seen this argument made quite a bit but I suspect it's overblown. Only pg could answer for certain, but from what I understand, the site is essentially a test application for the language it's implemented in (Arc). I think it's more likely that pg simply didn't find the frontend interesting, so he put as little effort into it as he felt necessary.

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.


Not to second guess someone else's motivations, but I would have to disagree. To me, current HN design feels perfect, and I'm sure if pg had wanted it to be "shinier" he would have done so. After all, it's implemented in the language that makes everything else look like Blub, so it would have been easy. HN epitomizes the substance over style school of design.


Not a fan of the Y-meter on first glance. Maybe I would like it more after getting used to it.

- 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.


Of all the Hacker News redesigns and variations I have come across, I still prefer the Georgify extension for Chrome. It's 99% original Hacker News with Georgia as the default font, bigger fonts and more subtle colours that are easier on the eyes.

Screenshot: http://i.imgur.com/qft9Y6q.png


Right or wrong I use the comment count as a proxy of how interesting the link is - moving it way over to the left breaks that.


The font on that post is pretty unreadable on my high dpi screen. Even zoomed in a few times and the font was still too thin and gray to read comfortably.

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).


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.

Otherwise, i think it's excellent.


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.


What bothers me personally the most is aligning the comments link right. This works well on almost square browser windows, as in the mockup, but considering that hackers may (probably?) have huge screens at work... That's too far away from the other links. Fitt's law etc.


That big empty square in the middle of the point meter would be a perfect place for the comment count to go. That way it would be communicating both the rank and activity in one place. Having it flushed right makes it a chore for your eyes to correlate which article has which comments.


Hi there Shaunxcode - Check out my response earlier ;)

"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 :)"


From a visual perspective, I like it.

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.


I actually prefer the current design, and here's why:

--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.


I've seen a couple of redesigns of HN in my time and I have to say, your redesign is by far the best I've seen of any HN redesign. You've obviously put a lot of thought and effort into this, the complexity of the Y meter is just crazy. Great job on the design thinking, I think regarding the use of the Y meter in some places is confusing and contradictory to how you've used it elsewhere. With exception of that, I can't fault your redesign, nice and clear.

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.


Thanks, Happy to hear :)


You can tell it's going to be a superficial designer exercise when presentation starts with an isometric projection over a gradient background with a thick edge and a wrap-around color bleed. That's Dribbble's most popular trick for sprucing up shots that otherwise are too bland or flat to get to the front page just on the merits of their design. Such manipulative presentation gimmicks is a bane of Dribbble and Behance and I really hope they don't spread to projects that are aimed at the HN crowd.

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.


If you're going to redesign the site, please make it mobile friendly. I frequently read items on my iPhone using apps like Pulse and Feedly. The current implementation is far from ideal and could use some significant work.


The font you are using in the body of your blog post is bearly readable on my computer :

http://i.imgur.com/5WJwMUC.jpg

You should really use light weight fonts carefully.


Suggest switching font weight 200 to 300 - still light, but readable


Love seeing the reasoning behind the curtain of design. I like the idea of the Y-Meter, with the current system the points are somewhat meaningless unless compared against each other and the meter makes that a lot easier to visually parse. Let's try it!

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?


For me (and many others, I'm sure), the top requirement of a redesign is to get the flag link far away from the title and comments links. When using on a small mobile device, I frequently find myself accidentally hitting the flag link. It's why I'm currently using the "Hacker News 2" app (which frustrates me in different ways) instead of the website.

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.


Agreed (see my mobile comments). I would prefer putting the "upvote" link on one side, and the "flag" link at the opposite side of the page, so that there's little room for accident. Same for comments.


In my opinion points are not as important as the creator of this apparently thinks (as to warrant the y-meter).

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.


There's no reason I should have to scroll a bunch of stuff that I don't care about before I see the design. The ingredients are less important than what they look like put together


Great Idea! But why not try out the Social Hotness Chrome extension which already has a usable "social meter" for Hacker News.

Chrome Extension: https://chrome.google.com/webstore/detail/social-hotness/aha...

Firefox users check out http://userscripts.org/scripts/show/117780


For me the emphasis on the amount of votes is weird. When I browse HN, I look at what the topic is, and whether the thread has any comments. The more the comments, the more likely I am going to check them out. Then I open the comments view, and the actual website in another tab.

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.


It's a nice idea, but I think the ratings squares are way too distracting and don't provide any additional functionality to warrant that much of a distraction IMO


Looks good, and great comments so far.

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.


The only thing I don't like is the Y-Meter and the comments being all the way to the right, that's such a far distance just to click on comments...


I think the Y-meters are distracting. I like to judge articles on their title.

I can see the different values on the Y-meter get a nickname btw, dash, L, C, O...


I really dislike the conversion from text/numerals to graphics in this and many other redesigns. It turn web-scraping of the page from a trivial process into a view-the-source trial and error one. Given the primary audience of this site is hackers, I'd suggest we're more inclined to favour the accessibility of data over the superficial gloss of a new design.



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.


the current design is perfect. it just needs a larger i upvote button and allow for mobile browsers to wrap long lines.


I like it -- it's certainly better than what we have.

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.


Hi there. I think there is always a room for criticism. As a designer i have the tendency to listen for what the Dev side have to say and what other aspects i can draw from and use.

Thanks for the comment :) Cheers.


I agree, the "y-meter" it's too complex, looks like a loading status instead of "rating meter"

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


Cool design, the y-meter reminds me a lot of the hubwheel we have at hubski[1]. In that vein you could remove the up arrow on the left side of the feed and differentiate on the y-meter itself whether or not you've clicked it.

[1]: http://hubski.com


I thought it was weird/annoying how the Y Meter fills up inconsistently. Sometimes when you go up a tier in points, the bar extends 1 unit (half a side) and other times it extends 2 units (an entire side). It doesn't event alternate between those. What's up with that?


It looks like what you might imagine phases of a moon to look like if the moon was a square.


Y-meter seems like a great concept from the UX perspective. Reddit should take notes from this one too.


Thanks, the original post is my friends, I just called her to come online and give back explanations / background if anything would like to know more


The Y-meter thingy seems much less intuitive in order to keep track of the points compared to a count.


Here's a very simple stylesheet for HN tweaks that I forked from another one: http://stylebot.me/styles/2800

I've been using it for just over a year, and find it extremely pleasurable to use.


hmm.. I'd not heard of stylebot. Feels like a nice thing if you want to easily tweak some css on a website for personal use. Thanks for the tip.


I might prefer a filling circle instead of just a box that is hollow all the time. To be honest the number system works just fine, perhaps change the up arrow to another symbol once the number of up votes passes a threshold, or comment level does


Black text on orange was never great, so I'm with you on the white text in the header.

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?


This looks exactly like Hubski's layout, but it isn't so rounded. Aside from the comments link being too low-profile and all other info besides the title being squished and inline, it's alright I guess.


I use a Stylish theme called "Georgify for Hacker News (Solarized)", and it looks superb! Sample: http://i.imgur.com/6RvxQVT.png


I think you picked a great way to present this -- the strategy between how and where (HN specific) is great. I love when designers can think this way.

Kudos, and good luck. I hope PG himself, or someone from YC, contacts you :)


The only thing i would really like to change on HN is the Up arrow dart image.

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.


I would love to see hackernews be more tablet friendly. For voting and clicking through to comments, its not always intuitive to click the links with my finger since the target is so small.


Somebody should make a mobile redesign proposal. The fact that HN has no media queries added is unfortunate. (yes, I'm aware that there are some 3rd party implementations out there)


I don't know, you could have easily made this a userscript or browser extension, so that everyone could try it out and see how it feels instead of speculating about usability.


> font-weight: 200;

Don't do that.


Nice idea, I'd really miss the numbers for upvotes though


The website doesn't renders properly Chrome on windows, i know its a bug, which involves something with trutype rendering, does anyone knows a fix.


Nice effort but bad idea: leave the number at the left and the number for the points. The visual icons don't give the same amount of information.


Interested concept and attractive presentation at the top, but it doesn't make sense to present a "redesign" in a scaled 720px image.


A redesign on mobile would be a more useful exercise. The way the comments get smaller and smaller when nested makes HN almost unusable on my Nexus 4.

Mobile first!


I only have 1 change request:

Please make the fonts and arrows bigger.


First HN redesign I like. I would actually use this.


To help with the lightness of the font: document.getElementsByTagName('body')[0].style.fontWeight = '400';


Why do so many visual designers for web use Helvetica Neue when it is such an expensive font to actually use for web?


I want this thin grey body font trend to die. This blog is really not easily readable, and I have a high DPI display


I went to the comments to say the exact same thing... it is completely illegible and for being a "designer" / UX expert, it makes me think that the author doesn't know what he is doing.


Looks great! But I am actually not sure whether I like the redesign, or the way you presented your redesign.


Looks tidy. No GreaseMonkey-scripts or similar to make this a reality?


Thanks :)

Hila.


Very slick. Would love to see HN updated someday soon.


Oh yes please, that looks very good in my opinion.


Maybe this could start as a chrome extension?


Thanks :)


Yes, lets do this.


Please make this happen. We need ... something.


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.


I love the Y-meter, but the font that you chose physically hurts me when I try to read it.




Registration is open for Startup School 2019. Classes start July 22nd.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: