Create 10_Heuristics.md

Topics/User_Experience/10_Heuristics.md

@@ -0,0 +1,65 @@
+# "Topic: 10 Heuristics of User Interface Design by Jakob Nielsen
+
+## table of contents, the 10 heuristic rules:
+
+
+From the moment software and websites first made their appearance, the quality of user experience (UX) and user interface (UI) has emerged as a critical and unavoidable subject. Interestingly, it has been found that inadequately designed interfaces can drive users away, pushing them towards alternatives that offer more thoughtfully crafted experiences. While the underlying structure of websites and software is rooted in logical frameworks, and aesthetic elements may seem secondary, this perspective shifts when the aspect of human-computer interaction is brought into focus. Users struggling to navigate or comprehend a system are prone to negative experiences. Issues can range from elusive buttons to cluttered menu layouts, all of which can stem from not adhering to Jakob Nielsen's ten foundational heuristics for UI design. This discussion aims to delve into these ten heuristics, providing examples and applying them to analyze the usability of various well-known websites and products.
+In the realm of design, User Interface stands as a pivotal concern. Achieving product success and differentiation from competitors requires a commitment to treating users with the utmost consideration. Today's users, well-acquainted with cutting-edge technology, demand more than just an attractive interface. This necessitates a focus on User Interface design.
+Designers frequently adapt their UI strategies to suit the specific needs and complexities of a project, aiming to uncover the most effective solutions. Among the array of methodologies available, conducting heuristic evaluations is a particularly valuable technique for identifying and addressing usability challenges. This approach relies on "usability heuristics" as a set of guiding principles throughout the UI design process.
+
+
+# Here I will be explaining the 10 Heuristics each and give different examples on them:
+
+# 1: Visibility of System Status: 
+The interface must consistently update users on system processes, delivering timely and relevant feedback.
+By understanding the system's present condition, users can gauge the results of their recent actions and decide on their subsequent moves. Such predictability fosters confidence in both the product and its associated brand.
+ > Examples: Progress bar when downloading, uploading pictures (good example) With the progress bar showing the percentage of completion of a task at hand as the option to interact with a progress bar for a detailed view of the upload status enhances transparency. Without clear progress indicators, users may become perplexed and resort to pressing the back button or refreshing the page. Such potential sources of frustration can be effortlessly circumvented by ensuring the system's status is clearly displayed. Google maps: When users are updated on the current status of their location, they understand the results of their previous routes and can plan their future steps accordingly. Consistency in interactions builds confidence in both the product and the associated brand.
+
+# 2: Match Between the System and the Real World
+The interface should communicate using the user’s language and components that are familiar to them such as texts, icons, pictures they are able to understand. A clear counter example of this would would be an outdated programming language that interacts through commands and produces outputs in a code or jargon comprehensible only to specialized scientists. 
+
+ > A good example would be an interactable diagram map of a learning system which the user is able to understand the control maps to which element. Such as an advanced car diagram which communicates its mechanical problems by glowing each part of the car that are malfunctioning.
+
+# 3: User Control and Freedom
+Users sometimes take unintended actions and require a prominently labeled "escape route" to exit the undesired action without enduring a lengthy procedure.
+Having the choice and ability to facilitate reversal of actions or steps easily promotes a feeling of autonomy and assurance. Such exit options empower users to maintain control over the interface, preventing situations where they feel trapped or exasperated. 
+
+ > Some examples would include an undo button or the most-commonly-used back button on internet browsers.
+
+# 4: Consistency and Standards
+Standards exist, and consistency is always preferred universally. This unspoken uniformity applies not just to visual elements like colors and button styles, but also to the user experience as a whole. Avoid creating confusion by introducing varied experiences within different task flows. Should a popup be selected as the resolution for a problem, ensure it is utilized consistently in all analogous scenarios, allowing users to become accustomed to it. 
+
+ > Examples would include restaurant menus having the same sized text and style for similar types of food, while entrees menus would not display any deserts or appetizers.
+
+# 5: Error Prevention
+Users are humans from different backgrounds and different levels of expertise on different programs. Thus, they all would tend to make mistakes normally. Which would give designers the need to notify them or give them appropriate suggestions and notifications when needed, especially when harsher mistakes would be made which can cause more trouble than average slips. Such examples would be the pop-up message of when a major decision would be made such as an online payment to ensure that the payment amount and associate card selected would not be mixed with others. Another example would be the pop-up message of an email about-to be sent when there are no subjects or body texts, or when the image is oversized which can take longer time to send than expected.
+
+# 6: Recognition Rather than Recall
+Users are humans, and humans have limited short-term memory. Thus softwares would need to aim to reduce the memory load on users by suggesting options they might need or reminding them of tasks that require completion soon. Avoid situations where users have to apply significant effort to remember or think deeply in order to accomplish tasks. 
+
+ > A perfect example would be the site or program showing and keeping track of historical choices the user made. Such as being able to browse the history of many sites.
+
+# 7: Flexibility and Efficiency of Use
+With shortcuts and guidelines, designs should be easy to use for both expert and novice users, as both exist. If the cost of time and effort to familiarize the software would be too high than that would create incentive for users to choose easier alternatives. 
+
+ > Examples would be Microsoft products such as excel and word always displaying arrays of short-cut commands (such as ctrl-v) when new files are being built by users
+
+# 8: Aesthetic and minimalist design
+the rule of thumb is always that interfaces should not contain spaces or information that is irrelevant or hardly needed. Superfluous designs or usages would diverge the user’s attention or confuse them. The primary goals should be prioritized and nothing more. 
+
+> Minimalistically designed sites such as ChatGPT and Google are perfect examples that embody minimalism in comparison to other search engines.
+
+# 9: Help Users Recognize, Diagnose, and Recover from errors
+Error messages should be displayed succinctly and constructively offered solutions should be used. 
+
+ > An example of this would be searching for an invalid address on a map app and the app would offer a name similar to the address which can potentially help the user.
+
+# 10: Help and Documentation
+its best that the system would not need any additional explanation of its utilities. But to aim for the best user experience, help and documentation would need to be provided while the documentation of the problems the user need to solve would be categorized. 
+
+Commonly categorized problems to be solved in payment apps for example would be relatable to fields such as payments, account, personal info, system issues, and a FAQ. These categories are usually found in almost all help sections of different apps.
+
+![image](https://github.com/Arick-mux/learning-software-engineering.github.io/assets/137026734/60c4afdc-b410-4082-b67b-d7992145cf6f)
+
+
+"