Ergonomic Analysis

Size: px

Start display at page:

Download "Ergonomic Analysis"

Kenneth Hampton
5 years ago
Views:

your competitors, to induce a continuous optimization of interaction online enjoyed

1 Ergonomic Analysis Marcos Sanches Commerce Électronique Web analytique 2.0 Web analytics Analysis of quantitative and qualitative data of your website and your competitors, to induce a continuous optimization of interaction online enjoyed by existing and potential clients, and which translates to. expected results. -Avinash Kaushik 2 1

2 1. Ergonomic analysis of a web site 1.1 Definition and goal The ergonomics of a website can be defined by its ability to respond effectively to the expectations of the users and to provide them with comfort of navigation. Why focus on this aspect? 3 1. Ergonomic analysis of a web site 1.2 Importance of ergonomics (1/2) In recent years the number of websites has exploded on the internet. With all this variety of choices, the user is very intolerant of complicated websites. 4 2

3 Number of Websites Roxanne Bauer (2014); Media 5 (R)evolutions: Internet Live Stat; media-revolutions-internet-live-stats 1. Ergonomic analysis of a web site 1.2 Importance de l ergonomie (2/2) A website that does not perform ergonomically is guaranteed to lose profitability in its business model. There are plenty of other web sites available; leaving is the first line of defense when users encounter a difficulty. John Britsios 6 3

4 1. Ergonomic analysis of a web site 1.3 Main challenges (1/2) Create a website that takes into account the diversity of visitor profiles Ergonomic analysis of a web site 1.3 Main challenges (2/2) Take into account the ever-changing evolution of technology. The web environment is constantly changing, especially at the technological level.(for example, the appearance of smartphones and tablets) 8 4

5 1. Ergonomic analysis of a web site 1.4 Contents Ergonomic analysis has become more important than ever. Objective: Optimize the usability and effectiveness of a site's pages What: site pages Who: Expert/Analyst How: Analysis grid 9 Presentation of the Scapin and Bastien grid Represent a set of rules that allow you to see, understand and explain ergonomic problems of a website. 8 ergonomic criteria 1. Guide 2. Workload 3. Explicit control 4. Adaptability 5. Error management 6. Homogenity/Consistency 7. codes and notations 8. compatibility 10 5

6 Advantages of the Scapin and Bastien grid 1- Allows quicker and cheaper analyses than other tests; 2- Can be used by any type of person (nonspecialists) compared to other tests. 3- Is explicit enough to allow precise measurements, and gives reproducible results Note: framework for understanding the analyst's progress 11 Disadvantage of the grid of Scapin and Bastien We do not test with users (users) for this type of analysis. User data cannot be collected that is sometimes very relevant. 12 6

7 2.1 GUIDE Represents the set of methods used to advise, guide and direct the user when interacting with the website. In this class we have four categories: 1- Incentive 2- Grouping/Distinction between items 3- Immediate feedback 4- Readability GUIDE - Incentive Push the user to perform specific actions by providing clues. Example: Assist the user when entering data by indicating the desired value format: Date (dd/mm/yyyyy) / _ / _ 14 7

2.1 GUIDE - Incentive 15 2.1 GUIDE - Grouping/Distinction Assemble the various visual elements in a homogeneous and orderly manner.

8 2.1 GUIDE - Incentive GUIDE - Grouping/Distinction Assemble the various visual elements in a homogeneous and orderly manner. Groupement/Location Distinction Position the items in relation to each other to indicate whether or not they belong to a given class of objects. Example: Group menu options according to the objects to which they apply. 16 8

2.1 GUIDE - Grouping/Distinction The types of links are clearly distinguishable (Top vs. Column vs. Natural Search Engine Optimization) Distinction by location and format 17 2.

9 2.1 GUIDE - Grouping/Distinction The types of links are clearly distinguishable (Top vs. Column vs. Natural Search Engine Optimization) Distinction by location and format GUIDE - Grouping/Distinction Format Grouping/Distinction Give the elements particular graphical characteristics to indicate whether or not they belong to a given class of objects. Example: Use a symbol and red color for alert or error dialog boxes. 18 9

