SlideShare ist ein Scribd-Unternehmen logo
1 von 60
Downloaden Sie, um offline zu lesen
De la page blanche
a votre application
Windows 8
Mail
                         nathalie.belval@soat.fr
                         Twitter
                         @nbelval


                         WPF
                         Silverlight
Nathalie BELVAL
                         Kinect
Experte 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é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
         Nombre d'applications
                                                        gratuites
100000                                                  payantes

80000
60000                                   Nombre de licences
40000                            01/11/2012
20000
    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’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             difficulté


  Application existante            1
     Version mobile Windows
   Phone
                                  2
     Version mobile autre OS
  Site web existant
                                  3
  Nouvelle application
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      ❹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’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.
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
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
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
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.
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
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
Exemple : VSC Horaire / résa




 De WindowsPhone : on retrouve les menus
 D’un autre OS : la navigation change
Faire une bonne première
6     impression
    Vignette & notifications
    Écran de démarrage
    Premier démarrage
    Page d’accueil
    Identité visuelle
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                  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 CAS
CONCEPTION D’UNE
APPLICATION DEPUIS UN
SITE WEB
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
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.
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 …
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
Fonctionnalités
3   Semantic zoom

             TV
        FINALE        LA TEAM
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
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.
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
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
Réalisation du prototype
5
    Maquettage sur PowerPoint
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
SMART SHOPPING
SMARTSHOPPING
UNE ENVIE D’ACHETER UN PRODUIT ?
RECHERCHEZ CE DERNIER DANS
L’APPLICATION QUI VOUS DIRA OÙ
VOUS LE PROCURER AU MEILLEUR PRIX.
DES QUESTIONS ?

Weitere ähnliche Inhalte

Andere mochten auch

Playtests, traductions, et relectures
Playtests, traductions, et relectures  Playtests, traductions, et relectures
Playtests, traductions, et relectures Pascal Minoche
 
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (French)
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (French)052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (French)
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (French)VogelDenise
 
Horizon Boréal (en production)
Horizon Boréal (en production)Horizon Boréal (en production)
Horizon Boréal (en production)IMAGE IN situ
 
République du tchad
République du tchadRépublique du tchad
République du tchadGuarin2011
 
United States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCHUnited States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCHVogelDenise
 
Communiqué tabac europe
Communiqué tabac europeCommuniqué tabac europe
Communiqué tabac europelesoirbe
 
Laudon traver e-commerce4_e_chapter01
Laudon traver e-commerce4_e_chapter01Laudon traver e-commerce4_e_chapter01
Laudon traver e-commerce4_e_chapter01rui6
 
Juridica dévoile sa nouvelle stratégie aux Journées du Courtage
Juridica dévoile sa nouvelle stratégie aux Journées du CourtageJuridica dévoile sa nouvelle stratégie aux Journées du Courtage
Juridica dévoile sa nouvelle stratégie aux Journées du CourtageJURIDICA_JUSTE_POUR_VOUS
 
Evaluation certificative epreuves externes communes (ceb) 2010 - résultats ...
Evaluation certificative   epreuves externes communes (ceb) 2010 - résultats ...Evaluation certificative   epreuves externes communes (ceb) 2010 - résultats ...
Evaluation certificative epreuves externes communes (ceb) 2010 - résultats ...lesoirbe
 
Journal Abvietfrance numero 1 2015
Journal Abvietfrance numero 1 2015Journal Abvietfrance numero 1 2015
Journal Abvietfrance numero 1 2015Hong-Anh Vu
 
Internet en Chine 2013
Internet en Chine 2013Internet en Chine 2013
Internet en Chine 2013IZIASIA
 

Andere mochten auch (20)

Playtests, traductions, et relectures
Playtests, traductions, et relectures  Playtests, traductions, et relectures
Playtests, traductions, et relectures
 
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (French)
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (French)052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (French)
052215 - FAX TO DELNER THOMAS & BENNIE THOMPSON (French)
 
Carrieres
CarrieresCarrieres
Carrieres
 
มาตรฐานการศึกษาปฐมวัย2554
มาตรฐานการศึกษาปฐมวัย2554มาตรฐานการศึกษาปฐมวัย2554
มาตรฐานการศึกษาปฐมวัย2554
 
GAT part 1 2552#3
GAT part 1 2552#3GAT part 1 2552#3
GAT part 1 2552#3
 
