Hacker News is a website featuring the hottest news in computer science and entrepreneurship used by some of the greatest minds in the world, but the site's poor design has ultimately turned me away from the platform (until now!).
Just by looking at the site on the left, a site that is meant to be readable is quite literally unreadable! We'll dive into these issues in the next section!
Since it's run by startup accelerator Y Combinator and the initial users were mostly YC founders, there is inevitably a startup spin to the stories that are popular here. The site was originally called Startup News. But it turned out to be boring to have so much of a startup focus, so they changed the name and the focus to be more general.
(If you are reading this site, there is a good chance the content on this site appeals to you. Check it out! It is a popular site for software engineers!)
Let's dive into the usability issues. Ultimately usability issues are divided into the following buckets: usability/efficiency, learnability, memorability, and conceptual model. Hover over these terms to learn more about what each entails.
Keeping these usability terms in mind, the following are the major usability issues with Hacker News:
Users should be following Guidelines to make posts, but it is tucked away in a set of hyperlinks on the footer (which themselves do not appear to be hyperlinks as there is no underline/text decoration).
Ironically enough, for a site centered around getting its users to read its content, it is a fierce challenge to read this site. The text is extremely small, and the developers acknowledge this by using a typeface called Verdana, which is designed for small text.
The light gray text used for the content on the page may be this way for aesthetics, but users will have a formidable time reading it. Users often interact with their mobile devices in less-than-ideal conditions. Bright sunlight can make elements on a screen hard to see.
Elements in the Navbar have no distinct hierarchy. The "New" and "Past" options filter the posts, the "Ask," "Show," and "Jobs" options navigate to three different Hacker News communities/lists, and the "Submit" option to create a new post/submission. Despite these three different categories, all look the same and are displayed the same.
It is also difficult to remember what the front page displays. Is it the top posts? Trending posts? The top posts from today? Today and yesterday?
Lastly, the link to the Lists page, which is the main page for discoverability, is tucked away in the Footer! Further, the Search Bar, often used for quick navigation, is also in the Footer!
Each "post" on Hacker News is called a submission, entailing both the news article the user shares as well as a comment thread. It is extremely hard to interact with these submissions as they are unintuitive
Upvoting information is also not glanceable. It is hidden amongst the caption for each submission, and the upvote button itself is small.
There needs to be more space between touch targets. A lot of the screen real estate on the right is empty, and the targets to interact with a post are smooshed together.
The website categorizes Both article links and Submission captions under “Very Low Contrast."
There are no Aria landmarks at all. ARIA landmarks are attributes added to website elements used by accessibility tools to navigate a page. This is unacceptable: users using accessibility tools such as screen readers cannot use the site easily.
With these issues guiding the redesign, the following are Lofi Wireframes to solve these issues and overall create a more pleasant reading experience for everyone.
Each wireframe is annotated with how each section solves the aforementioned usability issues!
Next up is the Visual Design Style Guide! It contains the components and styles for the website to make a clean UX. For this redesign, as well, we are going Dark Mode!
Dark mode doesn't directly reduce eye strain, but it can offer some relief and makes it easier to read in light. It is no mystery why more and more sites adopt dark mode: users love it!
Next, let's dive into the Hi-Fi Prototypes: annotated with how each component would be implemented!
These designs are based on the board from October 13, 2022. Here is the link to see the submissions from that day!
display: flex inside of a container-fluid.
container-fluid with a single row. For an even division of the 12 columns Bootstrap offers, the Feed component occupies 6 columns while both the surrounding Jobs board and Lists board take up 3 columns each.
justify-content-between (so each job can scale down when the viewport shrinks). As such, each row is its row with the Job Title and Description taking up most of the 12-row columns. The headers of Jobs and Lists expand on hover using the :hover CSS selector!
justify-content-between within a 6-column container.
td tag).
container with an accompanying row, and the Apply section and Misc. The links section takes up 6 columns each.
none while the Search Icon gets its display set to active. The search icon then floats right alongside the Login button in a Bootstrap an input-group-btn. The List Board also becomes a button in the Navbar.
0.75 rem for consistent sizing using the media selector.
order-# property of Bootstrap is used to make the Feed appear first in the row, followed by the List and the Jobs.
Now, you can go try it out yourself! Clicking on an entry navigates to that page easily, and clicking the button opens the corresponding comment section!
Everything except the buttons in the header and footer is interactive. I hope you have fun playing around with it!
Overall, we turned a seemingly mundane website with lots of valuable content into a modern, readable website! Again, I highly recommend you check out Hacker News to get relevant info on tech and the world!