Édition tactile pour Office Web Apps sur les tablettes Windows 8 et iOS

Article original publié le lundi 20 août 2012

Il y a quelques semaines, nous avons présenté la nouvelle version d’Office Web Apps. Nous avons ajouté quelques fonctionnalités, amélioré les performance de nos applications et continué à vous permettre d’accéder à vos documents de n’importe où, via plusieurs navigateurs populaires.

 

 

 

Aujourd’hui, nous sommes fiers de vous présenter une nouvelle méthode de saisie : le tactile. Vous bénéficierez ainsi de capacités d’affichage et d’édition à part entière pour Office Web Apps, sur les tablettes et navigateurs prenant en charge l’utilisation tactile, notamment IE sur Windows 8, et Safari Mobile sur iOS.

 Pendant la conception d’Office Web Apps pour le tactile, nous avons suivi les objectifs suivants :

• Les utilisateurs doivent pouvoir utiliser Office Web Apps pour le tactile immédiatement
• Les utilisateurs n’ont pas besoin d’apprendre à naviguer dans une nouvelle interface utilisateur
• Les utilisateurs peuvent facilement passer de la navigation tactile à la navigation via souris et clavier
• L’intégralité des fonctionnalités Office Web Apps, incluant les outils d’édition, doit être disponible sur les appareils tactiles comme les tablettes et les écrans tactiles.

Le fait de développer une interface utilisateur tactile présentait des défis conceptuels intéressants. Dans ce billet, je vais expliquer comment nous les avons relevés.

Développement de l’infrastructure pour l’utilisation tactile

Nous avons développé une infrastructure unifiée cohérente avec les plateformes que nous prenons en charge, ainsi que des instructions pour l’interaction tactile pour les applications bureautiques Microsoft Office, Windows 8, et iOS. Nous avons également pris en compte l’expérience et les manipulations tactiles que les utilisateurs attendent de l’utilisation d’un appareil tactile particulier.

Pour développer l’expérience utilisateur sur les différentes plateformes, nous avons suivis les principes suivants :

• Fournir des expériences agréables de bout en bout en utilisant uniquement la saisie tactile
  • Se focaliser sur les scénarios et les expériences sur un appareil tactile
  • Vérifier que les utilisateurs peuvent toucher l’interface utilisateur en toute confiance
  • Développer des méthodes de manipulation tactile simples et intuitives
  • Exploiter les capacités du navigateur
• Garantir des expériences exceptionnelles de bout en bout, en utilisant une combinaison d’utilisations du tactile, de la souris et du clavier
  • Les utilisateurs peuvent facilement basculer entre l’utilisation du tactile, de la souris et du clavier pour interagir avec l’application
  • L’application va répondre à la saisie.

Penchons-nous sur chacun de ces principes :

Expériences et scénarios optimisés pour le tactile

J’ai rédigé ce billet il y a quelques jours et je l’ai modifié plusieurs fois. Comme la plupart d’entre vous, je ne passais pas tout mon temps devant mon bureau, et ne disposais pas toujours d’un ordinateur portable à portée de main. J’ai commencé à écrire le billet sur mon ordinateur de bureau au travail puis, comme j’ai placé mon document sur Skydrive pour pouvoir le récupérer à tout moment, j’ai continué à le rédiger sur ma tablette.

Les tendances et les modèles d’utilisation révélés par la recherche utilisateur nous ont permis d’élaborer deux scénarios : 

1.        La lecture et la consommation de contenus de documents, ainsi que l’affichage de présentations et de feuilles de calcul seront rapides, agréables et captivantes.

• La lecture et la consommation d’informations représentent les activités favorites de la plupart des personnes sur une tablette.
• Certains utilisateurs naviguent entre les documents et les présentations et commentent les contenus partagés par leurs amis et leurs collègues.
• D’autres souhaitent agréger toutes les recherches sur l’achat de voitures dans leur application web OneNote. Ils ont toujours leur tablette sous la main lorsqu’ils négocient l’achat d’une voiture.

 2.        L’édition allégée sera très appréciée lorsque les utilisateurs ajouteront, modifieront et réviseront des documents.

• Par exemple, des mères telles que moi souhaitent pouvoir se connecter rapidement, pour accéder à la feuille de calcul répertoriant le menu du repas organisé par l’association de parents d’élèves de l’école de leur enfant, et y ajouter un dessert.

• Les étudiants veulent pouvoir modifier rapidement l’exposé sur lequel ils travaillent et collaborer sur la présentation qu’ils doivent affiner.

