Louvigny Adeline

Ergonomie

HTML/CSS

Ergonomie

Chapitre 1: Communiquer

Définir le terme communication

La communication est la manière dont est transmis un message depuis un émetteur jusqu'à un destinataire, via un ou des canaux.

Un site web est donc un canal de communication, le client étant l'émetteur et l'internaute le destinataire. Le rôle d'un webdesigner est de faire en sorte à ce que le message soit le mieux transmis au destinataire, selon les demandes du client et les règles de la communication et du webdesign. L'écriture, la mise en page, les couleurs, les formes, l'arborescence du site web sont autant de facteurs dont le webdesigner doit tenir compte pour la transmission du ou des messages.

Analyser un site en cinq secondes

Mi-tango Eléments perçus en 5 secondes : restaurant avec une carte des vins… Difficulté à lire le titre, photos assez sombres, ambiance feutrée. Aucune informations pratiques.

J'en sais très peu sur ce restaurant, et n'ai aucun moyen de me faire une idée de l'ambiance, du type de cuisine proposée ou de sa situation géographique, ce qui est assez problématique pour un site vitrine d'un restaurant...

PS : Le site a été refait depuis, et présente bien plus d'attraits !

La Pampa Eléments perçus en 5 secondes : Restaurant argentin assez diversifié : traiteur, sandwich, petit déjeuner. Présence d'un numéro de téléphone mais je ne sais pas dans quelle ville.

Conclusion : il faut, qu'en un coup d'œil, la personne ait l'intuition qu'elle se trouve au bon endroit : qu'elle est sur un site fiable, qu'elle va trouver l'information qu'elle cherche assez vite.

Analyser un site en langue étrangère

Automatism On se doute que l'on est sur un site de voiture, mais on n'en sait pas plus : un site de tests de voiture, de vente de voitures, de sécurité routière… Impossible de deviner les différentes sections du site.

Lada On comprend que c'est un site de vente de Lada, avec les différents modèles dans la barre de navigation horizontale et sur le contenu principal de la page. On retrouve une suite d'articles datés ainsi qu'un numéro de contact en bas de page.

Ici, on voit que lada a utilisé les codes les plus communs de navigation : barre de navigation horizontale, contact en bas de page, photos qui aident à la compréhension du site sans lecture de texte, mise en avant de certains contenus pour avoir l'œil attiré (ici, les prix, les Lada étant réputées pour être très bon marché). Le changement de langue du russe vers l'anglais se trouve très facilement, il se trouve en haut à droite.

Il existe beaucoup d'habitudes de navigation, qui aide l'internaute à se retrouver facilement sur une page web. Il est donc important d'en tenir compte, et si on sort des habitudes les plus connues, de donner des indices à l'internaute pour qu'il trouve ses infos facilement.

Le tableau de bord d'une voiture

tableau de bord d'une voiture

Le compteur n'est pas digital, car la lecture est beaucoup plus rapide via le positionnement d'une aiguille, selon moi. Personnellement, la première fois que j'ai conduit une voiture avec cet affichage digital du kilométrage, ça me déconcentrait plus, les chiffres bougeant tout le temps.

On voit sur ce compteur que certains chiffres sont plus gros que les autres, cela permet d'avoir des points de repère facile, par rapport aux limitation de vitesse existante (ici il serait à adapté pour la Belgique : 30, 50, 70, 90 et 120)

J'ai placé le compteur à gauche du volant afin qu'il soit toujours visible, peu importe la position du volant. La seule partie moins visible est celle qui dépasse les 200km/h, ce qui arrive peu souvent dans la vie d'un automobiliste prudent et respectueux du code de la route...

Le volant est centré par rapport au conducteur, pas trop grand, il ressemble à un volant actuel, classique, facile à tenir.

La jauge de carburant est placée à droite du volant, visible, à la verticale pour avoir cette idée de quantité de carburant qui tombe : quand c'est tout en bas, il n'y en a plus... Jauge assez précise, il lui manque un trait pour marquer la réserve.

L'horloge, digitale cette fois, est placée au milieu et est assez grande pour être visible par tous. Dans ce cas-ci le digital me paraît plus lisible que deux aiguilles sur un cadran.

Chapitre 2 : Typographie

Créer son identité visuelle

Identité visuelle 1 Identité visuelle 2 Identité visuelle 3 Identité visuelle 4

La dernière identité visuelle se trouve en haut à gauche de ce site !

Les nuages de mots

Le texte vient d'un article relatant l'engouement pour le livre 1984 suite à l'élection de Donald Trump au poste de président des Etats-Unis d'Amérique.

