Assignment 5: Frontend Design & Implementation

October 17th, 2023

Heuristic Evaluation

Each of the page references refer to my Figma wireframes, found in Assignment 3

Safety

On the Edit circles page, there is a space to Manage Circles, which contains a dropdown with an Add or Delete option. The physical closeness of these buttons could make it easy for the user to accidentally select the wrong action and cause delays or frustration. While this might sacrifice efficiency, separating these actions into two different physical spaces improves the safety of editing circles.
The user could also be unaware of the paywall status of a website and choose the incorrect option. An "unsure" option could be added to prevent the user from choosing a misleading option.

Efficiency

On the New post page, there is an input for the source of an article. I decided to remove this input altogether and replace it with an automated source extractor based on the url to reduce the friction to create a post. This not only reduces keystrokes but also removes a potential source of user error.
In my current design, the user has a New Post button on the home page which redirects them to a separate page to create a post. This navigation in between actions could be reduced by embedding the new post feature at the top of the home page. The user then has less friction in between scrolling through their feed and publishing a post.
On the New Post page, the +Sources and +Notes sections both have an "Add!" button. Adding these sections individually takes time and serves no real purpose, as the "Post" button takes care of this already. Removing these buttons will therefore improve the efficiency of creating a post.
In my Edit Circles page, both the Manage Circles and Manage Members features use a dropdown menu. This is inefficient for the user as they have to click multiple times to select a specific option. In addition, if the list of circles is long enough, the user will have to spend time scrolling to find their desired circle. Instead, each option could be layed out in a more desirable format with each option and group displayed in a flattened layout. This way, the user can see all their options clearly and navigate right away to select them.

Fitt's Law

On the Edit Circles page, there are multiple ways that circles are represented: a list with the members visible, as well as a dropdown. If the user wanted to perform multiple actions on a group, they would have to navigate to multiple areas of the page. Creating a central list of circles with options within that would reduce the time it takes for a user to reach for multiple circle interface elements. This might reduce learnability if there are less clear buttons with descriptive actions, but will likely improve overall efficiency and usability.

Mapping

The layout of the Home page consists of the posts as well as a sidebar which contains buttons for creating a new post and editing circles. Grouping these two buttons on the navigation bar might confuse the user, since their functionalities are not related. Instead of this, embedding the New Post form into the home page would make sense as the two concepts are more cohesive. Moving the Edit Circles button to the top navigation bar would also make more sense as it would be closer to the Settings/Login button which deals with users and accounts.
In my wireframe design, a user's posts show up in their own feed. There's no designated page to view their own posts, or see which groups are associated to each post. This makes it especially difficult for the user to manage their posts if they want to edit the visibility of a post. Adding a page for this purpose is essential to improve the user experience!

Information scent

On the Home Page, each post has a Link which when clicked, takes the user to the hyperlink in a new tab. I plan to combine the link and title, so the title itself is a hyperlink. The fact that the user must click the link might not be clear to the user, so I will add a visual cue such as an icon next to the link. Also, adding a message when the user hovers over the link could give a subtle instruction to the user.

Speak a user's language

I think that the "Paywall" feature could be ambiguous to users, and could be replaced with "Subscription Needed". In addition, changing the language of "Adding" a circle to "Creating" would make the action more clear to the user.

Frontend repository: https://github.com/anna8murphy/pulse

Vercel deployment: https://pulse-six-sage.vercel.app/