-- Renu Devi, Gerente de Programas en Office Web Apps

Office Web App Touch EditingHace unas cuantas semanas presentamos el nuevo Office Web Apps. Hemos agregado funciones nuevas y mejorado el desempeño de nuestras aplicaciones, además de seguir brindándote acceso a tus documentos en todo lugar a través de los navegadores más populares.

El día de hoy, queremos presentarte una nueva dimensión de entrada de datos: la tecnología táctil, que proporciona capacidades para ver y editar con Office Web Apps en las tabletas y los navegadores con soporte táctil, como IE en Windows 8, y Safari móvil en iOS.

Cuando comenzamos a diseñar Office Web Apps para incorporar tecnología táctil, nos planteamos los siguientes objetivos:

  • Los usuarios deben poder instalar y comenzar a utilizar Office Web Apps de inmediato
  • Los usuarios no necesitan aprender a navegar por la nueva interfaz de usuario
  • Los usuarios pueden cambiar de manera sencilla entre las experiencias táctiles y el ratón/teclado
  • Todas las funciones de Office Web Apps, incluso las herramientas de edición, deben estar activadas en todos los dispositivos táctiles, tales como tabletas y monitores táctiles.

Crear la interfaz de usuario para que fuera táctil y respondiera al tacto presentó retos de diseño interesantes. En este artículo, explicaremos cómo lo logramos.

Desarrollamos un plan de tecnología táctil

Desarrollamos un plan de trabajo unificado que fuera consistente con las plataformas que soportamos y con las pautas de Interacción táctil para las aplicaciones de escritorio Microsoft Office, Windows 8 e iOS. Eso también lo complementamos con la experiencia y las manipulaciones táctiles que los usuarios esperan cuando utilizan un determinado dispositivo táctil.

Aplicamos los siguientes principios para crear la experiencia de usuario en todas las plataformas:

  • Brindar experiencias placenteras de punta a punta cuando se utiliza la característica de entrada táctil
    • Enfocarse en los casos de uso y en las experiencias de un dispositivo táctil
    • Asegurar que los usuarios puedan tocar la interfaz de usuario con confianza
    • Crear manipulaciones táctiles sencillas e intuitivas
    • Aprovechar las capacidades del navegador
  • Brindar grandes experiencias de punta a punta mediante una combinación de tacto, ratón y teclado
    • Los usuarios pueden cambiar fácilmente entre el tacto y el ratón/teclado para interactuar con la aplicación
    • La aplicación responderá a las indicaciones.

Analicemos a detalle cada uno de esos principios:

Casos de uso y experiencias optimizadas para la tecnología táctil

Escribimos este artículo en varios días y lo editamos unas cuantas veces. Al igual que la mayoría de ustedes, no lo escribimos todo en una PC de escritorio, ni tampoco llevamos una portátil a todos los lugares a los que vamos. Comenzamos a escribir en la oficina, lo subimos a SkyDrive para consultarlo en cualquier lugar y continuamos la edición en una tableta.

Las tendencias y los patrones de uso y de comportamiento que surgieron a partir de una investigación a los usuarios nos ayudaron a enfocarnos en dos casos de uso predominantes:

1. Leer y consumir contenido de documentos y ver presentaciones y hojas de cálculo serán actividades rápidas, placenteras y cautivantes.

  • Leer y consumir información en una tablet fue la actividad predilecta de la mayoría de la gente.
  • Las personas navegan por documentos y presentaciones y hacen comentarios acerca del contenido que comparten con sus colegas y amigos.
  • Otros desean agregar la información que recopilan sobre automóviles en su aplicación web de OneNote y tenerla a la mano en su tableta mientras negocian la compra de un auto.

2. La edición ligera será muy satisfactoria conforme la gente agregue, modifique y revise sus documentos

  • Las mamás como yo desean registrarse de manera rápida para llevar el postre al convivio escolar de sus hijos en la hoja de cálculo compartida por la Asociación de Padres y Maestros de la escuela.
  • Los alumnos desean realizar ediciones rápidas al ensayo en el cual trabajan y colaborar en la presentación que necesitan pulir.

