HackerNoon - A User Experience Analysis: Part 2

Hey! It’s been a while. It is still me with my university report on the User Experience of HackerNoon.

In the previous part, we have covered:

1. What is HackerNoon?

2. Potential users of HackerNoon and personas.

3. Analysis of HackerNoon on the aspects of Accessibility, Internationalization, and Cognitive & Perceptual challenges.

   
   

In this second part, we’ll go through:

1. The most basic functions of the site - Reading and Writing. How to browse the site, and how to write and submit your HackerNoon articles.

   
   

2. Some general understanding and analysis of HackerNoon’s web design and aesthetic will also be given.

Content Overview

• Tasks Analysis

  Browsing HackerNoon

  Writing on HackerNoon

• User Interface Design

  Interaction styles

  Aesthetics

• Overall Evaluations

Tasks Analysis

HackerNoon Readers:

Main goal: To read and learn about anything technology-related topic of interest.

Cognitive walkthrough/Steps to reach the goal:

1. Option 1:

   a. Step 1: Go on the website, hackernoon.com

   
   

   b. Step  2: Browse and scroll through the web until you find an article that catches your attention.

2. Option 2:

   Step 1: Go to the website, hackernoon.com

   
   Step 2: Type your topic of interest to the search bar, and navigate through the list of stories, tags, and people to follow and read on the website.

   
   

3. Option 3:

Step 1: Go to hackernoon.com

Step 2: Hover your mouse over the navigation bar, and choose the topic you want to learn more about.

Option 4: This option is often performed by regular readers who are familiar with the domain in general.

Step 1: Go to hackernoon.com

Step 2: Type in the search bar: hackernoon.com/u/learn. This will lead you to an account made and managed by HackerNoon employees which acts as a collection of must-read stories for each specific topic.

Discussion on the complexity and variety of the task: Through the cognitive walkthrough of possible ways a reader can navigate HackerNoon to find articles or topics that suit their interests, it can be concluded that the domain is designed for readers to easily navigate at a low complexity level, evidence by the fact that it often takes no more than 2 steps for readers to find a specific topic to read, thus, a new reader can easily grasp the basics on how to use the site.

However, the variety level of the site is relatively high since there are multiple ways for readers to read or find their interested topics as mentioned above.

HackerNoon Writers:

Main goal: To get their article published.

Cognitive walkthrough/Steps to reach the goal:

1. Step 1: Log in or create a HackerNoon account.

   
   

2. Step 2: On the HackerNoon homepage, click “Write”; you’ll find yourself on the writers’ page. You can browse for writing templates here, or click “Start Draft”/”Start Writing” to immediately start your draft.

3. Step 3: Start writing.

   
   

3.1. Come up with a good title for the article. A good title can guide one’s writing a long way. Additionally, in order for the article to be saved as a draft on HackerNoon, it must have a title.

3.2. Write the article. Writers along with just writing a plain article can have options to customize their writing, adding headlines, quotes, a cover photo, and writing words or phrases in bold or italics.

3.3. Writers can add elements to make their article more appealing. This can be achieved by typing ‘/’ anywhere they want to insert a new element such as a link, image, or even embed a video.

3.4. Writers should proofread their articles, check for grammar mistakes, make sure the article follows the DOs and DON’Ts of HackerNoon, and finally, check for potential plagiarism since HackerNoon does not publish plagiarized content.

To check plagiarism, click on “Story Settings” on the navigation bar under the profile picture, then click the button to generate plagiarism data.

4. Step 4: Finishing up the writing.

   
   

4.1. Choose a Featured Image for the article. In “Story Settings”, choose “Click to upload Featured Image”, and a window will pop up and give writers various options for featured images from self-uploading to picking one from online databases or creating an AI-generated one.

4.2. Add tags to the story to be categorized and for the article to be more easily found on the site.

4.3. Add a description to the story.

4.4. Create a TL;DR for the article. Writers can write it themselves or they can have it AI-generated.

5. Step 5: Submit the article for editorial review. This process is called “The second human rule”, HackerNoon will have editors read the article first, make edits where appropriate, and decide whether to publish it or not.