Le tactile en toute confiance

Rien n’est plus frustrant que toucher involontairement un contrôle de l’interface utilisateur. La confiance en l’application augmente lorsque vous touchez en toute fiabilité le contrôle ou la partie de l’interface utilisateur que vous visiez. Nous voulons que vous ressentiez cette confiance lorsque vous utilisez Office Web Apps.

La souris est un outils qui permet des interactions précises et contrôlées avec l’interface utilisateur. Combinée à un clavier physique, elle rend l’utilisateur confiant lorsqu’il place des points d’insertion, effectue des sélections, presse des boutons virtuels et appelle des menus contextuels, déroulants, et tout autre élément d’interface utilisateur.

En comparaison, nos doigts, de formes et de tailles différentes, sont maladroits lorsqu’il s’agit de placer un point d’insertion et manquent de précision pour contrôler l’interaction avec l’interface utilisateur.

Notre objectif était de faire en sorte que les utilisateurs puissent toucher l’interface utilisateur sans crainte, et obtenir ce qu’ils veulent, comme avec une souris.

Rendre quelque chose facile à toucher dépend de la taille de la cible. Beaucoup d’éléments d’interface utilisateur comme les rubans de contrôle et les menus contextuels ont une taille nettement inférieure aux limites de tailles « tactiles » définies par Windows 8 et Microsoft Office.

Tous ces éléments ont été rendus plus facile à toucher dans les nouvelles Office Web Apps. Un soin tout particulier a été apporté à l’équilibrage entre l’augmentation de la taille physique de l’interface utilisateur et la préservation de la disposition du contenu du document tel que vous le connaissez.

 

 

Sur l’aperçu ci-dessus, remarquez les boutons, plus gros et donc plus facile à toucher, ainsi que l’espacement entre les contrôles :

 

 L’onglet Accueil dans Excel Web App :

L’onglet Insertion dans PowerPoint Web App :

L’onglet Accueil dans OneNote Web App:

Le sélecteur de couleurs dans Word Web App :

Une manipulation tactile simple et intuitive

Un de nos principaux objectifs était de permettre aux utilisateurs de commencer immédiatement à utiliser Office Web Apps sur leurs tablettes par le biais de manipulations tactiles simples et intuitives, plutôt qu’avec des gestes compliqués nécessitant un apprentissage.

Les opérations de manipulation se résument en cinq actions :

 

Voyons voir comment utiliser ces actions dans Office Web Apps :

Défilement et navigation dans votre document :

Lorsque vous devez examiner rapidement un document, vous pouvez effectuer un léger mouvement de balayage avec vos doigts pour faire défiler l’écran. Le contenu du document défile rapidement, avec fluidité, et vous pouvez l’interrompre à tout moment d’une simple pression des doigts.

Nous avons utilisé la capacité native du navigateur pour permettre le défilement accéléré dans Word Web App des affichages Lecture et Édition.

Dans PowerPoint Web App, vous pouvez utiliser la même action de balayage pour faire défiler les diapositives.  

Zoom avant et arrière :

Vous pouvez effectuer un zoom avant ou arrière sur l’interface utilisateur en utilisant deux doigts, que vous rapprochez ou écartez.

Saisie :

Une seule pression dans l’affichage Édition d’Office Web Apps place un point d’insertion et affiche le clavier pour commencer la saisie.

 

Le point d’insertion dans Word Web App :

 

Remarquez que l’aspect du point d’insertion est différent lorsque vous utilisez la souris et le clavier. Le « point de redimentionnement » circulaire accompagnant le point d’insertion vous permet de l’attraper et de le faire glisser pour effectuer une sélection.

La saisie est essentielle pour l’édition. Garantir une excellente expérience de saisie est donc un scénario clé pour notre prise en charge.

Placement du point d’insertion

Le doigt étant un outil de saisie imprécis, nous avons dû réfléchir à une solution permettant de placer un point d’insertion de manière fiable, là où l’utilisateur le désire.

La plupart des utilisateurs cherchent à modifier le début ou la fin des mots.

Nous avons donc décidé d’utiliser une approche de type « extrémités » pour le placement d’un point d’insertion :

Une pression sur un mot existant entraine le calcul de son extrémité la plus proche (le début ou la fin du mot) et place le point d’insertion à cet endroit. Une deuxième pression sur le même mot précise la position du point d’insertion, en le plaçant à l’endroit exact ou la pression a été enregistrée.

