SlideShare une entreprise Scribd logo

8 points des guidelines "ModernUI" expliqués

SOAT
SOAT

Résumé des principales guidelines Windows 8 en 50 slides. Présentation de septembre 2012 lors du ModernUI Dating v2 de la communauté Windows 8.

1  sur  55
Télécharger pour lire hors ligne
8 points des guidelines
ModernUI expliqués
Comprendre pour mieux épater…
Intervenants
Cyril Cathala                                    Nathanael Marchand
• So@t Expert C#/XAML                            • So@t Expert C#/XAML
• Showrizo pour Windows 8                        • Showrizo pour Windows 8
  (vainqueur DevKings)                             (vainqueur DevKings)
• Silverlight France                             • Silverlight France
• Coach Windows Phone                            • Rédacteur/modérateur
• Communauté Windows Phone                         developpez.com
• http://cyril.cathala.org/blog                  • http://www.natmarchand.fr
• @CyrilCathala                                  • @NatMarchand



                 21-sept.-12   8 points des Guidelines ModernUI expliqués      2
Agenda
• Microsoft design style
• Interactions utilisateur : touch+clavier
• Mise à l’échelle
• Contrats, charmes et fonctionnalités
• Tuiles et notifications
• Contrôles
• La tête dans les nuages
• Fourre-tout

                21-sept.-12   8 points des Guidelines ModernUI expliqués   3
Introduction guidelines…
300+ pages de




                                      …le résumé, c’est parti !

           21-sept.-12   8 points des Guidelines ModernUI expliqués   4
Jeu concours

  Chaque sous-titre de section contient une
               référence …

Trouve-les toutes, et tente de gagner un super
                   goodies !

                                   +
         21-sept.-12    8 points des Guidelines ModernUI expliqués   5
Microsoft design style
aka ModernUI
aka celui-dont-on-ne-doit-pas-prononcer-le-nom

Recommandé

Cms et-creer-un-petit-site-avec-drupal-jdll-2012
Cms et-creer-un-petit-site-avec-drupal-jdll-2012Cms et-creer-un-petit-site-avec-drupal-jdll-2012
Cms et-creer-un-petit-site-avec-drupal-jdll-2012Chipway
 
Presentation CARM Continuite d'Activite, Continuite Informatique et Gestion d...
Presentation CARM Continuite d'Activite, Continuite Informatique et Gestion d...Presentation CARM Continuite d'Activite, Continuite Informatique et Gestion d...
Presentation CARM Continuite d'Activite, Continuite Informatique et Gestion d...Alterest
 
Offre de services Baccou Bonneville Consultants
Offre de services Baccou Bonneville ConsultantsOffre de services Baccou Bonneville Consultants
Offre de services Baccou Bonneville ConsultantsAlterest
 
Auditer son plan de secours informatique et détecter ses vulnérabilités
Auditer son plan de secours informatique et détecter ses vulnérabilitésAuditer son plan de secours informatique et détecter ses vulnérabilités
Auditer son plan de secours informatique et détecter ses vulnérabilitésAlterest
 
Parc office présentation_rachat_reprise_informatique_telecom_mobilier_brokera...
Parc office présentation_rachat_reprise_informatique_telecom_mobilier_brokera...Parc office présentation_rachat_reprise_informatique_telecom_mobilier_brokera...
Parc office présentation_rachat_reprise_informatique_telecom_mobilier_brokera...Annonces-ParcOffice
 
Executive Coach Agnes ThéArd
Executive Coach Agnes ThéArdExecutive Coach Agnes ThéArd
Executive Coach Agnes ThéArdAGNESTHEARD
 
Présentationrestauration de tableaux
Présentationrestauration de tableauxPrésentationrestauration de tableaux
Présentationrestauration de tableauxatelierdesquen
 

Contenu connexe

En vedette

Introduction aux problématiques des architectures distribuées
Introduction aux problématiques des architectures distribuéesIntroduction aux problématiques des architectures distribuées
Introduction aux problématiques des architectures distribuéesSOAT
 
Baytouna project
Baytouna projectBaytouna project
Baytouna projectaziziasma
 
