The difference is that style is only skin-deep. It's superficial. It's an added bonus on top of design. Design, on the other hand, is the core of the product: how it functions. It's the soul: what story it tells.
Your redesign, while prettier, does nothing to improve the user experience, or to tell a story. Sure, it's easier on the eyes, but it's a much worse design, in that it makes the user experience worse. It's now harder to read: less information is on the screen. (11 story as opposed to 25, on my screen.) The information hierarchy within stories is less clear. The eye has to jump around more to get the secondary information (poster / point count / comment count / time posted). The flag functionality is simply gone…
You did a good job making it look better, and should be commended for that. But as for the design, try again.
PS: Take this as friendly critique. Take it in, learn what you can, try again. Rise, repeat. Don't be discouraged, but realize you have a long way to go. You'll get there!
--
Note: Check out this redesign, which I think is quite effective, and is installable as a extra stylesheet on the current HN code: http://akhun.com/seo/skitch/Hacker_News-20120420-180413.png
This is why I disagree with the notion that style is only skin-deep. It's an integral part of UX, but only when considered within the framework of UX. The points value is now shaded in 3D: Why? The rank is now an orange circle: How does this help the user?
The best visual design is always based on UX. Do users consult the rank often? If not, the orange should be reserved for something else more demanding of the user's attention. Are the point totals interactive? If not, the 3D shading should be saved for use as an affordance somewhere where there is interaction. It's questions like these that turn a pretty visual design into something that not only looks but works great.
Semantics, but I think you are agreeing with your parent that there should be something deeper than the gloss applied in this redesign. That design must go more than skin-deep. Arguably the word “style” could refer to paint jobs, so your statement was fairly confusing.
I fully agree with your comments regarding the bizarre amount of visual attention demanded by the rank numbers here and the points’ affordance of clickability (and said as much on a comment there).
Here are some thoughts on why I made mine this way:
1) Hacker news is read by hundred of thousands of people every month- to adapt to a completely new design would wreck the user experience the users have come to expect.
2) Your patterns and icons, while I appreciate the gesture takes focus away from the headlines. The most important thing should be the headlines on hacker news. That's how it was designed to be. Everything else should pale in color compared to it.
3) As SeoxyS mentioned, I designed mine as to not disrupt the functionality that everyone's used to. What I did was "design" the page to improve readability. I made the background color behind the text a light grey so it's not as gloomy as the current site and used a dark grey font rather than the black on current site to improve faster reading. Black on white is always tiring on the eyes, which is why I tried to adapt different shades of grey.
4) I don't like HN's top nav bar right now because it takes focus away from the logo. The logo should be consistent with the one found and recognized on YC's main site. A logo on the site should be loud and clear. I made the top nav bar a darker grey so that it would give focus back to the logo. 5) The selected links are now orange instead of white. By having tiny accents of color, it adds the kind of eye candy that you want but nonetheless tied in with functionality. UX comes first, then UI. You can make something pretty after think about how you'll first make it user-friendly.
6) To improve eye candy, I gave the bottom nav the bright color of HN to really lighten up the page. I felt that otherwise there would be too many grey areas.
7) I moved the search to the top and yes, this does change what the users are used to, but in my opinion a good change. I've read many posts where people (including myself) have had a hard time finding the search button. To move it to the top nav will adapt to web standards.
Normally, I'd make the search larger and start right aligned at the end of the top nav bar and instead move the username + logout link above it, but I felt that it might be too disruptive, so I sacrificed what looks the best for a better experience (this is important).
The main text is too light and low-contrast: it looks like it is frightened of being there and trying to run away and hide! (and so the most big and powerful thing on the page is the footer, which does not seem the right priority...)
The HN audience tends to want high-information-density, not necessarily visual joy (or for that matter extra sugar for clarity of new users). Its a very different thing to design than a website-shopfront. Generally I think it works very well as is....
Am I missing something? I don't see any noticeable difference between this and the current design.
It's now harder to read
I find it immensely more readable than the current design, which to me is a left-justified wall of dense, unnavigable text. The low-contrast colors of the secondary information make it hard to pick out information quickly and increase eye strain.
The changes are subtle, but they are noticeable. Enough to be visually appealing, yet keep the practical design.
I find it ironic that this submission is near the top of the front page at the same time as this (excellent) essay about startup culture (among other things) is also on the front page:
http://blakemasters.tumblr.com/post/21437840885/peter-thiels...
The design of any website is supposed to be a reflection of your company culture. It needs to make the people you're trying to attract feel comfortable and at home. Sorry to be blunt, but this redesign does the exact opposite of that, for me at least.
Please don't take offense at this because it isn't meant toward you as a person; I fully support people doing redesigns of sites and posting them, but in this case I can't help but feeling like "dear god no." If you watch Rocky IV, the reason it's so easy to root for Rocky is that he's a product of his community, whereas the other guy is a product of some cold and unfeeling scientific process. Hacker News is a community, so you want a website that feels like something that a community would make. This redesign just doesn't do that.
And what's the point of the huge margins on the one you linked to? Can't we make better use of the space somehow?
I think the OP has a helluva nice looking start to a website redesign, and I hope he doesn't get discouraged from the hivemind criticism I'm seeing on this page.
Another thing I think the current HN design does well is act as a filter or repellent. Hackers can typically deal with an unattractive interface, whilst the average person would be turned off and leave the site. Those who stay on the site do so for its content, they don't need any extra convincing to stay.
Having said that, I haven't found a mockup I prefer over plain HN either. It's about the content. Design largely stays out of the way.
Your eye might need to jump around more because you're not used to the new design yet. Sometimes an article might say "discuss" which just means 0 comments. This would make that much clearer.
You might say you shouldn't have to "get used to" a good redesign, but after using a website for years, almost everyone would need to overcome old habits.
HN might be designed to compact a large amount of data in a small area, but reading tiny letters isn't exactly good UX.
I appreciate the feedback, and will definitely take it into consideration.
Both engineering and design are instances of the same type of problem solving process. But because design is focused more on qualitative and subjective elements, its state space is much larger and, I believe, its design solutions (or attractors) more fuzzy. Because of this, design and engineering actualize themselves quite differently in real life, often requiring different skill-sets.
And I think that because the web and application design disciplines require more engineering-thinking -- architecture, for example, must also consider spatio-temporal qualities -- most design-thinking is delegated only to the most superficial facets of the process. What would really help understanding is for more designers to push into the engineering side of things, and more engineers into the design side of things.
You are absolutely right. Eye candy can quickly become eye straining.
Hacker News is successfull not only because of its content but also because of its design. It's simple and pragmatic, as it should be. I always need only seconds to read the headlines of the whole page.
Hacker News, please don't change anything!
Eye candy doesn't help the user with navigation or add functionality but it can make a website look more professional and in-turn more trustworthy.
For e commerce websites getting the users trust is an important consideration and I'd argue eye candy is maybe just as important as the design.
Of course in the case of Hacker News I wouldn't like to see this kind of redesign implemented and would prefer the focus of the site's design to be solely on improving it's functionality and usability.
http://textbookcentral.com.au/33/university-of-sydney/list/
(Admittedly the page numbers on the bottom are more for search engine crawlers than people)
That's really nice. It's not clear where the stylesheet is though. I'd love to use it, where might it be?
edit: waxjar already posted it further below.
My longer reply got lost somewhere.
I think of a "story" as a narrative: a sequence of events involving characters. In an epic story, there's a hero, a quest, thresholds, guardians, a special world, obstacles, tests, allies, a shadow, a return etc. Could you elaborate on what "story" means in terms of design?
It works, but seems to subtract more than it adds. It looks a little less like itself, and a little more like every other site.
Its simple and to the point.
And yeah, insane spacing between the lines makes absolutely no sense.
The striped header is not more visually appealing than the current plain one.
The space wasted by the listing of stories is very excessive. That's the meat and potatoes of the site, yet I see 10 stories in the first screenfold vs 24 now. Why dedicate so much space to the wide "XX points" label? Is it even clickable (why would it be?) Arguably upvoting a story is more important and is actually actionable, yet the up vote "caret" looks way less clickable. The comment count balloons are jarring in their size and contrast and their random placement on the right side is distracting. When I glance at the page, I notice this jagged curve of gray dots, yet it delivers no useful information (other than how long the headline is, which is not useful).
So I think it's all about the spacing. When I look at that page, is the headline list easily perusable end parsable? I don't think it is. It is more spaced out than the current design, but it is surrounded and squeezed by these loud new elements. Think about the negative space created by the three new columns before the headline--I think clutters up the headline list.
Compared to the current design, this is a worse design. While the current HN design could use improvement (IMO text is too tiny), it does have a striking simplicity and focus on headlines that I love.
I apologize if I come off sounding harsh, and I certainly don't have design chops myself to pull off something like that (though I'd like to at some point in the future...)
I run HN at 3 CTRL-+s. It solves the problem, permanently in most browsers.
http://news.ycombinator.com/newest (HN Aligned)
In this case: http://natewienert.com/hackernew
I understand you won't get nearly as much "karma" for linking to website in a comment as you would if you hit the frontpage, but now I had to go looking for your article in the long list of articles on the newest page with no real gain.
Maybe I'm the only that feels this way, but just my thoughts. Maybe there is a good reason to the current design?
The bottom of this page explains the max visits minaway stuff: (http://ycombinator.com/newsfaq.html)
Maybe years of SLRN and Usenet have spoiled me - I love the HN layout.
I would like a Usenet style scorefile.
Of course there is:
It's at the bottom.
More seriously though, I had no difficulty locating the various features of the site. Theres few enough of them that it's not really a problem.
EDIT: But then, I'm the sort of person who likes the text, tables and boxes 90's style web pages.
However the 'forgotten password' link is missing from both sites...
Actually, I believe that the simplified design of HN as it is currently helps ward off the typical Internet surfer looking for new links to click on. The last thing HN needs is to attract users who only post pictures of animals.
My single piece of design criticism for HN would be to provide a hi-res upvote triangle image (heck, why isn't it pure CSS?) for retina display devices.
You don't even need CSS, just an unicode character: http://www.fileformat.info/info/unicode/char/25b2/index.htm
https://developers.google.com/pagespeed/#url=https_3A_2F_2Fn...
table > tbody > tr:nth-child(3) > td{-webkit-column-count: 2; }
2 column layout is v.cool. Makes the front page as well as the comments section much more readable for me.
example: http://imgur.com/a/oidEM#1
The only thing I strongly dislike about HN's current design is that comment line lengths are far too long[1].
- Where should I click to go to the comments page? If I have to click on the little bubble on the right of each article, it actually makes my user experience less pleasant than with the current design. (Did OP read "Don't Make Me Think"?)
- No flagging button. Did OP voluntarily omit it? If so, why? If not, where would he put it?
- The scores of the articles look likes buttons, what should I expect when I click on them?
- Knowing the number of comments of an article and its score are both important to create a certain "I need to see this" factor for readers. Putting those numbers respectively on the far left and on the far right does not help this at all.
I really agree with SeoxyS here. This redesign does not improve the current HN experience, and it actually makes it more complex by displaying the information in a way that does not look bad but does not actually help browsing the site.
I would suggest OP to think (or learn) more about UX. That's a very good thing to do on a Friday night, and even though a lot of this knowledge can come through working with a different focus (think about your user) and common sense, there are good books to get you started.[1][2]
[1]:http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/032134... - I recommend this
[2]:http://www.amazon.com/Designing-Mind-Simple-Understanding-In... - Not as good, but only 200 pages, and interesting.
Submissions to HN move up and down dynamically - remove the serial numbers and show (302 points..25 comments) which should be CLICKABLE. This will bring front and center the only two things that people judge in deciding to read a submission. Plus it will make it easier to click on a mobile device.
I agree with kijin, the numbers besides the posts seem of no use. We need to use the space so as to get as many posts as possible in the view without scrolling, so I wouldn't mind narrowing the distance between the posts either. Maybe a hover can magnify the post a little. Posts that link to URL could have some distinct style or something.
Also, I hate sites with huge title bars like that example. It pushes the actual content further down the page. Sure, this isn't 2002 where having 90% of your content in the initial view of page the isn't as important anymore, especially on a site like HN, but still maximizing for information density makes a users life easier.
> fp
1. Meteor is now MIT licensed (meteor.com) 209 points by nim 6 hours ago | flag | 66 comments
2. Another story
> up 1
<up voted>
> 1
<opens up tab>
Though, i dislike the low-contrast browngray background. It's annoying for reading.
Make the layout user-customizable to each login. Let users choose. Is that too hard?
I don't know why we're numbering the posts on HN, so I won't critique it on the redesign, but I think you could safely drop that as an artifact and then, perhaps, the 'points' section wouldn't look so large.
The only thing I flat out dislike is the number of comments floating out to the right. It's a ragged-right design, and it bugs the crap out of me (though it might just be me).
On the whole, I'd much rather be using that site than this one though, and that's gotta be the benchmark for success. I don't think it's perfect, but I definitely agree that it's a big improvement.
1) Spacing - designers love adding extra space, and on first glance it looks beautiful. But too much space slows down browsing speed.
2) The numbered articles - more eye catching than the actual content. A user reading that page will have to spend concentration on not looking at the numbers.
3) The same with the bubbles around the comment counts and upvotes. Those values are important for HN readers - but not as important as the actual topic.
The design is less important than the content.
If I were you, I'd drop the leftmost number (1, 2, 3 ... 20) which looks totally useless to me. I'd also move the points number right below the upvote button so that everyone can immediately tell what it is. No need to repeat "Points" 20 times in every page.
Also, screenshots like this should be in PNG, not JPG.
- Items that deserve no attention are bright and draw the eye (e.g. numbers in front of questions, what's the use, so you can refer to them in a chat?) Should be muted at best, perhaps even removed.
- Repetition of the word Points unneeded. Takes up valuable space and adds nothing (note that I've never used that info either in deciding what to view, but some may)
- Upvote button large, I like but does not need an attention-grabbing color (at least not until I hover over it).
- Title is still too small in the new design.
- "Posted by" is redundant and could be removed as well, or replaced by "By"
- "Time since" indication which I use as my 'click-trigger' for repeat visits throughout the day I'd like that to be more prominent than the Posted by, i.e. at the from of the line
- The comment balloons at the end make no sense. Appreciate the larger target, visually intrusive due to positioning Sub-optimal in terms of mouse-movements required. I'd put them at the front as well.
In short: I'd like something resembling this http://i.imgur.com/xKRkY.png
- Focal point should be the submission title. The item's position and number of upvotes shouldn't attract the most visual attention.
- Use color sparingly to draw focus. The submission titles should be orange, not their position in the list.
- Style should target audience. The style and aesthetic of HN is more appealing to hackers and programmers than the iOS aesthetic.
- Accessibility is important. Stories should be tab-key accessible.
- Redesigns should improve. OP's redesign shouldn't be a coat of new paint, but a superior model of engineering.
The top comment already sums it up perfectly - Design is not about making things pretty or looking nice. Design is about function, design is about value.
I won't deny that the design looks good. I'd say it looks 'prettier' in certain ways, but if its not more functional or doesn't add more value to my experience on HN, what good is it to me?
Here's what I think should have been done: LINK http://www.grooovy.me/HN.jpg
Here are some thoughts on why I made mine this way:
1) Hacker news is read by hundred of thousands of people every month- to adapt to a completely new design would wreck the user experience the users have come to expect.
2) Your patterns and icons, while I appreciate the gesture takes focus away from the headlines. The most important thing should be the headlines on hacker news. That's how it was designed to be. Everything else should pale in color compared to it.
3) As SeoxyS mentioned, I designed mine as to not disrupt the functionality that everyone's used to. What I did was "design" the page to improve readability. I made the background color behind the text a light grey so it's not as gloomy as the current site and used a dark grey font rather than the black on current site to improve faster reading. Black on white is always tiring on the eyes, which is why I tried to adapt different shades of grey.
4) I don't like HN's top nav bar right now because it takes focus away from the logo. The logo should be consistent with the one found and recognized on YC's main site. A logo on the site should be loud and clear. I made the top nav bar a darker grey so that it would give focus back to the logo.
5) The selected links are now orange instead of white. By having tiny accents of color, it adds the kind of eye candy that you want but nonetheless tied in with functionality. UX comes first, then UI. You can make something pretty after think about how you'll first make it user-friendly.
6) To improve eye candy, I gave the bottom nav the bright color of HN to really lighten up the page. I felt that otherwise there would be too many grey areas.
7) I moved the search to the top and yes, this does change what the users are used to, but in my opinion a good change. I've read many posts where people (including myself) have had a hard time finding the search button. To move it to the top nav will adapt to web standards.
Normally, I'd make the search larger and start right aligned at the end of the top nav bar and instead move the username + logout link above it, but I felt that it might be too disruptive, so I sacrificed what looks the best for a better experience (this is important).
I do give you props for trying it out, that's how we all push forward to improve.
On a broader topic, though, many of the commenters appear to view style and substance as opposing forces. O hackers, can we not have both the functionality and the form? The presence and organization of information does not fundamentally conflict with rounded rectangles, smoother fonts, CSS buttons and all the other jazz that populate our startup pages.
Arguing that the ugliness of the current design improves the quality of the user base is the online equivalent of wearing coke bottle glasses because it makes you look nerdier. Let's present our services as both sexy and smart.
It's a lot cleaner and more sleek.
I do have some feedback, though:
1. With your redesign, you've brought a submission's point total into the limelight. Instead of the way it is now where the two main actions are to read an article and upvote if you like it, you're throwing in a third factor. You're saying 'this is how many times this story has been upvoted, and you should take this into consideration when deciding whether to vote on this story. Oh, and if you decide to upvote, the button is to my right.' You sort of create a problematic association between point score and the decision to upvote.
2. Orange seems to be a highlight color, so using it for the story numbers doesn't make much sense. The number a submission is on the list is maybe the least valuable piece of information on the page.
3. The comment bubbles are a nice touch, but they're placed in a bad spot. Look at the current HN homepage now and you'll find that all the comment links stay relatively consistent along a vertical path. It's easy to scan down the page to find the story with the most active discussion. Now imagine viewing your redesign and having to dart your eyes to the end of submission titles of greatly variable lengths just to get to the comment number.
With that's said, I do like the direction you took it in. With a few tweaks, it may turn out to be a really effective design; so keep playing with it!
My advice for anyone has been for years to abolish the word "redesign" from your vocabulary. Seriously. Most redesigns just swap a set of known and familiar problems with unknown problems. Also, as you can see, any dramatic change just pisses people off.
Solve one concrete problem at a time.
- Why does "x Points" look like a button? The word "points" also does not need to be repeated for each item, or needs to be deemphasized in favor of the number.
- Comment links are all over the place and look like a river of grey blobs running down the page.
- Article titles need more emphasis than the previously mentioned elements
SIMPLE COLOR SCHEME: it's very simple with just one prominent color and the rest black, white, and shades of gray (I count the cream background in this).
INTUITIVE: The front page is a list of links sorted by some measurement of popularity or quality. While you may not notice this upon first glance, it's something you appreciate, and you at least take away "better stuff gets pushed up".
EFFICIENT: You can immediately see the number of comments a story has before you click through. I tend to migrate more towards stories with lively discussion, rather than the highest stories in the sort.
FAST: The whole front page is 29 KB, and I can do an uncached load in 1 second. There are only 3 images which collectively amount to less than half a KB.
On the other hand, for a site designed for self described "hackers", I think having a very utilitarian as-simple-as-possible not-trying-to-impress-you design sends the message that "appearances don't matter here, the content is the focus"
#1 The problems they are trying to solve
#2 The qualities of the current design they need to preserve.
The discussion could then focus on whether the two lists are valid and how successful the redesign is in solving #1 without fucking up #2.
Nothing personal, but you are missing the most important point of existing design - it's the information density and the lack of any whitespace whatsoever. Whatever the redesign it needs to preserve 20+ stories per page, it's a must.
But there are a few things I would change:
* Replace the triangle image with a caret. * Remove the points to avoid the popularity bias. * Remove the comments count to avoid the flamebait alarm. * Move the search on the top. * Tone down the color.
I'm most likely in the minority here, but here's my take on it: http://i.imgur.com/3iadZ.png
2. The bubble quotes are deal-breakers. They take up plenty real estate, are identical, and don't line up vertically. Your eyes are more attuned to the "wave" that's going on in the right than the stories themselves.
3. Taking a second look I half-expected the HN logo and login button to be circular.
Everything else is pretty much perfect.
If it was all middle-aligned or top-aligned I think it would look pretty cool.
Posted this link earlier in the week. Beautiful is not always better - sometimes ugly works better in attracting people! http://sparknlaunch.wordpress.com/2012/02/02/keep-it-simple-...
In the current incarnation the page has just the right font size and just the right amount of vertical space. Strictly speaking it is a bit tight, but since every other line is grey and in a small font, the spacing of the headings becomes perfect.
The new design is prettier. But it negatively affects the usability of the site.
Would you be interested in doing a custom theme for http://ribbot.com ?
It's an open source HN clone that lets your create custom themes (much like Tumblr). https://github.com/barmstrong/ribbot
At the very least, a pad on clickable areas would be much appreciated (seeing the comments on a post or upvoting takes a lot of skill to hit that link with a finger point).
The vertical 'information density' will drop a bit but people don't have much trouble scrolling.
I always appreciate people putting their thoughts out there and I hope that Taiyab will not take the criticism here too literally but instead will try to learn from the input. Nice attempt!
Current HN has too wide with respect to font size neither. :(
And easy to scan, easy to find what I want, fast...etc
Effective Design.
Design sometimes matters a lot; but often design just does not matter much.
Automate someone's pain away and get them to pay you for it. There are lots of opportunities out there with this quality. Don't worry too much about design.
How is this relevant? Also, no one wonders that.
