Le design: on vous explique tout

En tant qu’étudiants en Design Web & Mobile à l’HEAJ, il nous a été demandé, par groupe, de réaliser cet atelier. Ce-dernier consistait, dans un premier temps à regarder la conférence  « Durable Design »  de Jon Tan pour ensuite l’analyser et finalement la retranscrire en un site.

conférence Base Design
Conférence de Jon Tan sur le Durable Design — An Event Apart

Dans son discours, il aborde le sujet du web design et les problématiques qui y sont liées. Il retrace son évolution en évoquant différentes thématiques comme l’entropie et le modernisme ( voir plus bas) puis conclut en proposant sa version optimisée du design dans le monde du web.
Avant de vous plonger dans le vif du sujet, nous allons brièvement vous présenter Jon Tan, l’auteur de la conférence.

Image de Jon Tan

Cet homme va vous surprendre

Il apprend le design dans une imprimerie où il reste pendant 3 ans avant que son obsession du web ne le rattrape et qu'il se tourne vers la conception numérique en 1995. Mais c'est en 2009 que lui vient l'envie de créer un service qui donnerait accès à des polices de qualité à un grand nombre d'utilisateurs. Il co-fonde alors, avec Richard Rutter, l'un des premiers et plus populaires service de police web, Fontdeck. Site qui a malheureusement fermé le 1er décembre 2016.
En plus d'être un membre de la société internationale des designers typographes, il écrit de nombreuses publications sur la typographie, et a donné pas moins d'une douzaine de conférences, notamment à “ an event apart ” .

LES WEB DESIGNERS LA HAÏSSENT (découvrez pourquoi)

Le terme entropie, généralement employé dans le domaine scientifique comme étant la mesure du désordre, correspond, dans sa définition globale, à une multitude de possibilités qui ne cesse de s’accroître au fil du temps, et ce de manière inéluctable.
D’après les physiciens, les trous noirs sont la source principale de désordre de notre univers. Dans le cas d’une entropie maximale, ce-dernier atteindrait un état de mort thermique.

image théorique d'un trou noir
image théorique d'un trou noir

Dans le milieu du Web, il nous est possible d'accéder à toutes formes d'informations, et d'en créer. Plus les technologies se développent, et plus les méthodes pour créer de l'information se font nombreuses. On peut donc en quelque sorte parler de l’entropie de l’information. Vidéos, images, ou juste du simple texte… Autant de choses à créer que de choses à voir, et autant de manières d’y contribuer.
Le phénomène d'entropie nous entoure, et nous entourera toute notre vie. Mais il est possible de le diminuer.

LE MODERNISME, ÇA TOURNE MAL ![explications]

Berhens & Picasso / Wired News

Il y a de cela une dizaine d’années, les sites web sous l’influence de designers innovateurs tels que chez Wired News ont commencé à tenter de nouvelles choses dans la conception de leur projets. On rendait les sites plus compréhensibles grâce à de meilleures mise en page et gestion de couleurs. Les utilisateurs ont ainsi un accès plus efficace à l’information.

image de l'ancienne interface du site de Wired News
Ancienne interface du site de Wired News

Comparons ce phénomène à un mouvement il y a de cela une centaine d’années. Une volonté naît chez certains, tels que Picasso et Berhens ( designer général de AEG en Allemagne) , de révolutionner l’accès aux ressources et les rendre disponibles pour tous et pas seulement la minorité riche. À travers ses oeuvres, Picasso inspire au renouvellement de la transmission de l’information tandis que Berhens crée la Deutsche Werkbund. Elle a pour but de fabriquer en masse des objets de qualité accessible aux petites bourses. Tout cela lance la tendance moderniste qui va alors regrouper ce qui a un caractère innovant et progressiste, visant la perfection.

Ancienne photo de Behrens
image de Peter Berhens

Van Der Rohe / Uniqlo

Très vite dans les deux situations l’engouement se fait sentir. Suite à Berhens, Van Der Rohe, son apprenti, se lance dans le design de mobilier et de bâtiments ( tel que le pavillon de Barcelone) en suivant la ligne stylistique moderniste de son maître. Seulement, au plus le modernisme s’étend parmi les créateurs, au plus l’idée de base d’accessibilité générale se perd. On finit par avoir du mobilier beaucoup trop cher que pour pouvoir être acheté par n’importe qui.

