From aab2dd4631ce0bb5c1f2870cc23dc102b66ca3b8 Mon Sep 17 00:00:00 2001 From: Arick-mux <137026734+Arick-mux@users.noreply.github.com> Date: Sat, 16 Mar 2024 18:58:11 -0400 Subject: [PATCH 1/6] Create 10_Heuristics.md --- Topics/User_Experience/10_Heuristics.md | 39 +++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 Topics/User_Experience/10_Heuristics.md diff --git a/Topics/User_Experience/10_Heuristics.md b/Topics/User_Experience/10_Heuristics.md new file mode 100644 index 000000000..278d49050 --- /dev/null +++ b/Topics/User_Experience/10_Heuristics.md @@ -0,0 +1,39 @@ +"Topic: 10 Heuristics of User Interface Design by Jakob Nielsen + +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 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. Such 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. +" From 4125ddf323e738662fff77f25ccbe18dfe540bd8 Mon Sep 17 00:00:00 2001 From: Arick-mux <137026734+Arick-mux@users.noreply.github.com> Date: Sun, 17 Mar 2024 22:37:01 -0400 Subject: [PATCH 2/6] Update 10_Heuristics.md this is a modification on the whole file style to be more easily read by any viewer or commenter --- Topics/User_Experience/10_Heuristics.md | 66 ++++++++++++++++--------- 1 file changed, 44 insertions(+), 22 deletions(-) diff --git a/Topics/User_Experience/10_Heuristics.md b/Topics/User_Experience/10_Heuristics.md index 278d49050..dfcdf422d 100644 --- a/Topics/User_Experience/10_Heuristics.md +++ b/Topics/User_Experience/10_Heuristics.md @@ -1,39 +1,61 @@ -"Topic: 10 Heuristics of User Interface Design by Jakob Nielsen +# "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 will be explaining the 10 Heuristics each and give different examples on them: +# Here I will be explaining the 10 Heuristics each and give different examples on them: -1: Visibility of System Status: +# 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. + > 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. -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. + > 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 +# 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. Such examples would include an undo button or the most-commonly-used back button on internet browsers. +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. -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 + > 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. + +# 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. " From 9ad24d2eb586524a0c8866aeaa16ea1db650e6e8 Mon Sep 17 00:00:00 2001 From: Arick-mux <137026734+Arick-mux@users.noreply.github.com> Date: Sun, 17 Mar 2024 22:46:56 -0400 Subject: [PATCH 3/6] Update 10_Heuristics.md images are uploaded to be tested --- Topics/User_Experience/10_Heuristics.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/User_Experience/10_Heuristics.md b/Topics/User_Experience/10_Heuristics.md index dfcdf422d..a762733c8 100644 --- a/Topics/User_Experience/10_Heuristics.md +++ b/Topics/User_Experience/10_Heuristics.md @@ -58,4 +58,6 @@ Error messages should be displayed succinctly and constructively offered solutio 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/965baa66-271f-4ead-bdf9-7c7c316c0321) + " From 6d91eff502f60370d8cc64e1471d45aa3093b731 Mon Sep 17 00:00:00 2001 From: Arick-mux <137026734+Arick-mux@users.noreply.github.com> Date: Sun, 17 Mar 2024 22:48:30 -0400 Subject: [PATCH 4/6] Update 10_Heuristics.md images reuploaded again to try --- Topics/User_Experience/10_Heuristics.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Topics/User_Experience/10_Heuristics.md b/Topics/User_Experience/10_Heuristics.md index a762733c8..b7c5f4bfb 100644 --- a/Topics/User_Experience/10_Heuristics.md +++ b/Topics/User_Experience/10_Heuristics.md @@ -57,7 +57,9 @@ Error messages should be displayed succinctly and constructively offered solutio # 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/965baa66-271f-4ead-bdf9-7c7c316c0321) +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) + " From aa5135fa9d47f20b15e1421448e88aa2ec66158a Mon Sep 17 00:00:00 2001 From: Arick-mux <137026734+Arick-mux@users.noreply.github.com> Date: Tue, 19 Mar 2024 13:08:20 -0400 Subject: [PATCH 5/6] Update 10_Heuristics.md Pictures are uploaded, and corrections to the texts are made. --- Topics/User_Experience/10_Heuristics.md | 44 +++++++++++++++++-------- 1 file changed, 31 insertions(+), 13 deletions(-) diff --git a/Topics/User_Experience/10_Heuristics.md b/Topics/User_Experience/10_Heuristics.md index b7c5f4bfb..4709ecc42 100644 --- a/Topics/User_Experience/10_Heuristics.md +++ b/Topics/User_Experience/10_Heuristics.md @@ -1,9 +1,9 @@ -# "Topic: 10 Heuristics of User Interface Design by Jakob Nielsen +# Topic: 10 Heuristics of User Interface Design by Jakob Nielsen -## table of contents, the 10 heuristic rules: +## Introduction, about 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. +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. Such 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. @@ -11,48 +11,66 @@ Designers frequently adapt their UI strategies to suit the specific needs and co # 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. +The interface is expected to 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. + + > Examples: Progress bar when downloading or uploading pictures of any app 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 motivated to either pressing the back button or refreshing the page. Such potential sources of frustration can be effortlessly prevented by ensuring the system's status is clearly displayed. Another example is a map application in Which 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. + > 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. (Google maps, as it shows the real map and location with streets and distances labeled instead of some maps which does not label any of the surroundings) # 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. +Users sometimes execute accidentally 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 assurance and control. Such exit options empower users to maintain control over the interface, preventing situations where they feel trapped or exasperated. Imagine an app that does not allow the user to undo any hefty choices! > Some examples would include an undo button or the most-commonly-used back button on internet browsers. +> image + # 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. + > 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. It can also be as common as the design for banks, hostipals, and many institutions with merely just a front desk reception close to the entrance, so that visitors would not be needed to wonder where to seek help and assistance. +> ![image](https://github.com/Arick-mux/learning-software-engineering.github.io/assets/137026734/4969527d-d768-4587-8ba2-889c80101372) + # 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. +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 that is 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. + > 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. +> image + # 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 +> in this instance, the given shortcut control of underline is clearly labeled: +>image + # 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. +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. +> +> Picture of Google's clear and concise design: image + # 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. + > An example of this would be searching for an invalid name on an app and the app would offer a name similar to the address which can potentially help the user. Such as the attached example when the user types "cute cittens" instead of "cute kittens" which is the intended search he is intended to make. +> image + # 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. From e9544d69e404dc2220f3d987b43ac17ff594f464 Mon Sep 17 00:00:00 2001 From: Arick-mux <137026734+Arick-mux@users.noreply.github.com> Date: Tue, 19 Mar 2024 20:41:22 -0400 Subject: [PATCH 6/6] Update 10_Heuristics.md Added conclusion and works cited. Still trying to aim for perfect style. --- Topics/User_Experience/10_Heuristics.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/Topics/User_Experience/10_Heuristics.md b/Topics/User_Experience/10_Heuristics.md index 4709ecc42..55c7441f1 100644 --- a/Topics/User_Experience/10_Heuristics.md +++ b/Topics/User_Experience/10_Heuristics.md @@ -8,7 +8,7 @@ In the realm of design, User Interface stands as a pivotal concern. Achieving pr 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: +# Here this article will be explaining the 10 Heuristics each and give different examples on them: # 1: Visibility of System Status: The interface is expected to consistently update users on system processes, delivering timely and relevant feedback. @@ -77,7 +77,19 @@ its best that the system would not need any additional explanation of its utilit 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) +image -" +# Conclusion: + +Since their introduction by Jakob Nielsen, the 10 Usability Heuristics have been a constant companion and guideline to product designers in different fields, steering a wide array of products and their competitors towards the goal of enhancing user satisfaction. Despite their undeniable positive influence, challenges such as the rarity and high cost of experts skilled in these Heuristics pose obstacles. Additionally, even when expert analysis is possible, there's the risk of the experts focusing on trivial issues while skipping the important ones or the presence of evaluative bias. Given these complexities, the discussion around the 10 Heuristics continues to be a debatable and contentious one. + +# Works Cited: + +Pictures used from screenshots of Youtube, Google, and Gmail: +https://www.youtube.com/ +https://www.google.com/ +https://mail.google.com/mail/u/0/#inbox + +Original Article: 10 Usability Heuristics for User Interface Design by Jakob Nielsen, written in April 24 1994 +1 J. Nielsen, Nielsen Norman Group (2024).