Horizon Boréal (en production)
Horizon Boréal (en production)Horizon Boréal (en production)
Horizon Boréal (en production)
 
Dompter Google
Dompter GoogleDompter Google
Dompter Google
 
République du tchad
République du tchadRépublique du tchad
République du tchad
 
United States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCHUnited States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCH
 
Management des idées
Management des idéesManagement des idées
Management des idées
 
Communiqué tabac europe
Communiqué tabac europeCommuniqué tabac europe
Communiqué tabac europe
 
La opera de paris
La opera de parisLa opera de paris
La opera de paris
 
Laudon traver e-commerce4_e_chapter01
Laudon traver e-commerce4_e_chapter01Laudon traver e-commerce4_e_chapter01
Laudon traver e-commerce4_e_chapter01
 
Juridica dévoile sa nouvelle stratégie aux Journées du Courtage
Juridica dévoile sa nouvelle stratégie aux Journées du CourtageJuridica dévoile sa nouvelle stratégie aux Journées du Courtage
Juridica dévoile sa nouvelle stratégie aux Journées du Courtage
 
Louaize pres abdo el kahi w
Louaize pres abdo el kahi wLouaize pres abdo el kahi w
Louaize pres abdo el kahi w
 
Utrecht sa- alain arconte
Utrecht  sa- alain arconteUtrecht  sa- alain arconte
Utrecht sa- alain arconte
 
Evaluation certificative epreuves externes communes (ceb) 2010 - résultats ...
Evaluation certificative   epreuves externes communes (ceb) 2010 - résultats ...Evaluation certificative   epreuves externes communes (ceb) 2010 - résultats ...
Evaluation certificative epreuves externes communes (ceb) 2010 - résultats ...
 
Journal Abvietfrance numero 1 2015
Journal Abvietfrance numero 1 2015Journal Abvietfrance numero 1 2015
Journal Abvietfrance numero 1 2015
 
Tendances cloud2013 v2.0
Tendances cloud2013 v2.0Tendances cloud2013 v2.0
Tendances cloud2013 v2.0
 
Internet en Chine 2013
Internet en Chine 2013Internet en Chine 2013
Internet en Chine 2013
 

Ähnlich wie Page blanchea lapplicationwindows8

Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Philippe Beraud
 
Développement Windows 8 METRO App
Développement Windows 8 METRO AppDéveloppement Windows 8 METRO App
Développement Windows 8 METRO AppClément Hallet
 
Votre application d’entreprise en une heure : De la création au déploiement
Votre application d’entreprise en une heure : De la création au déploiementVotre application d’entreprise en une heure : De la création au déploiement
Votre application d’entreprise en une heure : De la création au déploiementMicrosoft Technet France
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Idean France
 
Android workshop - Bootcamp du Mauriapp Challenge 2016
Android workshop - Bootcamp du Mauriapp Challenge 2016Android workshop - Bootcamp du Mauriapp Challenge 2016
Android workshop - Bootcamp du Mauriapp Challenge 2016Hadina RIMTIC
 
L’Importance Des Interface
L’Importance Des InterfaceL’Importance Des Interface
L’Importance Des InterfaceBlAcKbUrRy
 
Projet de fin d étude (1)
Projet de fin d étude (1)Projet de fin d étude (1)
Projet de fin d étude (1)Sanaa Guissar
 
Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Immacon
 
Azetone - Comment optimiser l’expérience utilisateur de son appli mobile ?
Azetone - Comment optimiser l’expérience utilisateur de son appli mobile ?Azetone - Comment optimiser l’expérience utilisateur de son appli mobile ?
Azetone - Comment optimiser l’expérience utilisateur de son appli mobile ?Philippe Dumont
 
1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptxssusercb2b311
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014Loic Nunez
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
 
Coding : Kit de survie pour les futurs entrepreneurs (Session 1)
Coding : Kit de survie pour les futurs entrepreneurs (Session 1)Coding : Kit de survie pour les futurs entrepreneurs (Session 1)
Coding : Kit de survie pour les futurs entrepreneurs (Session 1)Stéphanie Hertrich
 
Optimisez le parcours client de votre application mobile
Optimisez le parcours client de votre application mobileOptimisez le parcours client de votre application mobile
Optimisez le parcours client de votre application mobileAdjust
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonOlivier Lorrain
 
