9 ms·

A Modern Web for Hacker News – Open-Source and Seeking Feedback

41 points by 1997roylee 3y ago

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 https://github.com/1997roylee/modern-hacker-news

jiyinyiyong 3y ago
I have a HackerNews UI for myself as well https://r.tiye.me/Memkits/hn-reader/?id=38824070 https://r.tiye.me/Memkits/hn-reader/?id=38824070 GitHub: https://github.com/Memkits/hn-reader/ https://github.com/Memkits/hn-reader/
deleted 3y ago
[deleted]
jeffreygoesto 3y 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.
kristjank 3y ago
Hey, thanks for showing this! I like how it looks on my phone, it's just the right amount of information for a small screen. I think you could keep some of the orange/beige styling, at least in the title bar. 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.
- 1997roylee 3y ago
  Thanks for your information, I think I will focus on working for mobile version.
andsoitis 3y 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)?
- cantSpellSober 3y ago
  The repo gets more into detail under "Milestones"
  - hn_throwaway_99 3y 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.
- remram 3y 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 3y ago
    Jts wanna make it easy to read on mobile version.
beardyw 3y ago
On the current site I get 13 stories on my phone. On yours 4. The icons on the left seem wasteful. If you want them, put them with the title. The up vote is easier to use.
- 1997roylee 3y ago
  Understand.
PBnFlash 3y ago
I don't want this
- 1997roylee 3y ago
  sad
sylware 3y ago
Hey, seems very nice! Is there a noscript/basic (x)html mode for us?
- 1997roylee 3y ago
  I will work on it.
jll29 3y ago
It looks pretty but I find the density of the classic layout more useful for skimming for relevant articles (less scrolling).
jdsleppy 3y ago
I think it would be easier to read if the line spacing of the titles were much smaller, and similar design tweaks to help the eye group and prioritize information. It's a little mentally painful to read compared to the old styling.
- 1997roylee 3y ago
  Thanks for ur information!
xyst 3y ago
Reminds me of the false “front page of the internet”. Thanks, I hate it
- antoniojtorres 3y ago
  It would be better if you provided constructive feedback over emotional or meme-ish commentary. it would help the author improve and the rest of us understand.
  - 1997roylee 3y ago
    yes yes, thanks.
whstl 3y 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 3y 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.
  - cchance 3y 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
  - deleted 3y ago
    [deleted]
  - whstl 3y 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".
    - 1997roylee 3y ago
      Updated it.
  - 1997roylee 3y ago
lopkeny12ko 3y ago
This feels very much like a solution in search of a problem. The web design trend toward less and less information density is a troubling one.
- krapp 3y ago
  The posted site has the same amount of information as Hacker News' own pages. Information doesn't become less "dense" just because the kerning and whitespace increases. 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.
  - notpachet 3y ago
    > More, smaller letters packed into a smaller space doesn't mean more information 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?
    - krapp 3y ago
      Again, and for the last time because I know it's going to be pointless, because people here have some weird hostility towards proper typography and design - information is a property of language and information density is a separate property from the density of the text itself. 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.
      - et-al 3y ago
        > It's same information, it's just spread out more. 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.
hnewsreader 3y 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 3y ago
  A very important requirement.
  - 1997roylee 3y ago
    Got it.
umvi 3y ago
Looks pretty; the first thing I noticed is that on your site I only see the top 5 links, on HN I see the top 20 links. HN displays 4x more information in the same space.
- 1997roylee 3y ago
  I should reduce the spacing
xnx 3y ago
Cool to try things out and share them. Would be good to hear what problems you are trying to address. "Modern" isn't very descriptive.
- 1997roylee 3y ago
  Yup, I jts realize it... Cannot change the subject again
alanbernstein 3y ago
The only improvement I desire to the HN UI, is a redesign of the link widgets on comments. On Mobile, they are too small and tightly packed. They should span the width of the comment, so my fat fingers have larger hit boxes.
- 1997roylee 3y ago
  Thanks
CitrusFruits 3y ago
One thing I noticed right away is that links open in a new tab, vs classic HN they open in the same tab. I use HN almost always on mobile, and this behavior means that it's much more difficult to go "back" after clicking on a link. I have to close a tab, which is cumbersome on most mobile browsers.
- 1997roylee 3y ago
  Let me change the link behaviour.
pockybum522 3y 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/ 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 3y ago
  honestly, there is so much that I didnt like after getting a 4k screen that i went back to 2k.
cchance 3y ago
white space is good, but this is too much white space
- 1997roylee 3y ago
  Agree.
