Hacker News Redesign

31 points by samholmes 13 years ago | 58 comments

inetsee 13 years ago |

One of the things I like about the existing Hacker News design is that it's simple and very easy to read. Your redesign uses smaller fonts, which, in my opinion, is definitely not an improvement.

a235 13 years ago | |

Support this statement! Design that sacrifices content for sake of nice looking white-spaces can be used only on personal pages that nobody reads.

veeti 13 years ago | | |

Whitespace doesn't exist just for the sake of being pretty. At least to me I find this mockup much more readable than the current design, as the space between links clearly separates them. This makes it much easier to read their titles.

samholmes 13 years ago | | |

There will be less white space and it will be used more scarcely, however I'd rather use a little bit of white space instead of something like a horizontal line. Wouldn't you agree with this? :P

d23 13 years ago | |

Really? On my computer it's the exact opposite. The HN design looks like the font is around 8pt; the redesign looks like it's around 11pt.

inetsee 13 years ago | | |

I opened up two, identical browsers (Chromium version 25) on my 27 inch IPS monitor. I opened up the redesign in one browser, and the regular Hacker News in the other. The redesign has visually, noticeably smaller fonts.

kijin 13 years ago | | |

The real HN has 10pt titles and 7pt metadata, at least on my PC.

The redesign makes titles smaller and metadata larger, in effect making them the same size.

I think this is a bad change, because now there's little distinction between title and metadata.

alex_doom 13 years ago | |

The font size is the same size for me. I do like the increased padding on the design.

kmfrk 13 years ago | |

Except for the god-awful vote buttons. They're even still image files as well.

lignuist 13 years ago |

Any redesign should make the voting buttons significantly larger. It is really hard to hit them on a tablet.

james-skemp 13 years ago | |

Agreed. Having feedback that the vote counted would be helpful as well. When I was getting used to my new tablet I'd select them, so they'd vanish, but moving or touching elsewhere would show the buttons again. Odd.

vblord 13 years ago | |

lol. I've been reading hackernews for years and didn't even know there was a voting button

zalew 13 years ago |

hard to call it a redesign when it doesn't solve any problems.

cake 13 years ago | |

It does by making important elements stand out (such as author, comments...). Bigger arrow which is sometimes tricky to hit.

The colors kinda kills the eyes though.

rmrfrmrf 13 years ago | | |

Author (submitter, really) and comments are the last two things I care about.

javipas 13 years ago |

I usually visit http://hckrnews.com, I like the clean design there... But yours is a nice effort

xemoka 13 years ago | |

My favourite too, simple, clean, and shows everything in an order that makes more sense. The latest changes to the site were excellent improvements as well!

gdltec 13 years ago | |

Nice, clean and easy on the eyes. Showing the right information in the right place, cool.

growt 13 years ago |

I use this chrome extension: https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...

It's probably not the prettiest but I like it.

jaredmcateer 13 years ago | |

What I like about this extension over the OPs proposal is that it gives emphasis to the title, not the metadata like author and comments. The font family and size choices are much better as well.

danielhughes 13 years ago |

For those on a wide-screen monitor, it would be nice if you used all of the empty real estate on the right. Move everything up to a single line and take what is currently your second-line content (comments, vote count, etc) and push it all the way to the right. It'll make it a lot easier to scan the headlines. For mobile devices you could always revert back to the stacked approach.

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

Beekon 13 years ago | |

While this might look nicer, it's solving one problem by creating another, and in my opinion larger, problem.

The problem when it comes to listings is that information needs to be easily scannable. The information to be scanned usually has a certain hierarchy, so there has to be a separation that reflects this hierarchy. If you use your solution, you favour optimal separation while sacrificing scanability.

This is not exactly a straight-forward problem to solve because the hierarchy is different for everyone. But one thing we can all agree on is that the title is at the very top of it. So, having the title in a bigger font-size, maybe bold, but definitely more contrasted as the stuff around it goes without saying. So the current HN style is not that far off the mark, though I think it could do with less data and/or more whitespace, to counter the "gray haze syndrome".

A straightforward fix for this meta-data clutter would be to make it collapsable, you could then show it in a tooltip on hover for example. Or make it collapsable on a per story basis to cater for tablet/phone users.

jimsteinhart 13 years ago |

Why did you use Arial narrow in the Header and Footer? In my opinion this looks a bit crammed.

chollida1 13 years ago |

This fixes things that really aren't' broken and doesn't even attempt to fix the one big problem hacker news UI has.

The voting buttons are still too small.

samholmes 13 years ago |

Wow! I really didn't expect this much attention and feedback! First, I want to say thanks for all the comments!

I designed this last, late California night. So the design isn't finished; this is a first draft.

Obviously the posts themselves are an issue. I didn't put much attention to the posts. I'll do that. Some of the feedback I got on it were: 1. Larger vote buttons. 2. Less contrast (too hard on the eyes). 3. Too much white space, a little too small of text. 4. Focus on title, not author.

