Créer une UX pour tous les écrans avec Universal App

© 2015 Microsoft Corporation. All rights reserved.

tech days•

2015

#mstechdays techdays.microsoft.fr

#mstechdays

Créez une expérience utilisateur

pour tous les écrans

Benjamin LAUNAYDesigner chez NAVISO Dev

MVP Windows Platform

Development

@aieaieeye

Nathalie BELVALDev/Designer chez SOAT

MVP Windows Platform

Development

@nbelval

tech.days 2015#mstechdays

Quelques chiffres

Source : Institut Médiamétrie


Quelques chiffres

Source : Institut Médiamétrie

Win 10 is coming


Menu démarrer


Menu démarrer tactile


Notification center


Cortana


App universelle

#mstechdays

Anticiper, préparer

l’arrivée de Windows 10


DéfinitionMulti Device & Multi Plateforme

LE MULTI DEVICE :

LE MULTI PLATEFORME :


Une stratégie de service

Aujourd’hui

Un service global déployé sur tous vos écrans



Et demain :

Un service global déployé sur tous vos écrans



Continuité

Cohérence

Adaptation

Les enjeux en terme d’UX

≠ résolutions pour ≠ usages

#mstechdays

DEMO

#mstechdays

METHODE


La piste du « think mobile first »

Aujourd’hui le mobile prédomine sur certains usages

Ne pas penser moins pour le mobile

Penser plus pour la tablette & le desktop


La piste du « think mobile first »

Les + Focalise les équipes de dev sur l’essentiel de l’application

Evite les concessions faite lors du passage vers le mobile

Les – Angoisse de la page blanche / Difficultés de mise en page


Porter son application

Pas facile de passer de WP8 à WP8.1 Store Apps => même XAML UI Framework que les Windows Store Apps

Contrôles différents

Layout, actions bar

Media

Styles et templates

Thèmes

Animation

Navigation

Façon de faire différente pour le partage de code


D’un écran à l’autre





Form factor sont importantes mais pas les orientations

40"

30"

24"

18"

14"

10"

8"

6"

4"tallsquare wide



Ajustement des UserControl en fonction des containers

Contrôles spécifiques (WrapGrid, Viewbox)

Layout system (utilise les Visual States)

Implique de faire usage du MVVM

Méthodes

#mstechdays

DEMO


D’une résolution à une autre

Font icon

SVG/XAML

Bitmap

Images & ressources

#mstechdays

DEMO


COULEUR TYPO VISUELS EFFETSICÔNES

D’une plateforme à une autreDesign UI

D’une plateforme à une autre

Design système


Design custom



Pas forcément les même contrôles

Des spécificités propres à chaque plateforme (thème utilisateur, etc.)

Gestures différentes

Modèle de navigation différent

Ergonomie



Adresser toutes les plateformes Xamarin

Partager de code & UI :Shared Project

Portable Class Library

Adapter son design à la plateformeUtiliser des contrôles existants

Custom

Intégrer son designBlend for Visual Studio (XAML)

Outils

#mstechdays

DEMO


Bon design ?

Avoir un design adaptatif à des tailles d’écran allant de 4’’ à 40’’ (du phone à la TV)

Supporter les hautes résolutions

Garantir une utilisation optimale à la souris/clavier Garantir une utilisation optimale en touch

Continuité - Cohérence - Adaptation


A vous de jouer !Suivez-nous, bientôt un article pour résumer cette session

Téléchargez l’App Démo => www.universalappdemo.codeplex.com

Retrouvez nous sur la communauté Facebook ‘’App Design’’

@nbelval @aieaieeye

http://www.universalappdemo.codeplex.com/


Notez maintenant notre session

© 2015 Microsoft Corporation. All rights reserved.

tech days•

2015

#mstechdays techdays.microsoft.fr

Technology

Créer une UX pour tous les écrans avec Universal App