5. ergonomic of www interface
DESCRIPTION
IHMTRANSCRIPT
![Page 1: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/1.jpg)
HUMAN COMPUTER INTERACTION
(INTERACTION HOMME-MACHINE)
Sethserey SAM
1
![Page 2: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/2.jpg)
CHAPTER 5:ERGONOMIC OF WWW INTERFACE
2
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
![Page 3: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/3.jpg)
WEB ERGONOMIC: IMPORTANCE
3
o Web Nomad and novice user (free access)
o 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]
o 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
![Page 4: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/4.jpg)
WEB CONCEPTION: PARTICIPATION
4
ResponsibleGraphic Responsible
Development
ResponsibleUsability
(Ergonomic)
ResponsibleRedaction
ResponsibleCommunication or marketing
![Page 5: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/5.jpg)
WEB CONCEPTION
5
o Process
1. Site targeting – define the objectives and contents of the site, must be coupling imperatively with a target of intended users
2. Site structuring – define the organization of different rubrics (categories) and protocols of navigation, base on again, intended users
3. Finalize the implementation (graphical chart, interface design, organization, etc.) by taking into account the ergonomic recommendations and using usability test
o 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
![Page 6: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/6.jpg)
WEB CONCEPTION: TARGETING
6
Identification of contents and usages
1. Defining service and targeting public (age, categorize socio-professional, computer and internet experience, …)
2. Requirement analyze – interview a group (sample) of representative of the targeting users
Open questions: do not lead the needs expression
3. 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?
![Page 7: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/7.jpg)
WEB CONCEPTION: TARGETING
7
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)
![Page 8: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/8.jpg)
WEB CONCEPTION: STRUCTURING
8
Site structuring=
Essential factor of usability
J-Y, Antoine
![Page 9: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/9.jpg)
WEB CONCEPTION: STRUCTURING
9
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
![Page 10: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/10.jpg)
WEB CONCEPTION: STRUCTURING
10
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
![Page 11: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/11.jpg)
WEB NAVIGATION
11
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
![Page 12: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/12.jpg)
WEB NAVIGATION: KNOWING THE LOCATION
12
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
![Page 13: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/13.jpg)
WEB NAVIGATION: KNOWING THE LOCATION
13
Example and cons-example
![Page 14: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/14.jpg)
WEB NAVIGATION: KNOWING THE LOCATION
14
Example and cons-example
![Page 15: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/15.jpg)
WEB NAVIGATION: KNOWING THE LOCATION
15
Example and cons-example
![Page 16: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/16.jpg)
WEB NAVIGATION: KNOWING THE LOCATION
16
Having global vision of the site Navigation bar or permanent tabs Site map
![Page 17: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/17.jpg)
WEB NAVIGATION: DROPDOWN MENUS
17
Web dropdown menus reserved for experts: should provide an alternative mode
![Page 18: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/18.jpg)
NAVIGATION WEB: EXTERNAL LINKS
18
Redirection to new Window
Open the external links in new Windows uniquely if the commercial reason (trade mark) impose
![Page 19: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/19.jpg)
WEB PAGE: GENERAL ORGANIZATION
19
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
![Page 20: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/20.jpg)
WEB PAGE: GENERAL ORGANIZATION
20
Example and cons-example
![Page 21: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/21.jpg)
WEB PAGE: GENERAL ORGANIZATION
21
Visualization of a web page [Gaillard and Renault 02]
98%
![Page 22: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/22.jpg)
WEB PAGE: GENERAL ORGANIZATION
22
![Page 23: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/23.jpg)
WEB PAGE: GENERAL ORGANIZATION
23
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
![Page 24: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/24.jpg)
WEB PAGE: VISUALIZATION
24
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)
1024 x 769 or plus 61 %
800 x 600 34 %
640 x 480 1 %
Lower than 640 x 480 (portable …) 4 %
w3school.com
(2004)
![Page 25: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/25.jpg)
HOME PAGE
25
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)
![Page 26: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/26.jpg)
HOME PAGE
26
Example and cons-example
![Page 27: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/27.jpg)
HOME PAGE
27
Example and cons-example
![Page 28: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/28.jpg)
FORMS
28
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
![Page 29: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/29.jpg)
FORMS
29
SNCF
![Page 30: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/30.jpg)
FORMS
30
Die Bahn
![Page 31: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/31.jpg)
FORMS
31
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
![Page 32: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/32.jpg)
FORMS
32
Example
![Page 33: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/33.jpg)
FORMS
33
Example
![Page 34: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/34.jpg)
FORMS
34
Example
![Page 35: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/35.jpg)
WEB DESIGN: INTRANET
35
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.)
![Page 36: 5. ergonomic of www interface](https://reader033.vdocument.in/reader033/viewer/2022042714/54c840084a7959925f8b45d7/html5/thumbnails/36.jpg)
BIBLIOGRAPHIES
36
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.