12 ms·

Show HN: Hacker News Redesign

• robinhoodexe 12y ago
  Oh yes please, that looks very good in my opinion.
  • HilaPeleg 12y ago
    Thanks :)
  • b2themax 12y ago
    Yes, lets do this.
  • waylandsmithers 12y ago
    Maybe this could start as a chrome extension?
• nilkn 12y ago
  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.
  • netcraft 12y ago
    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)
• dictum 12y ago
  https://news.ycombinator.com/item?id=7996271 https://news.ycombinator.com/item?id=7996271
• gamerDude 12y ago
  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.
  • mzarate06 12y ago
    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.
    • tomblomfield 12y ago
      Exactly - I look for articles with a high number of comments, and usually jump into the comments first.
    • HilaPeleg 12y ago
      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 :)
    • gedrap 12y ago
      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.
  • jondot 12y ago
    Its a good question - what are the habits of a HN reader?
• nilgradisnik 12y ago
  Y-meter seems like a great concept from the UX perspective. Reddit should take notes from this one too.
  • jondot 12y ago
    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
• thisjepisje 12y ago
  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...
• PeterGriffin 12y ago
  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.
• manish_gill 12y ago
  The Y-meter thingy seems much less intuitive in order to keep track of the points compared to a count.
• binarysolo 12y ago
  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.
• valevk 12y ago
  Looks great! But I am actually not sure whether I like the redesign, or the way you presented your redesign.
• sampl 12y ago
  If you just want a prettier HN, try this Chrome plugin: https://chrome.google.com/webstore/detail/hn-special-an-addition-to/cchaceegbflphbdpfocjalgjhjoahiia?hl=en-US https://chrome.google.com/webstore/detail/hn-special-an-addi...
  • mikevm 12y ago
    Too much orange for me. I much prefer HackerNew: https://chrome.google.com/webstore/detail/hackernew/lgoghlndihpmbbgmbpjohilcphbfhddd https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...
  • Inversechi 12y ago
    This extension has made viewing HN for me much more pleasant since the author first published this.
  • paupino_masano 12y ago
    Likewise: another stylesheet overload for Hacker News is Readable HN - https://chrome.google.com/webstore/detail/readable-hn/jpnbjaechgbbpokepgmdkhgjfmkmjecn https://chrome.google.com/webstore/detail/readable-hn/jpnbja...
  • duderific 12y ago
    Thanks so much for that, just installed it and loving it! Always found HN a little difficult to read.
  • clarkm 12y ago
    Personally, I like Hacker News Enhancement Suite: https://chrome.google.com/webstore/detail/hacker-news-enhancement-s/bappiabcodbpphnojdiaddhnilfnjmpm https://chrome.google.com/webstore/detail/hacker-news-enhanc...
  • Fuzzwah 12y ago
    I'm a massive fan of http://hckrnews.com/ http://hckrnews.com/ for viewing the "front page". I then use the hackernews enhancement suite to allow for collapsible comment threads and other niftiness.
  • 12y ago
• mzarate06 12y ago
  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.
  • yuchi 12y ago
    And the fact that it requires a legend… probably adding the values directly into the meter could do the job.
  • HilaPeleg 12y ago
    Visual sometimes do the work. Specially when you having a glance look due lack of time.
• dugmartin 12y ago
  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.
• aikah 12y ago
  The font you are using in the body of your blog post is bearly readable on my computer : http://i.imgur.com/5WJwMUC.jpg http://i.imgur.com/5WJwMUC.jpg You should really use light weight fonts carefully.
  • bthomas 12y ago
    Suggest switching font weight 200 to 300 - still light, but readable
• jwblackwell 12y ago
  Nice idea, I'd really miss the numbers for upvotes though
• Nemcue 12y ago
  Looks tidy. No GreaseMonkey-scripts or similar to make this a reality?
  • HilaPeleg 12y ago
    Thanks :) Hila.
• ajanuary 12y ago
  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.
• NicoJuicy 12y ago
  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!
