COAP:COAP-3150 - week 6: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| (15 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3150</categorytree> | |||
==Interaction styles== | ==Interaction styles== | ||
These 4 styles of interacting with web/computer-based interfaces are derived from the field of [[Human-computer interaction]] (HCI). They will enable you describe and justify the modes of interaction you will include in your site. See detailed descriptions, examples (screen shots) and advantages and disadvantages at [http://www.interaction-design.org/encyclopedia/interaction_styles.html HCI interaction styles] - based on Shneiderman. | |||
*'''Command language (or command entry)''' - e.g. unix commands, for repeated and expert use | |||
*'''Form fill-in''' - e.g. search forms, for high guidance of formalized information | |||
*'''Menu selection''' - e.g. navigation, for restricted choices | |||
*'''Direct manipulation''' - e.g. software palettes, icon buttons, drag and drop, for reducing memory load of complex tasks, heavily based on graphic representations | |||
==Usability testing== | ==Usability testing== | ||
| Line 6: | Line 12: | ||
====The 5 second rule<ref>Oli Gardner, The 5 second rule, http://unbounce.com/landing-page-optimization/the-5-second-rule-best-sites-of-2009-part-1/</ref>==== | ====The 5 second rule<ref>Oli Gardner, The 5 second rule, http://unbounce.com/landing-page-optimization/the-5-second-rule-best-sites-of-2009-part-1/</ref>==== | ||
Upon landing on a homepage a user should be able to figure out in 5 seconds - [http://unbounce.com/landing-page-optimization/the-5-second-rule-best-sites-of-2009-part-1/ The 5 second rule] | Upon landing on a homepage a user should be able to figure out in 5 seconds - [http://unbounce.com/landing-page-optimization/the-5-second-rule-best-sites-of-2009-part-1/ The 5 second rule] | ||
*What is it about? | *What is it about? - what is the site's objective as you understand it? | ||
*Do I care? | *Do I care? - does it appear to be capable of helping you reach your objective? | ||
*Is it trustworthy? | *Is it trustworthy? - do you feel that this site is 'authoritative' in its domain and in helping you achieve your goals? | ||
*How do I participate? | *How do I participate? - what can you do on this site? does it allow you to interact, access information based on your needs? | ||
*Is it newsworthy? | *Is it newsworthy? - would you recommend this site, or talk about it to someone else with similar interests? | ||
====[http://www.useit.com/papers/heuristic/heuristic_list.html Ten Usability Heuristics] by Jakob Nielsen==== | ====[http://www.useit.com/papers/heuristic/heuristic_list.html Ten Usability Heuristics] by Jakob Nielsen==== | ||
| Line 20: | Line 26: | ||
*'''Satisfaction''': How pleasant is it to use the design? | *'''Satisfaction''': How pleasant is it to use the design? | ||
Borrowing from Davis' [[Technology | Borrowing from Davis' [[Technology acceptance model]], Nielsen defines useful web design as | ||
*Utility = whether it provides the features you need. | *Utility = whether it provides the features you need. | ||
*Usability = how easy & pleasant these features are to use. | *Usability = how easy & pleasant these features are to use. | ||
*Useful = usability + utility. | *Useful = usability + utility. | ||
====Ergonomic criteria for evaluating interfaces and interactions==== | |||
Bastien and Scapin (1997)(see also <ref>Ergonomic Criteria for the Evaluation of Human-Computer Interfaces at http://www.cocoaheads.fr/wp-content/uploads/files/Ergonomic_Criteria.pdf</ref>, through studies conducted, showed usability to be based on criteria that place significantly les importance on a systems information efficiency than Nielsen. Their criteria for ergonomics of interfaces focus strictly on the system's usability (manageability): | |||
*'''Guidance''': incite, orient user, group information (proximity, repetition), immediate feedback, legibility | |||
*'''User workload''': diminish cognitive effort for user, be brief, minimal actions, reduce information density | |||
*'''User explicit control''': allow users explicit control of their actions | |||
*'''Adaptability''': flexible, environment adjusts to accommodate user preferences | |||
*'''Error management''': help avoid or allow for the correction of errors, meaningful error messages | |||
*'''Consistency''': keep interface consistent for particular context, change for change of context. | |||
*'''Significance of codes''': coherence between signs and the object or action to which they refer | |||
*'''Compatibility''': content and actions are compatible with the habits and practices of target public | |||
For more detailed explanation of criteria read [http://www.cocoaheads.fr/wp-content/uploads/files/Ergonomic_Criteria.pdf Ergonomic Criteria for the Evaluation of | |||
Human-Computer Interfaces] | |||
====Related pages==== | ====Related pages==== | ||
*[[Usability]] | *[[Usability]] | ||
*[[Human-computer interaction#Interaction_design Interaction design]] | *[[Human-computer interaction#Interaction_design | Interaction design]] | ||
*[[Design and usability methods and techniques]] | *[[Design and usability methods and techniques]] | ||
*[[User interaction and user interface design]] - definitions and distinction | *[[User interaction and user interface design]] - definitions and distinction | ||
=== | ===Generating authentic user tasks=== | ||
See [[Scenario-based_usability_engineering#Scoping_and_writing_key_scenarios | Scenario-based usability engineering]] | |||
===Designing the test=== | ===Designing the test=== | ||
Three basic steps to usability testing: | Three basic steps to usability testing from Nielsen's [http://www.useit.com/alertbox/20030825.html Usability 101]: | ||
{{Quotationbox | | {{Quotationbox | | ||
*Get hold of some ''representative'' users, such as customers for an e-commerce site or employees for an intranet (in the latter case, they should work outside your department). | *Get hold of some ''representative'' users, such as customers for an e-commerce site or employees for an intranet (in the latter case, they should work outside your department). | ||
| Line 40: | Line 62: | ||
*Observe ''what the users do'', where they succeed, and where they have difficulties with the user interface. | *Observe ''what the users do'', where they succeed, and where they have difficulties with the user interface. | ||
*Shut up and let the users do the talking.}} | *Shut up and let the users do the talking.}} | ||
*[http://www.useit.com/alertbox/20000319.html Why You Only Need to Test with 5 Users] - 5 users represent 80% of problems | *[http://www.useit.com/alertbox/20000319.html Why You Only Need to Test with 5 Users] - 5 users represent 80% of problems | ||
| Line 52: | Line 75: | ||
See [[HTML forms tutorial]] | See [[HTML forms tutorial]] | ||
===Javascript (self-study)=== | ===Javascript (self-study)=== | ||
See [[Category:JavaScript]] and [[Javascript tutorial - basics]] | See [[:Category:JavaScript]] and [[Javascript tutorial - basics]] | ||
==Publish a site== | ==Publish a site== | ||
==Assignment 8 - Functional prototype== | |||
Described in week 6 Learning module | |||
==Links== | ==Links== | ||
*[http://www.noupe.com/how-tos/usability-testing-toolkit-resources-articles-and-techniques.html Usability Testing Toolkit: Resources, Articles, and Techniques] | *[http://www.noupe.com/how-tos/usability-testing-toolkit-resources-articles-and-techniques.html Usability Testing Toolkit: Resources, Articles, and Techniques] | ||
Latest revision as of 18:46, 26 October 2016
Interaction styles
These 4 styles of interacting with web/computer-based interfaces are derived from the field of Human-computer interaction (HCI). They will enable you describe and justify the modes of interaction you will include in your site. See detailed descriptions, examples (screen shots) and advantages and disadvantages at HCI interaction styles - based on Shneiderman.
- Command language (or command entry) - e.g. unix commands, for repeated and expert use
- Form fill-in - e.g. search forms, for high guidance of formalized information
- Menu selection - e.g. navigation, for restricted choices
- Direct manipulation - e.g. software palettes, icon buttons, drag and drop, for reducing memory load of complex tasks, heavily based on graphic representations
Usability testing
Heuristics and quick tests
The 5 second rule[1]
Upon landing on a homepage a user should be able to figure out in 5 seconds - The 5 second rule
- What is it about? - what is the site's objective as you understand it?
- Do I care? - does it appear to be capable of helping you reach your objective?
- Is it trustworthy? - do you feel that this site is 'authoritative' in its domain and in helping you achieve your goals?
- How do I participate? - what can you do on this site? does it allow you to interact, access information based on your needs?
- Is it newsworthy? - would you recommend this site, or talk about it to someone else with similar interests?
Ten Usability Heuristics by Jakob Nielsen
Reduced to five in Usability 101.
- Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
- Efficiency: Once users have learned the design, how quickly can they perform tasks?
- Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
- Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
- Satisfaction: How pleasant is it to use the design?
Borrowing from Davis' Technology acceptance model, Nielsen defines useful web design as
- Utility = whether it provides the features you need.
- Usability = how easy & pleasant these features are to use.
- Useful = usability + utility.
Ergonomic criteria for evaluating interfaces and interactions
Bastien and Scapin (1997)(see also [2], through studies conducted, showed usability to be based on criteria that place significantly les importance on a systems information efficiency than Nielsen. Their criteria for ergonomics of interfaces focus strictly on the system's usability (manageability):
- Guidance: incite, orient user, group information (proximity, repetition), immediate feedback, legibility
- User workload: diminish cognitive effort for user, be brief, minimal actions, reduce information density
- User explicit control: allow users explicit control of their actions
- Adaptability: flexible, environment adjusts to accommodate user preferences
- Error management: help avoid or allow for the correction of errors, meaningful error messages
- Consistency: keep interface consistent for particular context, change for change of context.
- Significance of codes: coherence between signs and the object or action to which they refer
- Compatibility: content and actions are compatible with the habits and practices of target public
For more detailed explanation of criteria read [http://www.cocoaheads.fr/wp-content/uploads/files/Ergonomic_Criteria.pdf Ergonomic Criteria for the Evaluation of Human-Computer Interfaces]
Related pages
- Usability
- Interaction design
- Design and usability methods and techniques
- User interaction and user interface design - definitions and distinction
Generating authentic user tasks
See Scenario-based usability engineering
Designing the test
Three basic steps to usability testing from Nielsen's Usability 101:
- Get hold of some representative users, such as customers for an e-commerce site or employees for an intranet (in the latter case, they should work outside your department).
- Ask the users to perform representative tasks with the design.
- Observe what the users do, where they succeed, and where they have difficulties with the user interface.
- Shut up and let the users do the talking.
- Why You Only Need to Test with 5 Users - 5 users represent 80% of problems
Examples
- Bad usability in (web) design
Designing interaction
Webforms (self-study)
Javascript (self-study)
See Category:JavaScript and Javascript tutorial - basics
Publish a site
Assignment 8 - Functional prototype
Described in week 6 Learning module
Links
References
- ↑ Oli Gardner, The 5 second rule, http://unbounce.com/landing-page-optimization/the-5-second-rule-best-sites-of-2009-part-1/
- ↑ Ergonomic Criteria for the Evaluation of Human-Computer Interfaces at http://www.cocoaheads.fr/wp-content/uploads/files/Ergonomic_Criteria.pdf
- NIELSEN, J., (1993) Usability engineering. Boston, Academic Press.
- SCAPIN, D.L. and BASTIEN, J.M.C. (1997). Ergonomic criteria for evaluating the ergonomic quality of interactive systems. Behavior & Information Technology, 1997, 17 (4/5), 220-231.
- SHNEIDERMAN, B. (1992). Designing the user interface : strategies for effective human-Computer-Interaction. (Chap 3, 4 and 5). 2nd ed., Addison-Whesley Publishing Company.