deleted 3y ago
[deleted]
johnchristopher 3y ago
I like the look. But make it obvious comments and titles are actionable. Edit: the readme lacks any information about how it can be installed
- 1997roylee 3y ago
  I will update the readme, wait me for a minute thanks.
  - 1997roylee 3y ago
    I updated it.
    - johnchristopher 3y ago
      Great ! (and it built and started the first time)
internet101010 3y 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 3y 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 https://hackerer.news
  - zer00eyz 3y 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!
    - karmakaze 3y ago
      All that would make sense if I were reading the page but here I'm scanning the titles to find the few stories of interest in a forest. Optimizing for scanning shouldn't require so much scrolling and Load more.
harrygeez 3y ago
> The goal is to enhance the user experience and interface, making it more user-friendly and visually appealing 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.
- deleted 3y ago
  [deleted]
- butz 3y ago
  I'll have to admit, that "modern" website loads a bit faster for me (1.23s vs 1.83s), but that's probably because its visitors count is way lower than on original HN. And, funny thing, the single resource that increases load time over a second is hot-linked y18.svg from HN. 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.
  - 1997roylee 3y ago
    Thanks for you sharing benchmark result.
remram 3y ago
You've removed a lot, but not added anything. Except hash signs in front of usernames. I don't get it. Why remove the hover on links? Does having 3 separate links on each item with no visual clarity "enhance the user experience"?
StevenXC 3y ago
As a solely mobile user of HN, my fat fingers much prefer your layout to the current one, which requires a lot of precision or zooming in to find relevant links.
- maximus_prime 3y ago
  If on android, install Harmony
  - bshipp 3y ago
    Just opened the Play store and there are numerous Harmony apps. Could you provide a link, please?
    - toastedwedge 3y ago
      I'm guessing they were talking about Harmonic[0] as I cannot find anything relevant either through search (DDG) or Play Store called "Harmony" for HN. [0] https://play.google.com/store/apps/details?id=com.simon.harmonichackernews https://play.google.com/store/apps/details?id=com.simon.harm...
      - bshipp 3y ago
        You're a legend, thanks for posting that.
  - gridlocdev 3y ago
    Or if on the iOS side of the fence, I’ve found the Octal app is fantastic
- gumby 3y ago
  I just two-finger zoom in and out for those tiny voting arrows. I’d rather have the main use case be packing more data in so I don’t have to scroll around as much.
  - 3y ago
aviandnuskii 3y ago
Like the others have pointed out, the site is less information dense and I don't think it solves a real problem. HN looks "old school" but has good design, I think, because I come here to find a good article to read or browse an interesting comment section and the design helps me do that without getting in the way. Mostly I never even go to the second page. Also I love HN's slightly yellowish background. It's better than a whole white bg.
- deleted 3y ago
  [deleted]
- ninepoints 3y ago
  "good design?" Imagine a world where you can reply to a comment and have the entire thread context, or a world where after posting a comment and hitting "back", the navigation stack didn't take you to the post form. From an accessibility and legibility standpoint, the text is honestly hard to read (insufficient contrast, long line, etc.). There are so many usability issues/quirks about HN that I'm not sure "good design" is an apt description. "Information dense" is honestly a low bar -- it's easy to achieve information density and pretend the end result is actually good.
- 1997roylee 3y ago
  Good to know it.
cantSpellSober 3y ago
MUCH more legible and responsive than the existing site, thank you 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)
- 1997roylee 3y ago
  Dump Radix UI!
- SubiculumCode 3y ago
  I guess people have opinions that differ from mine, lol: 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.
  - cantSpellSober 3y ago
    We can use an objective measure of legibility — WCAG 2 AA — which HN fails miserably. 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.
    - gkbrk 3y ago
      You know you can override the font size, or just press Ctrl-+ and your browser will make text larger. 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.
fortran77 3y ago
I don't hate it, but there's too much empty space for me.
- 1997roylee 3y ago
  Got it!
nottorp 3y ago
So much scrolling… Btw how much more ram that I’m supposed to pay for does your “modern” presentation take on my computer?
nspeller 3y ago
Is a better UI always the best choice? 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.
- deleted 3y ago
  [deleted]
Kwpolska 3y ago
What's the purpose of the icon on the left? It wastes a ton of space (especially on mobile), and other than marking the useless job ads as such, it has no purpose. If job ads need to be marked, add an icon or something only to those rows. Why are post authors hashtags of all things?
- 1997roylee 3y ago
  Yup, I do think so the icons waste the space. For hashtags of authors, jts wanna highlight it.
  - Kwpolska 3y ago
    How is this highlighting? People are not hashtags.
    - 1997roylee 3y ago
      Fixed.
