Llega la edición táctil a Office Web Apps en tabletas con iOS y Windows

Artículo original publicado el lunes, 20 de agosto de 2012.

Hace algunas semanas, se presentó la nueva versión de Office Web Apps. Ahora se han agregado nuevas características que mejoran el rendimiento de las aplicaciones al tiempo que siguen proporcionando acceso a los documentos, desde cualquier lugar, mediante varios de los exploradores más populares.

Hoy nos alegra presentarle una nueva dimensión de las posibilidades de entrada táctil de datos, con la incorporación de todas las capacidades de visualización y edición de Office Web Apps a las tabletas y los exploradores compatibles con la tecnología táctil, incluidos IE en Windows 8, y Mobile Safari en iOS.

 Durante el diseño de Office Web Apps para dispositivos táctiles, se establecieron los objetivos siguientes:

• Los usuarios deben ejecutar Office Web Apps para dispositivos táctiles de forma inmediata.
• Debe evitarse que los usuarios tengan que aprender a navegar por una nueva interfaz de usuario.
• Los usuarios deben cambiar fácilmente de la experiencia táctil a la de mouse o teclado.
• Debe habilitarse en los dispositivos móviles (como las tabletas o los monitores táctiles) el conjunto completo de características de Office Web Apps, incluidas las herramientas de edición.

Crear una interfaz de usuario táctil y receptiva a la tecnología de entrada táctil supuso retos de diseño muy interesantes. En este artículo se describe cómo pudo lograrse.

Desarrollo del marco para la tecnología táctil

Se desarrolló un marco unificado coherente con las instrucciones de interacción táctil para las aplicaciones de escritorio de Microsoft Office, iOS y Windows 8, y las plataformas compatibles. Y también se consideró el tipo de experiencia y manipulación táctil que el usuario espera al usar los distintos dispositivos táctiles.

A la hora de diseñar la experiencia del usuario a través de las diversas plataformas, se siguieron los principios siguientes:

• Ofrecer una grata experiencia de un extremo a otro solo con la tecnología de entrada táctil.
  • Centrar la perspectiva en los escenarios y las experiencias de un dispositivo táctil.
  • Garantizar a los usuarios que podrán tocar la interfaz de usuario sin problemas.
  • Crear posibilidades simples e intuitivas de manipulación táctil.
  • Aprovechar las capacidades del explorador.
• Garantizar una grata experiencia de un extremo a otro con una combinación de tecnología táctil, mouse y teclado.
  • Los usuarios pueden cambiar fácilmente de la entrada táctil al mouse o al teclado, para interactuar con la aplicación.
  • La aplicación debe responder a la entrada.

Revisemos estos principios:

Experiencias y escenarios optimizados para la entrada táctil

Aunque escribí este artículo hace algunos días, ya lo he editado varias veces. Como la mayoría de ustedes, ni estuve sentado en el escritorio todo el tiempo ni me llevé un portátil a las clases de esgrima de mi hijo. Empecé a escribir el artículo en mi mesa de trabajo y, aprovechando que tenía el documento en Skydrive disponible para acceder a él desde cualquier lugar, continué editándolo en una tableta.

Con las tendencias y los patrones de uso y comportamiento obtenidos de la investigación de los usuarios, concebimos dos escenarios: 

1.        La experiencia de lectura y uso del contenido de los documentos debe resultar fluida, agradable y fascinante, al igual que la visualización de las presentaciones y las hojas de cálculo.

• La lectura y el consumo de información son las actividades favoritas de la mayoría de usuarios de tabletas.
• Los usuarios navegan por distintos documentos y presentaciones, y realizan comentarios en el contenido que comparten con compañeros y amigos.
• Otros usuarios prefirieron agregar una investigación completa sobre la compra de vehículos a la aplicación web OneNote, para tenerla disponible en sus tabletas a la hora de negociar la adquisición del vehículo.

 2.        La edición ligera, entendida como agregar, modificar y revisar documentos por parte de los usuarios, debe resultar una experiencia muy satisfactoria.

• Las mamás como yo queremos iniciar sesión rápidamente para compartir en una hoja de cálculo con la asociación de estudiantes, padres y maestros, el postre para la fiesta americana del colegio de mi hijo.