2.1 GUIDE - Grouping/Distinction The difference in format (colour) between the news, games, Asmoplay and Support sections allows to indicate that the news section is the active section. 19 2.

10 2.1 GUIDE - Grouping/Distinction The difference in format (colour) between the news, games, Asmoplay and Support sections allows to indicate that the news section is the active section GUIDE - Feedback In all cases, the website must respond to the user based on the actions and requests of the user. Keep the user informed of what is happening in real time Example: In cases where the treatments are lengthy, information should be provided to the user indicating that the treatments are ongoing

11 2.1 GUIDE - Feedback GUIDE - Readability The lexical characteristics of the presentation of information on the screen should make it easier to read this information. Example: It is preferable to present a text with a few long lines rather than many short lines

2.1 GUIDE - Readability Pouvonsnous bien lire avec ce fond? 23 2.

12 2.1 GUIDE - Readability Pouvonsnous bien lire avec ce fond? GUIDE - Readability Jean Claude GROSJEAN; Design d interface et critère ergonomique 2 : Lisibilité;

13 2.2 WORKLOAD All the elements of the web interface that have a role to play in reducing the perceptual burden on users, as well as increasing the effectiveness of the dialogue. In this class we have two categories: 1- Short (Concision, Minimal Actions) 2- Information density WORKLOAD - Briefness Limit the work of reading, input and the stages through which users must pass. Conciseness Reduce the work effort at the perceptual level for individual input and output elements. Example: When a unit of measure is associated with a data field, it must be part of the field label rather than being entered by the user

14 2.2 WORKLOAD - Briefness WORKLOAD - Briefness Guarantees the simplicity of the interface and the relevance of the functionalities. Conciseness and simplicity are intimately linked "LESS IS MORE!" 28 14

15 2.2 WORKLOAD - Briefness Minimal Actions Reduce the steps that users have to go through to perform their tasks on your website. Example: Users should not be asked to provide information that can be inferred from the system.(please ask for age, while we know the date of birth) WORKLOAD Information Density Reduce the work effort for the user at the perceptual level of the website, for sets of elements. Example: Only the necessary information should be displayed in each of the website's web pages

2.2 WORKLOAD - Information Density Web page heavily loaded with information: 31 2.

16 2.2 WORKLOAD - Information Density Web page heavily loaded with information: EXPLICIT CONTROL Represents the control users have over the processing of their actions on the website. In this class we have two categories: 1- Explicit actions 2- User control 32 16

17 2.3 EXPLICIT CONTROL Explicit Actions When users interact with a website, they implicitly expect the system to obey them. It is therefore necessary to avoid actions by the site when the user has not requested anything. Example: The order entry must end with an end indication ("Enter","OK") to which editing possibilities must be entered beforehand EXPLICIT CONTROL - Explicit Actions 34 17

18 2.3 EXPLICIT CONTROL - User Control Users must be satisfied that they have control over the website. Example: They must be able to cancel a treatment that they have requested or return to an earlier stage of the process EXPLICIT CONTROL - User Control No button to cancel my conversion. I don't have control. Would I recommend this site to my friends? 36 18

2.4 ADAPTABILITY Ability of the website to react according to users' needs and preferences In this class we have two categories: 1- Flexibility 2- Consideration of User Experience 37 2.

19 2.4 ADAPTABILITY Ability of the website to react according to users' needs and preferences In this class we have two categories: 1- Flexibility 2- Consideration of User Experience ADAPTABILITY - Flexibility Represents the ability of a website to be adapted according to the user's needs. The latter must have the option "customize" the interface according to its working mode. Ex.: GMAIL 38 19

A site should provide the possibility of

20 2.4 ADAPTABILITY - Flexibility ADAPTABILITY - Taking User Experience into account The website must take into account the user's level of experience. A site should provide the possibility of helping a novice user and shortcuts to experts

21 2.5 ERROR HANDLING Ability of the website to avoid or reduce errors and correct them when they occur. In this class we have three categories: 1- Error protection 2- Quality of error messages 3- Error correction ERROR HANDLING - Error protection Represents the means used to detect and prevent errors. Example: Entering a letter in a phone number field or larger, deleting a document

2.5 ERROR HANDLING - Error protection 43 2.

