Successfully reported this slideshow.

5. ergonomic of www interface


Published on


Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

5. ergonomic of www interface

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