Compassionate Design — Case Study

Mirguet Manon
Nov 5, 2017 · 5 min read
Eric Meyer à sa conférence Compassionate Design

Dans le cadre de nos études en Design Web et Mobile à la Haute Ecole Albert Jacquard, il nous a été demandé d’analyser une conférence d’Eric Meyer “Compassionate Design”. Au dénouement de ce projet, nous avons comme consigne de créer un site web individuellement sur base d’un contenu commun.

Eric Meyer à travers sa conférence essaye de nous parler des aspects dont un designer doit tenir compte pour créer un bon design afin de valoriser l’être humain plutôt qu’un utilisateur.

image d’un étudiant représentant l’humain vs l’utilisateur

La première étape du workshop était de visionner la conférence d’Eric Meyer et de prendre des notes afin de pouvoir débriefer ensemble sur celles-ci. Nous avons ensuite commencé à rédiger un tronc commun et établi un plan à partir de nos notes afin de préparer notre contenu. Malheureusement le premier plan établi n’était pas le bon et nous avons dû nous y reprendre à deux fois afin de satisfaire les besoins de tout le monde.

Dans ce contenu nous avons parlé de la problématique imposée par Eric Meyer qui est d’apporter satisfaction à l’ensemble des internautes et non seulement à une seule partie d’entre eux. Comme notre conférencier, nous avons expliqué le système lent, le système rapide et les problèmes liés aux sites et applications actuels. Nous avons pu alors remarquer que plusieurs facteurs étaient expliqué par Eric Meyer afin de réaliser de bons design:

  • Le facteur humain: C’est le facteur le plus influent de la création d’un site web. Il est incontournable c’est la raison pour laquelle lors sa conférence, “Compassionate Design” il explique que parfois ce n’est qu’après des conséquences que les designers pensent au côté humain , car ils sont qualifiés pour créer des expériences idéales avec des utilisateurs idéaux. Il relève d’ailleurs un problème important sur le web actuel: le manque d’intérêt pour l’humain qui se trouve derrière chaque utilisateur. Son but à lui est de nous faire réfléchir à un design ergonomique qui implique l’humain.
  • Le facteur culturel: Il a la même influence que le facteur humain mais le facteur humain est plus dominant. Le facteur culturel entre dans la façon par laquelle on conçoit un design en fonction de l’évolution de la technologie.

Lorsqu’un plan stable et correct fut élaboré, nous avons commencé la rédaction du contenu final; pendant que certains travaillaient sur le contenu, d’autres écrivaient l’abstract et lorsque des parties de contenu n’étaient pas bonnes, les personnes qui travaillaient sur l’abstract donnaient un regard nouveau dans le but d’avancer.

Le contenu validé, nous avons entrepris individuellement la création de notre site. Pour ce faire, il faut tout d’abord choisir correctement ses polices de caractère, ses couleurs, ainsi que son interlignage et le rapport de proportion. Pour ce faire, on peut utiliser le plan de travail de Photoshop, pour y disposer l’ensemble de nos tests afin de choisir ce qui correspondait le mieux au message que nous voulions véhiculer. Ajoutons également que si nous désirons utiliser deux polices, il faut vérifier la taille des X mais aussi le contraste des O et des M.

exemple de choix typographiques d’un étudiant du groupe ainsi que ses couleurs de lignes.

Ensuite, il est conseillé de concevoir un wireframe pour faciliter la mise en page CSS.

exemples de wireframes

Enfin, après toutes ces étapes, nous avons pu commencer à coder notre site. Bien sûr pour coder il faut d’abord différencier le contenu et la décoration. Le contenu va dans le fichier html et la décoration va dans le fichier css. Nous avons tous le même contenu au sein du groupe donc nos html sont semblables à quelques balises près. C’est au niveau du css que nos cinq membres du groupe ont un fichier totalement différent, car nous n’avions pas la même conception pour le design du site.

travail d’un étudiant du groupe sur le logiciel bracket.

Récapitulons les étapes:

  1. choix de polices, couleurs de lignes, interlignages,…
  2. wireframe du site
  3. Distinction contenu/décoration
  4. Codage du site et intégration du design

Une fois notre site terminé et corrigé, il nous a été demandé de faire des screenshots de notre site afin de les mettre sur un seul et même fichier Adobe InDesign et de pouvoir passer devant un jury, pour ainsi recevoir les conseils et critiques éventuels sur la conception de notre site.

En conclusion, lors de ce workshop, nous avons d’abord travaillé individuellement pour pouvoir mettre en commun nos idées et concevoir un contenu collectif pour aboutir à un travail individuel: créer notre site.

Vous voulez visionner la conférence ?

https://vimeo.com/201986969

Si vous désirez visionner nos pages web c’est ici:

Stephanie Assifoua

Cynthia Pugliese

Manon Mirguet

Christian Yossa Tiani

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade