5. ergonomic of www interface

HUMAN COMPUTER INTERACTION

(INTERACTION HOMME-MACHINE)

Sethserey SAM

1

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

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

WEB CONCEPTION: PARTICIPATION

4

ResponsibleGraphic Responsible

Development

ResponsibleUsability

(Ergonomic)

ResponsibleRedaction

ResponsibleCommunication or marketing

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

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?

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)

WEB CONCEPTION: STRUCTURING

8

Site structuring=

Essential factor of usability

J-Y, Antoine


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


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

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

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


13

Example and cons-example


14



15



16

Having global vision of the site Navigation bar or permanent tabs Site map

WEB NAVIGATION: DROPDOWN MENUS

17

Web dropdown menus reserved for experts: should provide an alternative mode

NAVIGATION WEB: EXTERNAL LINKS

18

Redirection to new Window

Open the external links in new Windows uniquely if the commercial reason (trade mark) impose

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


20



21

Visualization of a web page [Gaillard and Renault 02]

98%


22


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

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)

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)

HOME PAGE

26


HOME PAGE

27


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

FORMS

29

SNCF

FORMS

30

Die Bahn

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

FORMS

32

Example

FORMS

33

Example

FORMS

34

Example

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.)

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.

5. ergonomic of www interface

Education

Transcript of 5. ergonomic of www interface