De la page blanchea votre applicationWindows 8
Mail                         nathalie.belval@soat.fr                         Twitter                         @nbelval     ...
Plan  A la découverte de Windows 8  Les points clés pour imaginer et concevoir son application  Recommandations ou guideli...
A LA DÉCOUVERTE DEWINDOWS 8
IntroductionWindows c’est ?  Depuis 1990  90% de PC dans le monde  450 millions de Windows 7  500 millions d’ordinateurs c...
Les Chiffres         Windows 8 : sortie le 26 octobre 2012         Nombre dapplications                                   ...
Général  Ecran d’accueil « Windows Phone » like regroupant un ensemble de vignettes ou tuiles applicatives  2 Menus princi...
Menus  La barre de charms qui permet à l’utilisateur de : ■ rechercher (une application, un fichier, dans les  paramètres,...
Barre d’application  Dans une application, il est possible d’avoir accès à deux barre de navigation supplémentaires :  ■ h...
Les spécificités de Windows 8    Snapview permettantà l’utilisateur d’utiliserdeux application enmême temps    Semantic zo...
LES POINTS CLESPOUR IMAGAGINER ETCONCEVOIR VOTREAPPLICATION
Les différents cas             difficulté  Application existante            1     Version mobile Windows   Phone          ...
Exemple Voyages SNCFiOS                       30/11/2012                               13
Exemple Voyages SNCFAndroid                       30/11/2012                               14
Exemple Voyages SNCFWindows                       30/11/2012                               15
Comment imaginer et concevoirvotre application ?❶Identifier les points      ❹Concevoir l’interface forts de votre         ...
Points forts de l’application1Pour commencer, se poser les bonnes questions :   Quel est l’objet de votre application ?   ...
Activités de l’utilisateur à prendre2        en chargeUn flux est un ensemble d’interactions opérées par lesutilisateurs d...
Activités de l’utilisateur à prendre2      en charge    Exemple : application VSC sur mobile                              ...
Fonctionnalités à inclure3     Recherchez les fonctionnalités de la plateforme    et comment vous pouvez les utiliser.    ...
Concevoir l’interface utilisateur4      de votre application      Comment organiser le contenu de    l’interface utilisate...
Concevoir l’interface utilisateur4       de votre application    Exemple : application VSC sur mobile     Définir les nive...
Réaliser un prototype et valider5      votre conception     Utilisez les recommandations en matière    d’expérience utilis...
Exemple : VSC Horaire / résa De WindowsPhone : on retrouve les menus D’un autre OS : la navigation change
Faire une bonne première6     impression    Vignette & notifications    Écran de démarrage    Premier démarrage    Page d’...
RECOMMANDATIONSEXPÉRIENCE UTILISATEUR« Les applications Windows Store réussies onten commun un ensemble de caractéristique...
Expérience utilisateur (UX)Ensemble de caractéristiques à mettre en place dans votreapplication :   Créer votre interface ...
Qu’est-ce que le Microsoft DesignLanguage (anciennement appelé Metro)   Charte visuelle de Microsoft   Impression de confo...
DispositionRéfléchissez à la manière dont la disposition de l’interfaceutilisateur affecte la navigation des utilisateurs ...
NavigationL’utilisation des modèles de navigation appropriésvous aide à limiter les contrôles qui sontconstamment affichés...
NavigationSystème Hub    Pages HubLes pages Hub représentent lespoints d’entrée de l’utilisateur dansl’application.    Pag...
NavigationSystème platL’essence du système plat est la séparation du contenuen pages distinctes.    Barre d’application su...
Comment naviguer ?❶ En-tête et boutonde retour❷ Page Hub❸ Sections de contenuou catégories❹ Zoom sémantique : navigation  ...
Type denavigation                  1                                    2❶Navigation par mouvement de balayage à partir du...
Peaufiner les détails  Animations : avec des animations utiles et bien faites, vos applications prennent vie et donnent l’...
Intéractions tactile Ciblage tactile Retour visuel Zoom sémantique Balayage et balayage latéral Zoom optique et redimensio...
SnapView et mise à l’échelle  Dispositions flexibles  Affichages snapView et filledView  Mise à l’échelle en fonction des ...
Contrats et fonctionnalités  Rechercher  Partage et échange de données  Sélecteurs de fichiers  Géolocalisation  Détection...
Vignettes et notifications  Vignettes d’application et vignettes secondaires  ■inviter et encourager les utilisateurs à ut...
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...
ETUDE DE CASCONCEPTION D’UNEAPPLICATION DEPUIS UNSITE WEB
Identifier points forts, activités etfonctionnalités de l’application    Objet            Activités de         Fonctionnal...
actualités        Points forts de l’application  1 Visueldemain, uneUne mise à lépreuve destechnologies de                ...
Activités de l’utilisateur2        La voiture    PHOTOS           DESCRIPTION                     La marque aux quatre    ...
Fonctionnalités3   FlipView           Les circuits - LE CASTELLET                                                 DESCRIPT...
Fonctionnalités3   Semantic zoom             TV        FINALE        LA TEAM
Fonctionnalités3        SnapView & Contracts                                                    SnapView           1      ...
Conception de l’interface4      Moderne, Disposition & identité marque                                      actualités    ...
Conception de l’interface4         NavigationPLAN DU SITE                    PLAN DE L’APP•   Audi et la compétition      ...
Conception de l’interface4      Navigation                           La voiture      Barre de         PHOTOS           DES...
Réalisation du prototype5    Maquettage sur PowerPoint
LES OUTILS POUR BIENDÉMARRER
Outils pour la conception  Ce power point, disponible sur SlideShare  Mémo sur les guidelines UI : site soat  Design.windo...
Outils pour le prototypage  Powerpoint  Blend avec Sketchflow, pour bientôt !  Bloc note Windows 8 (made by Soat), bientôt...
Prototyper avec PowerPoint  Installer Visual Studio 2012 sur votre PC  Lancez PowerPoint  …un nouveau menu « Storyboarding...
Outils pour le développement  Visual Studio 2012 ■ choisissez votre langage préféré :    ◾VB/C++/C# et XAML    ◾HTML et Ja...
Conclusion  Application existante    Version mobile Windows Phone    Version mobile autre OS  Site web existant  Nouvelle ...
DÉMOSMART SHOPPINGSMARTSHOPPINGUNE ENVIE D’ACHETER UN PRODUIT ?RECHERCHEZ CE DERNIER DANSL’APPLICATION QUI VOUS DIRA OÙVOU...
DES QUESTIONS ?
Prochain SlideShare
Chargement dans…5
×

Page blanchea lapplicationwindows8

665 vues

Publié le

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 !

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
665
Sur SlideShare
0
Issues des intégrations
0
Intégrations
32
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Page blanchea lapplicationwindows8

  1. 1. De la page blanchea votre applicationWindows 8
  2. 2. Mail nathalie.belval@soat.fr Twitter @nbelval WPF SilverlightNathalie BELVAL KinectExperte C#/XAML – Soat Windows Phone Windows 8
  3. 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évelopperLégende je suis un mot clé important
  4. 4. A LA DÉCOUVERTE DEWINDOWS 8
  5. 5. IntroductionWindows 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. 6. Les Chiffres Windows 8 : sortie le 26 octobre 2012 Nombre dapplications gratuites100000 payantes8000060000 Nombre de licences40000 01/11/201220000 0 01/10/2012 0 20 40
  7. 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. 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. 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. 10. Les spécificités de Windows 8 Snapview permettantà l’utilisateur d’utiliserdeux application enmême temps Semantic zoom, FlipView, etc.pour mettre à profil lesintéractions tactile Contrats : deux applications ayant implémenté le même contrat peuvent fonctionner ensemble
  11. 11. LES POINTS CLESPOUR IMAGAGINER ETCONCEVOIR VOTREAPPLICATION
  12. 12. Les différents cas difficulté Application existante 1 Version mobile Windows Phone 2 Version mobile autre OS Site web existant 3 Nouvelle application
  13. 13. Exemple Voyages SNCFiOS 30/11/2012 13
  14. 14. Exemple Voyages SNCFAndroid 30/11/2012 14
  15. 15. Exemple Voyages SNCFWindows 30/11/2012 15
  16. 16. Comment imaginer et concevoirvotre 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. 17. Points forts de l’application1Pour 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 mobileObjet : Rechercher un horaire et / ou réserver son billet detrainPoints fort : Mon application est excellente pour acheterun billet de train.
  18. 18. Activités de l’utilisateur à prendre2 en chargeUn flux est un ensemble d’interactions opérées par lesutilisateurs de votre application dans des buts précis.Chaque flux doit être étroitement lié à votre liste de pointsforts et doit aider les utilisateurs à réaliser le scénario uniqueque 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. 19. Activités de l’utilisateur à prendre2 en charge Exemple : application VSC sur mobile ■ Rechercher un billet ■ Voir les tarifs / horaires ■ Réserver un billet ■ Voir ses billets / historique
  20. 20. Fonctionnalités à inclure3 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 mobileFonctionnalité à inclure, contrat de recherche
  21. 21. Concevoir l’interface utilisateur4 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. 22. Concevoir l’interface utilisateur4 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. 23. Réaliser un prototype et valider5 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. 24. Exemple : VSC Horaire / résa De WindowsPhone : on retrouve les menus D’un autre OS : la navigation change
  25. 25. Faire une bonne première6 impression Vignette & notifications Écran de démarrage Premier démarrage Page d’accueil Identité visuelle
  26. 26. RECOMMANDATIONSEXPÉRIENCE UTILISATEUR« Les applications Windows Store réussies onten commun un ensemble de caractéristiquesqui offrent à l’utilisateur une expériencecohérente, engageante et convaincante »
  27. 27. Expérience utilisateur (UX)Ensemble de caractéristiques à mettre en place dans votreapplication : 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. 28. Qu’est-ce que le Microsoft DesignLanguage (anciennement appelé Metro) Charte visuelle de Microsoft Impression de confort d’environnement ■Ne pas perdre l’utilisateur ■Mettre en avant le contenu5 Principes fondamentaux : Peaufiner les détails En faire plus avec moins Rapidité et fluidité Faire preuve d’authenticité numérique Gagner en équipe
  29. 29. DispositionRéfléchissez à la manière dont la disposition de l’interfaceutilisateur affecte la navigation des utilisateurs dans votreapplication. 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. 30. NavigationL’utilisation des modèles de navigation appropriésvous aide à limiter les contrôles qui sontconstamment affichés à l’écran, par exemple lesonglets. Cela permet aux utilisateurs de se concentrersur le contenu actuel. 3 modèles de navigation : Système hiérarchique Système hub Système plat
  31. 31. NavigationSystème Hub Pages HubLes pages Hub représentent lespoints d’entrée de l’utilisateur dansl’application. Pages SectionLes pages Section représentent lesecond niveau d’une application. Pages DétailLes pages Détail représentent letroisième niveau d’une application.
  32. 32. NavigationSystème platL’essence du système plat est la séparation du contenuen pages distinctes. Barre d’application supérieureLa barre de navigation supérieure est l’outil idéal pour basculer entre plusieurscontextes. BasculementContrairement au système hiérarchique, en règlegénérale, il n’y a pas de bouton de retourpersistant ni de pile de navigation dans lesystème plat.
  33. 33. Comment naviguer ?❶ En-tête et boutonde retour❷ Page Hub❸ Sections de contenuou 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. 34. Type denavigation 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. 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. 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. 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. 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. 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
  40. 40. Contrôles Commandes Navigation (semantic zoom, flipView) Interface utilisateur temporaire Images Entrée de texte
  41. 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
  42. 42. ETUDE DE CASCONCEPTION D’UNEAPPLICATION DEPUIS UNSITE WEB
  43. 43. Identifier points forts, activités etfonctionnalités de l’application Objet Activités de FonctionnalitésPromotion de l’utilisateur Recherche dul’évènement Audi Affichage des news contenu au sein de l’évènement de l’applicationEnduranceExperience Présentation de Partage des l’évènement infos, photos et Points forts (voiture, circuits, vidéos deMise en avant de règlement, l’applicationl’évènement et de partenaires, etc.) Semantic zoomla marque par le Résultats FlipViewvisuel Galerie Médias / TV 1 2 3
  44. 44. actualités Points forts de l’application 1 Visueldemain, uneUne mise à lépreuve destechnologies de WEC Après Silverstone, Audi est sûreexpérience vécue de de remporter le WEClinté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 lendurance.
  45. 45. Activités de l’utilisateur2 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. 46. Fonctionnalités3 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
  47. 47. Fonctionnalités3 Semantic zoom TV FINALE LA TEAM
  48. 48. Fonctionnalités3 SnapView & Contracts SnapView 1 ROOMBA PET LA TEAM 2 Contrat de TV recherche TV Contrat de partage ROOMBA PET TV FINALE 3
  49. 49. Conception de l’interface4 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 linté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 lendurance.
  50. 50. Conception de l’interface4 NavigationPLAN 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. 51. Conception de l’interface4 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
  52. 52. Réalisation du prototype5 Maquettage sur PowerPoint
  53. 53. LES OUTILS POUR BIENDÉMARRER
  54. 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. 55. Outils pour le prototypage Powerpoint Blend avec Sketchflow, pour bientôt ! Bloc note Windows 8 (made by Soat), bientôt disponible
  56. 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. 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. 58. Conclusion Application existante Version mobile Windows Phone Version mobile autre OS Site web existant Nouvelle applicationA VOUS DE JOUER !
  59. 59. DÉMOSMART SHOPPINGSMARTSHOPPINGUNE ENVIE D’ACHETER UN PRODUIT ?RECHERCHEZ CE DERNIER DANSL’APPLICATION QUI VOUS DIRA OÙVOUS LE PROCURER AU MEILLEUR PRIX.
  60. 60. DES QUESTIONS ?

×