8 points des guidelines ModernUI expliquésComprendre pour mieux épater…
13 avr. 2023 8 points des Guidelines ModernUI expliqués 2
Intervenants
Cyril Cathala
• So@t Expert C#/XAML• Showrizo pour Windows 8
(vainqueur DevKings)• Silverlight France• Coach Windows Phone• Communauté Windows Phone• http://cyril.cathala.org/blog• @CyrilCathala
Nathanael Marchand
• So@t Expert C#/XAML• Showrizo pour Windows 8
(vainqueur DevKings)• Silverlight France• Rédacteur/modérateur
developpez.com• http://www.natmarchand.fr• @NatMarchand
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 4
Introduction300+ pages de guidelines…
…le résumé, c’est parti !
13 avr. 2023 8 points des Guidelines ModernUI expliqués 5
Jeu concours
Chaque sous-titre de section contient une référence …
Trouve-les toutes, et tente de gagner un super goodies !
+
Microsoft design styleaka ModernUI aka celui-dont-on-ne-doit-pas-prononcer-le-nom
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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)
13 avr. 2023 8 points des Guidelines ModernUI expliqués 9
Navigation
Hiérarchique
• Utilisée dans la plupart des cas• Navigation par les données• Hub section détails
A plat
• Contenus indépendants• Adapté aux changements de
contexte
13 avr. 2023 8 points des Guidelines ModernUI expliqués 10
L’AppBar
• Regroupe les commandes• Ne plus afficher de commandes sur les pages• Commandes en bas, navigation en haut
13 avr. 2023 8 points des Guidelines ModernUI expliqués 11
Les charmes
• Interactions entre l’application et le monde• Utilisation des contrats• Recherche• Partage• Impression• Paramètres
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 13
Eléments standards d’interface
• Présentation en grille• Contrôles standardisés :• Bandeaux• Flyouts• FlipView• ListView
Interactions utilisateur : touch+clavierSans tralala ni ding ding dong…
13 avr. 2023 8 points des Guidelines ModernUI expliqués 15
Touch
• Zones « touchables » : attention aux dimensions et aux marges
minimum précis à éviter!
13 avr. 2023 8 points des Guidelines ModernUI expliqués 16
Touch : zones
• Interaction • Lecture
• Clavier virtuel• Adapter le contenu, ne pas le cacher
a
w e r t y u i o p ⌫
s fd g h j k l ‘ Enter
q
z x c v b n m ., ?
Ctrl&123 < > ⌨
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
Mise à l’échelleAccrochez-vous au pinceau…
13 avr. 2023 8 points des Guidelines ModernUI expliqués 19
Principes de bases
• Occuper l’espace• Gérer les modes d’affichage• La taille compte !
13 avr. 2023 8 points des Guidelines ModernUI expliqués 20
Occuper l’espace
• Tirer parti des dispositions flexibles
13 avr. 2023 8 points des Guidelines ModernUI expliqués 21
Occuper l’espace
• Attention au défilement
ok pas bien !pas bien !
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 23
La taille ça compte !
• S’adapter aux résolutions• Travailler avec du vectoriel ou optimiser les images
Contrats, charmes et fonctionnalitéscarpinus betulaceae
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 26
Contrat : Recherche
• Utiliser la barre des charmes• Uniformiser• Rechercher depuis n’importe où
• Pas de bouton / champ recherche sur la page• Sauf si • Fonctionnalité principale• Trouver dans la page
Search
Share
Start
Devices
Settings
13 avr. 2023 8 points des Guidelines ModernUI expliqués 27
Autres contrats
• Partage (comme destination ou source)• Paramètres • Evite la dispersion
• FilePicker• Unification des sources de fichier (local + cloud)
Search
Share
Start
Devices
Settings
13 avr. 2023 8 points des Guidelines ModernUI expliqués 28
Extensions
• Rendre votre appli incontournable sur le système• Activation sur protocole• Association sur extension
• Imprimer• Travailler en arrière plan (« Background tasks »)
Search
Share
Start
Devices
Settings
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
Tuiles, badges et notificationsElle est fraîche ma tuile, elle est fraîche !
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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 !
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 33
Contraintes sur les badges
• Un pictogramme simple• Numérique ou symbolique (palette réduite)• Doit être significatif
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 36
Quizz !
La voiture Trucmuche, une voiture qu’elle est
bien!
MonAppli
Ca dépendPAS BIEN
MonAppli
Il y a deux jours :Une météorite s’estécrasée : kaboom !
PAS BIEN
ContrôlesVos papiers s’il vous plaît
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 42
En vrac …
• FlipView • Ne pas utiliser pour de grosses collections• Collection grosse = récapitulatif
• Semantic Zoom • Ne pas utiliser pour changer de contexte
13 avr. 2023 8 points des Guidelines ModernUI expliqués 43
Quizz !
moi
*******
utilisateur
mot de passe
BIEN PAS BIEN
Connecter
moi
*******
utilisateur
mot de passe
Connecter
13 avr. 2023 8 points des Guidelines ModernUI expliqués 44
Quizz ! (2)
Vous avez ajouté cette série à votre profil
OK
Vous avez ajouté cette série à votre profil
La tête dans les nuagesVers l’infini et au-delà !
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
Fourre-toutaka
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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é
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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
13 avr. 2023 8 points des Guidelines ModernUI expliqués 51
Mais qui c’est qu’a tout cassé ?
• Les règles, sont faites pour être contournées• Oui mais pas toutes
13 avr. 2023 8 points des Guidelines ModernUI expliqués 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 »
13 avr. 2023 8 points des Guidelines ModernUI expliqués 53
Aller plus loin
• UX Guidelines for Windows Store Apps :
http://bit.ly/win8guidelines
13 avr. 2023 8 points des Guidelines ModernUI expliqués 54
Questions ?
• Retrouvez nous sur nos blogs:• http://cyril.cathala.org/blog• http://www.natmarchand.fr• http://blog.soat.fr
• Retrouvez nous sur Twitter:• @CyrilCathala• @NatMarchand• @SoatExpertsNET
Réponses
1. Harry Potter2. Gunther3. Le fou qui repeint son plafond4. Nom latin du charme5. Ordralfabétix6. Gendarmerie nationale7. Toy Story8. Rébus « divers »