
Show HN: Hacker News Redesign - jondot
http://hilapeleg.io/2014/06/01/hackernews-redesign/
======
GuiA
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.

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

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

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

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

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

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

~~~
pbhjpbhj
> _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.

~~~
szx
I've switched to [http://hn.premii.com/](http://hn.premii.com/) on mobile.
Give it a try.

------
Tomte
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?

~~~
jondot
fixed, sorry :)

~~~
huhtenberg
No, it's not - [http://imgur.com/yeLrLlY](http://imgur.com/yeLrLlY) \- W8/FF30

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

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

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

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

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

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

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

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

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

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

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

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

------
mzarate06
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
And the fact that it requires a legend… probably adding the values directly
into the meter could do the job.

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

------
msutherl
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...](https://chrome.google.com/webstore/detail/hacker-news-
colors/adailobllebnhioglgkmaioilhlkdden?hl=en).

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.

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

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

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

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

------
calbear81
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
The Y-Meter is sorta logarithmic.

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

------
sampl
If you just want a prettier HN, try this Chrome plugin:
[https://chrome.google.com/webstore/detail/hn-special-an-
addi...](https://chrome.google.com/webstore/detail/hn-special-an-addition-
to/cchaceegbflphbdpfocjalgjhjoahiia?hl=en-US)

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

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

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

------
geuis
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-...](https://www.dropbox.com/s/2ialdcjqba0wthr/Screenshot%202014-07-08%2012.14.45.png)

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.

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

------
laander
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...](https://chrome.google.com/webstore/detail/hacker-
news-+/oieefcckcbbgniifdhhialgkmghahjgl)

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

------
azinman2
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...](https://dl.dropboxusercontent.com/u/779054/Screen%20Shot%202014-07-08%20at%2012.18.44%20PM.png)

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

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

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

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

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

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

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

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

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

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

------
shrig94
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
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
Thanks, Happy to hear :)

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

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

------
aikah
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
Suggest switching font weight 200 to 300 - still light, but readable

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

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

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

------
btw0
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...](https://chrome.google.com/webstore/detail/social-
hotness/ahabkiagphnfbeehielogfcdkfhkonjh)

Firefox users check out
[http://userscripts.org/scripts/show/117780](http://userscripts.org/scripts/show/117780)

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

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

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

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

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

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

------
dictum
[https://news.ycombinator.com/item?id=7996271](https://news.ycombinator.com/item?id=7996271)

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

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

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

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

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

------
dyeje
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
It looks like what you might imagine phases of a moon to look like if the moon
was a square.

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

~~~
jondot
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

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

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

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

------
kineticac
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?

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

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

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

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

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

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

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

------
timme
> font-weight: 200;

Don't do that.

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

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

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

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

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

------
didip
I only have 1 change request:

Please make the fonts and arrows bigger.

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

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

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

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

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

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

~~~
HilaPeleg
Thanks :)

Hila.

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

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

~~~
waylandsmithers
Maybe this could start as a chrome extension?

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

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

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

