Redesign Hacker News!
The 5 areas to improve
The success of Hacker News had a lot less to do with design and everything to do with building a community. This is true for probably all social media sites. However, design can have a major impact on the experience and further adoption of a platform once an online community forms.
This redesign is an attempt to improve the user interface of Hacker News and an opportunity to investigate how small changes to typography, color, placement, and whitespace can have a big impact on comprehension.
1. General Composition
In this redesign, I wanted to provide greater depth to the design language of Hacker News. I attempted to do this by visually differentiating the links and actions in each list item, adding elements like pagination and a header, and applying general principles of design like balance and hierarchy to the interface.
I came up with two themes while redesigning Hacker News. Looking to history, many of the first digital interfaces had dark backgrounds and light text. Somewhere along the line, interfaces became much brighter. Perhaps it was a way to mimic physical paper so the digital environment didn’t seem as foreign. Whatever the reason, I think dark interfaces can be easier on the eyes. Also, the Hacker News community is used to dark interfaces from text editors. Yet, I am not sure which theme Hacker News users would prefer, so I included the option to choose between the two at the bottom of the screen.
2. List Item
The list item provides an action to upvote, sort by website, view the submitter’s profile, sort by the time it was posted, comment, and go to the story. There is no distinction to denote that these are separate actions or to show that they are clickable. Also, citing Fitts’s law, the targets are small and run together as a sentence. This undoubtedly leads to unintended clicks.
In my design I broke these links and actions into individual components. I included more whitespace to discern the items from each other, and incorporated icons to increase the rate of comprehension. Defining the width between the links and actions increases scannability because the user doesn’t have to visually parse each line of text.
When scanning the list, it isn’t immediately apparent what actions and links are connected to what item. There is very little space between each item and no visual distinction.
In my redesign I included a subtle divider line and greater whitespace to improve item distinction. I also got rid of redundant characters like the “.” after the number, “( )” around the url, “points” after the upvote count, and I used icons to communicate “comments” and “users” instead of spelling it out.
I decided to place the upvote and commenting actions on opposite ends of the list. When a user scans the list they should have clear points to click. I think the visual separation adheres to a user’s mental-model better than the current diagonal placement. I also decided to make the upvote and comment icons solid after a user preforms an action to denote past interactions.
3. Pagination
In the redesign, I substituted “More” for pagination. Paginated lists provide context to where the user is and has been. The current version takes the user to another page of 30, so pagination wouldn’t be a big change. The only issue with the redesign is that it assumes an end. This can be remedied by substituting a total number for “of many.” That way a user will know where they are without providing an objective end.
4. Navigation & Header
The orange navigation of Hacker News stands out more that anything on the screen. In the redesign, I downplayed the color by reducing it to just the logo. I also added whitespace around the links and dropped the divider lines for visual clarity.
I decided to make the logo link to top stories instead of the main Y Combinator website. I think this cleans up the navigation and establishes Hacker News as its own destination. A link to Y Combinator can be placed in an alternative area on the site.
I included a header to to reinforce the section the user is on. It also includes the submit action that is currently in the main navigation.
5. Submit Form
The current submit form has a few usability issues and an overall poor visual cohesiveness. As Nielsen Norman Group points out, placing a field title above an input is the most intelligible way to present a form.
The current version explains the distinctions on submitting a comment versus a url after the fields to do so, and is more wordy than it needs to be. In the redesign I simplified this by including “leave blank if submitting a comment” above the URL input, and created a divider between the URL and comment field to present a clear choice.
Comment threading is another area to improve. This is probably the hardest area to get right. Multi-nested replies tend to make discussion incomprehensible. This subject warrants a deeper investigation, perhaps in another post.
Overall, I wonder how design impacts discourse within a community. I think subtle changes to our digital environments can have profound effects on the content of our interaction. However, I also understand how design styles, components, and patterns can be locked-in through heavy use, regardless of their merit. Design iteration is always a battle, and even more so in an online community. Any change will undoubtedly come with protest, but from my experience, it usually dissipates within a few days, and after a few months users don’t remember the previous version.