• Los estudiantes quieren editar rápidamente el periódico en el que trabajan y participar en la presentación que necesitan ultimar.

Tocar con confianza

Nada es más frustrante que tocar el control de la interfaz de usuario que no se quiere tocar. La confianza en la aplicación aumenta en la medida en que se toca sin errores el control o el elemento de la interfaz de usuario que se elige. Nuestro objetivo es que el usuario use Office Web Apps con total confianza.

El mouse es una herramienta que permite interactuar de forma controlada y precisa con la interfaz de usuario. Combinado con un teclado físico, despierta confianza en el usuario a la hora de ubicar con precisión puntos de inserción, realizar selecciones, pulsar botones e invocar menús contextuales, desplegables y otros elementos de la IU.

Si nos fijamos en los dedos humanos, podemos decir, en comparación, que existen de todo tipo, forma y tamaño. Son torpes como herramienta a la hora de ubicar un punto de inserción, e imprecisos para controlar la interacción con la interfaz de usuario.

Nuestro objetivo ha sido que el usuario toque sin temor la interfaz de usuario y obtenga el resultado que espera, al igual que lo haría con un mouse.

Conseguir que un elemento pueda tocarse con facilidad depende del tamaño del objetivo. Muchos elementos de la interfaz de usuario, como los menús contextuales y los controles de la cinta de opciones, tienen un tamaño inferior a "los límites de lo tangible" que se definen en Windows 8 y Microsoft Office.

En la nueva versión de Office Web Apps, todos estos elementos pueden tocarse con gran facilidad. Especialmente, se procuró aumentar el tamaño de los elementos de la IU y conservar en la medida de lo posible el contenido del documento en su estado real, de forma equilibrada.

Observe en esta ampliación que los botones son más grandes, y que hay más espacio disponible entre los controles y para tocarlos:

 La pestaña Inicio de Excel Web App:

La pestaña Insertar de PowerPoint Web App:

La pestaña Inicio de OneNote Web App:

El Selector de colores de Word Web App:

Usar las nuevas posibilidades simples e intuitivas de manipulación táctil

Uno de nuestros principales objetivos fue que los usuarios pudieran iniciarse rápidamente con Office Web Apps en las tabletas, a través de nuevas posibilidades, simples e intuitivas, de manipulación táctil; y descartar así otros gestos complejos que requieran aprender y memorizar contenidos.

Para iniciarse, el usuario solo debe realizar cinco acciones:

Veamos cómo pueden usarse estas acciones en Office Web Apps:

Desplazarse por un documento y examinarlo

Si necesita explorar un documento rápidamente, puede desplazarse o hacer pasar el contenido con un movimiento de desplazamiento rápido. El contenido del documento se desplaza con una aceleración rápida y fluida que se puede interrumpir en cualquier momento si se puntea con el dedo.

Hemos usado la capacidad nativa del explorador para habilitar el desplazamiento acelerado en las vistas de lectura y edición de Word Web App.

En PowerPoint Web App, con la misma acción de hacer pasar el contenido puede cambiar entre distintas diapositivas.  

Acercarse y alejarse:

Para acercarse o alejarse en la interfaz de usuario, solo necesita juntar o separar dos dedos.

Escribir:

Si puntea una vez con el dedo en la Vista de edición de Office Web Apps, aparecerá un punto de inserción y se abrirá el teclado para comenzar a escribir.

El punto de inserción de Word Web App:

Observe que el punto de inserción es distinto del que aparece cuando se usa el mouse y el teclado. La "barra de redimensionamiento" circular del punto de inserción permite captarlo y arrastrarlo con gran facilidad para realizar una selección.

Dado que escribir es fundamental para realizar ediciones, facilitar una experiencia de escritura positiva era uno de los principales escenarios que se pretendía conseguir.

Ubicación del punto de inserción

El dedo es una herramienta de entrada imprecisa, por lo que tuvimos que investigar cómo situar con exactitud un punto de inserción en la ubicación seleccionada por el usuario.

La mayoría de los usuarios tienden a modificar el principio o el final de una palabra.

Por tanto, a la hora de ubicar el punto de inserción usamos el enfoque de "barra lateral".