• whalesalad 12y ago
  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  's might be a better way to separate those components. - Having an arrow in addition to the y-meter is kinda noisy. Those could be combined. Sorta like Svbtle's hold-your-mouse-here-to-vote ... if the y-meter was replaced with a circle, it could expand or :hover into an arrow to vote. Not suggesting hovering will cause a vote, but rather a hover will indicate that you can vote. - Having the comments encapsulated in the little comment bubble is fun, but at first glance the type looks way too tiny and having it orange is tough on the eyes. It's doing more harm than good. - The stories could use a bit more vertical padding between them. Finally, don't take these comments the wrong way. I think 90% of the time something feels great inside of Photoshop, especially after mucking around with it for hours or days, but the only way to prove that the UI is great is to actually build it and play around with it. I hate to say it, but people keep "redesigning" HN without actually solving any significant problems. The only problem this site has right now is that it's unfriendly on mobile devices. Every other attempt has just been putting lipstick on a pig. That being said, it's a fun exercise and thanks for sharing your version. You put a lot of great thought into this and it's fun to read these.
  • owenmarshall 12y ago
    > 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!
• msutherl 12y ago
  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/adailobllebnhioglgkmaioilhlkdden?hl=en 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.
• rrrx3 12y ago
  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.
• deleted 12y ago
  [deleted]
• vpj 12y ago
  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.
• GuiA 12y ago
  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.
  • BrandonMarc 12y ago
    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.
    • jagger27 12y ago
      Just a little more whitespace would help.
    • HilaPeleg 12y ago
      I agree about the faint separators. I'll take under consideration in my follow up post - Stay tuned. Cheers, Hila
  • bernardom 12y ago
    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!
    • alttab 12y ago
      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.
• dvabr 12y ago
  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).
• BrandonMarc 12y ago
  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-)
• giancarlostoro 12y ago
  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...
• pmontra 12y ago
  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.
• brianbreslin 12y ago
  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.
• Tomte 12y ago
  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?
  • cmaxwe 12y ago
    Looks bad on Windows 7 Chrome as well.
  • ohitsdom 12y ago
    My thoughts exactly, have to strain to read it on Windows 7 using Chrome. Would expect more from a post on design...
  • currysausage 12y ago
    A screenshot (Windows 7, Chrome 35): http://i.imgur.com/I7KTlZs.png 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.
    • tambourine_man 12y ago
      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 http://i.imgur.com/J4Avl0Q.png?1
      • vacri 12y ago
        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 http://i.imgur.com/QNwMQC6.png
• jlees 12y ago
  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?
• planckscnst 12y ago
  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.
  • BrandonMarc 12y ago
    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.
• dyeje 12y ago
  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?
  • hetid 12y ago
    It looks like what you might imagine phases of a moon to look like if the moon was a square.
• ryanwhitney 12y ago
  Interested concept and attractive presentation at the top, but it doesn't make sense to present a "redesign" in a scaled 720px image.
• duiker101 12y ago
  Uhm for me says a lot about design when the website can't be even read http://i.imgur.com/vzDeQuW.png http://i.imgur.com/vzDeQuW.png
• reaasdf 12y ago
  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.
  • xaneem 12y ago
    Take a look at this: http://hn.premii.com/ http://hn.premii.com/ I've been using it for quite a while; works just fine!
• timme 12y ago
  > font-weight: 200; Don't do that.
• khaki54 12y ago
  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.
  • HilaPeleg 12y ago
    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.
• vlokshin 12y ago
  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 :)
• kineticac 12y ago
  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?
• shaunxcode 12y ago
  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.
  • HilaPeleg 12y ago
    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 :)"
• chrismonsanto 12y ago
  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 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.
• bbx 12y ago
  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 http://jgthms.com/why-hn-doesnt-need-a-redesign.html
  • mitchell209 12y ago
    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.
  • callum85 12y ago
    Where does it proclaim "UX expert"?
    • asjo 12y ago
      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
    • whyohwhyamihere 12y ago
      If you click the hamburger button it opens up a sidebar that has a statement proclaiming expertise. http://i.imgur.com/X6msOCj.png http://i.imgur.com/X6msOCj.png
      • MarkyC4 12y ago
        And this is why hamburger buttons are horrible UX
