Hey! It’s been a while. It is still me with my university report on the User Experience of HackerNoon. In the we have covered: previous part , What is HackerNoon? Potential users of HackerNoon and personas. Analysis of HackerNoon on the aspects of , and . Accessibility Internationalization, Cognitive & Perceptual challenges Disclaimer (again): This is by no means a representation of how HackerNoon is used amongst users but merely a general analytic speculation on the overall usage and aesthetic of the site. This can be used as a reference for new users on what HackerNoon is and how to utilize the site on a basic level. In this second part, we’ll go through: The most basic functions of the site - Reading and Writing. How to browse the site, and how to write and submit your HackerNoon articles. 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: To read and learn about anything technology-related topic of interest. Main goal: Cognitive walkthrough/Steps to reach the goal: Option 1: Go on the website, hackernoon.com a. Step 1: Browse and scroll through the web until you find an article that catches your attention. b. Step 2: Option 2: Go to the website, hackernoon.com Step 1: 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. Step 2: Option 3: Go to hackernoon.com Step 1: Hover your mouse over the navigation bar, and choose the topic you want to learn more about. Step 2: This option is often performed by regular readers who are familiar with the domain in general. Option 4: Go to hackernoon.com Step 1: 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. Step 2: 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. Discussion on the complexity and variety of the task: 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: To get their article published. Main goal: Cognitive walkthrough/Steps to reach the goal: : Log in or create a HackerNoon account. Step 1 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. Step 2: Start writing. Step 3: 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.1. 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.2. 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.3. Writers should proofread their articles, check for grammar mistakes, make sure the article follows the and finally, check for potential plagiarism since HackerNoon does not publish plagiarized content. 3.4. , DOs and DON’Ts of HackerNoon To check plagiarism, click on “Story Settings” on the navigation bar under the profile picture, then click the button to generate plagiarism data. Finishing up the writing. Step 4: 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.1. Add tags to the story to be categorized and for the article to be more easily found on the site. 4.2. Add a description to the story. 4.3. Create a TL;DR for the article. Writers can write it themselves or they can have it AI-generated. 4.4. 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. Step 5: After editorial review, if the article gets published, HackerNoon will send an email to the writer, announcing the publication. Step 6: 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. Discussion on the complexity and variety of the task: 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: 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. Direct Manipulation/Window-style interaction: 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: 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. Form Filling: 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. Menu Selection: Aesthetics: 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. 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. Typeface: 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. Discussion: Analyzing HackerNoon interface design on Nielsen’s 10 principles. Nielsen’s 10 principles: 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. Visibility of system status: 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. Match between real world and system: HackerNoon users have much as they can . 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. User control and freedom: freedom of choice choose to subscribe or unsubscribe to newsletters and emails 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. 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. Consistency and standards: There are clear instructions presented when writing with HackerNoon editors ( ). Additionally, there is a section with everything users need to know about HackerNoon. Recognition rather than Recall: if anything, find the little question mark “?”, placed in each section of the editor help The site automatically recognizes users’ mistakes and notifies them. Error prevention: 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. Flexibility and efficiency of use: 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. Aesthetic and minimalist design: 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. Recognize, diagnose, and recover: 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. Help and documentation: HackerNoon has good flexibility as users have many options for personalization. Flexibility: 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. 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 which is more curated towards users’ reading experience on handheld devices. official mobile app 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.
