SlideShare a Scribd company logo

5. ergonomic of www interface

•Download as PPT, PDF•
•
Kh Ravy
Kh Ravy

The document discusses various ergonomic considerations for designing effective web interfaces. It notes that 62% of buyers give up during online transactions and 40% of consumers do not return to websites where their first visit failed. Good web design with usability testing is important. The document outlines recommendations for targeting intended users, structuring content through card sorting, enabling easy navigation, organizing web pages, designing effective forms, and considerations for intranet design.

Related slideshows

Website Design Basics
Website Design BasicsWebsite Design Basics
Website Design Basics
 
Building a Better Web Enterprise for Colleges and Universities
Building a Better Web Enterprise for Colleges and UniversitiesBuilding a Better Web Enterprise for Colleges and Universities
Building a Better Web Enterprise for Colleges and Universities
 
CIS1203 Web Design Principles - Part 1
CIS1203 Web Design Principles - Part 1CIS1203 Web Design Principles - Part 1
CIS1203 Web Design Principles - Part 1
 
1 of 36
HUMAN COMPUTER INTERACTION (INTERACTION HOMME-MACHINE) Sethserey SAM
CHAPTER 5: ERGONOMIC OF WWW INTERFACE Where we will see that the Web present certain particularities which require some specific recommendations … that should not obscure the general rules for all interactive system
WEB ERGONOMIC: IMPORTANCE Web Nomad and novice user (free access) Ergonomic of web interface 62% of buyer give up at least one time during the transaction [Davis 99] 40% of consumers do not return back to the web site where their first visit result in failure [cited by Nogier 05, p. 101] Online form: 40% of misunderstand on sites job [Creative 99] An example: web site of IBM (1998) Old site: search and help are the 2 most used buttons Reconstruct of site: 120% of access and 400% of additional order
WEB CONCEPTION: PARTICIPATION Responsible Graphic Responsible Development Responsible Usability (Ergonomic) Responsible Redaction Responsible Communication or marketing
WEB CONCEPTION Process Site targeting – define the objectives and contents of the site, must be coupling imperatively with a target of intended users Site structuring – define the organization of different rubrics (categories) and protocols of navigation, base on again, intended users Finalize the implementation (graphical chart, interface design, organization, etc.) by taking into account the ergonomic recommendations and using usability test Usability test A long with the conception and early as possible With novice users corresponding to (having) the intended target Perception test – static test, on visual interface Usability test – navigation, on significant prototype Chapter VII
WEB CONCEPTION: TARGETING Identification of contents and usages Defining service and targeting public (age, categorize socio-professional, computer and internet experience, …) Requirement analyze – interview a group (sample) of representative of the targeting users Open questions: do not lead the needs expression Usability test – These test can lead to review partial of target objectives What answer do you seek for by visiting this site? What do you expect in this site? In what kind of context that have lead you to visit this site? Have you ever used/experienced any website providing the same service? What are their gaps? Is there any other media you offer the same service? What are their limit and their strength?
WEB CONCEPTION: TARGETING Analyze of requirements and test of usability Critical evaluation of concurrent web sites (by yourself, or with a group of sample users) Is the objective of the site clearly visible? Is the targeting public (users) clearly identified? Is the site useful and pertinent for this public? Is the site interesting and attractive? From which point of view? Does the site allow to do all the tasks which users willing to accomplish? Can visitors easily accomplish these tasks? Are the contents and organization of the site coherence with the objective? Can important information easily found? Is the information present clear, easy to understand? Does visitors always know where they are and how to do to get to where they want? The graphics, is it enjoyable ( aggréable )? Example: check-list evaluation rapid of IBM (IBM Web Design Guidelines)
WEB CONCEPTION: STRUCTURING Site structuring = Essential factor of usability J-Y, Antoine
WEB CONCEPTION: STRUCTURING The communication architecture is to establish and describe all the information that must be present on the site What remain is to organize these information to make it accessible as easily as possible Structuring: method of cards sorting Objective : regroups different pages of the site in rubric and sub-rubric by using an empiric method Describe each piece of information, which corresponds to a page in the site, by some keywords and a phrase of description Regroups the cards by similarity, with the possibility to eventually to group into groups of groups (sub-groups) Many participant (users or designers) Comparative analyze of different obtained classification Limit to merely fifty cards + blank cards
WEB CONCEPTION: STRUCTURING Organization of contents: navigation Do not limit to a structuring static (pure contents) Consider the navigation constraints: ergonomic criteria similar/analogue to the navigation of menu (width first) Minimize levels of the site (3-4 levels maximum) Optimize the sub-path for each rubric (sub-rubric): 8 sub-rubrics maximum Preferable an hierarchy as a tree rather than a graph Evaluation of site and structuring Statistic utilization (visited pages, link followed, …): usability testing with large amount (of users) may lead to a structure revision Regularly updating website: increase frequency + referencing
WEB NAVIGATION The navigation is the principle activities of user on a website Ergonomic requirements Knowing the location in the web site while browsing Being able to have a global vision of the site Understanding the rubric (sub-rubric) surrounding the page visiting Observability and Guidance
WEB NAVIGATION: KNOWING THE LOCATION Help user how to locate Navigation bar or permanent tab + inverse color Display the path of progression Indicate the title of the page Remind the title in navigation bar or path of progress
WEB NAVIGATION: KNOWING THE LOCATION Example and cons-example
WEB NAVIGATION: KNOWING THE LOCATION Example and cons-example
WEB NAVIGATION: KNOWING THE LOCATION Example and cons-example
WEB NAVIGATION: KNOWING THE LOCATION Having global vision of the site Navigation bar or permanent tabs Site map
WEB NAVIGATION: DROPDOWN MENUS Web dropdown menus reserved for experts: should provide an alternative mode
NAVIGATION WEB: EXTERNAL LINKS Redirection to new Window Open the external links in new Windows uniquely if the commercial reason (trade mark) impose
WEB PAGE: GENERAL ORGANIZATION Primary Navigation Bar Secondary Navigation Bar Utilities Standardization de facto Most of the commercial sites follow the same schema of organization High expectation user: cf. menu bar of major public application
WEB PAGE: GENERAL ORGANIZATION Example and cons-example
WEB PAGE: GENERAL ORGANIZATION Visualization of a web page [Gaillard and Renault 02] 98%
WEB PAGE: GENERAL ORGANIZATION
WEB PAGE: GENERAL ORGANIZATION Disposition of information Most important information: center to the top Regroup the information to facilitate their detection and comprehension Proximity: the vision regroups close information Similarity: regroups images having their form similar Continuity: the vision regroups the aligned information Working on nesting (frames …) to encourage regrouping
WEB PAGE: VISUALIZATION Some sensible recommendation Limit the size of the page (2 screen maximum) Design the pages for a display setting 800x600 or adapts the display automatically to the configuration of the system Using homogenous graphical chart for all site/pages (.css) Testing the display on most of the usual/popular web browser (particularly on colors and size of characters) Fixe characters size (cascading style sheet) Colors palette, web-safe (256 colors) w3school.com (2004) 1024 x 769 or plus 61 % 800 x 600 34 % 640 x 480 1 % Lower than 640 x 480 (portable …) 4 %
HOME PAGE A particular web page Signature of the site, but foremost, the page which must attracts the attention of nomad users by showing them what may interest Must demonstrate and make clear the purpose and objective of the site Should already provide some initial information to hang (fr: accrocher ) users Should provide clear navigation guide: incite users to go further Should avoid using an introductory animation, or simply make a page meaningless but very beautiful … as long as your site is not a very strong reputation and is not intended to happy few (needs more attract in both case)
HOME PAGE Example and cons-example
HOME PAGE Example and cons-example
FORMS Another particular web page Input the information (complete form) and not simply navigation Information often personal and/or payment Deterministic sense which prevent returning back Factors of stress and principal cause of abandon on the website Example … or cons-example (next page) SNCF reservation site Die Bahn reservation site (French version) Demonstrate clearly to user that their actions are reversible
FORMS SNCF
FORMS Die Bahn
FORMS Recommendation Explicit title and name of fields Clear instruction Explicit rules of data input (Enter, Tab, …) Errors prevention Verify the integrity of data List or combo box Explicit error messages If possible, propose a solution Corrections facility: do not re-input entire form Optional / mandatory field should be clearly indicate Signal completion end: avoid automatic completion
FORMS Example
FORMS Example
FORMS Example
WEB DESIGN: INTRANET Specificity of intranet Captive and experts users: Learnability less important Heavy mass of information: access rapid A poorly design intranet is equally the source of additional cost Some recommendation for organization Base the structure of the site on the structure of company Provide an thematic index structure on company knowledge Integrate an internal search engine by attaching an optimization (search by sub-domain/sub-rubric, etc.)
BIBLIOGRAPHIES References Nogier J-F. (1995) Ergonomie du logiciel et designe Web (3°édition). Dunod, Paris, France Guidelines IBM Web design guidelines (www-3.ibm.com/ibm/easy) Publications Creative Good (1999) E-recruiting : online strategies in the War for the talent. Rapport de recherche. Davis Z. (1999) White paper one : building a great customer experience to develop brand, increase and loyalty and grow revenues. ZD Studios. Gaillard F., Reneaut D. (2002) Les premières secondes de l’expérience utilisateur. Cahiers de l’entreprise multimédia, 1.