Ht lemagicienbet
Ht lemagicienbetHt lemagicienbet
Ht lemagicienbetkelticman
 
Ht lemagicienbet
Ht lemagicienbetHt lemagicienbet
Ht lemagicienbetkelticman
 
Effets de 2 modalités d'intégration d'un livre numérique dans un cours univer...
Effets de 2 modalités d'intégration d'un livre numérique dans un cours univer...Effets de 2 modalités d'intégration d'un livre numérique dans un cours univer...
Effets de 2 modalités d'intégration d'un livre numérique dans un cours univer...Bruno De Lièvre
 
12 bonnes raisons de ne pas contrôler vos applications
12 bonnes raisons de ne pas contrôler vos applications12 bonnes raisons de ne pas contrôler vos applications
12 bonnes raisons de ne pas contrôler vos applicationsSolutions IT et Business
 
092812 eeoc response hilda solis (french)
092812 eeoc response   hilda solis (french)092812 eeoc response   hilda solis (french)
092812 eeoc response hilda solis (french)VogelDenise
 
Forteresse Soroca
 Forteresse  Soroca Forteresse  Soroca
Forteresse SorocaDana Barbie
 
Présentation its
Présentation itsPrésentation its
Présentation itsMadoui
 
Le Cerveau : sa Plasticité & son Adaptation
Le Cerveau : sa Plasticité & son AdaptationLe Cerveau : sa Plasticité & son Adaptation
Le Cerveau : sa Plasticité & son AdaptationIngrid Meucci
 
092304 request interventiondoj (mms flsa matter)
092304 request interventiondoj (mms flsa matter)092304 request interventiondoj (mms flsa matter)
092304 request interventiondoj (mms flsa matter)VogelDenise
 
6. wco business process modelling
6. wco business process modelling6. wco business process modelling
6. wco business process modellingsugogo
 
Social Networks Statistics 2014
Social Networks Statistics 2014Social Networks Statistics 2014
Social Networks Statistics 2014Ismail BADACHE
 
Ils attendent une famille, découvrez nos petits
Ils attendent une famille, découvrez nos petitsIls attendent une famille, découvrez nos petits
Ils attendent une famille, découvrez nos petitsStephanie Pealardy
 