Trump de mots Trump de mots Main de trump

Analyser la typographie d'un site

A faire

Chapitre 3: couleurs

Analyse de l'utilisation de couleurs dans des sites

Biostory. Un équilibre entre noir et blanc et trois couleurs de base est présent sur la page d'accueil, au-dessus de la ligne de flottaison. Dès le premier coup d'œil, on a donc tous les principes couleur du site : une dominance du vert, et des touches de rouge et d'orange; ainsi que des photos en noir et blanc pour présenter les acteurs du projet. Ce mélange noir et blanc et couleur est aussi pleinement visible dans la page contact, avec une photo de l'équipe, où toute la photo est en noir et blanc sauf les légumes et fruits que tient en main chaque personne.

Une interprétation de ce mélange est la mise en lumière du travail des producteurs locaux, et ces mêmes producteurs et autres acteurs du projet qui sont plus dans l'ombre, mais bien présents.

Les autres photos d'illustration du site, elles, restent dans la même palette de couleur que le site : vert, rouge, orange. Une touche de brun/beige apparaît de temps à autre, sur les photos couleurs ou via une image d'arrière-plan de planches en bois.

Cette palette de couleur fait clairement référence à la nature de par sa dominance de vert. Les autres couleurs font apparemment référence à des fruits et légumes, vu les petites icônes présentes sur le site. Vert et rouge sont des couleurs complémentaires, l'orange étant une déclinaison du rouge, "en chemin" vers le vert.

Globulebleu La première chose qui frappe aux yeux, c'est la couleur dominante du site… le jaune. Alors que l'agence s'appelle globule bleu. Une astuce ingénieuse afin de nous sortir d'une routine de surf et de nous faire arrêter sur le site. Et excepté pour la présentation des cases studies et des projets, la seule couleur présente est ce jaune. Les photos sont en noir et blanc, le texte en noir, en blanc, et dans des tons de gris. Même la carte google de la page contact a un filtre jaune.

Le jaune utilisé est à mi-chemin entre le jaune pur et l'orange, il acquiert donc un peu de la douceur de cette dernière couleur, tout en gardant le dynamisme et la luminosité du jaune. Un design audacieux, qui a su jouer sur le bel assemblage que peut avoir le jaune avec le blanc, le noir et les nuances de gris. Le site présente un très bel équilibre entre eux.

Coloriser une photo pour lui donner plus de sens

Chapitre 4 : Formes

Sites aux design, formes particuliers

Un site qui a été remarqué pour sa navigation... qui suit la spirale du nombre d'or. Exercice de pur design très original, qui s'adapterait peu à un rôle pratico-pratique, mais qui a le mérite d'ouvrir des portes. Nick Jones

Pour les nostalgiques du papier, un site en one-page dont le scroll se transforme en feuille que l'on replie. Creaktif

Le détail qui tue...

Waaark Waaark, comme son nom ne l'indique pas, c'est un "studio web créatif", en gros une agence de webdesign avec un nom plus sexy. Deux p'tits gars qui font des sites webs "jolis, sur-mesure et fonctionnels".

Et qui ont mis la pâtée niveau animation pour leur propre site web, proposant un flatdesign pas trop flat grâce aux illustrations en trois dimensions, et aux animations de transition, présentes à chaque clic, chaque scroll.

Mais le détail qui tue, dans cet océan de mouvements, c'est ceci :

Cette animation reflète tout l'intérêt du mouvement au sein d'un site web : discret, mais clairement perceptible, et dans une perspective d'UX, qui permette de rendre l'interface friendly et agréable d'utilisation. La structure même du site a été décortiquée à un point tel que même les simples lignes qui délimitent deux rectangles sont sources d'inspiration "animationnelle". L'internaute prend conscience de chaque élément qui constitue le design d'un site web.

Même si cette animation n'appelle pas à une action, elle appelle à rester sur le site pour découvrir d'autres petits "détails qui tuent." Et n'est-ce pas le but premier d'un site d'une agence qui en crée?

Chapitre 5 : Images

Analyse d'un site d'un point de vue des images

Les tartes de Françoise Alors que les tartes de Françoise sont belles en plus d'être bonnes, le site se contente d'afficher des photos très petites, alors que celles-ci sont (en majorité) très bien faites, ce qui est dommage.

Les images sont sous-utilisées, se contentant d'être des illustrations dans un petit coin de la page alors qu'elles pourraient être les actrices principales du site. Lorsque l'on clique sur l'image pour avoir une description de la tarte, elle s'agrandit et un diaporama se met en marche, ce qui les met un peu plus en valeur. Mais d'une manière générale, elles sont clairement sous-exploitées.