More Related Content

5. ergonomic of www interface

  • 1. HUMAN COMPUTER INTERACTION (INTERACTION HOMME-MACHINE) Sethserey SAM
  • 2. CHAPTER 5: ERGONOMIC OF WWW INTERFACE Where we will see that the Web present certain particularities which require some specific recommendations … that should not obscure the general rules for all interactive system
  • 3. WEB ERGONOMIC: IMPORTANCE Web Nomad and novice user (free access) Ergonomic of web interface 62% of buyer give up at least one time during the transaction [Davis 99] 40% of consumers do not return back to the web site where their first visit result in failure [cited by Nogier 05, p. 101] Online form: 40% of misunderstand on sites job [Creative 99] An example: web site of IBM (1998) Old site: search and help are the 2 most used buttons Reconstruct of site: 120% of access and 400% of additional order
  • 4. WEB CONCEPTION: PARTICIPATION Responsible Graphic Responsible Development Responsible Usability (Ergonomic) Responsible Redaction Responsible Communication or marketing
  • 5. WEB CONCEPTION Process Site targeting – define the objectives and contents of the site, must be coupling imperatively with a target of intended users Site structuring – define the organization of different rubrics (categories) and protocols of navigation, base on again, intended users Finalize the implementation (graphical chart, interface design, organization, etc.) by taking into account the ergonomic recommendations and using usability test Usability test A long with the conception and early as possible With novice users corresponding to (having) the intended target Perception test – static test, on visual interface Usability test – navigation, on significant prototype Chapter VII
  • 6. WEB CONCEPTION: TARGETING Identification of contents and usages Defining service and targeting public (age, categorize socio-professional, computer and internet experience, …) Requirement analyze – interview a group (sample) of representative of the targeting users Open questions: do not lead the needs expression Usability test – These test can lead to review partial of target objectives What answer do you seek for by visiting this site? What do you expect in this site? In what kind of context that have lead you to visit this site? Have you ever used/experienced any website providing the same service? What are their gaps? Is there any other media you offer the same service? What are their limit and their strength?
  • 7. WEB CONCEPTION: TARGETING Analyze of requirements and test of usability Critical evaluation of concurrent web sites (by yourself, or with a group of sample users) Is the objective of the site clearly visible? Is the targeting public (users) clearly identified? Is the site useful and pertinent for this public? Is the site interesting and attractive? From which point of view? Does the site allow to do all the tasks which users willing to accomplish? Can visitors easily accomplish these tasks? Are the contents and organization of the site coherence with the objective? Can important information easily found? Is the information present clear, easy to understand? Does visitors always know where they are and how to do to get to where they want? The graphics, is it enjoyable ( aggréable )? Example: check-list evaluation rapid of IBM (IBM Web Design Guidelines)
  • 8. WEB CONCEPTION: STRUCTURING Site structuring = Essential factor of usability J-Y, Antoine
  • 9. WEB CONCEPTION: STRUCTURING The communication architecture is to establish and describe all the information that must be present on the site What remain is to organize these information to make it accessible as easily as possible Structuring: method of cards sorting Objective : regroups different pages of the site in rubric and sub-rubric by using an empiric method Describe each piece of information, which corresponds to a page in the site, by some keywords and a phrase of description Regroups the cards by similarity, with the possibility to eventually to group into groups of groups (sub-groups) Many participant (users or designers) Comparative analyze of different obtained classification Limit to merely fifty cards + blank cards
  • 10. WEB CONCEPTION: STRUCTURING Organization of contents: navigation Do not limit to a structuring static (pure contents) Consider the navigation constraints: ergonomic criteria similar/analogue to the navigation of menu (width first) Minimize levels of the site (3-4 levels maximum) Optimize the sub-path for each rubric (sub-rubric): 8 sub-rubrics maximum Preferable an hierarchy as a tree rather than a graph Evaluation of site and structuring Statistic utilization (visited pages, link followed, …): usability testing with large amount (of users) may lead to a structure revision Regularly updating website: increase frequency + referencing
  • 11. WEB NAVIGATION The navigation is the principle activities of user on a website Ergonomic requirements Knowing the location in the web site while browsing Being able to have a global vision of the site Understanding the rubric (sub-rubric) surrounding the page visiting Observability and Guidance
  • 12. WEB NAVIGATION: KNOWING THE LOCATION Help user how to locate Navigation bar or permanent tab + inverse color Display the path of progression Indicate the title of the page Remind the title in navigation bar or path of progress
  • 13. WEB NAVIGATION: KNOWING THE LOCATION Example and cons-example
  • 14. WEB NAVIGATION: KNOWING THE LOCATION Example and cons-example
  • 15. WEB NAVIGATION: KNOWING THE LOCATION Example and cons-example
  • 16. WEB NAVIGATION: KNOWING THE LOCATION Having global vision of the site Navigation bar or permanent tabs Site map
  • 17. WEB NAVIGATION: DROPDOWN MENUS Web dropdown menus reserved for experts: should provide an alternative mode
  • 18. NAVIGATION WEB: EXTERNAL LINKS Redirection to new Window Open the external links in new Windows uniquely if the commercial reason (trade mark) impose
  • 19. WEB PAGE: GENERAL ORGANIZATION Primary Navigation Bar Secondary Navigation Bar Utilities Standardization de facto Most of the commercial sites follow the same schema of organization High expectation user: cf. menu bar of major public application
  • 20. WEB PAGE: GENERAL ORGANIZATION Example and cons-example
  • 21. WEB PAGE: GENERAL ORGANIZATION Visualization of a web page [Gaillard and Renault 02] 98%
  • 22. WEB PAGE: GENERAL ORGANIZATION
  • 23. WEB PAGE: GENERAL ORGANIZATION Disposition of information Most important information: center to the top Regroup the information to facilitate their detection and comprehension Proximity: the vision regroups close information Similarity: regroups images having their form similar Continuity: the vision regroups the aligned information Working on nesting (frames …) to encourage regrouping
  • 24. WEB PAGE: VISUALIZATION Some sensible recommendation Limit the size of the page (2 screen maximum) Design the pages for a display setting 800x600 or adapts the display automatically to the configuration of the system Using homogenous graphical chart for all site/pages (.css) Testing the display on most of the usual/popular web browser (particularly on colors and size of characters) Fixe characters size (cascading style sheet) Colors palette, web-safe (256 colors) w3school.com (2004) 1024 x 769 or plus 61 % 800 x 600 34 % 640 x 480 1 % Lower than 640 x 480 (portable …) 4 %
  • 25. HOME PAGE A particular web page Signature of the site, but foremost, the page which must attracts the attention of nomad users by showing them what may interest Must demonstrate and make clear the purpose and objective of the site Should already provide some initial information to hang (fr: accrocher ) users Should provide clear navigation guide: incite users to go further Should avoid using an introductory animation, or simply make a page meaningless but very beautiful … as long as your site is not a very strong reputation and is not intended to happy few (needs more attract in both case)
  • 26. HOME PAGE Example and cons-example
  • 27. HOME PAGE Example and cons-example
  • 28. FORMS Another particular web page Input the information (complete form) and not simply navigation Information often personal and/or payment Deterministic sense which prevent returning back Factors of stress and principal cause of abandon on the website Example … or cons-example (next page) SNCF reservation site Die Bahn reservation site (French version) Demonstrate clearly to user that their actions are reversible
  • 31. FORMS Recommendation Explicit title and name of fields Clear instruction Explicit rules of data input (Enter, Tab, …) Errors prevention Verify the integrity of data List or combo box Explicit error messages If possible, propose a solution Corrections facility: do not re-input entire form Optional / mandatory field should be clearly indicate Signal completion end: avoid automatic completion
  • 35. WEB DESIGN: INTRANET Specificity of intranet Captive and experts users: Learnability less important Heavy mass of information: access rapid A poorly design intranet is equally the source of additional cost Some recommendation for organization Base the structure of the site on the structure of company Provide an thematic index structure on company knowledge Integrate an internal search engine by attaching an optimization (search by sub-domain/sub-rubric, etc.)
  • 36. BIBLIOGRAPHIES References Nogier J-F. (1995) Ergonomie du logiciel et designe Web (3°édition). Dunod, Paris, France Guidelines IBM Web design guidelines (www-3.ibm.com/ibm/easy) Publications Creative Good (1999) E-recruiting : online strategies in the War for the talent. Rapport de recherche. Davis Z. (1999) White paper one : building a great customer experience to develop brand, increase and loyalty and grow revenues. ZD Studios. Gaillard F., Reneaut D. (2002) Les premières secondes de l’expérience utilisateur. Cahiers de l’entreprise multimédia, 1.

Editor's Notes

  1. Hebdomadaire : weekly
  2. Imperative : having the nature, or indicating
  3. Empiric : rely solely in experience rather than on scientific principles
  4. De facto: existing or being such in actual fact cf:. compare