Sélection

La sélection de texte et d’objets vous permet de les manipuler, de leur appliquer des mises en forme ou d’autres actions. Les utilisateurs peuvent effectuer ces opérations de manière efficace avec une souris et les touches Ctrl et Maj. du clavier, car ces outils permettent une sélection précise.

Dans l’environnement tactile, le « point de redimentionnement » du point d’insertion sert de poignée. Vous pouvez l’attraper et le faire glisser pour créer une nouvelle sélection. Vous pouvez également modifier une sélection existante en réduisant ou en augmentant la plage sélectionnée, à l’aide des points de redimensionnement de chaque extrémité.

Faire glisser le point de redimensionnement pour sélectionner le texte de Word Web App :

 

 Faire glisser pour sélectionner les dimensions pour insérer un tableau :

 

Appliquer des actions dans les menus contextuels :

Les menus contextuels permettent d’appliquer des actions rapidement et facilement dans un contexte particulier. Vous êtes peut être déjà habitué à utiliser les menus contextuels avec la souris dans Office Web Apps. Ces menus sont affichés lorsque vous cliquez avec le bouton droit de la souris.

Menus contextuels obtenus en cliquant avec le bouton droit de la souris dans l’affichage Édition de Word Web App :

 

Pour vous, nous avons facilité l’accès au menu contextuel : vous n’avez qu’à appuyer sur votre sélection pour l’afficher. Une pression en dehors du menu contextuel suffit pour le masquer.

 

Appuyer sur la sélection pour afficher le menu contextuel :

 

 

Remarquez les espacements entre les contrôles du menu contextuel, plus confortables pour l’utilisation tactile.

Sur un point d’insertion, vous pouvez afficher le menu contextuel en maintenant brièvement votre doigt appuyé :

 

Dans l’affichage Lecture de Word Web App, une seule pression entraîne la sélection d’une ligne. Une pression sur la sélection affiche le menu contextuel.

 

Sélection et menu contextuel dans la visionneuse de Word Web App :

 

Garantie des expériences exceptionnelles de bout en bout, en utilisant une combinaison d’utilisations du tactile, de la souris et du clavier

Vous pouvez saisir des informations sur une tablette en utilisant une méthode tactile, une souris et un clavier.

Dans Windows 8, Office Web Apps peut être utilisé de façon tactile, ou avec une souris et un clavier, ou une combinaison des deux possibilités. Dans iOS, Office Web Apps fonctionne mieux en utilisant la méthode tactile.

Mode tactile

Dans Office Web Apps, on peut distinguer deux types d’interfaces utilisateur :

• Interface utilisateur fixe

Cette interface utilisateur est toujours présente et affichée dans l’application.

Exemple : le volet de navigation de OneNote Web App, le ruban

• Interface utilisateur contextuelle

Cette interface utilisateur est affichée et masquée selon vos besoins.

Exemple : les menus contextuels

Lorsque vous utilisez un appareil tactile, Office Web Apps affiche par défaut l’interface utilisateur fixe en mode tactile. Vous pouvez changer ce mode pour utiliser l’interface utilisateur avec une souris en sélectionnant le bouton « Mode tactile ».

Le bouton Mode tactile est affiché dans la barre d’outils Accès rapide située dans le coin supérieur gauche d’Office Web Apps, vous permettant de choisir entre le mode Tactile et le mode Précision/souris.

Le bouton Mode tactile : (activé) affiche l’interface d’utilisateur tactile :

 

Aperçu du bouton Mode tactile :

 

Les menus contextuels, les lanceurs de rubans et les menus affichés uniquement sur demande sont affichés dans la méthode de saisie utilisée pour les appeler : le mode tactile ou la souris.

Résumé :

Je vous encourage à utiliser la nouvelle version d’Office Web Apps Preview sur skydrive.com ou sur Office 365 Preview sur un appareil tactile avec Windows 8 et sur un iPad avec iOS (éventuellement en anglais)

Nous aimerions recueillir le témoignage de votre expérience, je vous encourage donc à nous faire part de vos commentaires. Dans le coin supérieur droit de l’application et dans le menu Fichier, vous trouverez l’option « Faire part de ses commentaires ».

Nous affinons et améliorons constamment cette expérience et sommes prêts à écouter attentivement vos critiques et vos compliments.

Renu Devi

Responsable de programme, Office Web Apps

 

Ce billet de blog a été traduit de l’anglais. Vous trouverez la version originale sur Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets