User experience is human experience

Résumé

Nous voilà donc aujourd’hui sur un nouveau projet : IOLCE (Input Output Lire et Communiquer sur Ecran). Le but de cet atelier est de visioner une conférence choisie, puis de la résumer et enfin d'en faire une page web. Plutôt simple me direz vous. Mais moi la première chose que j'ai pensez c'est : au secours. Grand moment de panique car je n'avais pas encore beaucoup de connaissances en web. Heureusement pour moi, je n'étais pas seule pour réaliser ce travail. Trois autres personnes m'ont accompagnée dans ce projet.

Et donc, la première chose à faire était de choisir une conférence. Pour cela, nous avons visionné chacun de notre côté une ou plusieurs conférences, puis nous nous sommes mis d’accord sur laquelle nous allions travailler. Notre choix s’est porté sur la conférence de Monika Bielskyte : “ User experience is human experience ”.

Un premier problème se pose : la conférence est en anglais. Nous parlons tous anglais, mais pas au même niveau. De plus, notre conférencière utilise beaucoup de terme technique que nous n’avons pas tous compris au premier visionnage. Nous avons donc réparti le travail en deux. Les deux membres de notre groupe qui parle le mieux anglais ont retranscris puis traduis une moitié de la conférence chacun, et les deux autres ont résumé ce qui avait été traduit.

Ensuite nous avons rassembler les deux résumés en un seul texte. Mais le problèmes c'est que les deux parties ne concordaient pas entre elles car les résumés ont été fait séparement sans concertations entre les deux personnes qui s'en sont occupés. Nous avons donc repris les traductions pour refaire un résumé cohérent. Après cela nous avons structuré le texte en utilisant un code couleurs pour mieux s’y retrouver :

• Lorsque le texte fait référence au passé.
• Lorsque le texte fait référence au présent.
• Lorsque le texte fait référence au futur.
• Quand il fallait ajouter une image entre deux textes.
• Quand il n’y a plus rien à modifier.
• Ce qu’il nous reste encore à faire.

Néanmoins, structurer le texte en fil rouge : passé, présent, futur, sans changer le contexte ne fut pas une tâche facile. Comme il restait encore quelques incohérences, nous avons dû reformuler certaines phrases qui ne voulaient rien dire, et parfois même des paragraphes entiers, pour que le texte ait plus de sens. Cela a considérablement raccourci le texte mais sans pour autant supprimer les éléments importants. C’est à ce moment-là que nous nous sommes rendu compte que nous avions très peu d’informations sur notre conférencière car celle-ci ne se présente que très brièvement. Après quelques recherches, nous rédigeons un petit résumé sur qui est Monika et ce qu’elle fait.

Texte trouvé sur zkm.de

Résumé que nous en avons fait

Un site est toujours plus agréable avec des images. Notre conférencière cite plusieurs personnes lors de sa conférence. Comme nous ne les connaissions pas toutes ces personnes, nous avons fait des recherches sur qui elles sont ou étaient, et ce qu'elles ont accompli dans leur vie. Nous avons ajouté une photo de chacun ainsi qu’un petit descriptif. Il nous manquait une ou deux images, alors nous sommes allés revoir les slides de la conférence de Monika et nous avons pris les images de sa conférence qui nous semblait les plus intéressantes.

En faisant lire notre texte à des personnes de notre entourage, on nous a fait remarquer que celui-ci était très sérieux et froid, ce qui est un problème car notre conférencière est quelqu’un de chaleureux et très naturelle lorsqu’elle s’exprime. On nous a donc conseillé de nous inspirer de sa personnalité pour réécrire notre texte, ainsi que d’y ajouter du rythme. Nous avons dû nous creuser la tête un bon moment pour y arriver et encore maintenant nous ne sommes pas sûr d’avoir complètement réussi à le rendre « chaleureux » . Après d’autres relectures, on a décidé de laisser les citations en anglais car nous n’avions pas de traduction précise et nous ne voulions pas en changer le sens. On a aussi modifié encore légèrement le texte en le généralisant et en le rendant plus fluide à la lecture.

Markdown

Viens ensuite l’écriture du Markdown. Mais qu’est-ce que c’est que ça  « Markdown » ?

C’est un langage de balisage simple créé en 2004 par John Gruber et Aaron Swartz (et qui n’a plus évolué depuis) qui permet d’écrire de l’html de façon raccourcie. Contrairement au langage HTML reposant sur l'usage de balises, le Markdown a pour but de permettre une meilleure écriture et une plus grande lisibilité du contenu, le tout offrant un moyen de conversion plus simple.

Cette partie-là du travail a également été faites en groupe. Au début, on ne comprenait pas bien comment fonctionnait le système de balisage, mais le site Daringfireball nous a bien aidé. Et finalement, écrire en Markdown s’est effectivement révélé assez simple. De plus, le site possède une fenêtre de conversion en HTML, ce qui m’a, personnellement, bien aidée par la suite. Après plusieurs essais, nous obtenons enfin un résultat satisfaisant.

Design

A partir d’ici, le travail devient individuel car chacun fait sa propre page web de la conférence, tout en ayant le même contenu que les autres membres du groupe. Cette façon de faire, travailler en groupe puis individuellement, est intéressante car cela nous permet de comparer les designs fait à partir d’un même texte. Un des étapes importantes est de trouver la couleur de texte que l’on va utiliser. Pour ma part, j’ai choisi la police “ Merriweather ” pour le corps de texte, car je la trouve agréable à lire et elle est possède plusieurs graisses. Pour mes titres, j’ai opté pour la police “ Ubuntu ” car c’est une police sans-sérif assez douce pour une police droite mais aussi parce qu’elle rappel un des sujets de la conférence. Pour mon rapport de proportions j’ai utilisé le 1.414 en 16pt et un interlignage de 180%. Vous vous demandez certainement ce que c'est qu'un rapport de proportion ? Pour faire simple, le nombre d'or en est un (1,618). Un de nos professeurs a mis un tableau reprenant tous les rapports de proportions existant à notre disposition. J'ai choisi le plus usité.

Pour les couleurs du site j'ai voulu garder celles de l'UX week, c'est à dire le vert et le blanc (même si le blanc n'est pas vraiment considéré comme une couleur). Je me suis inspirée du site de webcomics "Webtoon" car ce site utilise aussi ces couleurs là, mais d'une façon plus subtile et avec parcimonie. J'ai donc décidé de ne mettre que certains éléments en vert, comme les citations, certains titres et mon footer.

Conclusion

Personnellement, cet atelier fut très difficile pour moi au début car j'avais quelques difficultés par rapport au code, je n'en comprenais pas la logique. Pour essayer de mieux comprendre, j’ai regardé la structure de plusieurs sites pour voir « comment on fait » pour certaines parties. Puis après plusieurs essais (et un petit coup de pouce des autres élèves de la classe) j’ai enfin commencé à comprendre. Je me suis beaucoup aidé de l’inspecteur pour voir en direct ce qui se passait si j’ajoutais ou supprimais une balise ou un élément. Cela m’a aidé à développer mes connaissances en code en expérimentant par moi-même.