Readit News logoReadit News
Posted by u/1997roylee 2 years ago
A Modern Web for Hacker News – Open-Source and Seeking Feedbackmodern-hacker-news.vercel...
Hey everyone!

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.

Github: https://github.com/1997roylee/modern-hacker-news

internet101010 · 2 years ago
On a 14" MBP the new version has 6 posts visible on initial load while the old version has 22 posts, a -73% reduction in information density. Not ideal.

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.

karmakaze · 2 years ago
I get 9 posts on my 14" MacBook--still not great. I don't know what it is with (IMO excessive) whitespace on modern UIs.

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.

[0] https://hackerer.news

whstl · 2 years ago
I have a hunch that the reason for the excessive space is that it is much easier to make it look good.

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.

zer00eyz · 2 years ago
>> whitespace on modern UIs ... Usability

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!

andsoitis · 2 years ago
> The goal is to enhance the user experience and interface

What are the top user pain points your solution is attempting to address (i.e. what are your product requirements)?

remram · 2 years ago
This is a great question. "Be modern" is not a measurable goal and cannot guide development.

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.

1997roylee · 2 years ago
Jts wanna make it easy to read on mobile version.
cantSpellSober · 2 years ago
The repo gets more into detail under "Milestones"
hn_throwaway_99 · 2 years ago
Not really. Those are just additional features. Sure, of course, some of the user requirements are self-evident from the feature (e.g. the "support dark mode" one), but "what are the pain points you are trying to solve?" should be the starting point, not something you back into after you have your feature list. For example, the top item there is "support PWA". Why? Is this something people actually care about or would use? I'm not even asking this question rhetorically, but I honestly don't know the answer.
hnewsreader · 2 years ago
My vote is to keep Hacker News working when JavaScript is disabled. This proposed design would break that. Also, the classic Hacker News interface is more information dense, which is good.
gumby · 2 years ago
A very important requirement.
1997roylee · 2 years ago
Got it.
whstl · 2 years ago
This is probably an unpopular opinion, but I find the full ISO date a bit distracting.

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.

internet101010 · 2 years ago
Eh... "x minutes ago" should really only be used if within the last few hours. After that I prefer exact timestamps. I really, really don't like seeing "yesterday" because I am not sure if it is the server's yesterday or my yesterday. I don't like going on YouTube and seeing "uploaded 1 year ago" when it can be any time between 1-2 years.

Deleted Comment

1997roylee · 2 years ago
Good to know it.
whstl · 2 years ago
"Eh... "x minutes ago" should really only be used if within the last few hours"

Yes, that's what I mean by "everything is from the same day".

cchance · 2 years ago
yep its best to have the ago for say hours but once it gets past a month or so its better to have dates
jll29 · 2 years ago
It looks pretty but I find the density of the classic layout more useful for skimming for relevant articles (less scrolling).
jeffreygoesto · 2 years ago
Guess that is highly subjective. I do like the current, compact layout better. Also there is more text per line and in your layout (on mobile) the eye does have to jump more which I find a bit more strenous.
pockybum522 · 2 years ago
On a 4k screen at 150% DPI scaling on Windows, in FireFox, I can see 30 items without scrolling on the current layout for https://news.ycombinator.com/

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.

SubiculumCode · 2 years ago
honestly, there is so much that I didnt like after getting a 4k screen that i went back to 2k.
rramadass · 2 years ago
Good ideas but not applicable to HN.

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.

xk_id · 2 years ago
It's worse than a "complicated broken mess". It doesn't work at all on iOS 14.3 (iPhone). It's just stuck displaying some glowing squares.

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.