cebert 3y ago
This isn’t proposed to become the new UI for HN is it? I much prefer the more dense display of the current site.
- Centigonal 3y ago
  This is someone's pet project- the HN UI isn't changing
8organicbits 3y ago
A bug. If you tap the comments link, hit the back button, and then hit the comments link again it doesn't work. Looks like there's some state being tracked. Consider just using a link?
- 1997roylee 3y ago
  Let me fix it now!
yetanother12345 3y ago
Thanks but no thanks, I hate these modern JS fameworks. https://hckrnews.com 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; } For individual pages/threads I'm sent to https://news.ycombinator.com/ https://news.ycombinator.com/ which is totally unreadable and useless unless I emply this user script: * { font-size: 24px !important; line-height: 1.4em; } This makes things readable, and as that is my only concern here I have no further need to engage with any third party sites (especially not a site infected with forth party framework scripts and whatnot)
motohagiography 3y ago
Why is it better for me as a user that I have to scroll to see all the stories instead of 80% them being on one screen in the regular one? 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.
dfgdfg34545456 3y ago
I dislike the huge padding on each side of the content, something close to 40% of the screen space just wasted. Not as bad as reddit though I suppose. Why do all modern pages do this? Slow initial page load, just for some news content.
- 1997roylee 3y ago
  Most of the ppl dont like the spacing, I will reduce the padding.
ChrisArchitect 3y ago
Show HN:
znpy 3y ago
It’s awful. I get a lot more information density with the standard hacker news and it loads much faster. It’s a no for me.
- nipperkinfeet 3y ago
  I prefer my own stylesheet. Much easier on the eyes and easier to follow comments. https://images4.imagebam.com/8d/d3/45/MEL9537_o.PNG https://images4.imagebam.com/8d/d3/45/MEL9537_o.PNG
nhggfu 3y ago
HN is perfect already.
- umvi 3y ago
  Except for comment section performance on large threads
smoyer 3y ago
It's on Vercel ... I'm not even going to look!
- 1997roylee 3y ago
  Why??
rramadass 3y 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 3y 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 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.
vero24 3y ago
whats wrong with the current interface?
intrasight 3y ago
I'd be happy if HN supported font sizing on mobile Safari.
- 1997roylee 3y ago
  OK!
1997roylee 3y ago
I should rename the subject to "Enhancing Mobile Readability for Hacker News"

41 points by 1997roylee 3y ago

jiyinyiyong 3y ago

I have a HackerNews UI for myself as well https://r.tiye.me/Memkits/hn-reader/?id=38824070 https://r.tiye.me/Memkits/hn-reader/?id=38824070 GitHub: https://github.com/Memkits/hn-reader/ https://github.com/Memkits/hn-reader/

deleted 3y ago

[deleted]

jeffreygoesto 3y 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.

kristjank 3y ago

Hey, thanks for showing this! I like how it looks on my phone, it's just the right amount of information for a small screen. I think you could keep some of the orange/beige styling, at least in the title bar. 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.

1997roylee 3y ago
Thanks for your information, I think I will focus on working for mobile version.

andsoitis 3y 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)?

cantSpellSober 3y ago
The repo gets more into detail under "Milestones"
- hn_throwaway_99 3y 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.
remram 3y 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 3y ago
  Jts wanna make it easy to read on mobile version.

beardyw 3y ago

On the current site I get 13 stories on my phone. On yours 4. The icons on the left seem wasteful. If you want them, put them with the title. The up vote is easier to use.

1997roylee 3y ago
Understand.

PBnFlash 3y ago

I don't want this

1997roylee 3y ago
sad

sylware 3y ago

Hey, seems very nice! Is there a noscript/basic (x)html mode for us?

1997roylee 3y ago
I will work on it.

jll29 3y ago

It looks pretty but I find the density of the classic layout more useful for skimming for relevant articles (less scrolling).

jdsleppy 3y ago

I think it would be easier to read if the line spacing of the titles were much smaller, and similar design tweaks to help the eye group and prioritize information. It's a little mentally painful to read compared to the old styling.

1997roylee 3y ago
Thanks for ur information!

xyst 3y ago

Reminds me of the false “front page of the internet”. Thanks, I hate it

antoniojtorres 3y ago
It would be better if you provided constructive feedback over emotional or meme-ish commentary. it would help the author improve and the rest of us understand.
- 1997roylee 3y ago
  yes yes, thanks.

