Assignment 5 Beta
Frontend code repository: https://github.com/MasterYoda01/frontend
Vercel Deployment link: https://frontend-1o4y79lko-josephs-projects-27f70fd9.vercel.app/
Usability Criteria:
Learnability: Observation: The wireframes include clear and intuitive navigation cues, making it easy for users to understand how to move between different sections or pages. For example, in the Home Screen, there are 3 avaiable options, and the user will know to choose and option by clicking on one of the buttons. By incorporating tabs in our final frontend project, users are presented with a visually intuitive navigation system right from the start. Each tab acts as a clear signpost, representing a main component or section of the application. This visual organization immediately communicates to the user that the app is comprised of distinct, identifiable areas. This upfront exposure empowers users to grasp the overall structure and purpose of the application, allowing them to make informed decisions about which section to explore based on their specific needs or interests. In essence, the tabs serve as a navigational roadmap, providing users with a clear path to access the functionalities or content areas that matter most to them."
Efficiency: Observation: Common actions or tasks are not easily accessible through shortcuts or prominently placed buttons, thus not allowing users to quickly accomplish their goals. For example, in our wireframe, once we click the Take TrueLink button or Take TimeCapsule Button, there is not way to revert back to the home page to use the other features.
In our frontend project, it's crucial to prioritize the placement of frequently used features to streamline user interactions and maximize efficiency. By strategically positioning commonly accessed functionalities, users can swiftly perform routine tasks without unnecessary navigation or searching. This reduces the time and effort required for users to accomplish their goals. For instance, providing a prominent and easily accessible button on the homepage for users to return to the main menu ensures they can seamlessly switch between different features. This approach acknowledges that certain actions are central to the user experience and need to be readily available for quick access. Ultimately, by optimizing the interface to cater to the most frequently performed tasks, we empower users to navigate and interact with the application in a more efficient and time-saving manner.
Physical Heuristics:
Fitt’s Law:
Observation: The wireframes currently feature critical action buttons, such as "Post" or "Save," that may not be optimally positioned for easy access by the user's cursor or thumb due to their small size.
Implication: In our project, it is crucial to enhance the accessibility and usability of these essential buttons. This can be achieved by increasing their size and ensuring they are positioned within comfortable reach for users. Additionally, for actions that may have irreversible consequences, like "Delete," it is advisable to make the button less prominent and require a deliberate action to reduce the likelihood of accidental clicks. This approach aligns with ergonomic principles and can significantly improve the overall user experience.
Gestalt Principles:
Observation: The wireframes demonstrate an effective application of Gestalt principles by appropriately grouping related interface elements. For instance in my wireframes, my posts, reflections, and memories are distinctly separated into their respective sections, providing a clear and intuitive structure for users to navigate.
Implication: This design choice significantly contributes to users' understanding of the conceptual organization of the application. To enhance this further, it is important to maintain consistency in grouping elements throughout the interface. For example, in the posts section, I might consider grouping visible posts at the bottom of the screen while reserving the top portion for creating new posts. This approach will further refine the user experience and reinforce the application's intuitive layout.
Linguistic Level:
Speak a User's Language:
The wireframes could benefit from more user-friendly language, particularly in areas like "capsuleDate" where the instruction "choose a date to see your capsule" might not immediately convey that the user should input a future date to view their memory.
Implication: To align with the heuristic of speaking the user's language, it's crucial to provide clear and concise instructions. In the frontend project, I'll focus on crafting simple instructions that explicitly guide users on how to interact with features like creating memories, ensuring they have a seamless experience without any confusion. This can greatly enhance the accessibility of the interface to a wider audience.
Consistency:
The wireframes exhibit a commendable level of consistency in terms of color schemes and iconography. For instance, actions like "Post" and "Done" feature uniform design elements throughout different sections of the application.
Implication: In my frontend project, maintaining this level of consistency is crucial. It supports user recognition and recall, which are essential for a user-friendly experience. However, it's important to conduct a thorough review to identify and address any areas that may require additional standardization to achieve absolute consistency. This will contribute to a more cohesive and intuitive interface overall.
Tradeoffs
Tradeoff between Learnability and Efficiency:
Observation: While the wireframes prioritize learnability by providing clear navigation cues and intuitive layouts, there's a potential tradeoff with efficiency. For example, the wireframes could benefit from more prominent placement of common actions like "Create Post" or tasks to allow users to quickly accomplish their goals without excessive navigation.
Tradeoff between Safety and Efficiency:
Observation: The wireframes prioritize safety by ensuring that critical actions, such as deleting a post or memory, require confirmation to prevent accidental deletions. However, this additional step may introduce a slight tradeoff with efficiency, as it adds an extra click for users.
Visual Design Study
https://docs.google.com/presentation/d/1WZ7T9pmOReG6dunqPecBoBeZ-LcurGzSduI_Go_2O0I/edit?usp=sharing