provided to users on the nature of errors made and how they are

22 2.5 ERROR HANDLING - Error protection ERROR HANDLING - Error protection Ensure that the information provided to users on the nature of errors made and how they are resolved is relevant, easy to read and accurate. Here, we are told exactly the possible causes of the error 44 22

2.5 ERROR HANDLING - Quality of error message Here, we are told exactly the possible causes of the error 45 2.5 ERROR HANDLING - Error correction Provide users with the means to correct their errors.

23 2.5 ERROR HANDLING - Quality of error message Here, we are told exactly the possible causes of the error ERROR HANDLING - Error correction Provide users with the means to correct their errors. We must therefore guide the latter on the steps to follow in order to rectify the error. Example: If the site has clearly identified the error, it should be able to highlight it and propose to change precisely what is wrong

24 2.5 ERROR HANDLING - Error correction HOMOGENEITIES/COHESION Interface design choices should be retained for identical contexts, and different for different contexts. Example: Always display the boxes for data entry in the same place

2.6 HOMOGENEITIES/COHESION 49 2.7 MEANING OF CODES AND DESIGNATIONS Information on a website is transmitted in several ways.

25 2.6 HOMOGENEITIES/COHESION MEANING OF CODES AND DESIGNATIONS Information on a website is transmitted in several ways. It is no longer possible to simply transmit all of them without this information being clear and useful to the user. All elements that the user sees on the site must be explicit. The latter must be able to know what can happen by clicking on a button, icon, heading or link

2.8 COMPATIBILITY Includes all user/website interactions. These interactions must be designed so that the site adapts as much as possible to the user's characteristics.

26 2.8 COMPATIBILITY Includes all user/website interactions. These interactions must be designed so that the site adapts as much as possible to the user's characteristics. Example: The user may not have the same technological environment as the designer. We must therefore verify that the site is compatible with all browsers and their different versions etc COMPATIBILITY Lors de la conception d un site web nous devons éviter d avoir besoin de plug-in spécifiques. Clairement un problème de compatibilité 52 26

27 Classroom Exercise Analysis of a page of the Gazon à rabais website using the Bastien & Scapin grid Web page: Instructions Ergonomic analysis of a company's website Complete the grid of Bastien & Scapin Group sharing of end of course analysis results 53 GUIDE Incentive directing the user in his interaction with the system WORKLOA D Reduction of perceptual or memory load. EXPLICIT CONTROL Elementary criteria (status bar, measurement, space, format, index, title, help... any element facilitating navigation. Grouping/distinction Visual organization of information to illustrate a membership/distinction class relationship by: localization Format Feedback System feedback: quality speed Readability Elementary criterion: lexical characteristics of the presentation of information on the screen (luminance, contrast, characters, dimension, spacing, line length, etc.) Briefness Concision: individual entry or exit elements. Minimum actions = input sequences (suites actions to achieve a goal). Information density Perceptual or memory charge for sets of elements and not individual items Explicit actions Transparency of the system User Control Reversibility: possibility to reverse steps, cancel actions. 54 Grille pour référence 27

28 Grille pour référence ADAPTABILITY ERROR HANDLING Flexibility Alternatives (procedures, options, commands) for the same purpose. Taking into account the user experience Beginner, intermediate, advanced. Error protection/prevention Detect and prevent errors during data entry vs. validation. Quality of error messages Relevance, accuracy, ease of reading of the nature and reasons of errors and solutions. Error correction Means made available to the user to facilitate the correction of errors. Homogeneity/ Consistency Internal consistency Overall consistency of the different elements of the system between them. Metaphor: coherence of the system referents. Mapping: coherence of all signifiers. Evidence: pragmatic physical evidence of the elements. MEANING OF CODES AND DESIGNATION S COMPATIBILIT Y Strong semantic relationship Relationship between object or information displayed and referent. External coherence Similarity between various elements, environments and applications

Engineering Human Computer Interaction

Engineering Human Computer Interaction Gaëlle Calvary Professor in Computer Science Institut polytechnique de Grenoble Laboratoire d Informatique de Grenoble G. Calvary 1 Core principles G. Calvary 2 Global