8 points des guidelines "modernui" expliqués

55
8 points des guidelines ModernUI expliqués Comprendre pour mieux épater…

Upload: soat

Post on 26-Jun-2015

1.818 views

Category:

Documents


0 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: 8 points des guidelines "ModernUI" expliqués

8 points des guidelines ModernUI expliquésComprendre pour mieux épater…

Page 2: 8 points des guidelines "ModernUI" expliqués

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

Page 3: 8 points des guidelines "ModernUI" expliqués

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

Page 4: 8 points des guidelines "ModernUI" expliqués

13 avr. 2023 8 points des Guidelines ModernUI expliqués 4

Introduction300+ pages de guidelines…

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

Page 5: 8 points des guidelines "ModernUI" expliqués

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 !

+

Page 6: 8 points des guidelines "ModernUI" expliqués

Microsoft design styleaka ModernUI aka celui-dont-on-ne-doit-pas-prononcer-le-nom

Page 7: 8 points des guidelines "ModernUI" expliqués

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

Page 8: 8 points des guidelines "ModernUI" expliqués

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)

Page 9: 8 points des guidelines "ModernUI" expliqués

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

Page 10: 8 points des guidelines "ModernUI" expliqués

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

Page 11: 8 points des guidelines "ModernUI" expliqués

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

Page 12: 8 points des guidelines "ModernUI" expliqués

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

Page 13: 8 points des guidelines "ModernUI" expliqués

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

Page 14: 8 points des guidelines "ModernUI" expliqués

Interactions utilisateur : touch+clavierSans tralala ni ding ding dong…

Page 15: 8 points des guidelines "ModernUI" expliqués

13 avr. 2023 8 points des Guidelines ModernUI expliqués 15

Touch

• Zones « touchables » : attention aux dimensions et aux marges

minimum précis à éviter!

Page 16: 8 points des guidelines "ModernUI" expliqués

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 < > ⌨

Page 17: 8 points des guidelines "ModernUI" expliqués

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

Page 18: 8 points des guidelines "ModernUI" expliqués

Mise à l’échelleAccrochez-vous au pinceau…

Page 19: 8 points des guidelines "ModernUI" expliqués

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 !

Page 20: 8 points des guidelines "ModernUI" expliqués

13 avr. 2023 8 points des Guidelines ModernUI expliqués 20

Occuper l’espace

• Tirer parti des dispositions flexibles

Page 21: 8 points des guidelines "ModernUI" expliqués

13 avr. 2023 8 points des Guidelines ModernUI expliqués 21

Occuper l’espace

• Attention au défilement

ok pas bien !pas bien !

Page 22: 8 points des guidelines "ModernUI" expliqués

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

Page 23: 8 points des guidelines "ModernUI" expliqués

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

Page 24: 8 points des guidelines "ModernUI" expliqués

Contrats, charmes et fonctionnalitéscarpinus betulaceae

Page 25: 8 points des guidelines "ModernUI" expliqués

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

Page 26: 8 points des guidelines "ModernUI" expliqués

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

Page 27: 8 points des guidelines "ModernUI" expliqués

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

Page 28: 8 points des guidelines "ModernUI" expliqués

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

Page 29: 8 points des guidelines "ModernUI" expliqués

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

Page 30: 8 points des guidelines "ModernUI" expliqués

Tuiles, badges et notificationsElle est fraîche ma tuile, elle est fraîche !

Page 31: 8 points des guidelines "ModernUI" expliqués

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 !

Page 32: 8 points des guidelines "ModernUI" expliqués

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

Page 33: 8 points des guidelines "ModernUI" expliqués

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

Page 34: 8 points des guidelines "ModernUI" expliqués

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

Page 35: 8 points des guidelines "ModernUI" expliqués

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

Page 36: 8 points des guidelines "ModernUI" expliqués

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

Page 37: 8 points des guidelines "ModernUI" expliqués

ContrôlesVos papiers s’il vous plaît

Page 38: 8 points des guidelines "ModernUI" expliqués

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

Page 39: 8 points des guidelines "ModernUI" expliqués

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

Page 40: 8 points des guidelines "ModernUI" expliqués

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

Page 41: 8 points des guidelines "ModernUI" expliqués

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

Page 42: 8 points des guidelines "ModernUI" expliqués

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

Page 43: 8 points des guidelines "ModernUI" expliqués

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

Page 44: 8 points des guidelines "ModernUI" expliqués

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

Page 45: 8 points des guidelines "ModernUI" expliqués

La tête dans les nuagesVers l’infini et au-delà !

Page 46: 8 points des guidelines "ModernUI" expliqués

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

Page 47: 8 points des guidelines "ModernUI" expliqués

Fourre-toutaka

Page 48: 8 points des guidelines "ModernUI" expliqués

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é

Page 49: 8 points des guidelines "ModernUI" expliqués

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

Page 50: 8 points des guidelines "ModernUI" expliqués

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

Page 51: 8 points des guidelines "ModernUI" expliqués

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

Page 52: 8 points des guidelines "ModernUI" expliqués

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 »

Page 53: 8 points des guidelines "ModernUI" expliqués

13 avr. 2023 8 points des Guidelines ModernUI expliqués 53

Aller plus loin

• UX Guidelines for Windows Store Apps :

http://bit.ly/win8guidelines

Page 54: 8 points des guidelines "ModernUI" expliqués

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

Page 55: 8 points des guidelines "ModernUI" expliqués

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 »