Some other feedback I got was on the orange color. I pulled this straight from HN's header bar. I guess because the bar is taller that the color is brighter. I need to think about if it's the color or the surrounding elements that make it feel this way.

Keep up the commenting and feedback. I'm not finished here yet. I really liked the HackerWeb design, but it's too narrow; it feels like a mobile app. I'll pull some inspiration from there, but I really want to bring the design back to a "hacker" feel. So stay tooned!

Semaphor 13 years ago |

Personally I prefer the HackerNew Chrome extension. Really big links on the frontpage and collapsible comments: https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...

alecbenzer 13 years ago | |

Oh wow, I'd always found myself wanting collapsable comments, this is nice.

Only thing is now for some reason chrome isn't displaying urls at the bottom of the page when I hover over links?

Semaphor 13 years ago | | |

> Only thing is now for some reason chrome isn't displaying urls at the bottom of the page when I hover over links?

That's weird, probably on your end as it works fine for me.

hipsters_unite 13 years ago |

The problem is that if you go for a clean (read: white-heavy) design, then you end up with black text on white background. I prefer the classic HN purely because it is (to me) a bit milder on the eye. Kudos for trying though.

samholmes 13 years ago |

I designed a slightly new Hacker News. Comment and let me know what you think.

starikovs 13 years ago |

I love the classic design :)

rocky1138 13 years ago | |

Me, too. I hope it never goes away in favour of flavour-of-the-month web design.

There's just enough space between articles and a ton of stuff fits on the screen at once. If it's not to your liking, there's a ton of alternative HN design services out there you can use.

bbx 13 years ago |

There have been and will be many redesigns attempts of HN, when it actually doesn't need one. I wrote about it [1]. HN's design isn't neutral. It carries a message that is bigger than purely graphical appeal. Some UI elements could possibly be improved but these issues are probably too insignificant to spawn a whole redesign process that would impair HN's great usability.

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

amanvir_sangha 13 years ago |

This is how I use HN: http://i.imgur.com/IRzF5LQ.png

Browser: Chromium, Extension: "HipsterNews" -> https://chrome.google.com/webstore/detail/hipsternews/midncc...

It's a copy of news.layervault.com, which copied news.yc in the first place. I'm sure there is some sort of joke in there somewhere.

alexyoung 13 years ago |

I think larger fonts with more spacing in the list would be more readable:

http://jsbin.com/ucupox/1/

zybler 13 years ago |

I kinda prefer http://cheeaun.github.com/hackerweb/#/ though.

cbg0 13 years ago |

The orange at the top seems way too bright and the fonts are a tad small in my opinion.

I switched to Hacker News Enhancement Suite https://chrome.google.com/webstore/detail/hacker-news-enhanc...

bjourne 13 years ago |

This is my hn: http://jsbin.com/aronar/1. It uses my stylesheet from: https://raw.github.com/bjourne/readable-userstyles/master/ha...

DanBC 13 years ago |

I prefer bigger fonts. I also prefer off-white backgrounds and dark fonts, but still keeping high contrast. High contrast is good, but this is a bit much.

I really like the way it fits in my narrow browser window! Many redesigns don't.

And I like the bigger upvote button.

Splendor 13 years ago |

I prefer http://lessmeme.com/less.html

oskob 13 years ago |

Same but different. And ugly?!

critiq 13 years ago |

Looks good, I think fonts are too narrow. author name can be greyed out.

rtexal 13 years ago |

HN has a really nice hacker-ish design feel to it already so it's great. Just that it is not very tablet and mobile friendly with the really small buttons.

samholmes 13 years ago |

I'm going to design this thing into a Github page, but I need to get HN feed data. Could someone comment on where I could get HN data through an API?

upnorthkid 13 years ago |

A bit too much spacing for my liking, though maybe I am just pissed that google chrome new design has everything very separated at the moment.

holgersindbaek 13 years ago |

Really like it visually, but I don't think there's enough attention on the actual titles. The eye doesn't catch the titles enough.

instakill 13 years ago |

This is how I use it: http://i.imgur.com/uwKcrn5.png

rikacomet 13 years ago | |

This one is better. But still two things remain: 1. the font is a little tad too big by my preference. 2. The orange is a little too bright.

It seems this is editable, I will check back later to add my perception of HN.

denysonique 13 years ago |

Zooming in breaks the layout.

james-skemp 13 years ago | |

Perhaps related, on a Nexus 7 titles that wrap cause the comments line to lose their indentation.

chandru89new 13 years ago |

pretty slick and nice! like it very much. it would be awesome if PG or someone takes time to get your design ported to the real HN :D

mrtobo 13 years ago |

The the post title type is still too small.

JimWestergren 13 years ago |

Why the obsession with tiny fonts?

benhebert 13 years ago |

New version is hard on the eyes.

rashthedude 13 years ago |

NOOO, it's too bright.