Si se puntea una vez en una palabra existente, se calcula el extremo más próximo (el inicio o el final de la palabra) y se ubica en él el punto de inserción. Si se puntea de nuevo en la misma palabra, se refina el punto de inserción y se sitúa en la ubicación exacta donde se realiza el toque.

Selección

Seleccione texto y objetos para manipularlos, aplicarles formato y realizar con ellos diversos tipos de acciones. El mouse y las teclas Mayúsculas y Control del teclado permiten seleccionar el destino con gran precisión y, por tanto, realizar estas operaciones de un modo muy eficaz.

En el entorno táctil, la "barra de redimensionamiento" del punto de inserción sirve como controlador del mismo, y permite captarlo para arrastrar y crear una nueva selección. Para modificar una selección existente, también puede reducir o aumentar el rango seleccionado con las barras de redimensionamiento de cada extremo.

Arrastrar la barra de redimensionamiento para seleccionar texto en Word Web App:

 Arrastrar para seleccionar las dimensiones de la tabla que se va a insertar:

Aplicar las acciones de los menús contextuales:

Los menús contextuales ofrecen un modo rápido y eficaz de aplicar acciones a un contexto específico. Posiblemente ya haya usado estos menús en Office Web Apps con el mouse, ya que se muestran al hacer clic con el botón secundario de este.

Clic con el botón secundario del mouse en los menús contextuales de la Vista de edición de Word Web App:

Hemos facilitado la aparición de los menús contextuales y basta con puntear en una selección para que se muestren. Para descartarlos, solo tiene que puntear fuera del menú contextual.

Al puntear en una selección, aparece el menú contextual:

Observe el amplio espacio del que disponen los controles en el menú contextual para tocarlos.

Para mostrar un menú contextual en un punto de inserción, presione con un dedo y mantenga presionado un momento:

Si se puntea una vez en la Vista de lectura de Word Web App, se selecciona una línea. Si se puntea de nuevo en la selección, aparecerá el menú contextual.

Selección y menú contextual del visor de Word Web App:

Garantía de una grata experiencia de un extremo a otro con una combinación de tecnología táctil, mouse y teclado

Las tabletas pueden usarse con entrada táctil, de mouse y de teclado.

En Windows 8, Office Web Apps puede usarse en modo táctil, con mouse y teclado, o con una combinación de ambos modos. En iOS, Office Web Apps funciona mejor con la entrada táctil.

Modo táctil

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

• Interfaz de usuario fija

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

Ejemplo: Cinta y panel de navegación de OneNote Web App.

• Interfaz de usuario contextual

 Esta interfaz de usuario aparece y desaparece a petición.

Ejemplo: menús contextuales.

En los dispositivos táctiles, Office Web Apps muestra de forma predeterminada la interfaz de usuario fija en el modo táctil. Si desea cambiar el modo para usar la interfaz de usuario con un mouse, presione el botón "Modo táctil".

Este botón aparece en la Barra de herramientas de acceso rápido, situada en la parte superior izquierda de Office Web Apps, y permite alternar entre los modos táctil y de precisión o con el mouse.

Botón Modo táctil (ACTIVADO): muestra la interfaz de usuario táctil

Una ampliación del botón Modo táctil:

Los menús contextuales, los elementos desplegables de la cinta de opciones y los menús que aparecen a petición mantienen el modo de entrada desde el que se les invoca, ya sea el modo táctil o con el mouse.

Resumen:

Le animo a probar Office Web Apps Preview desde Office 365 Preview o skydrive.com, ya sea en un dispositivo táctil con Windows 8 o en un iPad con iOS. 

Nos encantaría que compartiera con nosotros su propia experiencia, así que no dude en hacernos llegar sus comentarios. Para ello, en el menú Archivo situado en la esquina superior derecha de la aplicación, encontrará la opción "Incluya sus comentarios".

Por nuestra parte seguimos refinando y mejorando la experiencia de forma ininterrumpida, por lo que consideraremos muy seriamente los elementos que le gustan y los que no.

 Renu Devi

Administradora de programas, Office Web Apps

Esta entrada de blog es una traducción. Para consultar el artículo original, vea Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets.