---
slideOptions:
theme: night
---

## Designers :
## Accueillez-les tou·te·s !


Note:
Conférence au Capitole du Libre 2018 le dimanche 18 à 14h30 - Salle A303
https://2018.capitoledulibre.org/programme/#designers-accueillez-les-tous

Le designer-contributeur au logiciel libre est comme une légende. Certains en ont entendu parler, il paraitrait même que des développeuses ont collaboré avec eux. Pourtant, les projets libres peinent toujours autant à en accueillir. Où sont ces designers ? Pourquoi restent-ils cachés ? Et au fait, c'est quoi un designer ? Est-ce que ça s'apprivoise ? Je vous emmène faire un tour dans le monde des designers, histoire de comprendre pourquoi on en voit si peu et, surtout, comment faire pour en accueillir davantage dans vos projets libres !

----

# Designers : Accueillez les tou·te·s

---

Maïtané Lenoir
Design & Ergonomie

alias Maiwann


<small>

📝 [www.maiwann.net/blog](http://www.maiwann.net)

🐘 [@[e-mail]](https://framapiaf.org/@maiwann)
🐦 aussi sur Twitter [@maiwann_](https://twitter.com/maiwann_)

🐘 [@[e-mail]](https://mastodon.xyz/@design_libre)
</small>

---

## Et au fait, c'est quoi un design·er ?


Note:
Des outils différents, des attentes différentes, deux mondes qui ne se comprennent pas.

---

## Définissons “design”

Un des rôles du design est de **répondre à des besoins** (…) pour **améliorer la qualité de vie des êtres humains**.

— [Wikipédia](https://fr.wikipedia.org/wiki/Design)

---

## Un bon design ?

> Un bon design, c'est lorsque le design sert l'objectif [de l'utilisateur·ice].
> **Un bon design, ça fonctionne.**
>
— Sébastien Desbenoit - Paris Web - [Un bon design n'est pas beau](https://vimeo.com/80972988)

---

## Design graphique · numérique :


---

1. Identifier les utilisateur·ice·s

<span>2. Définir les interactions<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>3. Choisir la représentation<!-- .element: class="fragment" data-fragment-index="2" --></span>

Note:
1.**identifier le contexte et les utilisateurs d'un dispositif numérique.**

2.**la définition et la construction des interactions,** c'est-à-dire **des relations du service ou du programme avec un utilisateur**

3.l'interface cristallise **le potentiel, l'utilisation et la personnalité du produit,**
**un enjeu** de création et de différenciation.
L'interface = **l'aboutissement + l’agrégation du processus de design numérique.**

---

### Les armes du designer graphique

<span>

| | | | | |
|:------:|:-----------:|:------:|:-----------:|:-----------:|
|🌱 |Couleur | Typographie | | |

<!-- .element: class="fragment" data-fragment-index="1" --></span>

Note:
Un choix de couleur ou de typo **est tout sauf innocent :** s’il doit certes assurer une **
- **lisibilité optimale** et
- une **compréhension intuitive** du sujet qu’il sert, il
- ancre également un design dans **un contexte,** un univers, un imaginaire, une culture.

---

### Couleurs

Note:
- Quelle cohérence avec l'identité graphique ?

- Contraste des éléments avec le fond ([Tanaguru](http://contrast-finder.tanaguru.com/))
- Qu'est ce que ça évoque ? (Dimension symbolique)
> Attention à ne pas trop extrapoler)
- Gamme de couleurs pas trop étendue sauf si c'est un parti pris

---


---


---

### Typographie

Note:
l’art d’utiliser les différents types de caractères dans un but esthétique et pratique.

---


Note:
- Quelle cohérence avec l'identité graphique ?

- Historique: Serif, sans serif, cursive, ce à quoi ça renvoie.

- Quelle utilisation ? Écran ou Support imprimé ?
- Quelle lisibilité de la typographie en elle-même ? 1lI
- Quelle taille de typo ? Hauteur de ligne ? Longueur de ligne ?

- Si plusieurs typographies, quels contrastes pour les différencier ?

https://fr.wikipedia.org/wiki/Logotype

http://www.wikiwand.com/fr/Logotype

https://fediverse.blog/~/ChristOffLecture/un-kimono-pour-linceul-de-jean-michel-leboulanger/

---


---

### Les armes du designer graphique

<span>

| | | | | |
|:------:|:-----------:|:------:|:-----------:|:-----------:|
|🌱 |Couleur | Typographie | | |
|🌷 |Icônes| Illustration |Animation| Logo |

<!-- .element: class="fragment" data-fragment-index="1" --></span>

---

### Icône
Note:
Image de petite taille
But est de représenter ou illustrer quelque chose.

---


Note:
- Quelle cohérence avec l'identité graphique ?

- Lisibilité en petit ?

- Correspond à la représentation de votre utilisateur ou non ?

- Fonctionne sans label ?
> (toujours mettre un label !)

[Evernote again !](https://evernote.com/intl/fr/)

[Blablacar](https://blablacar.github.io/ui-library/?selectedKind=Icons&selectedStory=All&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)

---

### Illustration
Note:
représentation visuelle amplifier, compléter, décrire ou prolonger un texte.**

---


Note:
- Quelle cohérence avec l'identité graphique ?

- Quel ton de communication ?
- Quelle image renvoyée ? Digne de confiance ? Plaisantin ? Ludique ? Sérieux ?
- Quelle ambiance
- Quelle émotion ?

- Quel est son domaine ? À qui s'adresse-t-il ? Est-ce adapté ?
- Entre dessin et tracé : quel rythme y a-t-il ?
- Est-ce que le résultat apporte réellement quelque chose ?
- Déjà vu ?
- A-t-il l'air trop quelconque ?
[Chez Slack](https://slack.com/)

[Chez Mailchimp](https://mailchimp.com/en/create/)

[Chez Asana](https://asana.com/fr)

[Chez Evernote](https://evernote.com/intl/fr/)

---


---


---

### Animation

Note:
utiliser le mouvement comme principal outil

---


Note:
- Quelle cohérence avec l'identité graphique ?

- Qu'est ce que cela apporte à l'interface ?
- Fonctionnel ?
- Rendre visible quelquechose ?
- Une urgence ?
- Attirer l'attention ?
- Émotionnel ?
http://joha.dk/en/press

https://webflow.com/interactions-animations

https://rocket.chat/

---

### Les armes du designer graphique

<span>

| | | | | |
|:------:|:-----------:|:------:|:-----------:|:-----------:|
|🌱 |Couleur | Typographie | | |
|🌷 |Icônes| Illustration |Animation| Logo |
|💐 |Identité graphique | Direction Artistique | |

<!-- .element: class="fragment" data-fragment-index="1" --></span>

---

### Identité graphique · Logo

Note:
Identité graphique : ensemble d'éléments visuels cohérents qui permettent d'identifier et reconnaître
Logo : une composition figurée servant à identifier visuellement, de façon immédiate dans le but de se faire connaître, reconnaître et de se différencier.

---

[clic](http://rocket.chat/)


Note:
**Identité / Logo**
- Quel est son domaine ?
- À qui s'adresse-t-il ?
- Est-ce adapté ?

- Quelle efficacité et lisibilité …
- en grand / en petit ?
- en impression / pour du web ?
- en couleur / en noir et blanc ?

- Entre dessin et tracé : quel rythme y a-t-il ? - Y a-t-il des tensions créées entre les parties pleines, les parties vides?

- Historique : Comment il s'inscrit dans l'histoire du design graphique?

- Est-ce que le résultat apporte réellement quelque chose ? Déjà vu ? A-t-il l'air trop quelconque ?

- Quels sont tous les sens qu'on peut y lire ?

**DA**
- Quelle cohérence avec l'identité graphique ?
- Quelle évolution de l'identité dans le temps ?

- Le ton de communication est-il adapté aux utilisateurs ?
- Quelle est l'image renvoyée ? Digne de confiance ? Plaisantin ? Ludique ?
- Quelle ambiance ?
- Quelle émotion ?

---

### Les armes du designer graphique

<span>

| | | | | |
|:------:|:-----------:|:------:|:-----------:|:-----------:|
|🌱 |Couleur | Typographie | | |
|🌷 |Icônes| Illustration |Animation| Logo |
|💐 |Identité graphique | Direction Artistique | |
|🎋 |Graphisme | Ergonomie | |

<!-- .element: class="fragment" data-fragment-index="1" --></span>

---

### Graphisme

Note:
**Graphisme:** communication / fonctionnalisme

---

[clic clic !](http://rocket.chat/)


Note:
- Quelle cohérence avec l'identité graphique ?

- Est ce que je comprends la fonction de chaque élément ?
- Est-ce que je comprends l'utilité de chaque élément

---


----


----


----


----


----


----


----


----


----


---

### Ergonomie

Note:
Étude des usages et adaptation de l'outil à l'utilisateur

---


Note:
- Frustrations à l'utilisation ?
- Incompréhensions de l'utilisateur ?
- Entraves au parcours utilisateur ?
- Informations introuvables ?

---

### 📦 Point moche 🎁

<span>• Élégant et utilisable 🥰
<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>• Moche mais utilisable 🤔<!-- .element: class="fragment" data-fragment-index="2" --></span>

<span>• Moche et inutilisable 😩<!-- .element: class="fragment" data-fragment-index="3" --></span>

<span>• Élégant et inutilisable 🤬<!-- .element: class="fragment" data-fragment-index="4" --></span>

Note:
Moche = Pas attrayant (subjectif)

Moche ≠ Pas utilisable (exemple VLC !)

Élégant = Bonne 1ère impression (mais si inutilisable, déception de l'utilisateur) ≠ Malhonnête "on va t'arnaquer donc on fait du joli"

Utilisable = **Chose la + importante **

Pas de bon design = Difficulté d'utilisation

---

### Les armes du designer graphique

<span>

| | | | | |
|:------:|:-----------:|:------:|:-----------:|:-----------:|
|🌱 |Couleur | Typographie | | |
|🌷 |Icônes| Illustration |Animation| Logo |
|💐 |Identité graphique | Direction Artistique | |
|🎋 |Graphisme | Ergonomie | |
|🎄 | UX 🎉 | | |

<!-- .element: class="fragment" data-fragment-index="1" --></span>

---

### UX

Note:
Son seul objectif, **c’est d’être badass:**

---

Mon expérience Trainline 😰 🚂

---

Le stream 🐱


---

#### Ressources
[Et si on tenait compte des utilisateur·ices dans les projets libres ?](https://framablog.org/2018/10/02/et-si-on-tenait-compte-des-utilisateur%C2%B7ices-dans-les-projets-libres/)

Livre [Méthodes de design UX](https://www.eyrolles.com/Informatique/Livre/methodes-de-design-ux-9782212673982)

Note:
- Quelle ergonomie ?
- Tests utilisateurs
- Attrakdiff
- Courbe d'évaluation UX
- Et toutes les autres méthodes UX !

---

### Différents types de designers UX · UI · Graphistes · Webdesigner · DA…


----

### Les armes du designer graphique

| | | | | |
|:------:|:-----------:|:------:|:-----------:|:-----------:|
|🌱 |Couleur | Typographie | | |
|🌷 |Icônes| Illustration |Animation| Logo |
|💐 |Identité graphique | Direction Artistique | |
|🎋 |Graphisme | Ergonomie | |
|🎄 | UX 🎉 | | |

---

### Ce qui nous intéresse :
#### 🧜‍♀️ 🧜‍♂️ Des designers

💛 👾 Numérique

🧰 Fonctionnalisme

🧶 Éthique

---

## Mais où sont les designers ?


---

## Spoilers !

Remarques pas seulement liées au designers mais potentiellement à n'importe de quel contributeurice qui veut s'insérer sur un projet libre !

Remarques que pour les développeurs car c'est le public à qui s'adresse ma conf' ! Tous les problèmes ne sont pas dans le même camp, mais c'est vous qui souffrez du manque de designers.

---

## L'idée de départ
<span>Une informatique libre est synonyme d’une société libre. **Une adoption massive** est nécessaire afin d’atteindre cet objectif.
<!-- .element: class="fragment" data-fragment-index="1" --></span>
<span>Afin d’y arriver, une interface utilisateur facile d'approche et ergonomique, construite avec le support de ses utilisateurs, est la clé. <!-- .element: class="fragment" data-fragment-index="2" --></span>

---

Et vous ne pouvez pas aller les chercher **si vous les faites sortir de leur zone de confort.**

---

## Mon expérience

<span>
Il était une fois… 🧚‍♂️


<!-- .element: class="fragment" data-fragment-index="1" --></span>

---

<span>- "Je ferai bien des sides projects mais je connais pas de devs" 😞<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>- BTS : Cours sur droit d'auteur / protection de ses créations / Attention au travail gratuit ! 😰<!-- .element: class="fragment" data-fragment-index="2" --></span>

---

<span>- Découverte des logiciels libres (via Tixie sur Twitter) 😲<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>- Envie de contribuer 🤓<!-- .element: class="fragment" data-fragment-index="2" --></span>

<span>- "Trouve ce à quoi t'as envie de contribuer" 🤔<!-- .element: class="fragment" data-fragment-index="3" --></span>

<span>- Perdue face à l'immensité 😵<!-- .element: class="fragment" data-fragment-index="4" --></span>

---

<span>- Demande de l'aide aux autres designers qui ont déjà contribué 👀<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>- Contribuer c'est une mauvaise idée / [Ça c'est déjà mal passé](https://notes.desbenoit.net/SPIP-THE-END) 🙅‍♀️ <!-- .element: class="fragment" data-fragment-index="2" --></span>

---

<span>- Écrit un tweet "Qui veut de l'aide ?" ✍️ 📝<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>- "Moi ! Viens faire une issue" 🙋‍♀️<!-- .element: class="fragment" data-fragment-index="2" --></span>

<span>- Issue ? C'est quoi ? 🤔<!-- .element: class="fragment" data-fragment-index="3" --></span>

<span>- Découverte de GitHub<!-- .element: class="fragment" data-fragment-index="4" --></span>
<span>🤔<!-- .element: class="fragment" data-fragment-index="5" --></span><span>😕<!-- .element: class="fragment" data-fragment-index="6" --></span><span>😥<!-- .element: class="fragment" data-fragment-index="7" --></span><span>😰<!-- .element: class="fragment" data-fragment-index="8" --></span><span>😱<!-- .element: class="fragment" data-fragment-index="9" --></span>
<span>🙅‍♀️<!-- .element: class="fragment" data-fragment-index="10" --></span>

---


---

<span>- Framacolibri 🤨<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>- Section design 😊<!-- .element: class="fragment" data-fragment-index="2" --></span>

<span>- Des vieux posts 😶 + une demande pour des autocollants 😣<!-- .element: class="fragment" data-fragment-index="3" --></span>

<span>- 😓 <!-- .element: class="fragment" data-fragment-index="4" --></span> <span> 🚪<!-- .element: class="fragment" data-fragment-index="5" --></span>

---


---

Fin heureuse quand même 🧚‍♂️

<span>- "Je n'apprendrai pas la ligne de commande !" 😘<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>- Conférences de Framasoft => Abordables pour des néophytes 😊<!-- .element: class="fragment" data-fragment-index="2" --></span>

<span>- Accueillie et écoutée 🥰<!-- .element: class="fragment" data-fragment-index="3" --></span>

<span>- Instance dédiée ouverte pour faire des tests (long mais ça commence) 🤩 🥳<!-- .element: class="fragment" data-fragment-index="4" --></span>

---

## Revoyons ça


---

### Spoiler
Si vous êtes un projet qui n'interagit que via irc et gitlab, il va falloir faire des aménagements.

---

### Méconnaissance de ce qu'est un logiciel libre

😶

- Droits d'auteurs ≠ Communs
- Pas de logiciel libre dans les logiciels enseignés lors des études
- Travail gratuit / concours

---

### 🥰

- Aller dans les écoles de webdesign pour sensibiliser à l'existence du logiciel libre et au besoin de contributions:
- BTS Design Graphique opt médias numérique
- DUT [MMI](https://designetartsappliques.fr/)

---

### Où trouver l'info ?

😶

Avec qui communiquer ?

---

### 🥰

Documenter et publier sur une page dédiée et bien visible

- L'objectif du projet
- Qui sont les utilisateurs que vous voulez aider ?

> Ça nécessite de savoir qui sont vos utilisateur·ices.

Note:
Parce que, simplement dire « mon produit s’adresse aux gens qui ont Internet », vous ciblez quand même une portion extrêmement large de la population.

---

### 🥰

Mettre en place des outils de discussion · communication adaptés
- Système de tchat ? (Framateam)
- Forum ? (Discourse)
- Blog ?

⚠ Pas de forge logicielle

---

### Où trouver l'info ?

😶

Quels sont les besoins ?

- Pas de façon de le savoir

- Mal étiquettés

- Formulés en solution

---

### 🥰

Quels sont les besoins en design ?

- Faites une liste et publiez la !
- Proposez des **pistes faciles ou petits besoins** pour amorcer la contribution
- Y a-t-il des choses en cours ?
- Soyez attentifs à **l'étiquettage de vos demandes**
- Pas de carte blanche
- Formulez vos besoins **sous forme de problème,** même si vous ne savez pas vraiment où il est !

Note:
- ok
- Dites ouvertement où vous avez besoin d’aide, ce qui est en train de se faire, où telle ou telle personne pourrait se greffer si elle le souhaite.
- Soyez attentifs à **l'étiquettage de vos demandes** ne parlez pas de design si il s'agit d'un travail d'illustration (faire des stickers / un picto)
- Pas de carte blanche : soyez précis lors de votre demande (A qui cela s'adresse ? Quel est le but de la fonctionnalité à rajouter / améliorer ? Quelles sont les contraintes ? Y a-t-il une charte graphique sur laquelle se baser ?)

---

### Outils inadaptés

😰 😭

T'as qu'à utiliser des outils de devs:
- Soit il faut passer par github / gitlab ("Fait une issue")
- Soit par irc
- ⚠ Demander au designer d'apprendre git / github / faire des issues / des PR

---

### 🥰

Demander en amont au designer comment iel veut contribuer
- Quels outils ?
- Où poser les questions ?
- Qui valide / invalide la faisabilité ?
- A quelles étapes ?

---

### Une répartition déséquilibrée = Privilège**s**

😶

- Supériorité numérique
- Outils adaptés à votre fonctionnement
- On se sent seul·e = grosse énergie

---

### 🥰
### Accueillir
Accueillir des designers
= Élargir sa communauté
= Gérer la communauté

---

### 🥰

- Code de conduite
- Les minorités sont-elles accueillies ?
- Protégées si il y a des problèmes ?
- Qui en est garant ?

- S'organiser pour se voir en vrai

- Guides concrets d'accueil

---

### 🥰

- Parrainage 🤝
- Souder une équipe
- Aider les nouveaux
- Bien s’entourer, à petite échelle et se faire confiance.
- Référent pour les questions techniques
- Débattre en confiance sans interroger toute la communauté.

---

### 🥰

- Signifier explicitement qu'iels sont les bienvenu.e.s en leur souhaitant la bienvenue

- Se rendre disponible le temps que le designer gagne en autonomie

- Faciliter le premier pas : Commencer avec un petit truc

- Proposer de faire du pair

---

### Quelle gouvernance ?

🤔

Gouvernance non publique ≠ pas de gouvernance :
- qui prend les décisions ?
- qui implémente le design ?
- qui répond aux questions ?
- qui fait des choix / tranche ?
- qui garde une vision produit ? vision biaisée si développeur ?

---

### 🥰

Réfléchir et publier

- Qui prend les décisions, qui valide ?
- Des efforts sont ils fait pour diffuser la connaissance et le pouvoir ?

Utiliser des plateformes avec des outils de modération, et que l'utilisation de ces outils soit transparente (qui a « modéré » quoi, pourquoi et quand)

Note:
> l'embetant c'est qu'un projet libre démarre forcément par un développeur. Le dev assure tous les postes dans la vie du logiciel. Il est le designer, le graphiste, le dev, le community manager, le dir com etc… Souvent il va avoir une telle connaissance du projet qu'une personne interessée exterieure va forcement commettre des erreurs au début.

---

### Voir son travail débattu / malmené

😰

- Dev a la main mise sur le résultat final

- Prendre conscience que son avis est biaisé
- Biais lié à la connaissance du code et des impacts des changements
- Biais lié à l'expertise en informatique
- Biais lié à la méconnaissance des utilisateurs

---

### 🥰

- Apprendre à faire des retours constructifs
- Une fois que le designer a proposé des modifications, s'efforcer de **lui faire confiance sur ses décisions.**
- Si vraiment c'est compliqué : exprimer le problème 🥰 pas une solution 😖

Note:
Les développeurs présents dans la salle ont tous déjà croisé cet effroyable ticket JIRA du client stressé en train de recetter son site : « ça marche pas ». Aucune demande claire, aucun contexte, aucun indice, rien à en tirer. La grosse déprime.
> Chez les créatifs, l’équivalent de ce retour stérile existe : c’est le « j’aime pas ». Variantes : « ça ne me plaît pas », « on n’y est pas », ou tout simplement « c’est moche »… Le grand classique.
> Le vrai problème avec ces retours, c’est que ce ne sont pas des retours : on ne sait pas quoi en faire, on n’a aucune prise dessus, il n’y a aucune valeur ajoutée pour la qualité globale du projet. Dans l’absolu oui, on pourrait essayer de satisfaire les lubies des uns et des autres, mais on ne mettra jamais tout le monde d’accord et on cassera tout le travail déjà effectué sans aucune contrepartie.
> Ce que tu vois atterrir tout cuit dans ton drive est l’aboutissement d’arbitrages complexes et de la gestion en amont de mille contraintes incompressibles. C’est mettre à la benne une négociation, une stratégie et un travail collaboratif de plusieurs mois, voire de plusieurs années.

Si il est important d’être ouvert à la critique extérieure venant de personnes novices il faut savoir faire confiance aux personnes compétentes. Les avis personnels, les ressentis non étayés voir condescendants, qui manquent d’ancrage dans le réel peuvent être contre productif pour un projet. Si vous avez jugé qu’un développeur / designer / traducteur / autre digne de confiance pour vous rejoindre, laissez lui mettre en applications ses compétences sans toujours les remettre en question. Toute critique n’est pas toujours bonne à mettre en application.
Détrompez-vous, nous sommes pas des divas. On est pas chiants juste pour le plaisir, on tient juste à ce que notre travail soit utilisé de manière cohérente au sein de votre projet, que les créas fournies soient utilisées sur des supports adaptés (lisibilité, format des couleurs, contexte), et tant qu'à faire , à ne pas passer 10 heures à aller à la pêche à l'information parce que le besoin n'est pas défini ou même refaire 3 fois notre travail parce que vous nous avez laissé carte blanche et que finalement cette carte n'est pas si blanche que ça.

---

### Le design par comité

🙅‍♀️ Discuter avec la communauté de choix de design 🙅‍♀️
- Consensus mou 😨
- Modifications minimes + reconnues pertinentes
- Sinon : **tout le travail est à jeter** 🚮


---

### 🥰

- Pas de design by comittee
- Décidez **au préalable** des modalités de validation

Note:
Pas de validation en comité de 12 personnes (enfin je dis 12, mais deja à 5 c'est beaucoup trop), surtout pas par e-mail : **choisissez au sein de votre communauté les personnes clés pour valider les livrables (si possible une personne qui s'y connaît un petit peu dans ce domaine) :** vous ne voudriez pas que voir quelqu'un valider le design de son application avec toute sa famille proche et ses 32 cousins qui ne sont pas des utilisateurs potentiels et qui n'ont aucune connaissance dans le domaine, là c'est un peu pareil. Vous ne penseriez pas à faire voter le public d'un forum à propos de code de votre application ? Pourtant ça arrive pour des logos/visuels. Si vous vous lancez la dedans, vous risquez de vous retrouver avec un visuel qui conviendra peut être à tout le monde dans l'équipe, mais qui n'aura plus d'identité ni de sens, et qui ne conviendra pas forcément à votre cible ou votre besoin.
> Si vous n'avez aucune connaissance de la programmation, est ce que vous venez demander des changements dans le nom des variables ? Avoir des yeux et être capable de fournir des retours constructifs sur un livrable graphique sont deux choses très différentes.

---

### Au fait !
🥰

Qui est garant de **la cohérence globale ?**

Si c'est le designer, lui donner un droit de regard dans le process de validation sur les modifications de l'interface avant l'envoi / faire du pair avec lui.
Comme de la revue de code !

---

### Et si j'ai pas de designer ?

- Créer une communauté d'utilisateur·ices
- Collecter les retours (Forum / Chat / Mail…)
- Mettre en place des Méthodes d'évaluation de l'UX
- 🌈 **Tests utilisateur·ices** 🌈

- S'inspirer de l'existant

Pour préparer le terrain quand un·e designer interviendra \o/

Note:
Interview utilisateur / Discussion / Écouter / Demander à prioriser / Extraire le problème de la solution

---

### Des supers exemples !


---

[Page contribution funkwhale](https://contribute.funkwhale.audio/)


---

Langage inclusif Framasoft

[Prestashop - How to contribute](https://www.prestashop.com/en/system/files/filedepot/9/prestashop-how_to_contribute.pdf) Guide pdf de contribution

---

Site des contribateliers

---

[What can i do for Mozilla](https://whatcanidoformozilla.org)


---

[GitLab](https://mastodon.tetaneutral.net/@roipoussiere/101057541019066614)


---

Khaganat


---

## Problématiques en suspens


---

## Travail par itérations ou refonte globale ?

Design : Vue globale de conception / finalité / objectif du produit
Code : S'appuie sur des issues -> Petites itérations
Or, si designer -> fait petites itérations :

---

## Travail par itérations ou refonte globale ?

- Pas adapté pour tout -> itération ≠ "petit bout de projet"
- Revoir l'organisation de son travail
- Designer se plie aux façon de faire du dev
- Imposer dès le début une refonte globale = Mal perçu par la communauté qui s'est impliquée sur le dev du logiciel.

Note:
En fait les dev s'autorisent pas à appliquer au travail des designer leurs méthodes de travail à eux. Ils s'autorisent à développer par petits pas, par petites étapes incomplètes, et ils s'interdisent de demander aux designer de faire de même. Comme si on pouvait pas designer en essai-erreur. Et c'est vrai que les designer ont pas souvent de formation en gestion de projet, ou alors des méthodes moyennement agiles souvent.
: A chaque mini livrable imparfait il faudrait s'autoriser à le faire en binome avec un travail de designer imparfait. Le designer est vraiment trop considéré comme celui/celle qui va lustrer à la toute fin.
: Dur avec les issue de faire un retour global. Dans ce cas, soit un autre espace, soit une manière de catégoriser certaines issue comme étant liées au fond du projet.
Problématique de fond : - fonctionner par itération n doit pas empêcher de penser des itérations sur une structure globale. Petite itération ne veut pas dire "petit bout du projet"

---

## Les designers n'utilisent pas de logiciel libre pour maquetter

- Interropérabilité
- Ouverture à la contribution
- Perennité

Note:
En fait les logiciels de design et de graphisme libres manquent de designers et de graphistes pour donner envie aux designers et aux graphistes de les utiliser et d'y contribuer :-)

---

## On a créé le logiciel tout seul dans son coin pour son besoin perso

Note:
Le problème, c’est qu’on est dans une espèce de relation qu’on a nommée assez aimablement une relation « égosexuelle », je nomme le « aimablement » quand même, parce que, très vite, on en vient à faire de l’entre-soi. On fait un produit, on l’a pensé pour nous, on l’aime bien, c’est notre bébé, on l’a vachement pensé, on le raisonne énormément. C’est super ! Pas très inclusif, mais c‘est super ! Donc l’enjeu c’est d’apprendre à vivre ensemble, c’est d’apprendre… À travailler ensemble.

Et deuxième principe à garder à l’esprit, toujours, c’est que, même si vous avez imaginé votre produit, même si vous le connaissez, même si vous le savez, que vous le vivez, vous n’êtes pas un utilisateur avec un pouvoir de vote supérieur à celui des autres. Vous n’êtes qu’un utilisateur parmi tant d’autres. Ce n’est pas parce que vous avez votre usage et votre réflexion que ce sont ceux de l’ensemble des gens. Au contraire, votre usage sera souvent un peu biaisé parce que vous connaissez votre produit. Donc il faut garder ça à l’esprit.

Le problème est qu'au début du projet (quand sont choisis les outils), il y a peu de contributeurs. Ensuite, une fois le projet lancé, on ne va évidemment pas changer les outils.

---

## Pourquoi ça va être chouette !


---

Vous allez **réduire vos temps de développement**, pour la simple et bonne raison que vous allez arrêter de développer des trucs, l’envoyer dans la nature, voir ce qui se passe, ne pas savoir vraiment si c’est utilisé ou pas, les problèmes qui sont dessus, etc.

<span>Là vous rentrez dans une boucle où chaque chose qui est codée, en soi, a été validée. Donc ce ne sont plus des hypothèses, mais vous vous basez sur des données.<!-- .element: class="fragment" data-fragment-index="1" --></span>

<small>— Luc Chaffard [L'ergonomie, indispensable à l'adoption massive du Libre](https://www.april.org/l-ergonomie-indispensable-l-adoption-massive-du-libre-matthias-dugue-luc-chaffard)</small>

---

Être en contact avec ses utilisateur·ices c'est trop cool !

<span>Répondre à leurs besoins c'est encore plus chouette !<!-- .element: class="fragment" data-fragment-index="1" --></span>

<span>Faire des trucs qu'on sait fonctionnels / ergonomiques : C'est chouette aussi \o/<!-- .element: class="fragment" data-fragment-index="2" --></span>

---

La porte ouverte à un nouveau temps :
La collaboration entre designer & développeur du libre 💖


---

## Biblio 📚

----

- Pour la collaboration dev / designer :
- **Métier web designer** de Mike Monteiro
- **Web designer cherche client idéal** de Mike Monteiro

----

- Pour comprendre les notions de design :
- Article sur la qualité http://kitdesurvie.metiers-graphiques.fr/articles/qu-est-ce-que-la-qualite
- **Design émotionnel** de Aarron Walter
- **La phase de recherche en web design** de Erika Hall
- ? https://www.eyrolles.com/Audiovisuel/Livre/strategies-de-design-ux-9782212675191
- Don't Make me think de Steve Krug
- Blog Stéphanie Walter
- Blog iergo
- Blog carilall
- Blog Hellgy

----

- Commencer à communiquer:
- http://opensourcedesign.net/jobs/
- Meetic du libre
- @[e-mail]

----

Comment débuter en design ? (Fil mastodon)
https://cybre.space/@hundrix/101041680233430124

Pad gouvernance
https://pad.riseup.net/p/r.a85912dce418576198109c74e730620f

Why I use Opensource _ David Revoy
http://www.davidrevoy.com/article170/the-choice-of-open-source

Du Dev à L'UX - Anne-Sophie Tranchet
https://www.youtube.com/watch?v=RpcoNVbY_YQ

----

Table Ronde sur le Design Libre et Open Source - Le Reset
https://wiki.lereset.org/ateliers:trdesignopensource

Tails - Romy / Tetue
http://romy.tetue.net/ux-et-logiciels-libres-retour-d-experience-tails

Quelques astuces pour gérer vos designers-divas en mode associatif
https://weblog.redisdead.net/main/post/2017/03/30/Quelques-astuces-pour-gerer-vos-designers-divas-en-mode-associatif

----

L'ergonomie, indispensable à l'adoption massive du Libre.
https://www.april.org/l-ergonomie-indispensable-l-adoption-massive-du-libre-matthias-dugue-luc-chaffard

Laisse-moi faire ma diva
https://www.24joursdeweb.fr/2017/laisse-moi-faire-ma-diva/

Open Design par My Lê
https://www.paris-web.fr/2016/conferences/open-design.php

GitLab parle de design https://about.gitlab.com/2018/11/08/gitlab-for-designers/

Des ouvertures sympa à la contribution
https://mamot.fr/@PifyZ/101054458363610276

---

## Remerciements

💛🧡❤️💖💜💙💚

- Twitch / Stream
- Mastodon
- Articles de designers
- Libristes qui se bougent pour diversifier les communautés du libre

---
## Merci !