La règle du tiers : répérer les grilles des sites

The Wow Compagny Une équipe de comptables qui respecte la règle des tiers sur une bonne partie de sa page d'accueil… Dès le premier écran, la photo est divisée en trois, sur la largeur, via la présence de trois personnes. En déroulant la page, qui alterne éléments d'illustration et photographies, cette grille des tiers est respectée, avec quelques distorsions minimes.

Sunday Breakfast Pour aider les personnes dans le besoin, une association américaine se coupe en six… Excepté le menu qui apparaît en haut de la page, lors de son déroulement, toute la page respecte une mise en page selon une grille de six colonnes, les différents éléments prenant une ou plusieurs colonnes.

Tiny Giant Selon Hubert Reeves, célèbre astrophysicien et vulgarisateur hors-pair, quatre serait le nombre parfait, celui sur lequel repose la création de l'Univers… Un petit géant en a donc fait sa grille de référence pour son site.

Le poids des images

Mandela, héros de la liberté

Travaux divers

Pour des raisons de droit d'auteur, cet exercice ne peut être mis en ligne.

Chapitre 6 : Ecriture web

Et hop un petit pdf pour la route :

Exercices d'écriture web

Chapitre 7 : Emotions

Ressentir des émotions, c'est un luxe qu'on ne peut pas trop se payer dans le monde du journalisme. Les images s'enchaînent, les informations tombent, le nombre de morts grimpe à une allure folle. Et l'on doit s'en tenir au fait, ne pas verser dans le sensationnalisme, au point d'exprimer une froideur glaçante lors du traitement de sujets humainement très difficiles.

Et certains sujets d'actualité nous touchent plus que d'autres... faisant naître en nous un sentiment de tristesse, de colère, et de culpabilité.

Pour des raisons de droits d'auteur, l'exercice n'est plus disponible en ligne.

Chapitre 8 : Storytelling

Harry Potter, un héros si proche des huit phases d'un récit selon Aristote

Harry Potter est un jeune garçon de 11 ans, persécuté par son oncle et sa tante, qui l'ont recueilli alors qu'il est devenu orphelin à 1 an. Il vit de manière assez misérable, dormant dans le placard sous les escaliers, récupérant les vieux vêtements de son cousin Dudley. Une sorte d'Oliver Twist des temps modernes.

Mais, le jour de ses 12 ans, il reçoit d'étranges lettres, délivrées par des chouettes et des hiboux. Sa famille d'accueil fait des pieds et des mains pour l'empêcher de lire son courrier, mais la vérité éclate, inévitable : Harry Potter est un sorcier. Et pas n'importe quel sorcier. Au fur et à mesure de sa découverte du monde des sorciers, il apprendra qu'il est celui qui a mis fin au règne de terreur de Voldemort, le mage noir le plus puissant de son époque. Il apprendra également que ses parents ne sont pas morts dans un accident de voiture, mais en le protégeant de Voldemort, venu assassiner sa famille le soir de son premier anniversaire. Le soir où Voldemort a été anéanti alors qu'il essayait de le tuer, lui aussi.

En bon sorcier, Harry Potter doit suivre sa scolarité dans la prestigieuse école de Poudlard, où le directeur le prend sous son aile. Notre héros apprendra par la suite qu'une prophétie existe à son sujet, et celui de Voldemort : un des deux devra mourir. Et surtout, que Voldemort a survécu, et qu'il se prépare à revenir sous forme humaine.

Alors que Voldemort y parvient, après moultes tentatives, Harry pense qu'il devra combattre seul le mage noir. Mais ses amis lui apprendront qu'il devra compter sur eux, qu'il le veuille ou non. Ensemble, ils partent à la recherche d'objets imprégnés de magie noire, qui permettraient à Voldemort de survivre une nouvelle fois à sa mort, afin de les détruire.

Dans une bataille épique opposant Poudlard, ses professeurs et ses élèves contre Voldemort et ses mangemorts, Harry gagne le combat contre Voldemort, entouré des personnes qui l'aiment. Le monde des sorciers est enfin débarrassé du cruel sorcier.

Chapitre 9 : Créations

Lois d'ergonomie

Au moulin de Socca Rerra Lors de la création d'un site pour une maison d'hôtes en Corse, quelles ont été les lois d'ergonomie appliquée?

  • Loi de proximité : Les photos de l'hébergement, les liens du menu de navigation sont respectivement proches les uns des autres car ils forment un tout.
  • Loi de similarité : Les liens vers les pages ont tous la même typographie (menu de navigation et hébergement)
  • Loi de la figure-fond : L'arrière-plan est clairement défini sous forme d'un mur de pierre.
  • Loi du point focal : Le regard est attiré par le "chambres d'hôtes" placé sur la photo centrale
  • Loi de la symétrie : D'une manière générale, la page d'accueil respecte une symétrie axiale verticale.
  • Loi de familiarité : Le menu de navigation est horizontale et en haut de la page. Les coordonnées de contact sont en bas de la page, dans le footer.
  • Loi du langage visuel : Une carte de la Corse, avec le symbole de son drapeau, ainsi qu'un marqueur pour situer la maison d'hôtes dans la Corse.
  • Loi de Fitts : Les boutons du menu sont en haut, côte à côte afin de mieux les repérer. Il aurait fallu les délimiter par une bordure (ou autre) pour augmenter la précision d'arrivée.

Les actes de conversion

Sur ce même site De Socca Rerra, plusieurs actes de conversion ont été, ou aurait pu être créés. Le call to action est : contacter les propriétaires pour une réservation.

  • Adresse et contact en deuxième place sur la page d'accueil : une grande importance a été donnée aux coordonnées de la maison d'hôtes, le client voulant avant tout que le site soit une vitrine de sa maison, et que les visiteurs puissent le contacter par téléphone ou email.
  • Tunnel de conversion depuis l'image d'accueil : un diaporama de photos de la maison aurait pu être créé, afin que le visiteur ait tout de suite une idée des lieux. S'en suivrait, sur la page d'accueil, une accroche du type "Une chambre double dès 40 euros la nuit ! Consultez nos tarifs complets", qui redirige vers la page hébergement où tous est détaillé. Page qui renvoie bien évidemment vers les coordonnées.
  • Tunnel de conversion depuis la partie hébergement sur la page d'accueil : De nouveau, il aurait peut-être été intéressant de donner quelques tarifs, et d'emmener le visiteur sur la page "Hébergement" où tous les détails sont donnés. Avec de nouveau un renvoi vers les coordonnées.

Expérience de création d'un site en groupe

Une expérience en demi-teinte, où mes obligations à côté de ma formation ne m'ayant pas permis d'assister à tous les cours, et où le groupe était trop grand pour fonctionner convenablement...

Tout le monde n'ayant pas compris que l'intérêt de l'exercice était le chemin et non le résultat, j'ai été parfois en confrontation dans mes demandes d'avoir une réflexion plus poussée sur la création du site. A côté de cela, une organisation de groupe inexistante, chacun prenant (ou non) des initiatives personnelles, le site se construisant autour de ces idées amenées plic-ploc. Il aurait mieux valu déterminer clairement la tâche à accomplir, et distribuer les rôles dès le débuts. Une expérience peu convainvante en termes de travail en équipe.

Au niveau des outils, il est vrai que nous n'avons pas cherché s'il existait des outils spécifiques à l'élaboration de la maquette d'un site internet. Toujours dans cette optique du "finir au plus vite", Wix a été choisi par facilité et parce qu'il permet d'avoir un rendu convenable très rapidement. Une solution qui était pertinente vu le temps qui nous était laissé, mais il aurait fallu avoir une réflexion plus approfondie sur la structure et le design du site avant même de toucher le clavier.

Diplomatie, patience, lâcher-prise auront été les enseignements de ce travail en équipe.

Techniques de créativité

A partir d'un brainstorming, suivi d'une technique aléatoire avec la liste de Kentt et Rosanoff, nous avons élaboré une liste d'idées afin de faire connaître/croître une agence de webdesign.

  • Inclure l'intelligence artificielle dans les services proposés
  • Se spécialiser dans l'accessibilité des sites, se concentrer sur certains handicaps
  • Sponsoriser un club de foot
  • Faire des stickers à coller sur voiture, etc.
  • Sponsor spatial (avec Thomas Pesquet comme ambassadeur)
  • Donner le nom de la boîte à une planète, un météore, etc.
  • Proposer des cours sur OpenClassroom, ou d'autres plateformes de ce genre
  • Faire des pots de vin
  • Design de bouteille et de verre de bière artisanales et locales
  • Faire un gros coup promotionnel sur la Tour Eiffel
  • Faire un promo tour avec un bus, aller à la rencontre des gens
  • Utiliser AdWord
  • Organiser un événement autour du webdesign (designathlon)
  • Faire sa pub dans les espaces de coworking
  • Proposer une formule avec un site gratuit
  • Evenementiel romantique : site pour organisation de mariage, plateforme d'échanges, de partage
  • Faire-part via internet
  • Participer à des ateliers, des formations
  • Musée du webdesign
  • Webdesign vert
  • Axer sa communication selon le public : seniors, jeunes, adultes pressés, etc.