• ErikRogneby 12y ago
  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!
• Shivetya 12y ago
  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
• brandonhsiao 12y ago
  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.
  • krapp 12y ago
    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.
    • npsimons 12y ago
      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.
• calbear81 12y ago
  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.
  • ema 12y ago
    The Y-Meter is sorta logarithmic.
• laacz 12y ago
  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.
• btw0 12y ago
  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/ahabkiagphnfbeehielogfcdkfhkonjh https://chrome.google.com/webstore/detail/social-hotness/aha... Firefox users check out http://userscripts.org/scripts/show/117780 http://userscripts.org/scripts/show/117780
• huhtenberg 12y ago
  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.
• robertwalsh0 12y ago
  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
• thekingshorses 12y ago
  Even though I have implemented http://hn.premii.com/ 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.
  • Roritharr 12y ago
    Thanks for hn.premii.com! I love it and use it daily!
  • Osmium 12y ago
    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.
    • ryanwhitney 12y ago
      > 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.
    • agscala 12y ago
      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 http://hckrnews.com/about.html#extensions
• paulojreis 12y ago
  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.
• kowdermeister 12y ago
  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)
• pseudometa 12y ago
  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-
• dpcan 12y ago
  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.
• ntakasaki 12y ago
  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).
• forwardslash 12y ago
  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 http://hubski.com
• joryhatton 12y ago
  Please make this happen. We need ... something.
• jwarren 12y ago
  Here's a very simple stylesheet for HN tweaks that I forked from another one: http://stylebot.me/styles/2800 http://stylebot.me/styles/2800 I've been using it for just over a year, and find it extremely pleasurable to use.
  • mijoharas 12y ago
    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.
• deleted 12y ago
  [deleted]
• yogo 12y ago
  To help with the lightness of the font: document.getElementsByTagName('body')[0].style.fontWeight = '400';
• ivanbozic 12y ago
  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 http://i.imgur.com/qft9Y6q.png
• garraeth 12y ago
  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.
• laander 12y ago
  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-+/oieefcckcbbgniifdhhialgkmghahjgl https://chrome.google.com/webstore/detail/hacker-news-+/oiee...
• gcb4 12y ago
  the current design is perfect. it just needs a larger i upvote button and allow for mobile browsers to wrap long lines.
• Kiro 12y ago
  First HN redesign I like. I would actually use this.
• prayerslayer 12y ago
  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.
• geuis 12y ago
  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-07-08%2012.14.45.png 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.
• azinman2 12y ago
  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%202014-07-08%20at%2012.18.44%20PM.png https://dl.dropboxusercontent.com/u/779054/Screen%20Shot%202...
• sahoo 12y ago
  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.
• adventured 12y ago
  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.
• Audiophilip 12y ago
  I use a Stylish theme called "Georgify for Hacker News (Solarized)", and it looks superb! Sample: http://i.imgur.com/6RvxQVT.png http://i.imgur.com/6RvxQVT.png
• nijiko 12y ago
  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.
• jackmaney 12y ago
  I love the Y-meter, but the font that you chose physically hurts me when I try to read it.
• callesgg 12y ago
  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.
• didip 12y ago
  I only have 1 change request: Please make the fonts and arrows bigger.
• provemewrong 12y ago
  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.
• sullichin 12y ago
  I want this thin grey body font trend to die. This blog is really not easily readable, and I have a high DPI display
  • Prefinem 12y ago
    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.
• mushishi 12y ago
  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.
• speeddefrost 12y ago
  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.
• Grum 12y ago
  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
• egypturnash 12y ago
  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.
• shrig94 12y ago
  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.
• DigitalSea 12y ago
  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.
  • HilaPeleg 12y ago
    Thanks, Happy to hear :)
• lesserknowndan 12y ago
  Why do so many visual designers for web use Helvetica Neue when it is such an expensive font to actually use for web?
• mzuvella 12y ago
  Very slick. Would love to see HN updated someday soon.
• andyhmltn 12y ago
  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
• Schwolop 12y ago
  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.