page blanchea lapplicationwindows8

De la page blanche

a votre application

Windows 8

Mail

[email protected]

Twitter

@nbelval

Nathalie BELVAL

Experte C#/XAML – Soat

WPF

Silverlight

Kinect

Windows Phone

Windows 8

Plan

A la découverte de Windows 8

Les points clés pour imaginer et concevoir

son application

Recommandations ou guidelines

Etude de cas (site web vers Windows 8)

Les outils pour concevoir, prototyper et

développer

Légende je suis un mot clé important

A LA DÉCOUVERTE DE

WINDOWS 8

Introduction

Windows c’est ?

Depuis 1990

90% de PC dans le monde

450 millions de Windows 7

500 millions d’ordinateurs compatibles

Windows 8

1,25 milliards d’utilisateurs dans le monde

Les Chiffres

Windows 8 : sortie le 26 octobre 2012

0

20000

40000

60000

80000

100000

Nombre d'applications gratuites

payantes

0 20 40

01/10/2012

01/11/2012

Nombre de licences

Général

Ecran d’accueil « Windows Phone » like

regroupant un ensemble de vignettes ou

tuiles applicatives

2 Menus principaux

■Droite : Barre de charms ou talissement

■Gauche : Barre pour changer d’application

+Les barres d’application lorsque vous

lancez une application

Menus

La barre de charms qui permet à l’utilisateur de :

■ rechercher (une application, un fichier, dans les paramètres, dans une application)

■ partager du contenu entre différentes applications

■ revenir sur l’écran d’accueil

■ accéder aux différents périphériques

■ accéder aux paramètres (panneau de configuration , configuration wifi, luminosité, etc.)

Barre d’application

Dans une application, il est possible d’avoir accès à deux barre de navigation supplémentaires : ■ haut : barre de navigation de l’application

■ bas : concerne plutôt les commandes / actions possibles dans l’application

Les spécificités de Windows 8

Snapview permettant

à l’utilisateur d’utiliser

deux application en

même temps

Semantic zoom, FlipView, etc.

pour mettre à profil les

intéractions tactile

Contrats : deux applications ayant implémenté le même contrat peuvent fonctionner ensemble

LES POINTS CLES

POUR IMAGAGINER ET

CONCEVOIR VOTRE

APPLICATION

Les différents cas

Application existante

Version mobile Windows

Phone

Version mobile autre OS

Site web existant

Nouvelle application

1

2

3

difficulté

Exemple Voyages SNCF

iOS

30/11/2012

13


Android

30/11/2012

14


Windows

30/11/2012

15

Comment imaginer et concevoir

votre application ?

❶ Identifier les points

forts de votre

application.

❷ Identifier les activités

de l’utilisateur à

prendre en charge

❸ Identifier les

fonctionnalités à

inclure

❹Concevoir l’interface

utilisateur de votre

application (papier)

❺Réaliser un prototype

fonctionnel et valider

votre conception

❻Développer

➐Faire une bonne

première impression

Points forts de l’application

Pour commencer, se poser les bonnes questions :

Quel est l’objet de votre application ?

Quelles sont les points forts de votre application ?

Exemple : application VSC sur mobile

Objet : Rechercher un horaire et / ou réserver son billet de train

Points fort : Mon application est excellente pour acheter un billet de train.

1

Activités de l’utilisateur à prendre

en charge

Un flux est un ensemble d’interactions opérées par les utilisateurs de votre application dans des buts précis. Chaque flux doit être étroitement lié à votre liste de points forts et doit aider les utilisateurs à réaliser le scénario unique que vous voulez valoriser.

Présentez le flux : qu’est-ce qui arrive en premier, et ensuite ?

Détaillez le flux : comment les utilisateurs doivent-ils progresser au niveau de l’interface pour réaliser le flux ?


■ Rechercher un billet de train

■ Voir les tarifs / horaires d’un billet

■ Réserver un billet

■ Voir ses billets / historique

2

Activités de l’utilisateur à prendre

en charge


■ Rechercher un billet

■ Voir les tarifs / horaires

■ Réserver un billet

■ Voir ses billets / historique

2

Fonctionnalités à inclure

Recherchez les fonctionnalités de la plateforme

et comment vous pouvez les utiliser.

Diagrammes d’association : mettez en relation

vos flux et les fonctionnalités.

