{"id":1094,"date":"2024-08-06T07:00:00","date_gmt":"2024-08-06T05:00:00","guid":{"rendered":"https:\/\/o-matic.ch\/blog\/non-categorise\/bastien-and-scapins-criteria\/"},"modified":"2026-02-10T12:37:17","modified_gmt":"2026-02-10T11:37:17","slug":"bastien-and-scapins-criteria","status":"publish","type":"post","link":"https:\/\/o-matic.ch\/en\/blog\/ux-ui\/bastien-and-scapins-criteria\/","title":{"rendered":"Bastien and Scapin&#8217;s criteria"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">J. M. Christian Bastien and Dominique Scapin are two researchers in ergonomic psychology and cognitive ergonomics who have conducted research on user interfaces. In 1993, they published <a href=\"https:\/\/inria.hal.science\/inria-00070012\" target=\"_blank\" rel=\"noreferrer noopener\">their heuristics<\/a>, also known as the \u2018<em>Bastien and Scapin criteria\u2019<\/em>, which enable the usability of a website, software or application to be measured using specific criteria. <\/p>\n\n<p class=\"wp-block-paragraph\">These criteria enable us to measure the quality of interaction between the user and the interface through 17 criteria divided into 8 categories, which we will present here.<\/p>\n\n<p class=\"has-small-font-size wp-block-paragraph\"><em>This article is quite long, but it lists all the categories and criteria. We will come back to this later to create a summary sheet! <\/em>  <\/p>\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-large-font-size\">Table of contents<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><a href=\"#guidage\">1. Guidance<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><a href=\"#charge-travail\">2. Workload<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><a href=\"#controle\">3. Explicit control<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><a href=\"#adaptabilite\">4. Adaptability<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><a href=\"#erreurs\">5. Error handling<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><a href=\"#homogeneite\">6. Consistency and coherence<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><a href=\"#codes\">7. Meaning of codes and names<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><a href=\"#compatibilite\">8. Compatibility<\/a><\/h3>\n<\/div><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"guidage\">1. Guidance<\/h2>\n\n<p class=\"wp-block-paragraph\">Guidance is the first of the eight categories of criteria. It helps the user interact with the interface. <\/p>\n\n<p class=\"wp-block-paragraph\">It comprises four criteria: <\/p>\n\n<h3 class=\"wp-block-heading\">Incentive<\/h3>\n\n<p class=\"wp-block-paragraph\">The first criterion, incentive, as its name suggests, encourages the user to perform specific actions and presents different alternatives.<\/p>\n\n<p class=\"wp-block-paragraph\">We can list:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>l&#8217;indication du format ad\u00e9quat \u00e0 saisir dans un champ de texte (ex : <em>jj\/mm\/aaaa<\/em>)<\/li>\n\n\n\n<li>add labels to fill-in fields<\/li>\n\n\n\n<li>announcing the expected length in a field<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Grouping and distinguishing items<\/h3>\n\n<p class=\"wp-block-paragraph\">This is simply the visual organization of interface elements.  <\/p>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/o-matic.ch\/wp-content\/uploads\/2026\/01\/gestalt-1024x541.jpg\" alt=\"\" class=\"wp-image-148\" srcset=\"https:\/\/o-matic.ch\/wp-content\/uploads\/2026\/01\/gestalt-1024x541.jpg 1024w, https:\/\/o-matic.ch\/wp-content\/uploads\/2026\/01\/gestalt-300x158.jpg 300w, https:\/\/o-matic.ch\/wp-content\/uploads\/2026\/01\/gestalt-768x406.jpg 768w, https:\/\/o-matic.ch\/wp-content\/uploads\/2026\/01\/gestalt.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Source : Google images<\/em><\/figcaption><\/figure>\n\n<p class=\"wp-block-paragraph\">Based, among other things, on Gestalt principles<em>,<\/em> this criterion can be used to differentiate and\/or bring together several visual elements:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>by location: when close together, they seem connected; when apart, they are indifferent to each other<\/li>\n\n\n\n<li>by format: with the same size, the same color&#8230; elements come together<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Good organization of elements on an interface provides a more pleasant experience for the user, enabling him to find his way around and memorize elements.<\/p>\n\n<h3 class=\"wp-block-heading\">Immediate feedback<\/h3>\n\n<p class=\"wp-block-paragraph\">This is one of the most important criteria: showing that an action is carried out as quickly as possible:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Showing real-time field input allows the user to see where they are in the process.<\/li>\n\n\n\n<li>indicate a bug, a delay to inform the user of the processing of his request<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Legibility<\/h3>\n\n<p class=\"wp-block-paragraph\">Ce crit\u00e8re se rapproche de pr\u00e8s de l&#8217;accessibilit\u00e9. Offrir \u00e0 l&#8217;utilisateur une interface r\u00e9fl\u00e9chie, non pas uniquement pour \u00eatre jolie, mais aussi et surtout pour \u00eatre lisible, est l&#8217;une des meilleures mani\u00e8res de ne pas le frustrer et faciliter sa lecture. <\/p>\n\n<p class=\"wp-block-paragraph\">Readability includes all lexical characteristics:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>text line length<\/li>\n\n\n\n<li>title and text case<\/li>\n\n\n\n<li>text alignment and justification<\/li>\n\n\n\n<li>hyphenation avoidance<\/li>\n\n\n\n<li>\u2026<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Reading on a screen is not as easy as reading on paper: the typography is different, the distance changes&#8230; Making it easier for a user to read by respecting defined criteria therefore creates the best conditions.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"charge-travail\">2. Workload<\/h2>\n\n<p class=\"wp-block-paragraph\">The second category of Bastien and Scapin&#8217;s criteria! The greater the workload, the greater the number of errors. <\/p>\n\n<p class=\"wp-block-paragraph\">By reducing the load a user perceives, by reducing actions and their duration, we also reduce the risk of abandonment.<\/p>\n\n<p class=\"wp-block-paragraph\">There are 2 criteria in this category:  <\/p>\n\n<h3 class=\"wp-block-heading\">Brevity<\/h3>\n\n<p class=\"wp-block-paragraph\">The faster the activity, the fewer the errors.<\/p>\n\n<p class=\"wp-block-paragraph\">In fact, by being concise and reducing the number of actions, the user&#8217;s experience is enhanced, as his or her reading and typing work is reduced.<\/p>\n\n<h3 class=\"wp-block-heading\">Information density<\/h3>\n\n<p class=\"wp-block-paragraph\">Information density refers to a user&#8217;s perception of a set of elements.  <\/p>\n\n<p class=\"wp-block-paragraph\">When too many elements are perceived, or when it is asked to remember previous actions or data, users perceive this negatively. It demands too much attention and effort, when the action could be avoided or appear otherwise. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"controle\">3. Explicit control<\/h2>\n\n<p class=\"wp-block-paragraph\">It&#8217;s all about user control over the interface. The system must react correctly to the user&#8217;s actions. This category includes 2 key criteria:  <\/p>\n\n<h3 class=\"wp-block-heading\">Explicit actions<\/h3>\n\n<p class=\"wp-block-paragraph\">When a user acts on an interface, his or her action must be carried out when requested, and without a hitch.  <\/p>\n\n<h3 class=\"wp-block-heading\">User control<\/h3>\n\n<p class=\"wp-block-paragraph\">Users must be able to control their own actions.  <\/p>\n\n<p class=\"wp-block-paragraph\">We must therefore give him the opportunity :  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>interrupt an ongoing procedure<\/li>\n\n\n\n<li>cancel an action or allow it to resume a previously cancelled action<\/li>\n\n\n\n<li>to make it easy for him to go back<\/li>\n\n\n\n<li>allow the user to control the pace of input rather than depend on the system&#8217;s pace<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"adaptabilite\">4. Adaptability<\/h2>\n\n<p class=\"wp-block-paragraph\">Adaptability concerns the system&#8217;s ability to react to the user&#8217;s actions and preferences. A task can be performed differently depending on the user&#8217;s profile and situation. <\/p>\n\n<p class=\"wp-block-paragraph\">2 criteria apply:<\/p>\n\n<h3 class=\"wp-block-heading\">Flexibility<\/h3>\n\n<p class=\"wp-block-paragraph\">Flexibility can be translated (with a pinch of salt) as accessibility: the system can offer interface customization and accessibility options to users.<\/p>\n\n<h3 class=\"wp-block-heading\">Taking user experience into account<\/h3>\n\n<p class=\"wp-block-paragraph\">The interface must adapt to the user&#8217;s level and not exclude certain types:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Experienced users can skip certain steps, notably by using keyboard shortcuts.<\/li>\n\n\n\n<li>Novice users need more support, and shouldn&#8217;t be held back by a lack of understanding.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"erreurs\">5. Error handling<\/h2>\n\n<p class=\"wp-block-paragraph\">How do you get around mistakes? That&#8217;s the question this category answers through 3 criteria. <\/p>\n\n<h3 class=\"wp-block-heading\">Error protection<\/h3>\n\n<p class=\"wp-block-paragraph\">The interface must prevent and detect errors. By implementing an analysis during data entry rather than at validation, users are informed at the right moment. <\/p>\n\n<p class=\"wp-block-paragraph\">In this way, you can :  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>tell users when their session has ended and offer them the option of continuing their session.<\/li>\n\n\n\n<li>include the words &#8220;mandatory&#8221; or an asterisk * in labels to indicate when a field is required<\/li>\n\n\n\n<li>\u2026<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Quality of error messages<\/h3>\n\n<p class=\"wp-block-paragraph\">Error messages are very important. Apart from the traditional 404 error indicating that a page cannot be found, few people know the meaning of error codes. That is why messages must be short, in the right place, accurate and easy to understand.  <\/p>\n\n<h3 class=\"wp-block-heading\">Error correction<\/h3>\n\n<p class=\"wp-block-paragraph\">The system must allow interface users to correct their errors, both during and after input:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Indicate live progress in a maximum number of characters, allowing the user to see where he stands<\/li>\n\n\n\n<li>Showing the expected data format enables (see Guidance &gt; Incentives) correct data completion.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"homogeneite\">6. Consistency and coherence<\/h2>\n\n<p class=\"wp-block-paragraph\">A basic Bastien and Scapin criterion, the aim here is to respect the same style, the same codes and the same locations throughout the interface, in order to preserve consistency and coherence.  <\/p>\n\n<p class=\"wp-block-paragraph\">Today, we also talk about design systems that enable us to establish the components to be used across the screens of an interface (colours, fonts, buttons, text fields, etc.).<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"codes\">7. Meaning of codes and names<\/h2>\n\n<p class=\"wp-block-paragraph\">Every action has a code. Copy and paste is done with Ctrl-C\/Ctrl-V. If this shortcut were to change, many users would be at a loss.  <\/p>\n\n<p class=\"wp-block-paragraph\">On an interface, it&#8217;s the same thing:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>icons have a code that most people know: \n<ul class=\"wp-block-list\">\n<li><i class=\"fa-sharp fa-solid fa-gear\"><\/i>  gears or tools for adjustments<\/li>\n\n\n\n<li><i class=\"fa-sharp fa-solid fa-user\"><\/i>  a stylized character for the customer area<\/li>\n\n\n\n<li><i class=\"fa-sharp fa-solid fa-right-from-bracket\"><\/i>  an arrow coming out of a rectangle to disconnect<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>colors have a code:\n<ul class=\"wp-block-list\">\n<li>red for an error<\/li>\n\n\n\n<li>green for information, correct entry<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"compatibilite\">8. Compatibility<\/h2>\n\n<p class=\"wp-block-paragraph\">The last of Bastien and Scapin&#8217;s criteria refers to the relationship between several elements:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>user characteristics (age, perception, expectations, skills, etc.), constraints (situation, disabilities, etc.) and tasks performed.  <\/li>\n\n\n\n<li>compatibility between user actions and system results.<\/li>\n\n\n\n<li>consistency between the different stages of a process.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">In a nutshell<\/h2>\n\n<p class=\"wp-block-paragraph\">Bastien and Scapin&#8217;s heuristics or Crit\u00e8res de Bastien et Scapin (Bastien and Scapin&#8217;s Criteria) have become benchmarks in ergonomics, as they enable us to evaluate an interface without necessarily calling for user testing. From an initial analysis, they can highlight usability problems and correct them as quickly as possible, right from the design stage, to create interfaces that are pleasant, interesting and easy to use. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>J. M. Christian Bastien and Dominique Scapin are two researchers in ergonomic psychology and cognitive ergonomics who have conducted research on user interfaces. In 1993, they published their heuristics, also known as the \u2018Bastien and Scapin criteria\u2019, which enable the usability of a website, software or application to be measured using specific criteria. These criteria [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1095,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48],"tags":[],"class_list":["post-1094","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-ui"],"_links":{"self":[{"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/posts\/1094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/comments?post=1094"}],"version-history":[{"count":2,"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/posts\/1094\/revisions"}],"predecessor-version":[{"id":2011,"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/posts\/1094\/revisions\/2011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/media\/1095"}],"wp:attachment":[{"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/media?parent=1094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/categories?post=1094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/o-matic.ch\/en\/wp-json\/wp\/v2\/tags?post=1094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}