whstl 3y 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 3y 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.
- cchance 3y 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
- deleted 3y ago
  [deleted]
- whstl 3y 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".
  - 1997roylee 3y ago
    Updated it.
- 1997roylee 3y ago

lopkeny12ko 3y ago

This feels very much like a solution in search of a problem. The web design trend toward less and less information density is a troubling one.

krapp 3y ago
The posted site has the same amount of information as Hacker News' own pages. Information doesn't become less "dense" just because the kerning and whitespace increases. 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.
- notpachet 3y ago
  > More, smaller letters packed into a smaller space doesn't mean more information 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?
  - krapp 3y ago
    Again, and for the last time because I know it's going to be pointless, because people here have some weird hostility towards proper typography and design - information is a property of language and information density is a separate property from the density of the text itself. 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.
    - et-al 3y ago
      > It's same information, it's just spread out more. 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.

hnewsreader 3y 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 3y ago
A very important requirement.
- 1997roylee 3y ago
  Got it.

umvi 3y ago

Looks pretty; the first thing I noticed is that on your site I only see the top 5 links, on HN I see the top 20 links. HN displays 4x more information in the same space.

1997roylee 3y ago
I should reduce the spacing

xnx 3y ago

Cool to try things out and share them. Would be good to hear what problems you are trying to address. "Modern" isn't very descriptive.

1997roylee 3y ago
Yup, I jts realize it... Cannot change the subject again

alanbernstein 3y ago

The only improvement I desire to the HN UI, is a redesign of the link widgets on comments. On Mobile, they are too small and tightly packed. They should span the width of the comment, so my fat fingers have larger hit boxes.

1997roylee 3y ago
Thanks

CitrusFruits 3y ago

One thing I noticed right away is that links open in a new tab, vs classic HN they open in the same tab. I use HN almost always on mobile, and this behavior means that it's much more difficult to go "back" after clicking on a link. I have to close a tab, which is cumbersome on most mobile browsers.

1997roylee 3y ago
Let me change the link behaviour.

pockybum522 3y 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/ 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 3y ago
honestly, there is so much that I didnt like after getting a 4k screen that i went back to 2k.

cchance 3y ago

white space is good, but this is too much white space

1997roylee 3y ago
Agree.

deleted 3y ago

[deleted]

johnchristopher 3y ago

I like the look. But make it obvious comments and titles are actionable. Edit: the readme lacks any information about how it can be installed

1997roylee 3y ago
I will update the readme, wait me for a minute thanks.
- 1997roylee 3y ago
  I updated it.
  - johnchristopher 3y ago
    Great ! (and it built and started the first time)

internet101010 3y 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 3y 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 https://hackerer.news
- zer00eyz 3y 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!
  - karmakaze 3y ago
    All that would make sense if I were reading the page but here I'm scanning the titles to find the few stories of interest in a forest. Optimizing for scanning shouldn't require so much scrolling and Load more.

harrygeez 3y ago

> The goal is to enhance the user experience and interface, making it more user-friendly and visually appealing 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.

deleted 3y ago
[deleted]
butz 3y ago
I'll have to admit, that "modern" website loads a bit faster for me (1.23s vs 1.83s), but that's probably because its visitors count is way lower than on original HN. And, funny thing, the single resource that increases load time over a second is hot-linked y18.svg from HN. 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.
- 1997roylee 3y ago
  Thanks for you sharing benchmark result.

remram 3y ago

You've removed a lot, but not added anything. Except hash signs in front of usernames. I don't get it. Why remove the hover on links? Does having 3 separate links on each item with no visual clarity "enhance the user experience"?

StevenXC 3y ago

As a solely mobile user of HN, my fat fingers much prefer your layout to the current one, which requires a lot of precision or zooming in to find relevant links.

maximus_prime 3y ago
If on android, install Harmony
- bshipp 3y ago
  Just opened the Play store and there are numerous Harmony apps. Could you provide a link, please?
  - toastedwedge 3y ago
    I'm guessing they were talking about Harmonic[0] as I cannot find anything relevant either through search (DDG) or Play Store called "Harmony" for HN. [0] https://play.google.com/store/apps/details?id=com.simon.harmonichackernews https://play.google.com/store/apps/details?id=com.simon.harm...
    - bshipp 3y ago
      You're a legend, thanks for posting that.
- gridlocdev 3y ago
  Or if on the iOS side of the fence, I’ve found the Octal app is fantastic
gumby 3y ago
I just two-finger zoom in and out for those tiny voting arrows. I’d rather have the main use case be packing more data in so I don’t have to scroll around as much.
- 3y ago