6. Step 6: After editorial review, if the article gets published, HackerNoon will send an email to the writer, announcing the publication.

Discussion on the complexity and variety of the task: Through the cognitive walkthrough of the basic steps for a writer to get published on HackerNoon, it can be seen that compared to the readers’ task analysis above, the complexity level has increased significantly.

There are many steps as well as sub-steps required for writers to create a complete article, and even after that, the story still has to go through layers of quality control before getting published.

As for variety, the only way for writers to achieve the goal of getting published on HackerNoon is to write a story.

How Accessibility Issues Are Addressed:

HackerNoon is designed to be compatible with devices’ accessibility support features as readers can read articles with Voice Over support, and writers can write with the help of Dictation.

Additionally, considering the domain itself, each article on HackerNoon has its own audio, read by AI.

HackerNoon Relates to Activities in the “Real” World:

As reading and writing online are parts of reality in the 21st century, HackerNoon is as “real” as it can get. As an online publication, activities such as reading and writing happen in real time, stories are submitted every hour, and once they are published, they are real pieces of information accessible to every real human being.

Additionally, users are allowed to comment on each other's stories, creating real-life conversations. On top of that, when submitting an article for editorial review, writers can send messages to the editors directly on the “Story Settings” window.

User Interface Design

Interaction Style:

Direct Manipulation/Window-style interaction: As a complex, heavily designed website, additionally, to serve the purpose of being an online publisher, HackerNoon mainly uses window-style interaction as users mainly interact with the site by scrolling and carrying out tasks on one and/or multiple pop-up windows.

Additionally, writers when writing can have options to directly manipulate their article layouts according to their wants and needs.

However, it can be seen that there is also a small integration of other interaction styles, specifically:

• Form Filling: This type of interaction style is used in writing articles and adding additional information (TL;DR, summary) to a story; it is also used in the search bar on the site as well as in filling out login or sign-up information. Additionally, it is also used when writers want to update or fill out information on their profiles.

  
  

• Menu Selection: This type of interaction style is seen in the navigation bar, specifically, it is a drop-down menu in which users can navigate and select appropriately.

Aesthetics:

1. Overall Aesthetic:

Logo and design: As a technology publication, the design and overall aesthetic of the website resembles the retro, 8-bit BBC Micro with its signature green monochrome display. The site’s design also follows the same retro, old-tech aesthetic with scanning tube effects and pixelated icons.

Additionally, the layout design is also intentionally made to look like a representation of a hacker’s computer screen depicted on television, correlating to the name of the site - HackerNoon.

Typeface: The typeface used on the site is hard and clunky, fitting the technology aesthetic of a tech publication. Additionally, HackerNoon also uses the unique HackerNoon font for their designs. It is created to look pixelated, like codes, however, smooth at the edges. The font to me is a good integration of retro-tech and modernity.

Discussion: Considering the aesthetic the brand is aiming for, HackerNoon is going on the right track in terms of design consistency. However, intentionally making the site look retro and chaotic and putting lots of information and articles on the homepage can be a setback since a new user can be easily overwhelmed by the amount of information presented on the site even though it is relatively easy to navigate.

2. Nielsen’s 10 principles: Analyzing HackerNoon interface design on Nielsen’s 10 principles.

   
   

• Visibility of system status: HackerNoon shows a loading icon to show the users what is happening and the progress of the task they are doing; it appears in the middle of basic tasks such as login/signup, when a writer loads up the editor for writing, and when they upload images to their articles.

  
  

• Match between real world and system: As a tech publication, attracting millions of technologists to the site, HackerNoon not only matches the aesthetic of retro tech as mentioned above but the site also uses many words and phrases that are trending as well as recognizable by people in the tech industry.

  
  

• User control and freedom: HackerNoon users have much freedom of choice as they can choose to subscribe or unsubscribe to newsletters and emails. The site also supports undo and redo functions for writers; additionally, stories are automatically saved by the editor so that writers don’t lose their progress when writing.

  
  

  These allow users to be more comfortable using the site knowing that they have control over their own progress as well as the site’s advertisements.

  
  

• Consistency and standards: Good consistency as HackerNoon uses standardized phrases for login and log-out commands. The buttons are written in clear manners as can be seen with the “Start Writing” button. The navigation bar is built with the same aesthetic, and the layout, fonts, and colors of articles as well as headers on the homepage are also consistent.

  
  

• Recognition rather than Recall: There are clear instructions presented when writing with HackerNoon editors (if anything, find the little question mark “?”, placed in each section of the editor). Additionally, there is a help section with everything users need to know about HackerNoon.

  
  

  

• Error prevention: The site automatically recognizes users’ mistakes and notifies them.

  
  

  

  
  

• Flexibility and efficiency of use: The site is flexible and efficient as keyboard shortcuts are supported for writers when writing with HackerNoon editors. On top of that, the navigation functions of the site are simple enough for new users, and everyone can get familiar with the site quickly.

  
  

• Aesthetic and minimalist design: As mentioned above, the aesthetic of HackerNoon is retro-tech and can look cluttered for new users. However, all layouts are designed with intentions, and users can learn to use the site quickly.

  
  

• Recognize, diagnose, and recover: 404 error notifications also suggest potential content users might be looking for. This is a smart thing to do since instead of showing only the error message, the site tries to understand the users’ mistakes and leads them back to the search they are looking for. Thus, it is a good way to build rapport with users and decrease the site’s bounce rate.

  
  

  

  
  

• Help and documentation: There is a help section for users on the navigation bar, and any features that are created only for HackerNoon will be defined by hovering the cursor on the question mark next to them.

  
  

3. Flexibility: HackerNoon has good flexibility as users have many options for personalization.

• Users can customize their HackerNoon profile by adding information, achievements, social media, and even stats. This allows users to fully control what they want the world to see about them, thus, good for making connections between people in the HackerNoon community.

  
  

• Users can customize the color of their homepage by clicking on the brush icon to the far right under the navigation bar. This can resolve the color problem of the site as many people can find the green color of HackerNoon hard to look at, so they can change the color of the homepage to a more soothing color.

  
  

4. Mobile vs Desktop:

Moving from desktop to mobile, HackerNoon’s aesthetic remains unchanged with consistent colors and layout. Elements of the website are adapted well to mobile, exemplified by the navigation bar is now the 3 dashes to the top right corner, and when users click it, it opens up to a full menu.

Additionally, windows and articles are resized to fit the mobile layout, making the reading experience of HackerNoon on mobile devices visually the same as on desktop.

However, as writing on HackerNoon is a complex task with many steps, shortcuts, and customization, the website on mobile cannot satisfy all features like on desktop. Therefore, there are limitations on shortcut commands, headings customizations, font size, and adding images.

Thus, writing a full HackerNoon article on mobile is not recommended.

As of recently, HackerNoon released their official mobile app which is more curated towards users’ reading experience on handheld devices.

Overall Evaluation

Overall, HackerNoon is a complete, well-rounded website as it is easily navigated. It is designed to suit its target audience both aesthetically (colors, icons, and typefaces) and academically (contents, words, and functionality).

By having editors read and decide if each article is publishable, the site provides readers with quality information that suits their needs and demands. As for writers, by doing so, writers are pushed to enhance their writing skills and knowledge and are able to use the site fluently.

Task complexity is reasonably rationed between two main user groups. For general users and readers who go on the site to read and search for information, they can easily navigate and find information/articles. For writers, the task complexity level is high, thus, they are forced to learn how to use the site properly, which can be understood as the foundation for creating good articles.

When it comes to the interface design, HackerNoon stays consistent with its aesthetic, however, the layout consists of lots of information, and the default colors of the site (bright green and yellow) can be considered as setbacks as new users can perceive the site as overwhelming and overcomplicated.

Other than that, HackerNoon can be considered to be user-centered as users are able to flexibly customize the site in every task they do, from changing the homepage color to customizing profiles and twitching font size, headlines, as well as images when writing an article.

Another user-centered thing HackerNoon does well is that help is provided everywhere on the site, from a well-organized help section/brand manual to small little definitions of new features.

Additionally, as a business relying a lot on email advertising and newsletters, the fact that HackerNoon allows users to choose which email they receive or even unsubscribe entirely from emails/newsletters is also considered to be extremely user-centered.