Du côté des années 2000 les façons de modeler un site se diversifient et se multiplient grâce aux nouvelles mise à jour des principes de codage. Hors, On en arrive à avoir tellement de techniques différentes que certaines ne sont plus optimisées pour tous les appareils voire navigateurs ( tel que Uniqlo qui ne fonctionne correctement que sur Chrome).

Ainsi, dans les deux cas on part d’un concept, d’une idée qui apporte du positif. Mais après un certain temps, cela se perd pour ne garder qu’un aspect dérivé de ce qui avait été apporté au départ. Voilà qui souligne bien un problème d’entropie. Dans notre cas, il est plus que nécessaire de s’assurer qu’on va empêcher ce problème de se répandre davantage.

Diy : comment faire un bon design en 3 étapes

Pour palier à ce problème cité ci-dessus nous devons suivre 3 principes :

La durabilité : Dans le milieu du design, il est impératif de capter l’attention de l’utilisateur.

Afin d’atteindre ce but le designer a à sa disposition 2 contextes : celui de l’impact et de l’immersion.

  1. L’impact a un effet marqué sur l’influence, on va essayer de capter l'attention comme quand vous regardez une publicité.
  2. L’immersion demande à l’utilisateur une implication mentale profonde comme quand vous lisez un livre.

Ensuite un autre outil rentre en compte lorsqu’on veut penser au design: celui du récit. On les compte au nombre de 2 également :

  1. Le récit adopté (enabled narrative) vous incite à suivre un certain plan voire une suite d’étapes afin d’arriver à un objectif. Cependant des interruptions ou des perturbations peuvent entraver ou aider ce processus.
    Exemple : la partie « confirmation d’achats » sur un site où tout est défini et vous n’avez plus qu’à remplir une succession de champs.
  2. Le récit émergent (emerged narrative) est un espace où vous êtes libre de voyager ici et là et dans lequel des « indices » vous permettant d’avancer s’y trouvent.
    Exemple : L’interactivité des réseaux sociaux et « l’espace ouvert » sur Google Maps ou encore les jeux vidéos open world.
capture d'écran de The Legend of Zelda: Breath of the wild
Image de The Legend of Zelda: Breath of the Wild

L’Inclusivité : Ce 2ème principe est plus qu’important, il signifie qu’il ne faut laisser personne de côté y compris vos collègues. On doit les inclures dans la démarche de réflexion lors de la construction d’un projet, ne pas  « se jeter la pierre »  et travailler tous ensemble pour concevoir un meilleur produit pour l’utilisateur.
L’inclusivité comprend aussi les cas particuliers. Chaque utilisateur en est un à sa manière. Il ne faut pas les laisser pour compte et envisager chaque possibilité. Nous sommes responsables de leur exclusion.
Exemple : En Inde, les sms sont fort coûteux et les habitants pouvaient difficilement communiquer avec l’étranger. C’est là que les ingénieurs de WhatsApp leur ont proposé une alternative. Ils se sont concentrés sur les besoins de la population avant de concevoir un design. Ensuite ils ont envisagés les possibles obstacles, contraintes que pourraient rencontrer les utilisateurs pour accéder à leur produit.

Esthétique : Ce 3ème et dernier principe est celui qui se concentre en priorité sur l’immersion de l’utilisateur puis sur l’impact du design. Ainsi on va préférer concevoir un projet privilégiant l’efficacité à un projet primant la beauté, l’impact et l’impression mais qui risque d’être moins fonctionnel ! Si ce que vous concevez est efficace et pratique, les impressions seront sûrement positives :  “ Usable is beautiful !  ” 

Ce qu'il faut retenir

Pour éviter de sombrer dans une entropie totale de l’information en oubliant l’essence de ce que doit être le design, Jon Tan nous explique que ce-dernier est porté par trois piliers : durabilité, inclusivité et esthétique. Grâce à eux, le design devient optimisé et accessible pour tout le monde.