L'évolution des prix maxima des principaux produits pétroliers en Belgique (P...
L'évolution des prix maxima des principaux produits pétroliers en Belgique (P...L'évolution des prix maxima des principaux produits pétroliers en Belgique (P...
L'évolution des prix maxima des principaux produits pétroliers en Belgique (P...lesoirbe
 

En vedette (20)

Introduction aux problématiques des architectures distribuées
Introduction aux problématiques des architectures distribuéesIntroduction aux problématiques des architectures distribuées
Introduction aux problématiques des architectures distribuées
 
Management des idées
Management des idéesManagement des idées
Management des idées
 
Baytouna project
Baytouna projectBaytouna project
Baytouna project
 
Ht lemagicienbet
Ht lemagicienbetHt lemagicienbet
Ht lemagicienbet
 
Utrecht prog ws series_b_vf
Utrecht prog  ws series_b_vfUtrecht prog  ws series_b_vf
Utrecht prog ws series_b_vf
 
Wooden miracles
Wooden miraclesWooden miracles
Wooden miracles
 
Ht lemagicienbet
Ht lemagicienbetHt lemagicienbet
Ht lemagicienbet
 
Effets de 2 modalités d'intégration d'un livre numérique dans un cours univer...
Effets de 2 modalités d'intégration d'un livre numérique dans un cours univer...Effets de 2 modalités d'intégration d'un livre numérique dans un cours univer...
Effets de 2 modalités d'intégration d'un livre numérique dans un cours univer...
 
12 bonnes raisons de ne pas contrôler vos applications
12 bonnes raisons de ne pas contrôler vos applications12 bonnes raisons de ne pas contrôler vos applications
12 bonnes raisons de ne pas contrôler vos applications
 
092812 eeoc response hilda solis (french)
092812 eeoc response   hilda solis (french)092812 eeoc response   hilda solis (french)
092812 eeoc response hilda solis (french)
 
Forteresse Soroca
 Forteresse  Soroca Forteresse  Soroca
Forteresse Soroca
 
Présentation its
Présentation itsPrésentation its
Présentation its
 
Bon usage
Bon usageBon usage
Bon usage
 
Alex. bd introduction french w
Alex. bd introduction french wAlex. bd introduction french w
Alex. bd introduction french w
 
Le Cerveau : sa Plasticité & son Adaptation
Le Cerveau : sa Plasticité & son AdaptationLe Cerveau : sa Plasticité & son Adaptation
Le Cerveau : sa Plasticité & son Adaptation
 
092304 request interventiondoj (mms flsa matter)
092304 request interventiondoj (mms flsa matter)092304 request interventiondoj (mms flsa matter)
092304 request interventiondoj (mms flsa matter)
 
6. wco business process modelling
6. wco business process modelling6. wco business process modelling
6. wco business process modelling
 
Social Networks Statistics 2014
Social Networks Statistics 2014Social Networks Statistics 2014
Social Networks Statistics 2014
 
Ils attendent une famille, découvrez nos petits
Ils attendent une famille, découvrez nos petitsIls attendent une famille, découvrez nos petits
Ils attendent une famille, découvrez nos petits
 
L'évolution des prix maxima des principaux produits pétroliers en Belgique (P...
L'évolution des prix maxima des principaux produits pétroliers en Belgique (P...L'évolution des prix maxima des principaux produits pétroliers en Belgique (P...
L'évolution des prix maxima des principaux produits pétroliers en Belgique (P...
 

Similaire à 8 points des guidelines "ModernUI" expliqués

Paris Web 2012 - Les nouveaux horizons de la cartographie sur le Web
Paris Web 2012 - Les nouveaux horizons de la cartographie sur le WebParis Web 2012 - Les nouveaux horizons de la cartographie sur le Web
Paris Web 2012 - Les nouveaux horizons de la cartographie sur le WebBBecquet
 
Tk02 Google Wave Et Html5 Fr
Tk02 Google Wave Et Html5 FrTk02 Google Wave Et Html5 Fr
Tk02 Google Wave Et Html5 FrValtech
 
Mise un oeuvre d'un projet Mobile chez Cetelem en Scrum
Mise un oeuvre d'un projet Mobile chez Cetelem en ScrumMise un oeuvre d'un projet Mobile chez Cetelem en Scrum
Mise un oeuvre d'un projet Mobile chez Cetelem en ScrumCyrille Deruel
 
Des cas d'intégration client par Sword: XL Airways, Ministere de la Culture...
Des cas d'intégration client par Sword: XL Airways, Ministere de la Culture...Des cas d'intégration client par Sword: XL Airways, Ministere de la Culture...
Des cas d'intégration client par Sword: XL Airways, Ministere de la Culture...Nuxeo
 
Réussissez vos projets d’analytique self-service avec une couche de services ...
Réussissez vos projets d’analytique self-service avec une couche de services ...Réussissez vos projets d’analytique self-service avec une couche de services ...
Réussissez vos projets d’analytique self-service avec une couche de services ...Denodo
 
Intranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisationIntranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisationNumeriCube
 
Concepts methodes
Concepts methodesConcepts methodes
Concepts methodesmsk10
 
📝 ✅ La checklist ultime pour rendre vos applications cloud native
📝 ✅ La checklist ultime pour rendre vos applications cloud native 📝 ✅ La checklist ultime pour rendre vos applications cloud native
📝 ✅ La checklist ultime pour rendre vos applications cloud native KatiaHIMEUR1
 
Architecture des types de contenu : ce qui a changé en Drupal 7
Architecture des types de contenu : ce qui a changé en Drupal 7Architecture des types de contenu : ce qui a changé en Drupal 7
Architecture des types de contenu : ce qui a changé en Drupal 7slybud
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsChristophe Villeneuve
 
Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !Ideo - Groupe Netapsys
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxChristophe Villeneuve
 
Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Sébastien Giroux
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?ekino
 
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Oeil de Coach
 
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014Symetris
 
Modéliser avec ARCHIMATE 3.1®
Modéliser avec ARCHIMATE 3.1®Modéliser avec ARCHIMATE 3.1®
Modéliser avec ARCHIMATE 3.1®COMPETENSIS
 

Similaire à 8 points des guidelines "ModernUI" expliqués (20)

Paris Web 2012 - Les nouveaux horizons de la cartographie sur le Web
Paris Web 2012 - Les nouveaux horizons de la cartographie sur le WebParis Web 2012 - Les nouveaux horizons de la cartographie sur le Web
Paris Web 2012 - Les nouveaux horizons de la cartographie sur le Web
 
Tk02 Google Wave Et Html5 Fr
Tk02 Google Wave Et Html5 FrTk02 Google Wave Et Html5 Fr
Tk02 Google Wave Et Html5 Fr
 
Mise un oeuvre d'un projet Mobile chez Cetelem en Scrum
Mise un oeuvre d'un projet Mobile chez Cetelem en ScrumMise un oeuvre d'un projet Mobile chez Cetelem en Scrum
Mise un oeuvre d'un projet Mobile chez Cetelem en Scrum
 
Des cas d'intégration client par Sword: XL Airways, Ministere de la Culture...
Des cas d'intégration client par Sword: XL Airways, Ministere de la Culture...Des cas d'intégration client par Sword: XL Airways, Ministere de la Culture...
Des cas d'intégration client par Sword: XL Airways, Ministere de la Culture...
 
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux
 
Réussissez vos projets d’analytique self-service avec une couche de services ...
Réussissez vos projets d’analytique self-service avec une couche de services ...Réussissez vos projets d’analytique self-service avec une couche de services ...
Réussissez vos projets d’analytique self-service avec une couche de services ...
 
Intranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisationIntranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisation
 
Concepts methodes
Concepts methodesConcepts methodes
Concepts methodes
 
📝 ✅ La checklist ultime pour rendre vos applications cloud native
📝 ✅ La checklist ultime pour rendre vos applications cloud native 📝 ✅ La checklist ultime pour rendre vos applications cloud native
📝 ✅ La checklist ultime pour rendre vos applications cloud native
 
Architecture des types de contenu : ce qui a changé en Drupal 7
Architecture des types de contenu : ce qui a changé en Drupal 7Architecture des types de contenu : ce qui a changé en Drupal 7
Architecture des types de contenu : ce qui a changé en Drupal 7
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtools
 
Lacantine 2010-fr -v2
Lacantine 2010-fr -v2Lacantine 2010-fr -v2
Lacantine 2010-fr -v2
 
Lacantine 2010-fr -v2
Lacantine 2010-fr -v2Lacantine 2010-fr -v2
Lacantine 2010-fr -v2
 
Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans Firefox
 
Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
 
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
 
Modéliser avec ARCHIMATE 3.1®
Modéliser avec ARCHIMATE 3.1®Modéliser avec ARCHIMATE 3.1®
Modéliser avec ARCHIMATE 3.1®
 

Plus de SOAT

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018SOAT
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libéréeSOAT
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !SOAT
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseSOAT
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESSOAT
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-DurandSOAT
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-DurandSOAT
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-DurandSOAT
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotSOAT
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014SOAT
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014SOAT
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soatSOAT
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...SOAT
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014SOAT
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#SOAT
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatSOAT
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesSOAT
 

Plus de SOAT (20)

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libérée
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entreprise
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de données
 

8 points des guidelines "ModernUI" expliqués

  • 1. 8 points des guidelines ModernUI expliqués Comprendre pour mieux épater…
  • 2. Intervenants Cyril Cathala Nathanael Marchand • So@t Expert C#/XAML • So@t Expert C#/XAML • Showrizo pour Windows 8 • Showrizo pour Windows 8 (vainqueur DevKings) (vainqueur DevKings) • Silverlight France • Silverlight France • Coach Windows Phone • Rédacteur/modérateur • Communauté Windows Phone developpez.com • http://cyril.cathala.org/blog • http://www.natmarchand.fr • @CyrilCathala • @NatMarchand 21-sept.-12 8 points des Guidelines ModernUI expliqués 2
  • 3. Agenda • Microsoft design style • Interactions utilisateur : touch+clavier • Mise à l’échelle • Contrats, charmes et fonctionnalités • Tuiles et notifications • Contrôles • La tête dans les nuages • Fourre-tout 21-sept.-12 8 points des Guidelines ModernUI expliqués 3
  • 4. Introduction guidelines… 300+ pages de …le résumé, c’est parti ! 21-sept.-12 8 points des Guidelines ModernUI expliqués 4
  • 5. Jeu concours Chaque sous-titre de section contient une référence … Trouve-les toutes, et tente de gagner un super goodies ! + 21-sept.-12 8 points des Guidelines ModernUI expliqués 5
  • 6. Microsoft design style aka ModernUI aka celui-dont-on-ne-doit-pas-prononcer-le-nom
  • 7. Principes de base • Content not chrome • Une expérience unifiée • Navigation • AppBar • Charmes • Snapped View • Une expérience agréable : Fast & fluid !! • Eléments standards d’interface 21-sept.-12 8 points des Guidelines ModernUI expliqués 7
  • 8. Content not chrome • Le contenu prime sur sa présentation • Eviter les effets inutiles • Skeuomorphisme (à vos souhaits) • Bords arrondis, ombres, relief, transparence, etc. • Typographie sans fioritures (ex. Segoe) 21-sept.-12 8 points des Guidelines ModernUI expliqués 8
  • 9. Navigation Hiérarchique A plat • Utilisée dans la plupart des cas • Contenus indépendants • Navigation par les données • Adapté aux changements de • Hub  section  détails contexte 21-sept.-12 8 points des Guidelines ModernUI expliqués 9
  • 10. L’AppBar • Regroupe les commandes • Ne plus afficher de commandes sur les pages • Commandes en bas, navigation en haut 21-sept.-12 8 points des Guidelines ModernUI expliqués 10
  • 11. Les charmes • Interactions entre l’application et le monde • Utilisation des contrats • Recherche • Partage • Impression • Paramètres 21-sept.-12 8 points des Guidelines ModernUI expliqués 11
  • 12. Fast & fluid • Une interface qui répond à l’utilisateur • Des animations pour souligner, suggérer, pas pour rendre épileptique • Des surfaces adaptées aux actions 21-sept.-12 8 points des Guidelines ModernUI expliqués 12
  • 13. Eléments standards d’interface • Présentation en grille • Contrôles standardisés : • Bandeaux • Flyouts • FlipView • ListView 21-sept.-12 8 points des Guidelines ModernUI expliqués 13
  • 14. Interactions utilisateur : touch+clavier Sans tralala ni ding ding dong…
  • 15. Touch • Zones « touchables » : attention aux dimensions et aux marges minimum précis à éviter! 21-sept.-12 8 points des Guidelines ModernUI expliqués 15
  • 16. Touch : zones • Interaction • Lecture • Clavier virtuel q w e r t y u i o p ⌫ a s d f g h j k l ‘ Enter • Adapter le contenu, ne pas le cacher z x c v b n m , . ? &1 Ctrl 23 < > ⌨ 21-sept.-12 8 points des Guidelines ModernUI expliqués 16
  • 17. Touch+Clavier • Gestures tactiles avec équivalence à la souris • Retour visuel • Prise en compte d’une action : confirmation immédiate • Changement de couleur / taille • Interactions (survol de la souris, tap...) • Eviter d’utiliser l’appui long (« hold ») pour autre chose que l’affichage d’informations 21-sept.-12 8 points des Guidelines ModernUI expliqués 17
  • 19. Principes de bases • Occuper l’espace • Gérer les modes d’affichage • La taille compte ! 21-sept.-12 8 points des Guidelines ModernUI expliqués 19
  • 20. Occuper l’espace • Tirer parti des dispositions flexibles 21-sept.-12 8 points des Guidelines ModernUI expliqués 20
  • 21. Occuper l’espace • Attention au défilement ok pas bien ! pas bien ! 21-sept.-12 8 points des Guidelines ModernUI expliqués 21
  • 22. Gérer les modes d’affichage • Une tablette ça se retourne ! • Portrait, paysage et la tête à l’envers • Une application ça peut s’épingler 21-sept.-12 8 points des Guidelines ModernUI expliqués 22
  • 23. La taille ça compte ! • S’adapter aux résolutions • Travailler avec du vectoriel ou optimiser les images 21-sept.-12 8 points des Guidelines ModernUI expliqués 23
  • 25. Principes de base • Simplifier et standardiser les interactions • Avec l’écosystème (autres apps) • Avec le système (périphériques) • Interactions avec la machine = Extension • Interactions avec l’écosystème = Contract 21-sept.-12 8 points des Guidelines ModernUI expliqués 25
  • 26. Contrat : Recherche • Utiliser la barre des charmes Search • Uniformiser Share • Rechercher depuis n’importe où Start • Pas de bouton / champ recherche sur la page • Sauf si Devices • Fonctionnalité principale • Trouver dans la page Settings 21-sept.-12 8 points des Guidelines ModernUI expliqués 26
  • 27. Autres contrats • Partage (comme destination ou source) Search • Paramètres Share • Evite la dispersion • FilePicker Start • Unification des sources de fichier (local + cloud) Devices Settings 21-sept.-12 8 points des Guidelines ModernUI expliqués 27
  • 28. Extensions • Rendre votre appli incontournable sur le système Search • Activation sur protocole Share • Association sur extension • Imprimer Start • Travailler en arrière plan (« Background tasks ») Devices Settings 21-sept.-12 8 points des Guidelines ModernUI expliqués 28
  • 29. Quelques mises en garde • Respecter la confidentialité de l’utilisateur • Envoyer des SMS ou utiliser la connexion peut coûter cher à l’utilisateur • La connexion ne fonctionne pas toujours 21-sept.-12 8 points des Guidelines ModernUI expliqués 29
  • 30. Tuiles, badges et notifications Elle est fraîche ma tuile, elle est fraîche !
  • 31. Principes de base • La tuile est plus que le raccourci vers l’application • Tuile principale • Tuile secondaire = une sous-partie de l’application • La notification, un boomerang vers l’application • Mise à jour locale ou distante • Attention à ne pas saturer l’utilisateur ! 21-sept.-12 8 points des Guidelines ModernUI expliqués 31
  • 32. Contraintes sur la tuile • Une information pas à jour et c’est la tuile ! • Attention au contenu • Une tuile secondaire n’est pas un simple raccourci • Deux formats disponibles (carré et large) • Le large est réservée aux tuiles animées 21-sept.-12 8 points des Guidelines ModernUI expliqués 32
  • 33. Contraintes sur les badges • Un pictogramme simple • Numérique ou symbolique (palette réduite) • Doit être significatif 21-sept.-12 8 points des Guidelines ModernUI expliqués 33
  • 34. Contraintes sur les notifications • Apparaît comme un « toast » • N’en faites pas des tartines • Sur souscription de l’utilisateur • Notifications importantes (faible volume, grand intérêt) • A éviter lorsque l’application est en premier plan • Ca n’est pas un moyen fiable de prévenir l’utilisateur 21-sept.-12 8 points des Guidelines ModernUI expliqués 34
  • 35. L’écran de verrouillage • L’utilisateur choisit le contenu • Le contenu est celui du badge et/ou de la tuile • Accorde des privilèges à l’application 21-sept.-12 8 points des Guidelines ModernUI expliqués 35
  • 36. Quizz ! Il y a deux jours : La voiture Trucmuche, une Une météorite s’est voiture qu’elle est bien! écrasée : kaboom ! MonAppli MonAppli PAS BIEN Ca dépend PAS BIEN 21-sept.-12 8 points des Guidelines ModernUI expliqués 36
  • 38. AppBar • Navigation en haut, commandes en bas • Groupe les commandes • Non contextuelles : à gauche • Contextuelles : à droite • Utiliser des flyouts pour compléter lorsque trop de commandes • Ne pas utiliser pour les commandes essentielles 21-sept.-12 8 points des Guidelines ModernUI expliqués 38
  • 39. Progression • ProgressRing • Indéterminé et modal • ProgressBar • Style « déterminé » : avancement prévisible • Style « indéterminé » • Style déterminé • Eviter les variations brutales ou étranges (les fameuses « minutes » Windows) • Style indéterminé • Griser les boutons associés • Bien positionner le contrôle, et afficher du texte 21-sept.-12 8 points des Guidelines ModernUI expliqués 39
  • 40. Flyouts et boîtes de dialogues • MessageDialog • information urgente, erreur ou question bloquante • à éviter pour des erreurs locales • Flyout • à l’initiative de l’utilisateur • à éviter si UI trop chargée 21-sept.-12 8 points des Guidelines ModernUI expliqués 40
  • 41. Remonter une erreur : choisir la bonne surface • Erreur non-critique et locale  texte en ligne • Erreur non-critique globale  texte en haut de la page • Erreur importante  bandeau d’avertissement • Laisse la possibilité d’interagir avec l’erreur • Erreur fatale  boîte de dialogue • L’utilisateur ne peut pas continuer sans interagir 21-sept.-12 8 points des Guidelines ModernUI expliqués 41
  • 42. En vrac … • FlipView • Ne pas utiliser pour de grosses collections • Collection grosse = récapitulatif • Semantic Zoom • Ne pas utiliser pour changer de contexte 21-sept.-12 8 points des Guidelines ModernUI expliqués 42
  • 43. Quizz ! utilisateur moi utilisateur moi mot de passe ******* mot de passe ******* Connecter Connecter BIEN PAS BIEN 21-sept.-12 8 points des Guidelines ModernUI expliqués 43
  • 44. Quizz ! (2) Vous avez ajouté cette série à votre profil Vous avez ajouté cette série à votre profil OK 21-sept.-12 8 points des Guidelines ModernUI expliqués 44
  • 45. La tête dans les nuages Vers l’infini et au-delà !
  • 46. Exploiter le nuage • Configurer une fois, profiter partout • Propager les paramètres • Oui mais pas tous… • Exploiter le Single Sign-On • Attention à la connexion utilisateur 21-sept.-12 8 points des Guidelines ModernUI expliqués 46
  • 48. L’écran d’accueil • Souhaite la bienvenue à l’utilisateur • Ne pas faire trop attendre l’utilisateur • Une image statique mais… • Peut être couplé à un écran complémentaire animé 21-sept.-12 8 points des Guidelines ModernUI expliqués 48
  • 49. La gestion d’états • Sauver régulièrement l’état • Sauver lorsque l’application est suspendue • Restaurer l’état lorsque l’utilisateur relance l’application • Rafraichir le contenu si besoin • Démarrage normal si le contenu est obsolète • L’application doit marcher sans connection 21-sept.-12 8 points des Guidelines ModernUI expliqués 49
  • 50. Divers trucs & astuces • Ne pas négliger les paramètres de confidentialités • Ne pas oublier l’aide • Localiser l’application • Implémenter l’accessibilité totalement ou ne pas l’implémenter 21-sept.-12 8 points des Guidelines ModernUI expliqués 50
  • 51. Mais qui c’est qu’a tout cassé ? • Les règles, sont faites pour être contournées • Oui mais pas toutes 21-sept.-12 8 points des Guidelines ModernUI expliqués 51
  • 52. Conclusion • ModernUI, une identité propre avec laquelle jouer • Des guidelines non pas pour brider le développeur… • …mais pour rassurer l’utilisateur • Prise en main plus rapide des applications • Ne pas oublier les différents « form factors » 21-sept.-12 8 points des Guidelines ModernUI expliqués 52
  • 53. Aller plus loin • UX Guidelines for Windows Store Apps : http://bit.ly/win8guidelines 21-sept.-12 8 points des Guidelines ModernUI expliqués 53
  • 54. Questions ? • Retrouvez nous sur nos blogs: • Retrouvez nous sur Twitter: • http://cyril.cathala.org/blog • @CyrilCathala • http://www.natmarchand.fr • @NatMarchand • http://blog.soat.fr • @SoatExpertsNET 21-sept.-12 8 points des Guidelines ModernUI expliqués 54
  • 55. Réponses 1. Harry Potter 2. Gunther 3. Le fou qui repeint son plafond 4. Nom latin du charme 5. Ordralfabétix 6. Gendarmerie nationale 7. Toy Story 8. Rébus « divers »