Prototype papier : testez les fonctionnalités

pour vérifier qu’elles répondent à vos besoins.


Fonctionnalité à inclure, contrat de recherche

3

Concevoir l’interface utilisateur

de votre application

Comment organiser le contenu de

l’interface utilisateur ?

De quelle interface utilisateur et de quelles

commandes avez-vous besoin ?

Décidez comment disposez vos pages dans

l’application.

4

Concevoir l’interface utilisateur

de votre application


Définir les niveaux de détail (3) :

■ page d’accueil, critères de recherche du billet

■ page de résultat ◾Détail d’un billet

■ page de réservation

Réfléchir à la disposition des éléments

4

Réaliser un prototype et valider

votre conception

Utilisez les recommandations en matière

d’expérience utilisateur

Validez votre conception ou votre prototype

par rapport aux impressions des utilisateurs

Utilisez le kit de certification des

applications Windows

5

Exemple : VSC Horaire / résa

De WindowsPhone : on retrouve les menus

D’un autre OS : la navigation change

Faire une bonne première

impression

Vignette & notifications

Écran de démarrage

Premier démarrage

Page d’accueil

Identité visuelle

6

RECOMMANDATIONS

EXPÉRIENCE UTILISATEUR « Les applications Windows Store réussies ont

en commun un ensemble de caractéristiques

qui offrent à l’utilisateur une expérience

cohérente, engageante et convaincante »

Expérience utilisateur (UX)

Ensemble de caractéristiques à mettre en place dans votre application :

Créer votre interface (UI) : ■Microsoft Design Language

■Disposition

■Navigation

Interaction tactile

SnapView

Contrats et fonctionnalités

Vignettes et notifications

Contrôles

Itinérance dans le nuage

Qu’est-ce que le Microsoft Design

Language (anciennement appelé Metro)

Charte visuelle de Microsoft

Impression de confort d’environnement ■Ne pas perdre l’utilisateur

■Mettre en avant le contenu

5 Principes fondamentaux :

Peaufiner les détails

En faire plus avec moins

Rapidité et fluidité

Faire preuve d’authenticité numérique

Gagner en équipe

Disposition

Réfléchissez à la manière dont la disposition de l’interface

utilisateur affecte la navigation des utilisateurs dans votre

application.

Commandes : placez les commandes de façon cohérente

pour donner confiance et faciliter l’interaction utilisateur.

Conception des pages : utilisez la grille pour élaborer la

disposition des pages de l’application de manière à

respecter la silhouette Windows 8.

Navigation

L’utilisation des modèles de navigation appropriés

vous aide à limiter les contrôles qui sont

constamment affichés à l’écran, par exemple les

onglets. Cela permet aux utilisateurs de se concentrer

sur le contenu actuel.

3 modèles de navigation :

Système hiérarchique

Système hub

Système plat

Navigation

Système Hub

Pages Hub

Les pages Hub représentent les points d’entrée de l’utilisateur dans l’application.

Pages Section

Les pages Section représentent le second niveau d’une application.

Pages Détail

Les pages Détail représentent le troisième niveau d’une application.

Navigation

Système plat L’essence du système plat est la séparation du contenu en pages distinctes.

Barre d’application supérieure

La barre de navigation supérieure est l’outil

idéal pour basculer entre plusieurs

contextes.

Basculement

Contrairement au système hiérarchique, en règle générale, il n’y a pas de bouton de retour

persistant ni de pile de navigation dans le

système plat.

Comment naviguer ? ❶ En-tête et bouton

de retour

❷ Page Hub

❸ Sections de contenu

ou catégories

❹ Zoom sémantique : navigation entre les niveaux dans une hiérarchie

❺ Barre d’application supérieure

❻ Menu d’en-têtes

➐ Lien vers l’accueil

❽ Barre d’application inférieure

➒ Afficher/Trier/Filtrer

❿ Bord

Type de

navigation

❶Navigation par mouvement de balayage à partir du bord

❷Navigation avec des menus d’en-têtes et des étiquettes de section

❸Navigation avec des filtres, pivots, tris et vues

1

2

3

Peaufiner les détails

Animations : avec des animations utiles et bien faites, vos

applications prennent vie et donnent l’impression d’un

travail soigné. Aidez les utilisateurs à comprendre les

changements de contexte et liez les expériences avec des

transitions visuelles.

Typographie : Le langage de conception Microsoft repose

sur une typographie claire et attrayante qui permet aux

utilisateurs de comprendre la hiérarchie du contenu. Utilisez

la typographie proposée à la place des lignes et des boîtes

traditionnelles pour établir la structure et la hiérarchie de

votre contenu.

Intéractions tactile

Ciblage tactile

Retour visuel

Zoom sémantique

Balayage et balayage latéral

Zoom optique et redimensionnement

Scroll

Rotation

Sélection de texte et d’images

Interactions avec la souris

Interaction du clavier

Interaction du stylo et du stylet

SnapView et mise à l’échelle

Dispositions flexibles

Affichages snapView et filledView

Mise à l’échelle en fonction des écrans

Mise à l’échelle en fonction de la densité

des pixels

Redimensionnement

Contrats et fonctionnalités

Rechercher

Partage et échange de données

Sélecteurs de fichiers

Géolocalisation

Détection de périphérique

Boîte de dialogue d’impression

Mouvements de proximité

Multimédia

Vignettes et notifications

Vignettes d’application et vignettes secondaires ■ inviter et encourager les utilisateurs à utiliser votre

application

■maintenir votre application à jour et d’actualité

■mettre en avant du contenu

■ lancer votre application directement sur une expérience spécifique

Notifications : ■aidez vos utilisateurs à identifier le contenu intéressant

■Différents types de notifications ◾Toast

◾Push

◾Notifications périodiques

◾Notifications planifiées

Contrôles

Commandes

Navigation (semantic zoom, flipView)

Interface utilisateur temporaire

Images

Entrée de texte

Itinérance dans le nuage

Itinérance : votre application doit être facile à utiliser partout,

Paramètres : regroupez tous les paramètres de votre application sur une même interface utilisateur,

Authentification unique : assurez-vous que les utilisateurs peuvent se connecter avec leur compte Microsoft et bénéficier d’une expérience cohérente sur tous les appareils Windows 8 / Windows Phone

ETUDE DE CAS

CONCEPTION D’UNE

APPLICATION DEPUIS UN

SITE WEB

Identifier points forts, activités et

fonctionnalités de l’application

3

Fonctionnalités

Recherche du contenu au sein de l’application

Partage des infos, photos et vidéos de l’application

Semantic zoom

FlipView

2

Activités de

l’utilisateur Affichage des news

de l’évènement

Présentation de

l’évènement

(voiture, circuits,

règlement,

partenaires, etc.)

Résultats

Galerie Médias /

TV

1

Objet

Promotion de

l’évènement Audi

Endurance

Experience

Points forts

Mise en avant de

l’évènement et de

la marque par le

visuel

Points forts de l’application

Visuel 1 WEC

Après Silverstone, Audi est sûre

de remporter le WEC

27 août 2012 Victorieuse à Sebring, à Spa, au Mans, et maintenant à

Silverstone, Audi s’assure la victoire au Championnat du

monde d’endurance 2012. Mais Toyota s’impose en

brillant adversaire.

Doublé hybride, triplé Audi

17 juin 2012 Trois Audi aux trois premières places : l'édition 2012 des

24 Heures du Mans vient consacrer la suprématie de la

marque aux anneaux dans le monde de l'endurance.

actualités

Une mise à l'épreuve des

technologies de demain, une

expérience vécue de

l'intérieur

La voiture

PHOTOS

La marque aux quatre

anneaux a choisi l’Audi A1

1.4 TFSI 185 ch pour les

courses de qualifications et

la finale des Audi

endurance experience

(A2E), la course créée par

Audi pour ses clients

amateurs de compétition.

Ce quatre-cylindres est un

véritable concentré de

technologie. En effet, il allie

turbo, compresseur et

injection directe, tout en

étant couplé à la boîte S

tronic à sept rapports.

Si la motorisation de l’Audi

A1 1.4 TFSI 185 ch …

DESCRIPTION

Activités de l’utilisateur 2

Fonctionnalités

FlipView 3

LE CASTELLET

Ce circuit historique a été réaménagé de

façon high tech. La piste est très large,

technique, rapide, et regroupe toutes les

difficultés imaginables. Elle autorise de

fortes vitesses de pointe et le très long

virage du Beausset oblige à rester très

concentré.