Toca con confianza

Nada es tan frustrante como tocar un control por accidente en la interfaz de usuario. La confianza en la aplicación aumenta cuando tocas el control o la parte de la interfaz de usuario que pretendías tocar. Queremos que sientas esa confianza cuando utilices Office Web Apps.

El ratón es una herramienta que permite una interacción precisa y controlada con la interfaz de usuario. Al emplearse en conjunto con un teclado físico, brinda al usuario la capacidad de colocar un punto de inserción con precisión, realizar selecciones, pulsar botones y abrir menús contextuales, menús desplegables y otras interfaces de usuario.

En contraste, los dedos tienen miles de formas y tamaños diferentes. Son torpes al momento de colocar un punto de inserción y no controlan con precisión la interacción con la interfaz de usuario.

Nuestro objetivo era que los usuarios tocaran sin temor a la interfaz de usuario y obtuvieran los resultados que esperaban, al igual que lo harían con un ratón.

Lograr que algo sea fácil de tocar depende del tamaño del objetivo. Muchos elementos de la interfaz de usuario, tales como los controles del listón y los menús contextuales, estaban muy por debajo de los límites de tamaño “táctiles” definidos por Windows 8 y Microsoft Office.

Todos esos elementos ahora son fáciles de tocar en las nuevas Office Web Apps. Se ha puesto especial cuidado para equilibrar el incremento en el tamaño físico de la interfaz de usuario y preservar la mayor cantidad posible de espacio para el contenido de los documentos.

Observen los botones más grandes y más fáciles de tocar y el amplio espacio entre los controles en la siguiente imagen:

La pestaña Principal en Excel Web App:

La pestaña Insertar en PowerPoint Web App:

La pestaña Principal en OneNote Web App:

El Seleccionador de Color en Word Web App:

Utiliza manipulaciones táctiles sencillas e intuitivas

Uno de los objetivos principales era que los usuarios pudieran comenzar a utilizar de inmediato Office Web Apps en las tabletas con manipulaciones táctiles sencillas e intuitivas en lugar de gestos complejos que requieren aprenderse y recordarse.

Bastan cinco acciones para poder comenzar:

Veamos como puedes utilizar estas acciones en las Office Web Apps:

Deslízate y navega por tu documento

Cuando necesitas recorrer de manera rápida un documento, puedes deslizar el dedo con un movimiento veloz. El contenido del documento se deslizará en forma rápida y fluida, y podrás detenerlo con solo dar un pequeño golpe en la pantalla.

Hemos aprovechado la capacidad nativa del navegador para permitir el deslizamiento acelerado en la Word Web App dentro de las vistas de Leer y Editar.

En la PowerPoint Web App, puedes utilizar la misma acción deslizante para cambiar de una diapositiva a otra.

Ampliación y reducción:

Puedes amplificar o reducir la interfaz de usuario si separas o juntas dos dedos.

Teclado:

Un pequeño golpe en la vista de Edición de Office Web Apps coloca un Punto de Inserción y despliega el teclado para comenzar a utilizarlo.

El punto de inserción en la Word Web App:

Observen que el punto de inserción se ve diferente que cuando se utiliza el ratón y el teclado. La “pinza” circular con el punto de inserción te permite tomarlo y arrastrarlo con facilidad para realizar la selección.

Utilizar el teclado es fundamental para editar, de modo que brindar una buena experiencia es de suma importancia en este caso.

Colocación del punto de inserción

Debido a que el dedo es una herramienta imprecisa para introducir datos, tuvimos que pensar en cómo colocar de manera exacta un punto de inserción en el lugar donde el usuario lo pretendía.

La mayoría de los usuarios modificarán ya sea el principio o el final de la palabra.

Por lo tanto, utilizamos una estrategia similar a un “sujetalibros” para colocar un punto de inserción.

Golpear una sola vez sobre la palabra calcula el extremo más cercano (el comienzo o el final de la palabra) y coloca el punto de inserción justo ahí. Al golpear de nueva la misma palabra, el punto de inserción se coloca en el lugar exacto donde se registra el golpe.

Selección

La selección de texto y objetos te permite manipular, aplicar formato y realizar otras acciones en ellos. Los usuarios pueden llevar a cabo esas acciones de manera eficiente si oprimes al mismo tiempo el ratón y las teclas de control y de mayúsculas, lo que asegura una selección precisa.

En el caso de la tecnología táctil, la “pinza” en el punto de inserción permite crear una selección nueva. También puedes modificar una selección actual al reducir o ampliar el rango seleccionado utilizando las “pinza” en cada extremo.

Arrastrar la “pinza” para seleccionar texto en Word Web App:

Arrastrar para seleccionar las dimensiones para insertar una tabla:

Aplicar acciones en contexto:

Los menús contextuales ofrecen una manera rápida y fácil de aplicar acciones en un contexto específico. Lo más seguro es que ya sepas utilizar los menús contextuales con el ratón en Office Web Apps. Estos se despliegan al hacer clic derecho en el ratón.

Despliega los menús contextuales en la vista de Edición de Word Web App haciendo clic derecho en el ratón:

Hemos simplificado el acceso a los menús contextuales: sólo da un pequeño golpe en una selección para desplegarlo. Vuelve a tocar el menú contextual para cerrarlo.

Un pequeño golpe en la selección despliega el menú contextual:

Observa cómo el amplio espacio entre los controles simplifica el tacto en el menú contextual.

Puedes desplegar un menú contextual en un punto de inserción si oprimes un poco con el dedo:

 

En la vista de Lectura de Word Web App, puedes seleccionar una línea con un solo golpe. Un solo golpe en la selección despliega el menú contextual.

Selección y menú contextual en el visualizador de Word Web App:

Obtén una gran experiencia al combinar tacto, ratón y teclado

Las tabletas se pueden utilizar con tacto, ratón y teclado.

En Windows 8, las Office Web Apps se pueden utilizar con tacto, con ratón y teclado o con ambos. En iOS, las Office Web Apps funcionan mejor con el tacto.

Modo táctil

En Office Web Apps, la interfaz de usuario se puede describir como:

  • Interfaz de usuario fija

Esta interfaz de usuario siempre está presente y abierta en la aplicación.

Ejemplo: Panel de navegación de OneNote Web App, Listón

  • Interfaz de usuario contextual

Esta interfaz de usuario aparece y desaparece a solicitud.

Ejemplo: Menús contextuales

En un dispositivo táctil, Office Web Apps mostrará, por defecto, la interfaz de usuario fija con el modo táctil. Puedes cambiar ese modo para utilizar la interfaz de usuario con un ratón y desactivar el botón “Modo táctil”.

El botón “Modo táctil” aparece en la barra de herramientas de acceso rápido, ubicada en la parte superior izquierda de Office Web Apps, y te permite cambiar entre el modo táctil y el modo precisión/ratón.

El botón “Modo táctil” (activado) despliega la interfaz de usuario táctil:

El botón “Modo táctil” amplificado:

Los menús contextuales, los listones desplegables y los menús que se abren a solicitud, se muestran en el método de entrada que los solicitó: táctil o ratón.

Resumen:

Los invitó a probar la nueva versión preliminar de Office Web Apps en skydrive.com o en la versión preliminar de Office 365 en un dispositivo táctil con Windows 8, o con iOS en un iPad.

Nos gustaría que nos contaran su experiencia, así que los invito a brindarnos su retroalimentación. En la esquina superior derecha de la aplicación y en el menú Archivo se encuentra la opción “Dar retroalimentación”.

De manera constante optimizamos la experiencia y siempre tomamos en cuenta lo que les agrada y lo que les desagrada.