Le designd’expériencespour Windows
Michel RousseauUI, UX, design evangelistMicrosoft France, DPE
Un nouveau momentum pour Microsoft
Initiative Windows Phone 7Allumage de l’étage Windows 8Réglage de la mire avec Windows 8.1Un nouvel OfficeLa refonte de tous les servicesLa Xbox OneWindows Phone 8.1Windows 10
Le projet Metro,le changement par la mobilité.
Modern UIUne inspiration.
Modern UIProduire des interfaces modernes,
pour du contenu numériquepersonnel, pertinent et connecté.
P 4Principes
PersonnalitéPatterns
Plateforme
Une UX pour Windows (et autres)…
Une UX pour Windows (et autres)…… dans un ensemble de principes de design,
Une UX pour Windows (et autres)…… dans un ensemble de principes de design,
autorisant une réelle personnalité,
Une UX pour Windows (et autres)…… dans un ensemble de principes de design,
autorisant une réelle personnalité,articulée autours de patterns efficaces,
Une UX pour Windows (et autres)…… dans un ensemble de principes de design,
autorisant une réelle personnalité,articulée autours de patterns efficaces,
bâtie sur une plateforme commune.
Une UX pour Windows (et autres)… … dans un ensemble de principes de design,
autorisant une réelle personnalité,articulée autours de patterns efficaces,
bâtie sur une plateforme commune.
pour principesP
Un ensemble de principes de design
Modern UI5 paradigmes.
Faire plus avec moins.
Locution célèbre de Dieter Rams, designer principal de Braun, élève de l’école du Bauhaus.
Définir une stratégie efficace.
Retrancher tout ce qui n’est pas absolument indispensable.
Supprimer toute la pollution.
Être authentiquement numérique.
Dépasser la métaphore au réel.
Nous avons une vie numérique indépendante.
Nous devons créer un espace numérique disposant de ces codes propres.
Être fluide et dynamique.
Le tactile comme expérience principale, mais sans compromission.Une expérience tactile produisant du retour.
Un flux simplifié, une hiérarchie évidente.
Penser adaptatif et responsive (multi-résolutions, multi form-factors).
Peaufiner les détails.
Des interactions simples pour une navigation sûre.
Équilibre, symétrie et hiérarchie.
Alignez la disposition de votre application à la grille.
Accessibilité, bien sur !
Ne conservez que votre valeur ajoutée.
On le livre?
Le titre et le corps ne sont pas encore parfaitement alignés
Les boutons devraient être centrés horizontalement.
Attention aux alignements dans les boutons et dans les contrôles!
Utilisez la Segoe UI Semilight, pas la Segoe UI Semibold
Trop de mots. On peut simplifier?
Gagner en équipe.
Utilisez le modèle d’interface utilisateur.
Travaillez avec d’autres applications (contrat de partage).
Les applis partagent les mêmes modèles d’interface que l’OS.
pour personnalitéP
élements de personnalité
CompositionTypographieCouleursAnimations
Composition basée sur une grille de 20px
Prévoir une silhouette…
Consistante mais dynamique…
Consistante mais dynamique…
Typographie
Topologie de typographies
Couleurs
Animations
pour patternP
PatternsUI ControlsNavigationCommandingPresenting DataTouch
App Bar
List Box
Hyperlink
CheckboxProgress Bar
Text Box Clear ButtonSpell Checking
Password Reveal Button
Progress Ring
Tooltip
Grid ViewButton
Flip View
Combo Box
Scroll Bar
Context Menu
Slider
Toggle Switch
Semantic Zoom
Panning Indicator
Rating
List View
Flyout
Radio Button
HubNavigation BarIn-App Search
DémoStore apps (Search)Windows Phone Courrier (app bar)Fresh paint (app bar)Bing News (Navigation Bar)Bing Jeux (Hub)Bing Alarm (contrôles in-page)
Patterns de l’information
Swipe horizontalContrôle de type pivot (multi-scroll)Navigation verticale (Snap view)Drag-n-Drop
DémoDrag n’ drop avec Courrier (Win 8.1)Flyout avec Mail (WP 8.1)
Patterns tactiles
On apprend une fois, on sait pour le reste.On renforce la confiance.Les patterns sont built-in.
Tap pour l’action primaire
Appui long pour de l’aide
Slide pour de naviguer
Slide perpendiculaire pour selectionner
Pinch pour zoomer/dézoomer
Tourner pour…tourner
Swipe from the edge
pour plateformeP
Une plateforme de dev unifiée
XAML WinJSUsing C# or C++ Using Javascript
HTML
Recap
P 4Principes
PersonnalitéPatterns
Plateforme
Une UX pour Windows (et autres)… … dans un ensemble de principes de design,
autorisant une réelle personnalité,articulée autours de patterns efficaces,
bâtie sur une plateforme commune.
Ressources
Windows Design Centerhttp://msdn.microsoft.com/en-US/windows/apps/hh779072
Windows 8.1 Feature Guide for UI/UXhttp://msdn.microsoft.com/en-us/library/windows/apps/bg182890.aspx
Quelques belles apps
Pensez LOB et entreprises
L’EXEMPLE SUNGUARD
L’EXEMPLE SMARTSIGHT
L’EXEMPLE INPATIENT
Pensez Silhouette
Pensez usage
…et dans le contexte Windows 9 ?
Le designd’expériencespour Windows
Top Related