Another Unsolicited HN Redesign(uxbeginner.com)
uxbeginner.com
Another Unsolicited HN Redesign
http://www.uxbeginner.com/hacker-news-uxui-redesign-process/
39 コメント
You could probably cook up a userscript that swaps the comments url and the article url, and changes the 'comments' link text to 'article'. (This also takes care of the opening sentence of many comments ('did you read the article?').
My main issue is that moderation and filtering of comments based on score could be much improved, or so it seems. Sometimes I just want to read the best rated comments of a story.
I like that you've been relatively conservative with the redesign and have clearly relied on established convention so that existing users can carry over their existing experience into the new UI.
I think it could use another fine-grained pass over each UI element to evaluate how important it might be to the user and whether the contrast/size/color/prominence of the element matches your expected prioritization.
For example, the numbers along the side are large and high-contrast, but are pretty trivial for people browsing articles (ordering is meaningful, but specific numbering isn't). On the other hand, commenting is a big part of HN, but is a very small and low-contrast part of the mockup, with no visual indication of how to access the comments.
I'd also have another pass at the color choices - white on orange and mid-gray on mid-gray can be pretty difficult to scan.
Great thinking on the filtering and top-level organization, though. There's some good stuff in there
I think it could use another fine-grained pass over each UI element to evaluate how important it might be to the user and whether the contrast/size/color/prominence of the element matches your expected prioritization.
For example, the numbers along the side are large and high-contrast, but are pretty trivial for people browsing articles (ordering is meaningful, but specific numbering isn't). On the other hand, commenting is a big part of HN, but is a very small and low-contrast part of the mockup, with no visual indication of how to access the comments.
I'd also have another pass at the color choices - white on orange and mid-gray on mid-gray can be pretty difficult to scan.
Great thinking on the filtering and top-level organization, though. There's some good stuff in there
The article titles are way too light imo.
+1. LC;DR > http://www.contrastrebellion.com/
Title color agreement aside, I feel the login form contrasts too much with the orange (and the blue forgotten password link is out of nowhere, as well). I can see why the designer would try to stick that general hue, but the reason that the use of the color currently works as it stands is because the top bar is very thin and provides the obvious functionality that it needs to. It isn't their fault though necessarily as orange is a tough color to work with.
Beyond that, the larger text for titles is nice if only as it makes scanning through them easier. Simply darkening them to a black or near-black would make for a large improvement alone.
Beyond that, the larger text for titles is nice if only as it makes scanning through them easier. Simply darkening them to a black or near-black would make for a large improvement alone.
Yeah, this design would be way hard on my eyes.
I've dealt with more than a few designers handling solicited corporate website redesigns and one of the most critical issues I see back are "That looks really great, but where is our logo?" Yours looks like a fine example of a pretty design but you've trampled all over their brand in favour of your own palette and taste. Different Y, different spacing, different colours. You've designed something for a different company.
That #FFF-on-#F60 Y is their brand. It's what they have all over their offices, on their business cards, on their main website... Unless the client is looking to rebrand (for which I can see no reason), you need to use their existing trademarks. Branding is as important to the client as UX is to the user.
(And on a UX tack, there's a severe lack of contrast in various places. You appear to have faded out the most important text on the entire page (the content) with no explanation why. Telling me "Because I want it to fade in on mouseover" is a fireable offence.)
That #FFF-on-#F60 Y is their brand. It's what they have all over their offices, on their business cards, on their main website... Unless the client is looking to rebrand (for which I can see no reason), you need to use their existing trademarks. Branding is as important to the client as UX is to the user.
(And on a UX tack, there's a severe lack of contrast in various places. You appear to have faded out the most important text on the entire page (the content) with no explanation why. Telling me "Because I want it to fade in on mouseover" is a fireable offence.)
>Telling me "Because I want it to fade in on mouseover" is a fireable offence.
How about, *because it creates incentive to try out the highlight effect and subsequently click, until the novelty wears of, at least.
How about, *because it creates incentive to try out the highlight effect and subsequently click, until the novelty wears of, at least.
kudos to you and great job being brave and sharing your work. takes courage to be that vulnerable.
having said that, it's not working for me.
1. the article list is now 100px or so lower on the page because the top bar is so large. the top bar is more readable and usable, but i can't remember the last time i clicked it, so i'd prefer to get to the articles more. 2. the numbers for each article (1,2,3,4) are the most prominent element, followed by the upvote. the article title is demoted. 3. the create account button is a tab. that doesn't seem right to me. 4. the bottom orange footer now is a heavy-weight element that draws my eyes from the articles.
overall i feel like the articles ought to be the most important element and this takes away from the articles.
but, keep it up.
having said that, it's not working for me.
1. the article list is now 100px or so lower on the page because the top bar is so large. the top bar is more readable and usable, but i can't remember the last time i clicked it, so i'd prefer to get to the articles more. 2. the numbers for each article (1,2,3,4) are the most prominent element, followed by the upvote. the article title is demoted. 3. the create account button is a tab. that doesn't seem right to me. 4. the bottom orange footer now is a heavy-weight element that draws my eyes from the articles.
overall i feel like the articles ought to be the most important element and this takes away from the articles.
but, keep it up.
[deleted]
On point 1. I hope you appreciate your angle is pretty oldschool and would beg to strongly disagree. I have read a lot of HN commenters over the past few years commenting on similar designs/redesigns that seem to share your viewpoint and desire for 'information density' and not needing to scroll, but I do suspect your opinion is basically that of a nerdish minority that is going the way of the dinosaur.
Scrolling is cheap.
A fat top-bar is not a negative, because you can't read 20 article titles at once and scrolling costs you nothing. I'd love to see a study on this but I suspect the number of article headlines we can cope with in one 'scan'(?) and get something useful from is around 5-10 max? Twitter on my phone shows me about 5 tweets at a time. Does it feel like a bad user experience to me? Hell no.
>> 4. the bottom orange footer now is a heavy-weight element that draws my eyes from the articles. [...] overall i feel like the articles ought to be the most important element and this takes away from the articles.
Sorry that is nonsense, we humans are not that easily distracted and know to look for content in the 'content area' between the header and footer area particularly when they're so clearly differentianted (content = white bit, header/footer = orange bit). My eyes go straight for the articles on every website with a coloured header/footer ever.
I have other issues with this redesign but namely that it still feels significantly inferior to the Georgify Chrome extension [1] that has been around for years now and just by virtue of good typography and minimal design is still kicking everyone of these redesign's respective asses.
That said good job and great post, it's definitely a big step up from the original and I love your header :)
[1] https://chrome.google.com/webstore/detail/georgify/ofjfdfale...
Scrolling is cheap.
A fat top-bar is not a negative, because you can't read 20 article titles at once and scrolling costs you nothing. I'd love to see a study on this but I suspect the number of article headlines we can cope with in one 'scan'(?) and get something useful from is around 5-10 max? Twitter on my phone shows me about 5 tweets at a time. Does it feel like a bad user experience to me? Hell no.
>> 4. the bottom orange footer now is a heavy-weight element that draws my eyes from the articles. [...] overall i feel like the articles ought to be the most important element and this takes away from the articles.
Sorry that is nonsense, we humans are not that easily distracted and know to look for content in the 'content area' between the header and footer area particularly when they're so clearly differentianted (content = white bit, header/footer = orange bit). My eyes go straight for the articles on every website with a coloured header/footer ever.
I have other issues with this redesign but namely that it still feels significantly inferior to the Georgify Chrome extension [1] that has been around for years now and just by virtue of good typography and minimal design is still kicking everyone of these redesign's respective asses.
That said good job and great post, it's definitely a big step up from the original and I love your header :)
[1] https://chrome.google.com/webstore/detail/georgify/ofjfdfale...
> I do suspect your opinion is basically that of a nerdish minority
I am sorry, but it appears you might have some confusion about the demographics and the target demographics. The name, for instance, might give you a promising hint, provided you do little digging about the word 'hacker'. At times it means something that it does not appear to mean.
I am sorry, but it appears you might have some confusion about the demographics and the target demographics. The name, for instance, might give you a promising hint, provided you do little digging about the word 'hacker'. At times it means something that it does not appear to mean.
Well of course, I didn't mean it quite that literally and am a bit sad to see I got downvoted but I guess I did make the point poorly (and mildy aggressively now I read it back).
I should probably just have linked to somewhere the argument has been made before [1].
I'm a nerd and I vastly prefer large type & generous amounts of whitespace over cramming lots of titles on one screen so it saddens me whenever I hear someone authoritatively state the 'information density' argument.
[1] http://uxmyths.com/post/654047943/myth-people-dont-scroll
I should probably just have linked to somewhere the argument has been made before [1].
I'm a nerd and I vastly prefer large type & generous amounts of whitespace over cramming lots of titles on one screen so it saddens me whenever I hear someone authoritatively state the 'information density' argument.
[1] http://uxmyths.com/post/654047943/myth-people-dont-scroll
you put an awful lot of words in my mouth. i didn't mention scrolling. re-read.
the top bar is too large vertically without enough value. readability improves a bit, but the sheer prominence takes away from the discoverability of the first article title.
i didn't mention type size or whitespace. i also like large type and generous amounts of whitespace.
i think you're just looking to argue for the sake of argument.
the top bar is too large vertically without enough value. readability improves a bit, but the sheer prominence takes away from the discoverability of the first article title.
i didn't mention type size or whitespace. i also like large type and generous amounts of whitespace.
i think you're just looking to argue for the sake of argument.
Sorry, I'm not looking for an argument and I didn't mean to put words in your mouth. My original post was badly written and overly argumentative, I think I was in a bad mood and a couple of your points just set off my usual UX'y triggers, I apologise.
You're right that I made the leap from your dislike of the top nav/footer to a dislike of scrolling/desire for 'information density'. Those things are often associated but I was wrong to make that leap. Again, my bad.
I disagree with your points that the header and footer are distracting and detract from the articles, that's it and that's all my original post should have said.
You're right that I made the leap from your dislike of the top nav/footer to a dislike of scrolling/desire for 'information density'. Those things are often associated but I was wrong to make that leap. Again, my bad.
I disagree with your points that the header and footer are distracting and detract from the articles, that's it and that's all my original post should have said.
[deleted]
Things being ugly doesn't mean bad design. There is no such thing as objectively good design because all designed objects live in a certain context. Hacker news is purposefully unattractive and the register forms are outdated because the site wants to attract a certain type of person. If you're perturbed by the visual design then the community would probably benefit from not having you since the entire focus of the site is on the discussion that ideas generate. In that vein, it's ridiculous that legibility was not a key focus of the redesign since the singular mode of interaction with the site is through text. Why is the text contrast so poor?
This is one of the more pleasant unsolicited redesigns of HN, because it keeps a lot of the subtlety that makes HN an easy site to return to constantly: a prioritization of the headlines and a deemphasis on username and points (the position of a story is more than enough of an indicator of the story's current popularity). The bigger upvote arrows are nice, though I guess one could argue that ease-of-upvoting is not a priority.
My biggest complaint is the relatively massive header. I disagree that Search needs to be prioritized...in a news site, even the New York Times, I am hardly ever using the site search...if a news site is doing its primary job well (providing fresh links), then I almost never have the time or desire to search the archives. I'd say 50 to 80 percent of my search bar usage is mainly to complain about how many times a currently-trending story has been posted in the past. The search bar should stay at the bottom of the site, allowing the header to be a little more compact than it is in the OP's proposal.
My biggest complaint is the relatively massive header. I disagree that Search needs to be prioritized...in a news site, even the New York Times, I am hardly ever using the site search...if a news site is doing its primary job well (providing fresh links), then I almost never have the time or desire to search the archives. I'd say 50 to 80 percent of my search bar usage is mainly to complain about how many times a currently-trending story has been posted in the past. The search bar should stay at the bottom of the site, allowing the header to be a little more compact than it is in the OP's proposal.
I'd actually disagree on the search not needing to be prioritized point. I think search could actually be a very powerful feature of HN allowing for readers to gain a deeper insight into various topics. Imagine if someone was reading about Rust for the first time (hey, there's even a "Rust vs Go" kind of post on the front page right now!) and wanted to learn a bit more about it by seeing what people have said about it in the past on HN. Said user could easily see the search bar at the top of the page, and use the (hypothetically good) search engine to discover articles about lifetimes, green vs native threads, etc. with little effort. Doing so otherwise might involve spending a decent amount of time exercising Google-fu to find the same information.
Sure, the focus of HN is still on the new content that people want to see, but it could also be a place to learn more. Or even find old posts that maybe you didn't bookmark at the time, but suddenly want to see now.
EDIT: Apologies for the triple post (if anyone saw that). I tried to submit the post three times, and two of the times went to a HN error message. I deleted the other two posts.
Sure, the focus of HN is still on the new content that people want to see, but it could also be a place to learn more. Or even find old posts that maybe you didn't bookmark at the time, but suddenly want to see now.
EDIT: Apologies for the triple post (if anyone saw that). I tried to submit the post three times, and two of the times went to a HN error message. I deleted the other two posts.
[deleted]
[deleted]
The hard part of redesigning HN is that we're all so used to the current HN. Changing anything major becomes confusing, defeating the purpose of the redesign.
The reason I like this one is because it doesn't break the structure or functionality, but by adjusting the size/prominence of elements it becomes slightly easier to use. I'm not in love with all of it, but it holds true to the core of HN, which is disregarded by most redesigns.
That being said, using HN as it is feels like I'm in a terminal window. Designers would be reluctant to admit this, but the very functional text-heavy interface is very "hacker-like," and I adore the lack of design.
The reason I like this one is because it doesn't break the structure or functionality, but by adjusting the size/prominence of elements it becomes slightly easier to use. I'm not in love with all of it, but it holds true to the core of HN, which is disregarded by most redesigns.
That being said, using HN as it is feels like I'm in a terminal window. Designers would be reluctant to admit this, but the very functional text-heavy interface is very "hacker-like," and I adore the lack of design.
I think this is so true. Not to mention that a lot of the hackers on the site loathe sites that require javascript and will often prevent any script from executing, so the login modal might be useless to a large percentage of the HN community. The current HN design is really awesome because it only uses the most primitive of elements. It's as if, like Austen said, there's no design at all.
personally, I'd love it if they would increase the size of the up and down arrows. I find I have to hover over them for a bit before the tooltip pops up confirming I'm actually over the arrow I intend to click!
My biggest gripe is that you can't collapse threads a la Reddit.
The header buttons are too big for my taste. I prefer economy of screen space and that space should be going to articles, not buttons.
Thanks for all the suggestions. I consider this a user test, of sorts. The main changes I'm considering are:
- article text readability (this bothered many people) - header height - colors: #FFF-on-#F60 (thanks Oliwarner)
ZEM also brings up a really interesting point about user-specific vs site-wide entries.
Aiming to do a redesign with your suggestions and do more user tests. Thanks again y'all!
- article text readability (this bothered many people) - header height - colors: #FFF-on-#F60 (thanks Oliwarner)
ZEM also brings up a really interesting point about user-specific vs site-wide entries.
Aiming to do a redesign with your suggestions and do more user tests. Thanks again y'all!
I like the modern look, but I actually think the UX suffers.
In your design, the focus is on the up vote arrow. I use HN for content discovery. So I think content is taking a second seat against up-voting in your design.
In your design, the focus is on the up vote arrow. I use HN for content discovery. So I think content is taking a second seat against up-voting in your design.
the "frontpage" label was an excellent idea. however, the redesign didn't fix what i feel is the primary flaw with the top bar - user-specific and site-wide entries are not distinguished. i'd redesign it as
[ frontpage | new | show | ask | jobs || new comments || my threads | my submissions | submit ]
or maybe even move the "my" stuff to the right alongside the [ username (karma) | logout ] section.
[ frontpage | new | show | ask | jobs || new comments || my threads | my submissions | submit ]
or maybe even move the "my" stuff to the right alongside the [ username (karma) | logout ] section.
I freely implemented it in HTML + CSS!
http://francisco.io/demo/hn/
http://francisco.io/demo/hn/
Heuristics basically means “best practices,”
heuristic: (adjective) using experience to learn and improve
heuristic: (adjective) using experience to learn and improve
Why not make a Stylish theme out of it? If you haven't already done so that is.
How will this design look on a mobile device and other screen sizes?
What would visited and upvoted links look like?
To me this redesign is another case of making it prettier rather than more usable.