modern-hacker-news.vercel.app
I've implemented a modern, open-source interface for Hacker News and I'd love your input. The goal is to enhance the user experience and interface, making it more user-friendly and visually appealing.
It looks like the vote buttons were moved to the right to so that there would not be both vote buttons and post type icons on the left side of the post title. I would argue that vote buttons are more important and should get priority. Maybe remove the post type icons and instead add tags to post title? Then you can put the vote buttons back on the left side where they belong. If you do decide to keep the post type icons, there is way too much white space inside of the circles.
I don't understand why there is a "#" in front of the usernames. Hashtags are typically used to indicate topics rather than people. Unless this is sort of callback to IRC days where operators in front of names indicate server hierarchy.
If you are going to do all-white background I would like option to switch to dark mode.
I do like the timestamps though.
Usability for me is about speed and convenience--see my rendering[0] on the opposite end of the scale--all stories for the day loaded on one long page. Click the date heading for yesterday's. It was made for reading while commuting (with intermittent internet) years ago and I just kept using it on desktop.
I'm really good with frontend, but I only have quite limited design training. I can whip out a good non-dense layout pretty quickly.
On the other hand, pretty much every (good) information-dense layouts I ever worked with had to be properly designed by a professional.
Maybe the reason for that is just fashion, I'm constantly informed by what I see and it's easier to replicate, whereas something that "breaks the rules" needs a better professional.
Here here! But you're understating it.
Less information dense, and smaller fonts is an appalling use of type, and layout. These first principals about type, font, page layout, they are about readability, and scalability...
We have 600 years of printing, of typography to lean on. Thats 600 years of refinement on line length, spacing and size. The human eye didn't evolve in the last two decades all these lessons still apply!
What are the top user pain points your solution is attempting to address (i.e. what are your product requirements)?
Better layout on mobile, more accessible actions, keyboard shortcuts, all those things say "modern" to me, and would be very welcome. Making the background white and adding 100px of empty space between each paragraph, less so.
IMO the date is alright when you're seeing multiple ungrouped items from different days, or for closely inspecting when something was posted. But when a list has items that are mostly from the same day, I personally find the full date redundant and distracting. I mostly focus on the hours and am always bit afraid that I might "miss" that one item is from a totally different day, since my eye is in the hours/minutes.
I would prefer just the hour to be there, but what I find even better is the "X minutes ago" format (when everything is mostly from the same day), as even the full hour makes me do a bit of metal calculation.
Yes, that's what I mean by "everything is from the same day".
On this proposed format, I can see ten.
I believe the existing page is definitely more dense than it needs to be, but I don't think migrating to so much whitespace that it's 30% of the information that it was is a good ratio. I think I'd be happy with anything over 20 readable headlines (without scrolling) on a new format.
HN has the simplest, cleanest, no distractions, information dense UI i have seen. It perfectly suits the site and medium. I wish more sites would adopt this approach of "actual usefulness" rather than "prettifying" into a complicated broken mess.
There is an increasing number of websites which are becoming broken on iOS 14.3. https://thesaurus.com is another example; it used to work fine, until a few months ago, when they pushed a frontend update that now results in an "Unexpected application error"; not even partial functionality, only the error message is displayed.
I find revolting this culture of mandatory technology upgrades that add no real value.
Why remove the hover on links? Does having 3 separate links on each item with no visual clarity "enhance the user experience"?
[0] https://play.google.com/store/apps/details?id=com.simon.harm...
1. Why not just write a CSS skin for the existing site? The <table> layout?
2. Tap targets are much improved (good luck tapping up vs down arrows on the existing site on your first try)
3. Upvote/downvote icons being on the left side is a pretty well established pattern, why move to the right?
4. Type hierarchy is ok, a little too much whitespace, the titles could be bigger (still much better than existing)
5. White text on bright orange is hard to read
6. Looks like you're using JS/CSS libraries (Tailwind, Radix), only 10% of it is applied but the entire library is loaded (file is huge), a preprocessor can fix that
7. I'd consider adding infinite scroll
8. Buttons top-left have `default` as the `cursor` value, you want `pointer`
9. Those buttons' aria attrs are insane, are they valid?
10. Put hover/active states on the links
11. Are the icons on the left going to be thumbnails? Don't see the point of these
12. You absolutely MUST add a footer (lol jk)
HN's current design is near perfection for legibility, density, and responsiveness/load times. The up/down vote may be the most problematic aspect, but I hardly ever misclick, even on mobile.
Downvoted comments (very light grey over very light beige) are illegible. Unfortunate, because sometimes they contribute to discussion, they just aren't popular.
I meant "responsive" as in "responding to different viewports widths" which HN barely does at all.
The same thing for colors, why do you want every single website everywhere to have optimal display settings for your preference or arbitrary targets, instead of configuring your browser to display everything with the contrast you prefer and the font size you prefer.
Also I don't know why "responsive" is in quotes, HN works fine on desktop and mobile. While I generally prefer a mobile app for convenience like staying logged in, the website itself works perfectly on mobile too.
I know zooming exists (there's no Ctrl button on phones FYI). I use more than one browser and device, some I don't own.
> instead of configuring your browser
That's exactly what I did. Text scaling on mobile in Chrome doesn't work on HN.
I went beyond your suggestions and wrote a custom skin for HN. It requires a plugin not supported by all browsers.
> why do you want every single website everywhere to have optimal display
I don't, what an awful straw man. At least try.
> HN works fine
Yes, the site isn't broken, so I never claimed that. I said it barely responds to viewport width.
The author asked for feedback, I
I'll respond here to your comment from earlier.
While I'd agree that 1) HN standard could be illegible to some people, that 2) WCAG 2 AA compliance would increase legibility for those people. I'd actually argue that WCAG 2 AA would be disabling for the visually unimpaired and for those with poorer memory.
While letters words and sentences would be legible for the visually unimpaired under WCAG 2 AA, it does impact legibility of the CONTEXT. I doubt that WCAG 2 AA considers this aspect. When I see less on the screen, the more I need to spend on memory because I cannot just scan for the details. This is impairing. Context change is impairing. When menus on some UIs do a fullscreen context switch, I respond slower, I am more disoriented. Context switching is hard.
HN's format is less disabling to me, and possibly to a lot of people for whom context changes (caused by scrolling seeing less at a time) cause impairment.
I am familiar with a lot of the issues of disability and able-ism, and work with individuals with intellectual disabilities and sensory sensitivities regularly. Society definitely can make the world less disabling for the impaired by taking steps to improve accessibility. However real world constraints can be so demanding that overcoming them could actually cause greater harm in certain cases, or when taken to a logical extreme.
Btw how much more ram that I’m supposed to pay for does your “modern” presentation take on my computer?
https://hckrnews.com has the advantage of a reverse chronological sort, and it works for me as a front page, using this user script in Stylus:
* {
font-size: 23px;
line-height: 1.75em;
}
a {
border-bottom: 1px solid lightgrey;
}
* {
font-size: 24px !important;
line-height: 1.4em;
}
Why are post authors hashtags of all things?
Edit: the readme lacks any information about how it can be installed
It’s a no for me.
It's however a disaster on my PC. My favourite thing about HN is how I can read top 25 titles by just opening the website, similar to how old Reddit works. That being said, it's not a problem with your website, the better part of modern design language is enshittified by design and lobotomizes the information density to kindergarten levels.
It is definitely more visually appealing, but not user-friendly at the desktop level.
The design principle of sparse layouts is a persuasion and technically a propaganda technique. It's not an improvement to a tool that does something, imo.
Is there a noscript/basic (x)html mode for us?
I've often wondered what impact an "enhanced ui and interface" would have on the audience HN attracts. Would more people visit? What demographics? Would it change what gets upvoted (both in content and what's above the fold)? Would there be more comments? Would there be an impact on comment quality?
Poor UXs act as barriers to entry. Barriers to entry can be beneficial depending on the goal.
That being said, I've still changed the HN styles many times over the years to make it easier for me to scan.
The web design trend toward less and less information density is a troubling one.
So many of these design trends you see are due to the "tyranny of the marginal user" (there was a fantastic post on HN about this a while ago). That is, once you get your core users, design changes get made to try to appeal to people who apparently "only have one working thumb" and all they're capable of doing is scrolling.
I get that HN might not be the most "user-friendly" site for brand new users, but so what? It takes a couple mins to read the site guidelines and figure out what's going on. There is no need to make the site less appealing to frequent users in an attempt to lower the already pretty low bar for new users.
To pursue this design pattern further I would suggest that OP continue to reduce the post density by incorporating meta tag images and videos. Additionally, adding "friendly" animations for upvotes would be useful. Slot machines are a great example of the type of slow-ish, satisfying animations designers at Facebook appear to be emulating.
However, I think the main issue is that most users of HN don’t come here to "veg out and channel surf". There’s a reason the McMaster Carr catalog and the Sears catalog ended up looking extremely different.
I would suspect that the average HN user is here to feel connected to the technology startup community and understand the latest technical trends and opinions. I further assume that they are someone who values their time and enjoys learning new things. Using these assumptions I would suggest robust keyboard navigation and "url threading" (a quick way to see other posts which contain the same url) as UI improvements which may be more appreciated. Github’s interface may be a good place to draw inspiration.
Information is what is being conveyed by the text, that is a property of the language used, not the text layout itself. Smaller letters packed into a smaller space doesn't mean more information, it just means things are harder to read.
I'm on Firefox on Ubuntu right now, 1920x1080. Classic HN shows me 19 headlines in one screen, along with point counts. So let's say, 38 pieces of information per screen. The submitter's app shows me 5 headlines and point counts, so 10 pieces of information. Classic gives me nearly four times the info per screen.
Don't get me wrong, the uncluttered view is pleasant to look at, but HN is the kind of site where density pays off.
On that basis, the classic view is
TBH that new page looks like part of the CSS is missing because of all that wasted screen space ;)
What smaller space are you talking about? The browser window dimensions don't change. On vanilla HN at the default zoom level, I can see ~22 submissions. Whereas with the posted site, I can only see ~9. How is that not less information density?
That you see fewer items per line and fewer lines in your monitor does not mean there is less information on the page. It's same information, it's just spread out more. If you switched to a larger monitor, the information density would not magically increase. If you switched to a smaller monitor, it would not decrease. The information density remains the same regardless of the layout, because it's coming from HN's API and the same data sources that populate HN's own page.
Maybe I'm being dense, but isn't density mass per volume, or more specifically here: headline per screen area? So spreading out information would make it less dense.
But in the end "Proper typography" is just a set of general guidelines. They are not unbreakable rules; nor are they applicable to every audience in every situation. In fact, one design rule that I remember is to "understand your audience".
I think the audience for Hacker News generally prizes economy, efficiency, time and information density; wants to see more LOC on screen not less, and probably a reasonable percentage spend their day looking at screens like this:
https://miro.medium.com/v2/resize:fit:1400/0*cZ0wb7K2E6qtZtt...
(This is an exaggeration, but exaggerations are useful for understanding sometimes).
It's less a wierd hostility to proper typography, and more an understandable hostility to affecting what is comfortable and efficient; lastly don't underestimate the power of an idiosyncratic design: it has character, it is recognisable, and it stands out.
You can make all the arguments you want about what "semantic density" really means, but I don't care. The other site is objectively worse for me, and many others, so we don't need to be lectured to about what "proper design" is. If you like it better, congrats, knock yourself out.
This sounds like some kind of delusion web designers tell themselves to justify pushing out UI changes that users don't want.
"It's the same information but just more spread out" is quite literally the definition of reduced information density.
Often excessive whitespace and 'spreading out' the content is a dark pattern, used to make you scroll more (or load more pages) and view more ads along the way.
I don't want to sound discouraging, but the thing you need to realize is most of us are here because we like its user interface, not despite it. If you're looking to enhance the site you should improve on its strengths, not change it to something it isn't.
Hacker News loads instantly all the time and I think I speak for most here that we don't want all these extra JS or Next React wizardry.
Transfer sizes are so much different: 276.73 kB vs 14.23 kB transferred with compression. And original HN still could improve transfer size by removing IE8 support for triangle icon rotation from CSS.
To conclude: UI and UX experiments are a good thing, keep them coming, as web technologies are not standing still.
Also I love HN's slightly yellowish background. It's better than a whole white bg.