Post on 26-May-2015
description
De la page blanche
a votre application
Windows 8
nathalie.belval@soat.fr
@nbelval
Nathalie BELVAL
Experte C#/XAML – Soat
WPF
Silverlight
Kinect
Windows Phone
Windows 8
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
A LA DÉCOUVERTE DE
WINDOWS 8
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
Les Chiffres
Windows 8 : sortie le 26 octobre 2012
0
20000
40000
60000
80000
100000
Nombre d'applications gratuites
payantes
0 20 40
01/10/2012
01/11/2012
Nombre de licences
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
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.)
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
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
LES POINTS CLES
POUR IMAGAGINER ET
CONCEVOIR VOTRE
APPLICATION
Les différents cas
Application existante
Version mobile Windows
Phone
Version mobile autre OS
Site web existant
Nouvelle application
1
2
3
difficulté
Exemple Voyages SNCF
iOS
30/11/2012
13
Exemple Voyages SNCF
Android
30/11/2012
14
Exemple Voyages SNCF
Windows
30/11/2012
15
Comment imaginer et concevoir
votre application ?
❶ Identifier les points
forts de votre
application.
❷ Identifier les activités
de l’utilisateur à
prendre en charge
❸ Identifier les
fonctionnalités à
inclure
❹Concevoir l’interface
utilisateur de votre
application (papier)
❺Réaliser un prototype
fonctionnel et valider
votre conception
❻Développer
➐Faire une bonne
première impression
Points forts de l’application
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.
1
Activités de l’utilisateur à prendre
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
2
Activités de l’utilisateur à prendre
en charge
Exemple : application VSC sur mobile
■ Rechercher un billet
■ Voir les tarifs / horaires
■ Réserver un billet
■ Voir ses billets / historique
2
Fonctionnalités à inclure
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
3
Concevoir l’interface utilisateur
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.
4
Concevoir l’interface utilisateur
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
4
Réaliser un prototype et valider
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
5
Exemple : VSC Horaire / résa
De WindowsPhone : on retrouve les menus
D’un autre OS : la navigation change
Faire une bonne première
impression
Vignette & notifications
Écran de démarrage
Premier démarrage
Page d’accueil
Identité visuelle
6
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 »
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
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
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.
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
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.
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.
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
Type de
navigation
❶Navigation par mouvement de balayage à partir du bord
❷Navigation avec des menus d’en-têtes et des étiquettes de section
❸Navigation avec des filtres, pivots, tris et vues
1
2
3
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.
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
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
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
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
Contrôles
Commandes
Navigation (semantic zoom, flipView)
Interface utilisateur temporaire
Images
Entrée de texte
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
ETUDE DE CAS
CONCEPTION D’UNE
APPLICATION DEPUIS UN
SITE WEB
Identifier points forts, activités et
fonctionnalités de l’application
3
Fonctionnalités
Recherche du contenu au sein de l’application
Partage des infos, photos et vidéos de l’application
Semantic zoom
FlipView
2
Activités de
l’utilisateur Affichage des news
de l’évènement
Présentation de
l’évènement
(voiture, circuits,
règlement,
partenaires, etc.)
Résultats
Galerie Médias /
TV
1
Objet
Promotion de
l’évènement Audi
Endurance
Experience
Points forts
Mise en avant de
l’évènement et de
la marque par le
visuel
Points forts de l’application
Visuel 1 WEC
Après Silverstone, Audi est sûre
de remporter le WEC
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.
actualités
Une mise à l'épreuve des
technologies de demain, une
expérience vécue de
l'intérieur
La voiture
PHOTOS
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 …
DESCRIPTION
Activités de l’utilisateur 2
Fonctionnalités
FlipView 3
LE CASTELLET
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é.
Malgré ces nombreuses difficultés, ce
circuit reste aujourd’hui un exemple en
matière de sécurité.
DESCRIPTION
Pays France
Longueur du
circuit 5,791 km
Site officiel www.circuitpaulri
card.com
Les circuits -
Fonctionnalités
Semantic zoom 3
TV
FINALE LA TEAM
Fonctionnalités
SnapView & Contracts 3
TV LA TEAM
ROOMBA PET TV
ROOMBA PET TV
FINALE
1 2
3
SnapView
Contrat de
recherche
Contrat de
partage
Conception de l’interface
Moderne, Disposition & identité marque
WEC
Après Silverstone, Audi est
sûre de remporter le WEC
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.
actualités
Une mise à l'épreuve des
technologies de demain, une
expérience vécue de l'intérieur
4
Conception de l’interface
Navigation
PLAN DE L’APP • HOME : Les actualités
– WEC
– DTM
– GT Tour
• Présentation des Audi – Photos
– Description
– Medias
• Les circuits – Le Castellet
– Le Mans
– Magny-cours
– Nogaro
• Le règlement
• Le classement
• Audi TV
4 PLAN DU SITE • Audi et la compétition
• Les actualités – WEC
– DTM
– GT Tour
• Audi endurance experience – Présentation des Audi
– Les partenaires
– Les circuits • Le Castellet
• Le Mans
• Magny-cours
• Nogaro
– Le règlement
– Le classement
– Les actus
• Audi TV
Conception de l’interface
Navigation
Barre de
navigation pour
les pages de
détail
Menu sous
forme de
compteur de
voiture pour la
home page
La voiture
PHOTOS
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 …
DESCRIPTION
4
Réalisation du prototype
Maquettage sur PowerPoint
5
LES OUTILS POUR BIEN
DÉMARRER
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
Outils pour le prototypage
Powerpoint
Blend avec Sketchflow, pour bientôt !
Bloc note Windows 8 (made by Soat),
bientôt disponible
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/
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
Conclusion
Application existante
Version mobile Windows Phone
Version mobile autre OS
Site web existant
Nouvelle application
A VOUS DE JOUER !
DÉMO
SMARTSHOPPING
SMART SHOPPING UNE ENVIE D’ACHETER UN PRODUIT ? RECHERCHEZ CE DERNIER DANS L’APPLICATION QUI VOUS DIRA OÙ VOUS LE PROCURER AU MEILLEUR PRIX.
DES QUESTIONS ?