Malgré ces nombreuses difficultés, ce

circuit reste aujourd’hui un exemple en

matière de sécurité.

DESCRIPTION

Pays France

Longueur du

circuit 5,791 km

Site officiel www.circuitpaulri

card.com

Les circuits -

Fonctionnalités

Semantic zoom 3

TV

FINALE LA TEAM

Fonctionnalités

SnapView & Contracts 3

TV LA TEAM

ROOMBA PET TV

ROOMBA PET TV

FINALE

1 2

3

SnapView

Contrat de

recherche

Contrat de

partage

Conception de l’interface

Moderne, Disposition & identité marque

WEC

Après Silverstone, Audi est

sûre de remporter le WEC

27 août 2012 Victorieuse à Sebring, à Spa, au Mans,

et maintenant à Silverstone, Audi

s’assure la victoire au Championnat du

monde d’endurance 2012. Mais Toyota

s’impose en brillant adversaire.

Doublé hybride, triplé

Audi

17 juin 2012 Trois Audi aux trois premières places :

l'édition 2012 des 24 Heures du Mans

vient consacrer la suprématie de la

marque aux anneaux dans le monde de

l'endurance.

actualités

Une mise à l'épreuve des

technologies de demain, une

expérience vécue de l'intérieur

4


Navigation

PLAN DE L’APP • HOME : Les actualités

– WEC

– DTM

– GT Tour

• Présentation des Audi – Photos

– Description

– Medias

• Les circuits – Le Castellet

– Le Mans

– Magny-cours

– Nogaro

• Le règlement

• Le classement

• Audi TV

4 PLAN DU SITE • Audi et la compétition

• Les actualités – WEC

– DTM

– GT Tour

• Audi endurance experience – Présentation des Audi

– Les partenaires

– Les circuits • Le Castellet

• Le Mans

• Magny-cours

• Nogaro

– Le règlement

– Le classement

– Les actus

• Audi TV


Navigation

Barre de

navigation pour

les pages de

détail

Menu sous

forme de

compteur de

voiture pour la

home page

La voiture

PHOTOS

La marque aux quatre

anneaux a choisi l’Audi A1

1.4 TFSI 185 ch pour les

courses de qualifications et

la finale des Audi

endurance experience

(A2E), la course créée par

Audi pour ses clients

amateurs de compétition.

Ce quatre-cylindres est un

véritable concentré de

technologie. En effet, il allie

turbo, compresseur et

injection directe, tout en

étant couplé à la boîte S

tronic à sept rapports.

Si la motorisation de l’Audi

A1 1.4 TFSI 185 ch …

DESCRIPTION

4

Réalisation du prototype

Maquettage sur PowerPoint

5

LES OUTILS POUR BIEN

DÉMARRER

Outils pour la conception

Ce power point, disponible sur SlideShare

Mémo sur les guidelines UI : site soat

Design.windows.com

Pour aller plus loin, guidelines détaillées au

format PDF: http://go.microsoft.com/fwlink/p/?linkid=258743

http://go.microsoft.com/fwlink/p/?linkid=258743

Outils pour le prototypage

Powerpoint

Blend avec Sketchflow, pour bientôt !

Bloc note Windows 8 (made by Soat),

bientôt disponible

Prototyper avec PowerPoint

Installer Visual Studio 2012 sur

votre PC

Lancez PowerPoint

…un nouveau menu

« Storyboarding » apparaît:

Cliquez sur « Storyboard

Shapes »

Voici des formes pour Windows

8 et Windows Phone

http://www.url.com/

Outils pour le développement

Visual Studio 2012

■ choisissez votre langage préféré :

◾VB/C++/C# et XAML

◾HTML et JavaScript

■ Template de projet, permettant d’accélérer le

développement de vos applications.

Expression Blend for VisualStudio

Conclusion

Application existante

Version mobile Windows Phone

Version mobile autre OS

Site web existant

Nouvelle application

A VOUS DE JOUER !

DÉMO

SMARTSHOPPING

SMART SHOPPING UNE ENVIE D’ACHETER UN PRODUIT ? RECHERCHEZ CE DERNIER DANS L’APPLICATION QUI VOUS DIRA OÙ VOUS LE PROCURER AU MEILLEUR PRIX.

DES QUESTIONS ?

page blanchea lapplicationwindows8

Technology