Formation modernui design language5

Le designd’expériencespour Windows

Michel RousseauUI, UX, design evangelistMicrosoft France, DPE

[email protected]

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,


autorisant une réelle personnalité,


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,



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…

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

P 4Principes

PersonnalitéPatterns

Plateforme

Une UX pour Windows (et autres)… … dans un ensemble de principes de design,



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

http://msdn.microsoft.com/en-US/windows/apps/hh779072

http://msdn.microsoft.com/en-US/windows/apps/hh779072

http://msdn.microsoft.com/en-us/library/windows/apps/bg182890.aspx

http://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

Formation modernui design language5

Design

Transcript of Formation modernui design language5