Difference between revisions of "Usability"
Mark Bridger (talk | contribs) (Created page with "=Overview= Usability, is a metric used to asses a User Interface design. An interface is considered “usable” if it is perceived as easy, enjoyable, efficient and effectiv...") |
Nancy Sabo (talk | contribs) |
||
| Line 1: | Line 1: | ||
=Overview= | =Overview= | ||
| − | + | Usability is a metric used to assess a User Interface design. An interface is considered “usable” if it is perceived as easy, enjoyable, efficient and effective to learn and use. If you use, test, configure or administrate a SmartSimple System you have a role to play in ensuring your system is and stays usable. | |
| − | Usability | + | This article provides information on how you test for and ensure you do not introduce usability issues into your system. |
| − | This article provides information on how | ||
=Usability – Essentials= | =Usability – Essentials= | ||
==What is UI and UX?== | ==What is UI and UX?== | ||
| − | UI or User Interface, is the look and feel and interaction between you and the system. | + | UI or User Interface, is the look and feel and interaction between you and the system. The user interface is a series of screens with elements such as buttons and icons that you use to interact with the SmartSimple System. If you add a custom field or change a color in your systems you are modifying the User Interface. |
UX or User experience is how we feel about interacting with a system. This term was coined by Don Norman and encompasses all aspects of the user's interaction with the company, its services, and its products. UX is how you feel when you buy a product, take it out of the store, open the box. It is the entire experience of a system from buying, using and disposing of that product or service. | UX or User experience is how we feel about interacting with a system. This term was coined by Don Norman and encompasses all aspects of the user's interaction with the company, its services, and its products. UX is how you feel when you buy a product, take it out of the store, open the box. It is the entire experience of a system from buying, using and disposing of that product or service. | ||
A bad UI will create a bad UX. | A bad UI will create a bad UX. | ||
==What is a usability issue?== | ==What is a usability issue?== | ||
| − | A usability issue, is any issue that prevents the system from being easy, efficient and effective to learn and use. | + | A usability issue, is any issue that prevents the system from being easy, efficient and effective to learn and use. Usability issues are objective, such as contrast ratio of text on a background. Usability issues are not subjective or based on personal preference, such as “I don’t like orange”. |
| − | ==How can | + | ==How can I test for usability issues?== |
| − | There are established standards that are used to evaluate the usability of a user interface design. They are called Heuristics and there are 10 of them which we have | + | There are established standards that are used to evaluate the usability of a user interface design. They are called Heuristics and there are 10 of them which we have contexted and summarized below. You can also learn more about heuristics in general on this external site https://www.nngroup.com/articles/ten-usability-heuristics/ |
==What are the 10 Heuristics?== | ==What are the 10 Heuristics?== | ||
| Line 24: | Line 23: | ||
You can meet these criteria by: | You can meet these criteria by: | ||
| − | * | + | |
| − | * | + | * Showing progress (how far have you gone and what is left) |
| − | * | + | * Showing space/time (how much space/time is left) |
| − | * | + | * Showing change (draw attention to things that have changed) |
| + | * Showing expected actions (tell me what I need to do next) | ||
===2. Match Between the System and Real World=== | ===2. Match Between the System and Real World=== | ||
| Line 34: | Line 34: | ||
You can meet these criteria by: | You can meet these criteria by: | ||
| − | * | + | |
| − | * | + | * Using familiar words, phrases, concepts and metaphors |
| − | * | + | * Following conventions |
| − | * | + | * Presenting information in a logical order |
| + | * Providing a preview or showing the world in miniature | ||
===3. User Control and Freedom=== | ===3. User Control and Freedom=== | ||
Make sure users can go forward and back in any process and make sure they can see the information the way they need. | Make sure users can go forward and back in any process and make sure they can see the information the way they need. | ||
| − | Ask yourself can I easily find the information I am looking for in the way I need to see it? | + | Ask yourself: can I easily find the information I am looking for in the way I need to see it? |
You can meet these criteria by: | You can meet these criteria by: | ||
| + | |||
* Providing a path forward and back (undo/redo) | * Providing a path forward and back (undo/redo) | ||
| − | * | + | * Providing different ways to explore information (searching, filtering, viewing options) |
===4. Consistency and Standards=== | ===4. Consistency and Standards=== | ||
| − | Make sure buttons and links are named the same thing, are located in the same place, and put where they are expected to be. | + | Make sure buttons and links are named the same thing, are located in the same place, and put where they are expected to be. |
| − | Ask yourself do I know where to find desired links and buttons, do I know what they do, and are they always in the same place? | + | Ask yourself: do I know where to find desired links and buttons, do I know what they do, and are they always in the same place? |
| + | |||
| + | You can meet these criteria by: | ||
| − | + | * Keeping links, buttons and information in the same order and in the same place | |
| − | * | + | * If you have multiple ways to do an action or go to the same place, make sure you use the same caption for your links and shortcuts |
| − | * If you have multiple ways to do an action or go to the same place make sure you use the same caption for your links and shortcuts | ||
===5. Error Prevention=== | ===5. Error Prevention=== | ||
Prevent errors by providing more information, add instructions, check for error conditions, and refine your process. | Prevent errors by providing more information, add instructions, check for error conditions, and refine your process. | ||
| − | Ask yourself what are common errors with my process and how can I help prevent others from encountering these? | + | Ask yourself: what are common errors with my process and how can I help prevent others from encountering these? |
You can meet these criteria by: | You can meet these criteria by: | ||
| − | * Providing needed information and warnings so users know what to do | + | |
| + | * Providing needed information and warnings, so users know what to do | ||
* Make sure links and button captions say what they will do (never say “click here”) | * Make sure links and button captions say what they will do (never say “click here”) | ||
| − | * Eliminate error prone conditions or check for them and advise the user | + | * Eliminate error-prone conditions or check for them and advise the user |
* Refine your process to avoid errors | * Refine your process to avoid errors | ||
===6. Recognition Rather Than Recall=== | ===6. Recognition Rather Than Recall=== | ||
Make sure all the information and instructions needed to complete an action are available. | Make sure all the information and instructions needed to complete an action are available. | ||
| − | Ask yourself are all instructions and information I need available so I can take the appropriate action? | + | Ask yourself: are all instructions and information I need available so I can take the appropriate action? |
You can meet these criteria by: | You can meet these criteria by: | ||
| − | * | + | |
| − | * | + | * Making objects, actions, options and directions visible or easily retrievable |
| − | * | + | * Not forcing the user to remember anything or think |
| − | * | + | * Avoiding codes and hurdles |
| + | * Providing visual representations | ||
===7. Flexibility and Efficiency of Use=== | ===7. Flexibility and Efficiency of Use=== | ||
Help users accomplish their goals faster by adding shortcuts and default options. | Help users accomplish their goals faster by adding shortcuts and default options. | ||
| − | Ask yourself can we help the user accomplish their goals faster and with less effort? | + | Ask yourself: can we help the user accomplish their goals faster and with less effort? |
You can meet these criteria by: | You can meet these criteria by: | ||
| − | * | + | |
| − | * | + | * Adding shortcuts to commonly used functionality |
| − | * | + | * Providing default options |
| + | * Using list views with options where possible | ||
===8. Aesthetic and Minimalist Design=== | ===8. Aesthetic and Minimalist Design=== | ||
Make sure what the user came to see or do is visible and clear, and eliminate anything that may distract them. | Make sure what the user came to see or do is visible and clear, and eliminate anything that may distract them. | ||
| − | Ask yourself is it clear what I am supposed to do and is there anything distracting me from completing my task? | + | Ask yourself: is it clear what I am supposed to do and is there anything distracting me from completing my task? |
You can meet these criteria by: | You can meet these criteria by: | ||
| + | |||
* Keeping important information above the fold (initial viewable area) | * Keeping important information above the fold (initial viewable area) | ||
| − | * | + | * Minimizing signal-to-noise ratio |
| − | * | + | * Being judicious with color |
| − | * | + | * Removing redundant information (keep it concise) |
===9. Help Users Recognize, Diagnose and Recover from Errors=== | ===9. Help Users Recognize, Diagnose and Recover from Errors=== | ||
Help users understand and fix errors with clear messaging that explains the problem and how they should resolve the error. | Help users understand and fix errors with clear messaging that explains the problem and how they should resolve the error. | ||
| − | Ask yourself when I encounter a problem, do I know what I did wrong, and how to fix it? | + | Ask yourself: when I encounter a problem, do I know what I did wrong, and how to fix it? |
You can meet these criteria by: | You can meet these criteria by: | ||
| − | * | + | |
| − | * Always | + | * Ensuring clarity of messaging and use plain language |
| − | * | + | * Always providing or suggest a solution |
| − | * | + | * Educating the user (what is happening and why) |
| + | * Providing a path forward | ||
===10. Help and Documentation=== | ===10. Help and Documentation=== | ||
| − | Help users understand what is expected of them and how to do it by including context sensitive instructions, highlighting new features and changes in functionality. | + | Help users understand what is expected of them and how to do it by including context-sensitive instructions, highlighting new features and changes in functionality. |
| − | Ask yourself is my help documentation where it is needed, can my users understand what they need to do and are my users aware of new functionality and changes? | + | Ask yourself: is my help documentation where it is needed, can my users understand what they need to do and are my users aware of new functionality and changes? |
You can meet these criteria by: | You can meet these criteria by: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | ==How do I ensure my system is and stays user friendly?== | + | * Providing context-sensitive help |
| − | + | * Providing examples and recommendations | |
| + | * Pointing out new or changes to functionality | ||
| + | * Guiding with additional information | ||
| + | * Listing concrete steps to be carried out | ||
| + | * Being short and concise | ||
| + | |||
| + | ==How do I ensure my system is and stays user-friendly?== | ||
| + | Whether you are making changes to your system or you have a team making changes for you, always use the above heuristics to test the work. If you find an issue, bring it up with your team or call support. Most issues can be resolved through configuration, but if you encounter something that is not, raise an enhancement ticket and help make SmartSimple better for everyone. Help for specific issues and features can also be found on the wiki. | ||
[[Category:Interface]] | [[Category:Interface]] | ||
Revision as of 16:25, 23 April 2019
Contents
- 1 Overview
- 2 Usability – Essentials
- 2.1 What is UI and UX?
- 2.2 What is a usability issue?
- 2.3 How can I test for usability issues?
- 2.4 What are the 10 Heuristics?
- 2.4.1 1. Visibility of System Status
- 2.4.2 2. Match Between the System and Real World
- 2.4.3 3. User Control and Freedom
- 2.4.4 4. Consistency and Standards
- 2.4.5 5. Error Prevention
- 2.4.6 6. Recognition Rather Than Recall
- 2.4.7 7. Flexibility and Efficiency of Use
- 2.4.8 8. Aesthetic and Minimalist Design
- 2.4.9 9. Help Users Recognize, Diagnose and Recover from Errors
- 2.4.10 10. Help and Documentation
- 2.5 How do I ensure my system is and stays user-friendly?
Overview
Usability is a metric used to assess a User Interface design. An interface is considered “usable” if it is perceived as easy, enjoyable, efficient and effective to learn and use. If you use, test, configure or administrate a SmartSimple System you have a role to play in ensuring your system is and stays usable. This article provides information on how you test for and ensure you do not introduce usability issues into your system.
Usability – Essentials
What is UI and UX?
UI or User Interface, is the look and feel and interaction between you and the system. The user interface is a series of screens with elements such as buttons and icons that you use to interact with the SmartSimple System. If you add a custom field or change a color in your systems you are modifying the User Interface. UX or User experience is how we feel about interacting with a system. This term was coined by Don Norman and encompasses all aspects of the user's interaction with the company, its services, and its products. UX is how you feel when you buy a product, take it out of the store, open the box. It is the entire experience of a system from buying, using and disposing of that product or service. A bad UI will create a bad UX.
What is a usability issue?
A usability issue, is any issue that prevents the system from being easy, efficient and effective to learn and use. Usability issues are objective, such as contrast ratio of text on a background. Usability issues are not subjective or based on personal preference, such as “I don’t like orange”.
How can I test for usability issues?
There are established standards that are used to evaluate the usability of a user interface design. They are called Heuristics and there are 10 of them which we have contexted and summarized below. You can also learn more about heuristics in general on this external site https://www.nngroup.com/articles/ten-usability-heuristics/
What are the 10 Heuristics?
The 10 heuristics used to evaluate the usability of a user interface design are as follows:
1. Visibility of System Status
Make sure your users know what is going on, and what is expected of them. Ask yourself, do I know what is going on and what is expected of me?
You can meet these criteria by:
- Showing progress (how far have you gone and what is left)
- Showing space/time (how much space/time is left)
- Showing change (draw attention to things that have changed)
- Showing expected actions (tell me what I need to do next)
2. Match Between the System and Real World
Follow conventions, use previews and present information in a logical order. Ask yourself, is the information presented in a way that is logical, understandable and the way the user expects to see it?
You can meet these criteria by:
- Using familiar words, phrases, concepts and metaphors
- Following conventions
- Presenting information in a logical order
- Providing a preview or showing the world in miniature
3. User Control and Freedom
Make sure users can go forward and back in any process and make sure they can see the information the way they need. Ask yourself: can I easily find the information I am looking for in the way I need to see it?
You can meet these criteria by:
- Providing a path forward and back (undo/redo)
- Providing different ways to explore information (searching, filtering, viewing options)
4. Consistency and Standards
Make sure buttons and links are named the same thing, are located in the same place, and put where they are expected to be. Ask yourself: do I know where to find desired links and buttons, do I know what they do, and are they always in the same place?
You can meet these criteria by:
- Keeping links, buttons and information in the same order and in the same place
- If you have multiple ways to do an action or go to the same place, make sure you use the same caption for your links and shortcuts
5. Error Prevention
Prevent errors by providing more information, add instructions, check for error conditions, and refine your process. Ask yourself: what are common errors with my process and how can I help prevent others from encountering these?
You can meet these criteria by:
- Providing needed information and warnings, so users know what to do
- Make sure links and button captions say what they will do (never say “click here”)
- Eliminate error-prone conditions or check for them and advise the user
- Refine your process to avoid errors
6. Recognition Rather Than Recall
Make sure all the information and instructions needed to complete an action are available. Ask yourself: are all instructions and information I need available so I can take the appropriate action?
You can meet these criteria by:
- Making objects, actions, options and directions visible or easily retrievable
- Not forcing the user to remember anything or think
- Avoiding codes and hurdles
- Providing visual representations
7. Flexibility and Efficiency of Use
Help users accomplish their goals faster by adding shortcuts and default options. Ask yourself: can we help the user accomplish their goals faster and with less effort?
You can meet these criteria by:
- Adding shortcuts to commonly used functionality
- Providing default options
- Using list views with options where possible
8. Aesthetic and Minimalist Design
Make sure what the user came to see or do is visible and clear, and eliminate anything that may distract them. Ask yourself: is it clear what I am supposed to do and is there anything distracting me from completing my task?
You can meet these criteria by:
- Keeping important information above the fold (initial viewable area)
- Minimizing signal-to-noise ratio
- Being judicious with color
- Removing redundant information (keep it concise)
9. Help Users Recognize, Diagnose and Recover from Errors
Help users understand and fix errors with clear messaging that explains the problem and how they should resolve the error. Ask yourself: when I encounter a problem, do I know what I did wrong, and how to fix it?
You can meet these criteria by:
- Ensuring clarity of messaging and use plain language
- Always providing or suggest a solution
- Educating the user (what is happening and why)
- Providing a path forward
10. Help and Documentation
Help users understand what is expected of them and how to do it by including context-sensitive instructions, highlighting new features and changes in functionality. Ask yourself: is my help documentation where it is needed, can my users understand what they need to do and are my users aware of new functionality and changes?
You can meet these criteria by:
- Providing context-sensitive help
- Providing examples and recommendations
- Pointing out new or changes to functionality
- Guiding with additional information
- Listing concrete steps to be carried out
- Being short and concise
How do I ensure my system is and stays user-friendly?
Whether you are making changes to your system or you have a team making changes for you, always use the above heuristics to test the work. If you find an issue, bring it up with your team or call support. Most issues can be resolved through configuration, but if you encounter something that is not, raise an enhancement ticket and help make SmartSimple better for everyone. Help for specific issues and features can also be found on the wiki.