aviandnuskii 3y ago

Like the others have pointed out, the site is less information dense and I don't think it solves a real problem. HN looks "old school" but has good design, I think, because I come here to find a good article to read or browse an interesting comment section and the design helps me do that without getting in the way. Mostly I never even go to the second page. Also I love HN's slightly yellowish background. It's better than a whole white bg.

deleted 3y ago
[deleted]
ninepoints 3y ago
"good design?" Imagine a world where you can reply to a comment and have the entire thread context, or a world where after posting a comment and hitting "back", the navigation stack didn't take you to the post form. From an accessibility and legibility standpoint, the text is honestly hard to read (insufficient contrast, long line, etc.). There are so many usability issues/quirks about HN that I'm not sure "good design" is an apt description. "Information dense" is honestly a low bar -- it's easy to achieve information density and pretend the end result is actually good.
1997roylee 3y ago
Good to know it.

cantSpellSober 3y ago

MUCH more legible and responsive than the existing site, thank you 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)

1997roylee 3y ago
Dump Radix UI!
SubiculumCode 3y ago
I guess people have opinions that differ from mine, lol: 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.
- cantSpellSober 3y ago
  We can use an objective measure of legibility — WCAG 2 AA — which HN fails miserably. 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.
  - gkbrk 3y ago
    You know you can override the font size, or just press Ctrl-+ and your browser will make text larger. 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.

fortran77 3y ago

I don't hate it, but there's too much empty space for me.

1997roylee 3y ago
Got it!

nottorp 3y ago

So much scrolling… Btw how much more ram that I’m supposed to pay for does your “modern” presentation take on my computer?

nspeller 3y ago

Is a better UI always the best choice? 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.

deleted 3y ago
[deleted]

Kwpolska 3y ago

What's the purpose of the icon on the left? It wastes a ton of space (especially on mobile), and other than marking the useless job ads as such, it has no purpose. If job ads need to be marked, add an icon or something only to those rows. Why are post authors hashtags of all things?

1997roylee 3y ago
Yup, I do think so the icons waste the space. For hashtags of authors, jts wanna highlight it.
- Kwpolska 3y ago
  How is this highlighting? People are not hashtags.
  - 1997roylee 3y ago
    Fixed.

cebert 3y ago

This isn’t proposed to become the new UI for HN is it? I much prefer the more dense display of the current site.

Centigonal 3y ago
This is someone's pet project- the HN UI isn't changing

8organicbits 3y ago

A bug. If you tap the comments link, hit the back button, and then hit the comments link again it doesn't work. Looks like there's some state being tracked. Consider just using a link?

1997roylee 3y ago
Let me fix it now!

yetanother12345 3y ago

Thanks but no thanks, I hate these modern JS fameworks. https://hckrnews.com 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; } For individual pages/threads I'm sent to https://news.ycombinator.com/ https://news.ycombinator.com/ which is totally unreadable and useless unless I emply this user script: * { font-size: 24px !important; line-height: 1.4em; } This makes things readable, and as that is my only concern here I have no further need to engage with any third party sites (especially not a site infected with forth party framework scripts and whatnot)

motohagiography 3y ago

Why is it better for me as a user that I have to scroll to see all the stories instead of 80% them being on one screen in the regular one? 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.

dfgdfg34545456 3y ago

I dislike the huge padding on each side of the content, something close to 40% of the screen space just wasted. Not as bad as reddit though I suppose. Why do all modern pages do this? Slow initial page load, just for some news content.

1997roylee 3y ago
Most of the ppl dont like the spacing, I will reduce the padding.

ChrisArchitect 3y ago

Show HN:

znpy 3y ago

It’s awful. I get a lot more information density with the standard hacker news and it loads much faster. It’s a no for me.

nipperkinfeet 3y ago
I prefer my own stylesheet. Much easier on the eyes and easier to follow comments. https://images4.imagebam.com/8d/d3/45/MEL9537_o.PNG https://images4.imagebam.com/8d/d3/45/MEL9537_o.PNG

nhggfu 3y ago

HN is perfect already.

umvi 3y ago
Except for comment section performance on large threads

smoyer 3y ago

It's on Vercel ... I'm not even going to look!

1997roylee 3y ago
Why??

rramadass 3y 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 3y 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 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.

vero24 3y ago

whats wrong with the current interface?

intrasight 3y ago

I'd be happy if HN supported font sizing on mobile Safari.

1997roylee 3y ago
OK!

1997roylee 3y ago

I should rename the subject to "Enhancing Mobile Readability for Hacker News"