B2B, LOB etInterfaces modernes
Michel Rousseau UI, UX, designMicrosoft France, division DPE
Blog : http://aka.ms/michelTwitter : @rousseau_Michel
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