Microsoft Power Platform en Action
Microsoft Power Platform en Action Microsoft Power Platform en Action
Microsoft Power Platform en Action Denys Chamberland
 
Mobile Morning Adjust Azetone
Mobile Morning Adjust AzetoneMobile Morning Adjust Azetone
Mobile Morning Adjust AzetonePhilippe Dumont
 
Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8Jean-Sébastien Dupuy
 

Ähnlich wie Page blanchea lapplicationwindows8 (20)

Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
 
Développement Windows 8 METRO App
Développement Windows 8 METRO AppDéveloppement Windows 8 METRO App
Développement Windows 8 METRO App
 
Votre application d’entreprise en une heure : De la création au déploiement
Votre application d’entreprise en une heure : De la création au déploiementVotre application d’entreprise en une heure : De la création au déploiement
Votre application d’entreprise en une heure : De la création au déploiement
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?
 
Android workshop - Bootcamp du Mauriapp Challenge 2016
Android workshop - Bootcamp du Mauriapp Challenge 2016Android workshop - Bootcamp du Mauriapp Challenge 2016
Android workshop - Bootcamp du Mauriapp Challenge 2016
 
L’Importance Des Interface
L’Importance Des InterfaceL’Importance Des Interface
L’Importance Des Interface
 
Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
 
Siteweb Mini
Siteweb MiniSiteweb Mini
Siteweb Mini
 
Projet de fin d étude (1)
Projet de fin d étude (1)Projet de fin d étude (1)
Projet de fin d étude (1)
 
Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...
 
Azetone - Comment optimiser l’expérience utilisateur de son appli mobile ?
Azetone - Comment optimiser l’expérience utilisateur de son appli mobile ?Azetone - Comment optimiser l’expérience utilisateur de son appli mobile ?
Azetone - Comment optimiser l’expérience utilisateur de son appli mobile ?
 
1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Coding : Kit de survie pour les futurs entrepreneurs (Session 1)
Coding : Kit de survie pour les futurs entrepreneurs (Session 1)Coding : Kit de survie pour les futurs entrepreneurs (Session 1)
Coding : Kit de survie pour les futurs entrepreneurs (Session 1)
 
Optimisez le parcours client de votre application mobile
Optimisez le parcours client de votre application mobileOptimisez le parcours client de votre application mobile
Optimisez le parcours client de votre application mobile
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
 
Microsoft Power Platform en Action
Microsoft Power Platform en Action Microsoft Power Platform en Action
Microsoft Power Platform en Action
 
Mobile Morning Adjust Azetone
Mobile Morning Adjust AzetoneMobile Morning Adjust Azetone
Mobile Morning Adjust Azetone
 
Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8
 

Mehr von SOAT

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018SOAT
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libéréeSOAT
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !SOAT
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseSOAT
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESSOAT
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-DurandSOAT
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-DurandSOAT
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-DurandSOAT
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotSOAT
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014SOAT
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014SOAT
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soatSOAT
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...SOAT
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014SOAT
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#SOAT
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatSOAT
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesSOAT
 

Mehr von SOAT (20)

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libérée
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entreprise
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
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
  • 4. A LA DÉCOUVERTE DE WINDOWS 8
  • 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
  • 11. LES POINTS CLES POUR IMAGAGINER ET CONCEVOIR VOTRE APPLICATION
  • 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. Exemple Voyages SNCF iOS 30/11/2012 13
  • 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
  • 40. Contrôles Commandes Navigation (semantic zoom, flipView) Interface utilisateur temporaire Images Entrée de texte
  • 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. ETUDE DE CAS CONCEPTION D’UNE APPLICATION DEPUIS UN SITE WEB
  • 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
  • 47. Fonctionnalités 3 Semantic zoom TV FINALE LA TEAM
  • 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
  • 52. Réalisation du prototype 5 Maquettage sur PowerPoint
  • 53. LES OUTILS POUR BIEN DÉMARRER
  • 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 !
  • 59. DÉMO SMART SHOPPING SMARTSHOPPING UNE ENVIE D’ACHETER UN PRODUIT ? RECHERCHEZ CE DERNIER DANS L’APPLICATION QUI VOUS DIRA OÙ VOUS LE PROCURER AU MEILLEUR PRIX.