Vous démarrez sur Windows 8 et vous ne savez pas par où commencer ? Vous souhaitez mettre vos idées en application ? Nathalie Belval, experte Soat, vous a concocté une présentation pour vous permettre de comprendre les interfaces Microsoft Design Langage par un tour d'horizon sur les guidelines orientées UI et de découvrir les spécificités de Windows 8 pour les mettre à profil dans vos applications.
Pour bien démarrer votre projet, Nathalie vous explique comment identifier le contenu à mettre en avant (pour une nouvelle application, une migration d'un site web ou d'une application mobile existante) et découvrir les outils à votre disposition afin de prototyper votre application (SketchFlow et Templates dans PowerPoint).
Et enfin, Nathalie terminera sa présentation par le développement de l'application avec quelques astuces pour être productif dans le développement de vos interfaces modernes grâce à Expression Blend !
MongoDB : la base NoSQL qui réinvente la gestion de données
Page blanchea lapplicationwindows8
1. De la page blanche
a votre application
Windows 8
2. Mail
nathalie.belval@soat.fr
Twitter
@nbelval
WPF
Silverlight
Nathalie BELVAL
Kinect
Experte C#/XAML – Soat
Windows Phone
Windows 8
3. Plan
A la découverte de Windows 8
Les points clés pour imaginer et concevoir
son application
Recommandations ou guidelines
Etude de cas (site web vers Windows 8)
Les outils pour concevoir, prototyper et
développer
Légende je suis un mot clé important
5. Introduction
Windows c’est ?
Depuis 1990
90% de PC dans le monde
450 millions de Windows 7
500 millions d’ordinateurs compatibles
Windows 8
1,25 milliards d’utilisateurs dans le monde
6. Les Chiffres
Windows 8 : sortie le 26 octobre 2012
Nombre d'applications
gratuites
100000 payantes
80000
60000 Nombre de licences
40000 01/11/2012
20000
0 01/10/2012
0 20 40
7. Général
Ecran d’accueil « Windows Phone » like
regroupant un ensemble de vignettes ou
tuiles applicatives
2 Menus principaux
■Droite : Barre de charms ou talissement
■Gauche : Barre pour changer d’application
+Les barres d’application lorsque vous
lancez une application
8. Menus
La barre de charms qui permet à l’utilisateur
de :
■ rechercher (une application, un fichier, dans les
paramètres, dans une application)
■ partager du contenu entre différentes
applications
■ revenir sur l’écran d’accueil
■ accéder aux différents périphériques
■ accéder aux paramètres (panneau de
configuration , configuration wifi, luminosité, etc.)
9. Barre d’application
Dans une application, il est possible d’avoir
accès à deux barre de navigation
supplémentaires :
■ haut : barre de navigation de l’application
■ bas : concerne plutôt les commandes / actions
possibles dans l’application
10. Les spécificités de Windows 8
Snapview permettant
à l’utilisateur d’utiliser
deux application en
même temps
Semantic zoom, FlipView, etc.
pour mettre à profil les
intéractions tactile
Contrats : deux applications ayant implémenté le
même contrat peuvent fonctionner ensemble
12. Les différents cas difficulté
Application existante 1
Version mobile Windows
Phone
2
Version mobile autre OS
Site web existant
3
Nouvelle application
16. Comment imaginer et concevoir
votre application ?
❶Identifier les points ❹Concevoir l’interface
forts de votre utilisateur de votre
application. application (papier)
❷Identifier les activités ❺Réaliser un prototype
de l’utilisateur à fonctionnel et valider
prendre en charge votre conception
❸Identifier les ❻Développer
fonctionnalités à ➐Faire une bonne
inclure première impression
17. Points forts de l’application
1
Pour commencer, se poser les bonnes questions :
Quel est l’objet de votre application ?
Quelles sont les points forts de votre
application ?
Exemple : application VSC sur mobile
Objet : Rechercher un horaire et / ou réserver son billet de
train
Points fort : Mon application est excellente pour acheter
un billet de train.
18. Activités de l’utilisateur à prendre
2 en charge
Un flux est un ensemble d’interactions opérées par les
utilisateurs de votre application dans des buts précis.
Chaque flux doit être étroitement lié à votre liste de points
forts et doit aider les utilisateurs à réaliser le scénario unique
que vous voulez valoriser.
Présentez le flux : qu’est-ce qui arrive en premier, et
ensuite ?
Détaillez le flux : comment les utilisateurs doivent-ils
progresser au niveau de l’interface pour réaliser le flux ?
Exemple : application VSC sur mobile
■ Rechercher un billet de train
■ Voir les tarifs / horaires d’un billet
■ Réserver un billet
■ Voir ses billets / historique
19. Activités de l’utilisateur à prendre
2 en charge
Exemple : application VSC sur mobile
■ Rechercher un billet
■ Voir les tarifs / horaires
■ Réserver un billet
■ Voir ses billets / historique
20. Fonctionnalités à inclure
3
Recherchez les fonctionnalités de la plateforme
et comment vous pouvez les utiliser.
Diagrammes d’association : mettez en relation
vos flux et les fonctionnalités.
Prototype papier : testez les fonctionnalités
pour vérifier qu’elles répondent à vos besoins.
Exemple : application VSC sur mobile
Fonctionnalité à inclure, contrat de recherche
21. Concevoir l’interface utilisateur
4 de votre application
Comment organiser le contenu de
l’interface utilisateur ?
De quelle interface utilisateur et de quelles
commandes avez-vous besoin ?
Décidez comment disposez vos pages dans
l’application.
22. Concevoir l’interface utilisateur
4 de votre application
Exemple : application VSC sur mobile
Définir les niveaux de détail (3) :
■ page d’accueil, critères de recherche
du billet
■ page de résultat
◾Détail d’un billet
■ page de réservation
Réfléchir à la disposition des
éléments
23. Réaliser un prototype et valider
5 votre conception
Utilisez les recommandations en matière
d’expérience utilisateur
Validez votre conception ou votre prototype
par rapport aux impressions des utilisateurs
Utilisez le kit de certification des
applications Windows
24. Exemple : VSC Horaire / résa
De WindowsPhone : on retrouve les menus
D’un autre OS : la navigation change
25. Faire une bonne première
6 impression
Vignette & notifications
Écran de démarrage
Premier démarrage
Page d’accueil
Identité visuelle
26. RECOMMANDATIONS
EXPÉRIENCE UTILISATEUR
« Les applications Windows Store réussies ont
en commun un ensemble de caractéristiques
qui offrent à l’utilisateur une expérience
cohérente, engageante et convaincante »
27. Expérience utilisateur (UX)
Ensemble de caractéristiques à mettre en place dans votre
application :
Créer votre interface (UI) :
■ Microsoft Design Language
■ Disposition
■ Navigation
Interaction tactile
SnapView
Contrats et fonctionnalités
Vignettes et notifications
Contrôles
Itinérance dans le nuage
28. Qu’est-ce que le Microsoft Design
Language (anciennement appelé Metro)
Charte visuelle de Microsoft
Impression de confort d’environnement
■Ne pas perdre l’utilisateur
■Mettre en avant le contenu
5 Principes fondamentaux :
Peaufiner les détails
En faire plus avec moins
Rapidité et fluidité
Faire preuve d’authenticité numérique
Gagner en équipe
29. Disposition
Réfléchissez à la manière dont la disposition de l’interface
utilisateur affecte la navigation des utilisateurs dans votre
application.
Commandes : placez les commandes de façon cohérente
pour donner confiance et faciliter l’interaction utilisateur.
Conception des pages : utilisez la grille pour élaborer la
disposition des pages de l’application de manière à
respecter la silhouette Windows 8.
30. Navigation
L’utilisation des modèles de navigation appropriés
vous aide à limiter les contrôles qui sont
constamment affichés à l’écran, par exemple les
onglets. Cela permet aux utilisateurs de se concentrer
sur le contenu actuel.
3 modèles de navigation :
Système hiérarchique
Système hub
Système plat
31. Navigation
Système Hub
Pages Hub
Les pages Hub représentent les
points d’entrée de l’utilisateur dans
l’application.
Pages Section
Les pages Section représentent le
second niveau d’une application.
Pages Détail
Les pages Détail représentent le
troisième niveau d’une application.
32. Navigation
Système plat
L’essence du système plat est la séparation du contenu
en pages distinctes.
Barre d’application supérieure
La barre de navigation supérieure est l’outil
idéal pour basculer entre plusieurs
contextes.
Basculement
Contrairement au système hiérarchique, en règle
générale, il n’y a pas de bouton de retour
persistant ni de pile de navigation dans le
système plat.
33. Comment naviguer ?
❶ En-tête et bouton
de retour
❷ Page Hub
❸ Sections de contenu
ou catégories
❹ Zoom sémantique : navigation
entre les niveaux dans une
hiérarchie
❺ Barre d’application supérieure
❻ Menu d’en-têtes
➐ Lien vers l’accueil
❽ Barre d’application inférieure
➒ Afficher/Trier/Filtrer
❿ Bord
34. Type de
navigation 1
2
❶Navigation par
mouvement de
balayage à partir du
bord
❷Navigation avec des 3
menus d’en-têtes et
des étiquettes de
section
❸Navigation avec des
filtres, pivots, tris et
vues
35. Peaufiner les détails
Animations : avec des animations utiles et bien faites, vos
applications prennent vie et donnent l’impression d’un
travail soigné. Aidez les utilisateurs à comprendre les
changements de contexte et liez les expériences avec des
transitions visuelles.
Typographie : Le langage de conception Microsoft repose
sur une typographie claire et attrayante qui permet aux
utilisateurs de comprendre la hiérarchie du contenu. Utilisez
la typographie proposée à la place des lignes et des boîtes
traditionnelles pour établir la structure et la hiérarchie de
votre contenu.
36. Intéractions tactile
Ciblage tactile
Retour visuel
Zoom sémantique
Balayage et balayage latéral
Zoom optique et redimensionnement
Scroll
Rotation
Sélection de texte et d’images
Interactions avec la souris
Interaction du clavier
Interaction du stylo et du stylet
37. SnapView et mise à l’échelle
Dispositions flexibles
Affichages snapView et filledView
Mise à l’échelle en fonction des écrans
Mise à l’échelle en fonction de la densité
des pixels
Redimensionnement
38. Contrats et fonctionnalités
Rechercher
Partage et échange de données
Sélecteurs de fichiers
Géolocalisation
Détection de périphérique
Boîte de dialogue d’impression
Mouvements de proximité
Multimédia
39. Vignettes et notifications
Vignettes d’application et vignettes secondaires
■inviter et encourager les utilisateurs à utiliser votre
application
■maintenir votre application à jour et d’actualité
■mettre en avant du contenu
■lancer votre application directement sur une expérience
spécifique
Notifications :
■aidez vos utilisateurs à identifier le contenu intéressant
■Différents types de notifications
◾Toast
◾Push
◾Notifications périodiques
◾Notifications planifiées
41. Itinérance dans le nuage
Itinérance : votre application doit être facile à
utiliser partout,
Paramètres : regroupez tous les paramètres de
votre application sur une même interface
utilisateur,
Authentification unique : assurez-vous que les
utilisateurs peuvent se connecter avec leur
compte Microsoft et bénéficier d’une expérience
cohérente sur tous les appareils Windows 8 /
Windows Phone
43. Identifier points forts, activités et
fonctionnalités de l’application
Objet Activités de Fonctionnalités
Promotion de l’utilisateur Recherche du
l’évènement Audi Affichage des news
contenu au sein
de l’évènement de l’application
Endurance
Experience Présentation de Partage des
l’évènement infos, photos et
Points forts (voiture, circuits, vidéos de
Mise en avant de règlement, l’application
l’évènement et de partenaires, etc.) Semantic zoom
la marque par le Résultats
FlipView
visuel Galerie Médias /
TV
1 2 3
44. actualités
Points forts de l’application
1 Visueldemain, une
Une mise à l'épreuve des
technologies de
WEC
Après Silverstone, Audi est sûre
expérience vécue de de remporter le WEC
l'intérieur 27 août 2012
Victorieuse à Sebring, à Spa, au Mans, et maintenant à
Silverstone, Audi s’assure la victoire au Championnat du
monde d’endurance 2012. Mais Toyota s’impose en
brillant adversaire.
Doublé hybride, triplé Audi
17 juin 2012
Trois Audi aux trois premières places : l'édition 2012 des
24 Heures du Mans vient consacrer la suprématie de la
marque aux anneaux dans le monde de l'endurance.
45. Activités de l’utilisateur
2
La voiture
PHOTOS DESCRIPTION
La marque aux quatre
anneaux a choisi l’Audi A1
1.4 TFSI 185 ch pour les
courses de qualifications et
la finale des Audi
endurance experience
(A2E), la course créée par
Audi pour ses clients
amateurs de compétition.
Ce quatre-cylindres est un
véritable concentré de
technologie. En effet, il allie
turbo, compresseur et
injection directe, tout en
étant couplé à la boîte S
tronic à sept rapports.
Si la motorisation de l’Audi
A1 1.4 TFSI 185 ch …
46. Fonctionnalités
3 FlipView
Les circuits - LE CASTELLET
DESCRIPTION
Ce circuit historique a été réaménagé de
façon high tech. La piste est très large,
technique, rapide, et regroupe toutes les
difficultés imaginables. Elle autorise de
fortes vitesses de pointe et le très long
virage du Beausset oblige à rester très
concentré.
Pays France
Malgré ces nombreuses difficultés, ce
Longueur du circuit reste aujourd’hui un exemple en
5,791 km matière de sécurité.
circuit
www.circuitpaulri
Site officiel
card.com
48. Fonctionnalités
3 SnapView & Contracts
SnapView
1
ROOMBA PET
LA TEAM
2 Contrat de
TV
recherche
TV
Contrat de
partage
ROOMBA PET
TV
FINALE
3
49. Conception de l’interface
4 Moderne, Disposition & identité marque
actualités
Une mise à l'épreuve des WEC
technologies de demain, une Après Silverstone, Audi est
sûre de remporter le WEC
expérience vécue de l'intérieur 27 août 2012
Victorieuse à Sebring, à Spa, au Mans,
et maintenant à Silverstone, Audi
s’assure la victoire au Championnat du
monde d’endurance 2012. Mais Toyota
s’impose en brillant adversaire.
Doublé hybride, triplé
Audi
17 juin 2012
Trois Audi aux trois premières places :
l'édition 2012 des 24 Heures du Mans
vient consacrer la suprématie de la
marque aux anneaux dans le monde de
l'endurance.
50. Conception de l’interface
4 Navigation
PLAN DU SITE PLAN DE L’APP
• Audi et la compétition • HOME : Les actualités
• Les actualités – WEC
– WEC – DTM
– DTM – GT Tour
– GT Tour • Présentation des Audi
• Audi endurance experience – Photos
– Présentation des Audi – Description
– Les partenaires – Medias
– Les circuits • Les circuits
• Le Castellet – Le Castellet
• Le Mans – Le Mans
• Magny-cours – Magny-cours
• Nogaro – Nogaro
– Le règlement
– Le classement
• Le règlement
– Les actus • Le classement
• Audi TV • Audi TV
51. Conception de l’interface
4 Navigation
La voiture
Barre de PHOTOS DESCR
navigation pour
La marque
anneaux a
1.4 TFSI 185
courses de
les pages de la finale de
endurance
(A2E), la co
détail
Audi pour s
amateurs d
Ce quatre-c
véritable co
Menu sous
technologie
turbo, com
injection dir
étant coupl
forme de
tronic à sep
Si la motor
A1 1.4 TFSI
compteur de
voiture pour la
home page
54. Outils pour la conception
Ce power point, disponible sur SlideShare
Mémo sur les guidelines UI : site soat
Design.windows.com
Pour aller plus loin, guidelines détaillées au
format PDF:
http://go.microsoft.com/fwlink/p/?linkid=258743
55. Outils pour le prototypage
Powerpoint
Blend avec Sketchflow, pour bientôt !
Bloc note Windows 8 (made by Soat),
bientôt disponible
56. Prototyper avec PowerPoint
Installer Visual Studio 2012 sur
votre PC
Lancez PowerPoint
…un nouveau menu
« Storyboarding » apparaît:
Cliquez sur « Storyboard
Shapes »
Voici des formes pour Windows
8 et Windows Phone
http://www.url.com/
57. Outils pour le développement
Visual Studio 2012
■ choisissez votre langage préféré :
◾VB/C++/C# et XAML
◾HTML et JavaScript
■ Template de projet, permettant d’accélérer le
développement de vos applications.
Expression Blend for VisualStudio
58. Conclusion
Application existante
Version mobile Windows Phone
Version mobile autre OS
Site web existant
Nouvelle application
A VOUS DE JOUER !