Grâce à deux votes, où chacun devait d'abord choisir trois propositions, puis une dans les plus populaires, trois idées ont été retenues

  • Organiser un événement autour du webdesign (designathlon)
  • Evenementiel romantique : site pour organisation de mariage, plateforme d'échanges, de partage
  • Musée du webdesign

L'expérience était assez intéressante, même si malheureusement certains ne participaient pas du tout et qu'il y avait peu de rebondissements d'idées... La folie n'était pas de la partie, mais plusieurs idées assez intéressantes ont été abordées, et ça a aussi été l'occasion de les creuser.

Travaillant dans une équipe web de journalistes, mon expérience personnelle me laisse croire qu'il faut laisser les gens exprimer leurs idées, leur créativité, à tout moment. Une plateforme numérique, accessible à chaque membre du groupe, me paraît être intéressant afin de récolter les idées 24h/24 et 7j/7. De là, des réunions physiques peuvent être organisées afin de voir ce qui peut être tiré de ces idées. Et le gros avantage des plateformes numériques est que l'on ne se fait pas couper la parole par celui ou celle qui veut toujours en placer une...

Chapitre 10 : Référencement

Repenser la section webdesign du site de l'IFOSUP en vue d'un meilleur référencement

Plusieurs éléments peuvent être améliorés pour le référencement de la section webdesign de l'IFOSUP :

  • In-page :

    Depuis la page d'accueil de la section webdesign, on a une sorte de menu de navigation qui renvoie vers les sous-pages (débouchés, liste des cours et horaires, prés-requis et inscription, nos étudiants). Mais ce menu disparaît dans chaque sous-page, ce qui nous oblige à revenir en arrière. Il faut que ce menu soit présent sur toutes les pages.

    Au niveau des balises HTML, il manque un h1 sur chaque page. Souvent, les h2 peuvent devenir des h1 (débouchés, listes des cours, etc.) Dans la page pré-requis, les sous-titres sont des span... Ils doivent devenir h2, ou h3.

    La balise strong peut être utilisée pour mettre en valeur les termes les plus importants. D'une manière générale, le contenu textuel peut être bien plus important (voir plus loin) et surtout contenir des mots-clef tels que webdesign, design, webmaster, webdeveloper, front-end, CSS, HTML, CMS, numérique, promotion sociale, enseignement, études supérieures.

  • Off-page :

    L'URL des pages doit être améliorée : au lieu d'un terme générique "ct-menu-item", mieux vaut voir apparaître le nom de la page.

    Plus de liens externes doivent êre présents : renvoi vers des du siep (fiches métier), vers des sites d'offre d'emploi dans la rubirque débouché par exemple; vers les sites des étudiants des années précédentes, ou des boîte de webdesign qu'ils ont créées; pour les inscriptions, renvoyer vers le site de l'organisme qui gère les équivalences. Toute une série de lien qui mettront en réseau le site.

  • Contenu

    Le contenu textuel doit être bien plus présent et bien plus fourni. La page d'accueil ne doit pas être une image complète, elle doit intégrer du texte qui explique la formation dans sa globalité. Au niveau de la liste des cours, rebelote, il faut faire ce système de bloc en HTML/CSS, et surtout, avoir un descriptif bien plus poussé des cours... Au niveau des horaires, ils devraient être plus visibles qu'en tout bas de page. Enfin, les travaux des étudiants valent la peine d'être plus mis en valeur, ainsi que leur parcours après l'IFOSUP.

Chapitre 11 : Que retenir de ce cours ?

L'ergonomie est partout, sans que l'on s'en rende compte. Ce cours a donc été une sorte de déclic, une manière de s'arrêter sur chaque objet qui a été pensé, designé, afin de comprendre pourquoi il ressemble à ce qu'il est. S'il fallait retenir trois choses, ce seraient :

  • Le design est partout. Il suffit d'ouvrir les yeux et de s'en inspirer.
  • L'ergonomie est avant tout là pour que l'utilisateur trouve ce qu'il cherche. En dehors du challenge créatif du webdesigner, il faut toujours garder en tête qu'un site rempli un rôle, avant d'être joli.
  • Le webdesigner est aussi là pour guider son client vers un site efficace, qui remplira pleinement son rôle.

Citation de Walt Disney

Chapitre 12 : Ma boîte à outils