B2B, LOB etInterfaces modernes

Michel Rousseau UI, UX, designMicrosoft France, division DPE

Blog : http://aka.ms/michelTwitter : @rousseau_Michel

mirousse@microsoft.com

Une nouvelle ère pour Microsoft

2012/2013, année du renouveau de l’image de MicrosoftUn nouvel OS PC et tablettes.Un nouvel OS mobile.Un nouvel Office.La refonte de tous les services.La Xbox One.

Le projet Metro,le changement par la mobilité.

Modern UIUne inspiration.

Metro

Josef Müller Brockmann1914-1996

Modern UIProduire des interfaces modernes,

pour du contenu numériquepersonnel, pertinent et connecté.

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.

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.

Les spécificités etles contraintes de l’interface d’entreprise

Data-Centric

Enriched

Immersive

Beaucoup de textes et de données.Un usage orienté outil.Un usage impliquant un apprentissage.Une navigation clavier/souris.Une navigation orientée métier.

Abondance de texte

La multiplication des données ne doit pas se faire aux détriment de la hiérarchie des éléments.

L’ expression des données sous formes de texte est la moins valorisable (vs Piecharts, tableaux, représentation, localisation).

Les données textuelles sont issues du modèle papier.

Elles sont sérialisées et non-contextuelles, ni parallélisées.

Un usage orienté outil

Chaque interface est différente (perte de cohérence).

Chaque interface dépend directement des datas concernées.

Pour proposer des outils compétitifs, on augmente les fonctionnalités (syndrome de Pareto).

La multiplicité des outils engendre une grande complexité d’usage.

Les usages engendrés enchainent souvent le client à une routine d’usage qui parfois va à l’encontre de la performance.

Usage et apprentissage

Qui dit « complexité » dit impact de la « learning curve ».

Qui dit « learning curve » dit aussi fonctions masquées, trop complexes, mal comprises, contournées, shuntées.

Clavier/souris

La saisie implique des devices adéquats.

La précision d’un métier implique parfois un device précis.

Le clavier éloigne cognitivement l’utilisateur de l’usage.

Les devices intellectualisent les actions en ajoutant des intermédiaires.

Un pointeur de souris est précis sur une surface de 5x5 px.

Le doigt est précis pour une surface moyenne de 40x40 px.

Le tactile impose un feedback particulier.

Pour éviter les « faux contacts », les espacements doivent être systématiquement sur-estimés.

Une navigation orientéemétier

Cela impose de connaitre le métier concerné.

Cela impose de connaître da persona ou son rôle.

Cela impose un usage monobloc de l’applicatif.

Deux personae spécifiques : La saisie de donnée et l’usage des données.

La saisie des données est un rôle « desktop ».L’usage des données est un rôle « mobile ».

B2B, LOB etInterfaces modernes