FOF Spécial Webinaire, un webinaire de 4 heures, 4 intervenants et 4 thèmes tous orientés sur le design et la collaboration.
---------------------------
Table de matière
Keynote d'ouverture [Steven Houessou-Adin & Sessou Boris] ----Slide 1*
Comprendre les patterns UI [Romain Dao] ---- Slide 29*
Design et éthique [Micrette Tohoungnan] ---- Slide 62*
Figma Tokens pour un handoff effectif [Obachola Adegnika] ---- Slide 77*
Motion & animation dans un Design system [Jannis Smesny] ---- Slide 85
------------------
Retrouvez-nous sur https://friends.figma.com/cotonou/
Romain Dao nous parle des patterns UI
https://www.figma.com/community/file/1118225111623734519
------------------
Retrouvez-nous sur https://friends.figma.com/cotonou/
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
La plupart des applications WP7 restent dans les lignes visuelles METRO. Pourtant il est possible de créer des applications ayant une forte personnalité graphique, tout en suivant l'ergonomie METRO. Nous vous proposons de vous faire partager notre expérience, avec les bonnes pratiques en terme d'utilisation de composants et de workflow. Comprenez l'ergonomie METRO et mettez du graphisme dans vos applications !
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
S’il est très simple de réaliser des applications Windows 8 de qualité, il est moins évident de créer des applications ultra performantes. Windows tourne désormais sur tout type d’appareils, des PC de gamers aux tablettes peu puissantes. Pour ces dernières, il est nécessaire de tirer parti au maximum des API fournies par WinRT. Cette session vous propose de découvrir 10 astuces afin d’améliorer visiblement les performances de vos applications.
Obachola Adegnika nous parle du plugin Figma Tokens
https://www.figma.com/community/file/1119790410578973355
------------------
Retrouvez-nous sur https://friends.figma.com/cotonou/
Vers une catégorisation de la trace modélisée, pour exploitation, située en a...Damien Clauzel
Un état des lieux sur les recherches de Damien Clauzel. Propositions d'une approche pour catégoriser la trace modélisée, pour ensuite s'appuyer dessus et conceptualiser un framework théorique d'exploitation de la trace modélisée. Une implémentation serait ensuite réalisée pour valider les travaux.
Romain Dao nous parle des patterns UI
https://www.figma.com/community/file/1118225111623734519
------------------
Retrouvez-nous sur https://friends.figma.com/cotonou/
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
La plupart des applications WP7 restent dans les lignes visuelles METRO. Pourtant il est possible de créer des applications ayant une forte personnalité graphique, tout en suivant l'ergonomie METRO. Nous vous proposons de vous faire partager notre expérience, avec les bonnes pratiques en terme d'utilisation de composants et de workflow. Comprenez l'ergonomie METRO et mettez du graphisme dans vos applications !
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
S’il est très simple de réaliser des applications Windows 8 de qualité, il est moins évident de créer des applications ultra performantes. Windows tourne désormais sur tout type d’appareils, des PC de gamers aux tablettes peu puissantes. Pour ces dernières, il est nécessaire de tirer parti au maximum des API fournies par WinRT. Cette session vous propose de découvrir 10 astuces afin d’améliorer visiblement les performances de vos applications.
Obachola Adegnika nous parle du plugin Figma Tokens
https://www.figma.com/community/file/1119790410578973355
------------------
Retrouvez-nous sur https://friends.figma.com/cotonou/
Vers une catégorisation de la trace modélisée, pour exploitation, située en a...Damien Clauzel
Un état des lieux sur les recherches de Damien Clauzel. Propositions d'une approche pour catégoriser la trace modélisée, pour ensuite s'appuyer dessus et conceptualiser un framework théorique d'exploitation de la trace modélisée. Une implémentation serait ensuite réalisée pour valider les travaux.
"5 fausses idées reçues sur l’UX" par Joel Schillio TheFamily
Par Joël Schillio, UX expert (https://twitter.com/joelschillio)
Inscrivez-vous au prochain meetup! — http://www.meetup.com/Get-the-SWAG-on/
Pour ne pas rater les prochains évènements, c'est ici : http://www.thefamily.co/education/
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?ekino
Nombreuses sont les directions digitales ayant aussi bien des besoins éditoriaux que métiers. D'un point de vue business, il n'est pas possible de séparer les deux.
Basiquement, quels choix avons-nous ?
- partir sur un CMS et coder en "CMS"...
- partir sur un framework et réinventer le CMS...
Aujourd'hui, une des solutions est d'alier le meilleur des 2 mondes, mais a aussi ses problématiques :
- comment faire communiquer les 2 solutions ?
- où trouver les bons profils compte tenu de expertise différentes ?
- comment ne pas complexifier la maintenance et l'exploitation ?
Bref, pour ce qui est d'aujourd'hui, c'est possible, mais difficile... Mais demain ?
Les bonnes pratiques du developpement web - Alteca - avril 2014François CRETON
En partant de ce slogan, "Coder c'est bien, bien coder c'est mieux !", je propose un ensemble de bonnes pratiques à mettre dans toutes les mains des développeurs Web mais aussi, les architectes, chefs de projet, directeurs de projet, etc.
Les bonnes pratiques du developpement Web - Alteca - avril 2014François CRETON
En partant de ce slogan, "Coder c'est bien, bien coder c'est mieux !", je propose un ensemble de bonnes pratiques à mettre dans toutes les mains des développeurs Web mais aussi, les architectes, chefs de projet, directeurs de projet, etc.
Recette anti-feuille blanche ! MVVM ou pas ? Une librairie ? Des dossiers ? Et si je me trompe ? Nous vous aiderons à bien organiser et architecturer votre projet Windows 8 et Windows Phone 8 et ses sources, à réutiliser votre code source, automatiser certaines tâches. Nous partagerons avec vous des bonnes pratiques et des retours d'expériences
Introduction à l'ergonomie lors d'une réunion Drupal à Lyon, France.
Concept de bases - recherche et comprendre à qui s'adresse le logiciel ou le site web en conception.
Deux exemples d'outils ont été utilisé: Chalmark (test utilisateur sans modération) et Optimal Sort (architecture d'information)
Révolution Mobile :
Le mobile a révolutionné nos vies, au point d'être devenu une extension de notre cerveau. Qu'est ce qui rend le mobile si révolutionnaire ?
Où en sommes-nous dans cette révolution mobile ?
Dans une seconde partie, quelques recommandations pour réussir vos produits mobiles.
Voir http://bit.ly/revomobile (lien vers la video de la conférence, etc...)
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°.
Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ?
Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins.
Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.
"Introduction aux Developements iOS" in Three hoursLaurent MEURISSE
Après le succès de la première séance, je présente avec Mélanie Bessagnet (@mbessagnet) pour la deuxième fois la session "Introduction au développement iOS" organisée par iConcept à Toulouse et ekito.
La présentation permettra en 3 heures d'aborder de nombreux thèmes, aussi bien pratiques que techniques sur le développement d'application iOS (iPhone et iPad). Elle est destinée à la fois aux néophytes, mais aussi aux développeurs (java, web, php) ... car une séance de 45 minutes sera du code pure (et donc du pure bonheur ;).
Voici le programme :
Succès d'IOS
iOS
l'excellence Ergonomique
App Store (en quoi consiste la publication sur l'app store ? nous expliquerons aussi en détail les différentes licences développeurs)
Développer
Concevoir (avec Story Boarding)
Profiles et Certificats
Beta Testing
MDM (nous expliquerons comment est géré une flotte de terminaux (iPhone, iPad) gràce au Mobile Device Management)
Coder
L'environnement de développement XCode
Objective-C en 15 minutes
Les nouveautés du SDK iOS 5 (ARC, iCloud, Apparearence, ...)
Coding (Pratique)
il s'agit de coder une première (petite) application. Le code de l'application sera disponible en début de séance.
Webinar une journee dans la peau d'un directeur artistiqueJulien Dereumaux
Découvrez le témoignage de Loïck, directeur artistique digital chez Pilot'in. Nous parlerons dans ce webinar des meilleures tendances design pour 2022 et aussi des meilleures et pires expériences d'un webdesigner en agence !
Au som-mer :
1) La journée type d’un designer en agence
2) Quel process et méthodologie utiliser pour garantir la qualité de son design
3) Les bonnes pratiques pour designer un site
4) Les sources d'inspiration
5) Les outils incontournables
Soyez prêt, ça va décoiffer !
Vous savez ce qu'il vous reste à faire, participez en live pour profiter de toutes les meilleures pratiques !
En plus c'est gratuit ! :-)
Bonus : les inscrits auront accès au replay et à la présentation qui sera envoyée directement par e-mail.
Sophiacom a animé une session au salon Le Mobile 2.0, le 9 mars 2011 :
"De l'iPhone à WP7, retour d'expérience après le développement de Deezer et Explorimmo"
Kit De Survie Techno et Web à l'usage des EntrepreneursStéphanie Hertrich
Ce programme a été conçu sur mesure, spécialement pour vous, entrepreneurs ou porteurs de projets qui serez tôt ou tard confrontés à des problématiques de développement applicatif ou web.
L'idée est de vous aider à appréhender les principes, les notions de base et le vocabulaire associés au développement applicatif et web.
Nous vous donnerons des repères théoriques et pratiques pour que vous puissiez communiquer et orienter plus facilement vos décisions relatives aux composantes technologiques de votre projet.
En d'autres termes : vous n'avez pas un profil technique, mais vous avez un super projet impliquant du développement ? Le kit de survie est fait pour vous !
Partie 1 : Architectures des applications et technologies de développement
Par Stéphanie Hertrich & Benoit Le Pichon, Evangélistes Développement et Michel Rousseau Evangéliste Expérience Utilisateur (Microsoft)
Cette session abordera les notions de base et les technologies mises en œuvre pour le développement d'applications au sens large:
- Quelle est la différence entre une application, un site web, un service web, … ? Quelles en sont les composantes et comment interagissent-elles ?
- Développer pour un smartphone, une tablette, un poste de travail : quelles différences ?
- Quelles sont les grandes familles de technologies et de langages de développement, quelles sont leurs caractéristiques ?
- Le Cloud diffère-t-il réellement d’un hébergeur classique ?
- Quels bénéfices apporterait concrètement le Cloud à mon projet ?
- De l'importance de l'ergonomie des applications.
- Comprendre les tendances et intégrer le branding et l’identité de marque.
- Valider l'expérience utilisateur et tester sa démarche.
- Rendre ça beau, intelligible et en faire une proposition de valeur.
- Travailler le résultat avec un développeur.
Partie 2 : Concevoir une application, les étapes et la mise en œuvre:
Par Stéphanie Hertrich Evangéliste Développement (Microsoft) et Florent Santin, Développeur et Entrepreneur http://www.infinitesquare.com.
Cette session passera en revue les étapes du processus de conception d'une application:
- Définition du besoin, spécifications, code, tests : quel est le cycle de vie d'une application ?
- Quelle méthodologie et quels outils employer ?
- Les équipes : embaucher ou externaliser son développement ?
- Savoir communiquer avec son équipe technique.
- De l'importance du designer.
- Les questions à se poser pour faire les bons choix.
Comment avancer concrètement sur votre propre projet ? Différents programmes sont accessibles suivant votre niveau d’avancement.
- Des programmes d’accompagnement techniques (Pépinière Microsoft Azure, Speed-dating experts, Accélérateur Apps, ,…)
- Bizspark,le programme dédié aux startups : logiciels & conso Cloud Azure gratuite jusqu’à 60 000$
- Microsoft Ventures : l’accélérateur à startup Parisien de Microso
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéGuillaume Abel
D’origine anglo-saxonne, et prenant son essor depuis plus de 5 ans en France, le design d’eXpérience Utilisateur ou UX est passé du statut d’option à une nécessitée dans la réalisation de produits digitaux.
Pourtant, il reste beaucoup d’idées reçues sur la discipline, le métier, la méthode, le recrutement ou encore sur son impact stratégique au niveau de votre entreprise.
Nous passerons en revue quelques un de ces mythes confrontés à une réalité de terrain le tout dans une relation agence/annonceur.
"5 fausses idées reçues sur l’UX" par Joel Schillio TheFamily
Par Joël Schillio, UX expert (https://twitter.com/joelschillio)
Inscrivez-vous au prochain meetup! — http://www.meetup.com/Get-the-SWAG-on/
Pour ne pas rater les prochains évènements, c'est ici : http://www.thefamily.co/education/
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?ekino
Nombreuses sont les directions digitales ayant aussi bien des besoins éditoriaux que métiers. D'un point de vue business, il n'est pas possible de séparer les deux.
Basiquement, quels choix avons-nous ?
- partir sur un CMS et coder en "CMS"...
- partir sur un framework et réinventer le CMS...
Aujourd'hui, une des solutions est d'alier le meilleur des 2 mondes, mais a aussi ses problématiques :
- comment faire communiquer les 2 solutions ?
- où trouver les bons profils compte tenu de expertise différentes ?
- comment ne pas complexifier la maintenance et l'exploitation ?
Bref, pour ce qui est d'aujourd'hui, c'est possible, mais difficile... Mais demain ?
Les bonnes pratiques du developpement web - Alteca - avril 2014François CRETON
En partant de ce slogan, "Coder c'est bien, bien coder c'est mieux !", je propose un ensemble de bonnes pratiques à mettre dans toutes les mains des développeurs Web mais aussi, les architectes, chefs de projet, directeurs de projet, etc.
Les bonnes pratiques du developpement Web - Alteca - avril 2014François CRETON
En partant de ce slogan, "Coder c'est bien, bien coder c'est mieux !", je propose un ensemble de bonnes pratiques à mettre dans toutes les mains des développeurs Web mais aussi, les architectes, chefs de projet, directeurs de projet, etc.
Recette anti-feuille blanche ! MVVM ou pas ? Une librairie ? Des dossiers ? Et si je me trompe ? Nous vous aiderons à bien organiser et architecturer votre projet Windows 8 et Windows Phone 8 et ses sources, à réutiliser votre code source, automatiser certaines tâches. Nous partagerons avec vous des bonnes pratiques et des retours d'expériences
Introduction à l'ergonomie lors d'une réunion Drupal à Lyon, France.
Concept de bases - recherche et comprendre à qui s'adresse le logiciel ou le site web en conception.
Deux exemples d'outils ont été utilisé: Chalmark (test utilisateur sans modération) et Optimal Sort (architecture d'information)
Révolution Mobile :
Le mobile a révolutionné nos vies, au point d'être devenu une extension de notre cerveau. Qu'est ce qui rend le mobile si révolutionnaire ?
Où en sommes-nous dans cette révolution mobile ?
Dans une seconde partie, quelques recommandations pour réussir vos produits mobiles.
Voir http://bit.ly/revomobile (lien vers la video de la conférence, etc...)
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°.
Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ?
Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins.
Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.
"Introduction aux Developements iOS" in Three hoursLaurent MEURISSE
Après le succès de la première séance, je présente avec Mélanie Bessagnet (@mbessagnet) pour la deuxième fois la session "Introduction au développement iOS" organisée par iConcept à Toulouse et ekito.
La présentation permettra en 3 heures d'aborder de nombreux thèmes, aussi bien pratiques que techniques sur le développement d'application iOS (iPhone et iPad). Elle est destinée à la fois aux néophytes, mais aussi aux développeurs (java, web, php) ... car une séance de 45 minutes sera du code pure (et donc du pure bonheur ;).
Voici le programme :
Succès d'IOS
iOS
l'excellence Ergonomique
App Store (en quoi consiste la publication sur l'app store ? nous expliquerons aussi en détail les différentes licences développeurs)
Développer
Concevoir (avec Story Boarding)
Profiles et Certificats
Beta Testing
MDM (nous expliquerons comment est géré une flotte de terminaux (iPhone, iPad) gràce au Mobile Device Management)
Coder
L'environnement de développement XCode
Objective-C en 15 minutes
Les nouveautés du SDK iOS 5 (ARC, iCloud, Apparearence, ...)
Coding (Pratique)
il s'agit de coder une première (petite) application. Le code de l'application sera disponible en début de séance.
Webinar une journee dans la peau d'un directeur artistiqueJulien Dereumaux
Découvrez le témoignage de Loïck, directeur artistique digital chez Pilot'in. Nous parlerons dans ce webinar des meilleures tendances design pour 2022 et aussi des meilleures et pires expériences d'un webdesigner en agence !
Au som-mer :
1) La journée type d’un designer en agence
2) Quel process et méthodologie utiliser pour garantir la qualité de son design
3) Les bonnes pratiques pour designer un site
4) Les sources d'inspiration
5) Les outils incontournables
Soyez prêt, ça va décoiffer !
Vous savez ce qu'il vous reste à faire, participez en live pour profiter de toutes les meilleures pratiques !
En plus c'est gratuit ! :-)
Bonus : les inscrits auront accès au replay et à la présentation qui sera envoyée directement par e-mail.
Sophiacom a animé une session au salon Le Mobile 2.0, le 9 mars 2011 :
"De l'iPhone à WP7, retour d'expérience après le développement de Deezer et Explorimmo"
Kit De Survie Techno et Web à l'usage des EntrepreneursStéphanie Hertrich
Ce programme a été conçu sur mesure, spécialement pour vous, entrepreneurs ou porteurs de projets qui serez tôt ou tard confrontés à des problématiques de développement applicatif ou web.
L'idée est de vous aider à appréhender les principes, les notions de base et le vocabulaire associés au développement applicatif et web.
Nous vous donnerons des repères théoriques et pratiques pour que vous puissiez communiquer et orienter plus facilement vos décisions relatives aux composantes technologiques de votre projet.
En d'autres termes : vous n'avez pas un profil technique, mais vous avez un super projet impliquant du développement ? Le kit de survie est fait pour vous !
Partie 1 : Architectures des applications et technologies de développement
Par Stéphanie Hertrich & Benoit Le Pichon, Evangélistes Développement et Michel Rousseau Evangéliste Expérience Utilisateur (Microsoft)
Cette session abordera les notions de base et les technologies mises en œuvre pour le développement d'applications au sens large:
- Quelle est la différence entre une application, un site web, un service web, … ? Quelles en sont les composantes et comment interagissent-elles ?
- Développer pour un smartphone, une tablette, un poste de travail : quelles différences ?
- Quelles sont les grandes familles de technologies et de langages de développement, quelles sont leurs caractéristiques ?
- Le Cloud diffère-t-il réellement d’un hébergeur classique ?
- Quels bénéfices apporterait concrètement le Cloud à mon projet ?
- De l'importance de l'ergonomie des applications.
- Comprendre les tendances et intégrer le branding et l’identité de marque.
- Valider l'expérience utilisateur et tester sa démarche.
- Rendre ça beau, intelligible et en faire une proposition de valeur.
- Travailler le résultat avec un développeur.
Partie 2 : Concevoir une application, les étapes et la mise en œuvre:
Par Stéphanie Hertrich Evangéliste Développement (Microsoft) et Florent Santin, Développeur et Entrepreneur http://www.infinitesquare.com.
Cette session passera en revue les étapes du processus de conception d'une application:
- Définition du besoin, spécifications, code, tests : quel est le cycle de vie d'une application ?
- Quelle méthodologie et quels outils employer ?
- Les équipes : embaucher ou externaliser son développement ?
- Savoir communiquer avec son équipe technique.
- De l'importance du designer.
- Les questions à se poser pour faire les bons choix.
Comment avancer concrètement sur votre propre projet ? Différents programmes sont accessibles suivant votre niveau d’avancement.
- Des programmes d’accompagnement techniques (Pépinière Microsoft Azure, Speed-dating experts, Accélérateur Apps, ,…)
- Bizspark,le programme dédié aux startups : logiciels & conso Cloud Azure gratuite jusqu’à 60 000$
- Microsoft Ventures : l’accélérateur à startup Parisien de Microso
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéGuillaume Abel
D’origine anglo-saxonne, et prenant son essor depuis plus de 5 ans en France, le design d’eXpérience Utilisateur ou UX est passé du statut d’option à une nécessitée dans la réalisation de produits digitaux.
Pourtant, il reste beaucoup d’idées reçues sur la discipline, le métier, la méthode, le recrutement ou encore sur son impact stratégique au niveau de votre entreprise.
Nous passerons en revue quelques un de ces mythes confrontés à une réalité de terrain le tout dans une relation agence/annonceur.
22. Auto Layout
TITLE
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sit
ullamcorper urna sagittis duis
faucibus. Libero, nunc velit
dignissim sed venenatis luctus
ut faucibus. Vitae viverra
consequat a sem ipsum
pharetra arcu sit enim.
Egestas aliquam senectus
nibh sem faucibus at.
Submit
30. About me
• 33 years old
• 1st job a Criteo
•
• 8 years as a freelance
•
• 2 years spent in Argentina
•
• Musician
•
• Front-end developer
•
• Started design with
• macromedia Flash MX
•
• The Cacatoès Theory founder
32. Qu’est ce qu’une pattern UI
Une succession d’étapes linéaires ou
non, qui permettent à l’utilisateur de
compléter une action définie (schema)
33. Toute interface (SaaS) est une
succession de patterns
Celles-ci peuvent avoir plusieurs issues
“un comportement de l’interface connu et attendu
par le user”
34. Le login
Objectif
Accéder à l’application et à ses données
(compte) de manière sécurisée
Méhodes
3 façons différentes de se login
•Email/Password
•Mobile + Verification code
•SSO - Single Sign On (Apple & Google)
3 user flow différents avec la même finalité
1 2
3
4
36. Les 5 règles de la bonne pattern UI
➡ Une pattern n’existe que dans un contexte
➡ Laisser le choix à l’utilisateur (si possible) & le guider
➡ Rester cohérent et ne pas réinventer la roue
➡ Anticiper les éventuelles erreurs (sytème et user)
➡ Indiquer le début et la fin de la pattern
53. Import de .csv
Import de data dans une base de donnés
1 - Préparer la donnée et la formater
2 - Importer le fichier dans l’interface
3 - Matcher la data
4 - Valider et importer
5 - Success ou Error
6 - Si Error où ?
67. La pyramide éthique des besoins créée par Aral Balkan et Laura Kalbag illustre bien les principes fondamentaux du
design éthique, et comment chaque couche de la pyramide repose et dépend de la couche précédente.
78. Toute la vérité, rien
que la vérité
COMMUNICATION
ENTRE DESIGNERS ET
FRONT-END DEVS
79. Avoir une source qui sert de
référence aux designers et dev
front-end est important.
Pourquoi?
Ecriture Ecriture
Lecture Lecture
Single
Source
of Truth
</>
80. Pour qui ceci est important?
Designer
Front-end dev
Product Manager
Product Owner
82. Une partie plus
pratique
</>
1.Pull du repo dans Vs-code
2.Configuration de l’espace de travail
3.Création des variables réutilisable
4.Push vers Github
5.Mise à jour dans figma
1.Mise en place du Design System
2.Importation des style dans figma token
3.Configuration de Github et création de token
4.Push vers Github
96. News!
Les design tokens (Couleurs, fonts, dégradés, les espaces,
les ombres, les radius, les bordures, l’opacité...)
Les icones.
Les images.
Les illustrations.
Les layouts.
Les grilles de structure.
L’image de marque physique et digitale.
Le branding.
Le ton de la marque.
Les règles d’accessibilité.
Des explications sur les choix des composants.
Des exemples de code.
Les règles d'utilisation.
L’UI motion.
L’animation.
...
101. UI Motion fonctionnel
Permet d’améliorer l’utilisation d’un site
ou d’une application et améliorer
l’expérience utilisateur.
Micro-interactions et émerveillement
Exemple: Click et hover states
des boutons, Outils, Chargements.
102. UI Motion structurel
Composants qui rentrent ou
sortent de l’écran
Composants qui grossisent
pour montrer les détails
d’un produit.
Exemples:Modals, Dropdowns,
Tooltips, Cards, Parallax effect ...
103. UI MoSon émoSonel
AnimaSon d’illustraSons ou
de textes
Les statuts de validaSon ou
d’erreur
Moments d’émerveillement
104. 5 règles et questions
fondamentales pour l’UI Motion
106. 1
Faire simple
Est-ce que cela distrait mon
utilisateur d'accomplir une
tâche?
Mon Ui motion est-il trop
complexe?
2
Faire court
Est-ce que cela perturbe
ou ennui mon utilisateur
quand il se connecte
souvent à mon site ou
application?
Est-ce que c'est trop long?
3
Donner du sens
Est-ce que cela sert mon
message ou ajoute de la
valeur à mon interface?
Est-ce que mon Ui moBon
et mon animaBon aident
dans mon parcours
uBlisateur ou est-ce juste
un effet wow dribbble?
4
Donner le contrôle à
l'utilisateur
Est-ce que mon utilisateur
peut mettre l'animation en
pause?
Est-ce que mon utilisateur
peut switch entre
ON/OFF?
5
Tester
Il faut tester sur différents
devices, navigateurs, dans
différentes situations
(Réseau 3G/4G, Fibre...),
avec différents types
d'utilisateurs, voir
l'accessibilité.
109. 1
Le déclencheur
Qu’est ce qui démarre l’acBon,
l’interacBon?
Décrire en quelques mots
Hover, Click, AcBve, Double tap,
Pinch, Slide, Swipe, Scroll, Pull,
Drag, Loading page, TransiBons,
Parallax effect...
2
L’action
Que se passe t’il?
Les éléments de l’interface peuvent
apparaître, disparaître, grossir,
rétrécir, changer de position ou de
forme...
Dessiner sur plusieurs frames.
3
Le comportement
Est-ce que l’animation est rapide,
lente, rebondie, tremble...?
Quelles émotions veut on faire
ressentir à notre utilisateur?
Est ce que ce type d’animation
représente bien notre identité?
Décrire l’animation en quelques
mots
Animation rassurante, amicale,
minimaliste, exagérée, énergique...
116. 1
Le but
Expliquer quand et pourquoi je dois animer.
Décrire les émotions que je veux faire
ressentir à mon utilisateur.
Do and Don’t pour illustrer les différents cas
possibles.
2
Les types d’animation
Des UI motion courtes pour des animations
simples comme le changement d’opacité ou
de couleurs, textes...
Des UI motion lentes pour des animations
plus complexes comme des transitions de
pages. les loading pages, les drags and
drops, l’arrivée d’un contenu...
Animation des textures, lumières,
illustrations, vfx...pour les autres types
d’animation.
Temps de réponse après l’action
3
Easing
Définir la physique, la durée, la vitesse de
l’animaBon
(Linear, Ease in, Ease out, ElasBc, Ease both,
custom...)
117.
118. TYPE DURÉE
Boutons / Petits composants 100 - 200ms
Alertes / RéorganisaSon de cards 250 - 300ms
Panneaux / Modals 300 - 400ms
Transitions de pages 500 - 700ms
124. Pour l’utilisateur:
Suscite émotion et émerveillement
Expérience utilisateur unique,
mémorable et immersive
Attire l’attention
Facilite la navigation