• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Page blanchea lapplicationwindows8
 

Page blanchea lapplicationwindows8

on

  • 573 views

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

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 !

Statistics

Views

Total Views
573
Views on SlideShare
543
Embed Views
30

Actions

Likes
0
Downloads
15
Comments
0

1 Embed 30

http://www.soat.fr 30

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Page blanchea lapplicationwindows8 Page blanchea lapplicationwindows8 Presentation Transcript

    • De la page blanchea votre applicationWindows 8
    • Mail nathalie.belval@soat.fr Twitter @nbelval WPF SilverlightNathalie BELVAL KinectExperte C#/XAML – Soat 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évelopperLégende je suis un mot clé important
    • 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 compatibles Windows 8 1,25 milliards d’utilisateurs dans le monde
    • 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
    • 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’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
    • LES POINTS CLESPOUR IMAGAGINER ETCONCEVOIR VOTREAPPLICATION
    • Les différents cas difficulté Application existante 1 Version mobile Windows Phone 2 Version mobile autre OS Site web existant 3 Nouvelle application
    • 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 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
    • 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.
    • 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
    • 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
    • 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
    • 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.
    • 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
    • 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
    • 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’accueil Identité visuelle
    • 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 »
    • 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
    • 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
    • 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.
    • 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
    • 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.
    • 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.
    • 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
    • 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
    • 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 CASCONCEPTION D’UNEAPPLICATION DEPUIS UNSITE WEB
    • 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
    • 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.
    • 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 …
    • 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
    • Fonctionnalités3 Semantic zoom TV FINALE LA TEAM
    • Fonctionnalités3 SnapView & Contracts SnapView 1 ROOMBA PET LA TEAM 2 Contrat de TV recherche TV Contrat de partage ROOMBA PET TV FINALE 3
    • 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.
    • 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
    • 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
    • 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.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 applicationA VOUS DE JOUER !
    • DÉMOSMART SHOPPINGSMARTSHOPPINGUNE ENVIE D’ACHETER UN PRODUIT ?RECHERCHEZ CE DERNIER DANSL’APPLICATION QUI VOUS DIRA OÙVOUS LE PROCURER AU MEILLEUR PRIX.
    • DES QUESTIONS ?