El arte de diseñar Office para iPad


Por: Han-Yi Shaw, Gerente de Grupo de Programa y Gerente de Diseño en Office
para iPad.

Hola de nuevo de parte del equipo de Office para iPad. Conseguimos un gran logro al llegar a más de 27 millones de descargas de Office para iPad y quisiéramos dar las gracias a todos los que han probado las aplicaciones y nos han hecho llegar sus comentarios para ayudarnos a mejorar de manera continua Office para ustedes. Ahora queremos compartir con ustedes una mirada detrás de cámaras del diseño y el camino creativo que tomamos cuando reimaginamos Office para iPad desde cero.

Desde sus inicios, el proyecto Office para iPad ha sido una mezcla de imaginación y pasión. Cuando dimos nuestro primer vistazo al iPad, estábamos intrigados por la gran oportunidad que teníamos adelante: permitir a los clientes de Office – más de mil millones alrededor del mundo – a redescubrir el poder de la productividad móvil a través de nuevas y emocionantes maneras.

Un enfoque de diseño guiado por el escenario

En los últimos años, los dispositivos habilitados para el tacto han cambiado la forma en la que nos relacionamos con la tecnología, pero a la promesa de la productividad móvil todavía le falta camino por recorrer. La productividad móvil se trata de hacer las cosas, sin importar dónde estén, así que comenzamos por dar un vistazo profundo a cómo la gente – entre ellos, nosotros – aspira a utilizar los dispositivos móviles para trabajar en sus cosas. Identificamos algunos escenarios móviles clave que la gente dijo que quería y necesitaba para hacer la mayoría de sus cosas en iPad. De manera general, se incluían los siguientes:

  • Empacar para el viaje a casa

  • Comenzar desde cero

  • Caos de último minuto

  • Arreglar las cosas

  • Colaborar con colegas de trabajo

  • Tomar notas

Al tomar un enfoque guiado por el escenario, nuestro arranque fue “diseñar para iPad” en lugar de “portar hacia iPad”. Al ser la suite de productividad más poderosa del mundo, Office tiene una gran amplitud y profundidad, pero sabíamos que traer cientos de comandos, barras de herramientas de Office al iPad iba a ser, poniéndolo en palabras simples, un error. Una medida clave de éxito para el software de productividad es: ¿Qué tan productivos son los usuarios que utilizan ese software? Esto significa ofrecer el conjunto correcto de características apropiadas para el dispositivo. Los escenarios móviles que identificamos sirvieron como un criterio importante para nuestras decisiones sobre que se incluye, que se deja fuera, y que falta por inventarse en Office para iPad.

Basados en estos escenarios móviles, aquí hay algunos ejemplos de lo que metimos. Incluimos los principales comandos de edición y galerías visuales de un toque para resultados instantáneos y hermosos que no requieren de pasos repetitivos. También incluimos plantillas de diseñador para que sus documentos se vean hermosos y profesionales desde el principio. Y también incluimos el mejor seguimiento de cambios en Word y la revisión de comentarios a través de todas las aplicaciones. Y, para ayudarles a tomar las mejores notas, incluimos un OneNote para iPad actualizado de manera significativa.

Lo que dejamos fuera estaba también basado en esos escenarios de productividad móvil. Por ejemplo, crear tabulaciones cruzadas con PivotTables en su camino al trabajo o agregar referencias cruzadas a obras maestras como la Guerra y la Paz en el camino de regreso a casa no son la forma como la mayoría de la gente utiliza sus iPad. Los escenarios nos ayudaron a enfocar nuestra energía en las tareas que más importan para el primer lanzamiento – ¡Y fue liberador!

Así que ya sea que lean documentos en sus traslados a casa por la tarde, den los últimos toques de camino a su gran presentación, tomen notas en clase, sean co-autores de documentos con otros, o estén a punto de llegar a la fecha de entrega de ese importante documento, Office para iPad ofrece las herramientas que les ayudarán a llegar a su meta con los mejores y más rápidos resultados.

Metas de experiencia de usuario – sin lugar a dudas Office, optimizado para iOS 7

Mientras que los escenarios de productividad móvil mencionados líneas arriba ayudaron a definir el ‘Qué’, también queríamos conseguirlo con el ‘Cómo’. Cuando vimos cómo utiliza la gente las soluciones de productividad existentes en iPad, observamos que muchos usuarios se encuentran a ellos mismos como “principiantes perpetuos”. Esto significa que pasan más tiempo en el aprendizaje del producto que el que pasan usándolo, que por supuesto va en contra de la productividad. Así que cuando se trató de definir nuestras metas de experiencia de usuario, era importante para nosotros que los usuarios pudieran tener nuestro producto y comenzar a utilizarlo de inmediato. Con eso en mente, nuestras metas de experiencia de usuario fueron:

  • Experiencia conocida de Office, sin curva de aprendizaje

  • Office optimizado para iPad, sin lugar a dudas

  • Inmersiva y sin distractores

  • El contenido del documento como elemento principal y no la UI

  • La experiencia siempre es hermosa, rápida y fluida

El propósito de una experiencia conocida de Office es simple: una curva de aprendizaje baja y una alta confianza del usuario. Sin embargo, es igual de importante conseguir un balance entre “Office sin lugar a dudas” y “optimización de plataformas”, que significa optimizar para convenciones de la plataforma iOS y las expectativas táctiles de los usuarios. La meta más importante y que fue todo un reto, era encontrar el punto exacto entre la esencia de Office y iOS. Por fortuna, debido a que el equipo de Office para iPad y Mac (conocido con anterioridad como la Unidad de Negocios Macintosh) está constituido por especialistas de plataforma Apple, fuimos capaces de aplicar todo nuestro conocimiento de plataformas Apple a esta tarea.


Así fue como estas metas de experiencia de usuario nos guiaron para rediseñar el Ribbon de Office para iPad. Queríamos que el Ribbon para iPad de siguiente generación ofrecería la familiaridad del escritorio, pero que fuera primero táctil y optimizado para tableta. En ocasiones, enfaticé la necesidad de que fuera ‘más ligero como una pluma’. Para conseguir su apariencia delgada y ligera, insertamos el Ribbon dentro de la barra de navegación estándar de iOS e incluimos sólo una fila de comandos. Lo diseñamos de esta manera para permitirles navegar de manera sencilla las capacidades de Office sin tener que hacerlos sacar características que estuvieran enterradas dentro de los menús. No queríamos abrumarlos al mostrarles toda la profundidad de Office al mismo tiempo. Gracias al diseño basado en pestañas del Ribbon, ustedes – no el equipo de Office para iPad – tienen el poder de decidir qué quieren exponer basados en la tarea que tienen a la mano. Y, para mejorar la fluidez general del Ribbon, su capacidad de respuesta y el sentido de manipulación directa, agregamos unas sutiles animaciones

También agregamos comandos Quick Access a la izquierda y derecha del Ribbon, para que puedan acceder a los comandos globales de más uso – como Deshacer, Rehacer, Buscar y Compartir – sin tener que cambiar a una pestaña específica.

Otro aspecto clave del Ribbon para iPad es que se adapta de manera dinámica a los cambios constantes de tamaño y orientación, ya sea retrato o paisaje. Cuando se reduce el espacio, el Ribbon controla el flujo a menús popover con posicionamiento preciso. Esto asegura que el Ribbon para iPad está construido para el futuro, porque puede escalar de manera sencilla con el conjunto de características evolutivas de office y adaptarse a nuevos tamaños de pantalla. El Ribbon también puede ser colapsado de manera completa, para que cuando sólo quieran leer su documento, la interfaz de usuario (UI), esté “fuera de vista, fuera de nuestra mente”.

Una vez que el Ribbon y otros básicos de la amplia interfaz de la suite estuvieron definidos, los diseñadores y los gerentes de programa de Word, Excel, PowerPoint y OneNote trabajaron de cerca y en conjunto para incorporar funcionalidad de aplicación a este marco de trabajo de experiencia de usuario de toda la suite. A la par de lo anterior, también afinábamos los elementos centrales de la interfaz de usuario para estar seguros de que incluían la rica pero muy diversa funcionalidad a través de otras aplicaciones y mantenían la consistencia de toda la suite. Por ejemplo, las pestañas de la hoja de Excel y las pestañas de sección de OneNote reflejan la personalidad distintiva de cada aplicación, pero se comportan de manera consistente al momento de agregar, nombrar y recorrer las pestañas.

Principios de diseño

Además de optimizar Office para iPad para el tacto, también queríamos que el despliegue visual fuera moderno de una manera refrescante. El Lenguaje Moderno de Microsoft y el lenguaje de diseño de iOS 7 de Apple comparten una filosofía en común: una fuerte reducción de la complejidad. Esto aplica a la arquitectura de la información, pero también al lenguaje visual. Con las capacidades temáticas más flexibles de iOS 7, fuimos capaces de entregar la experiencia Microsoft que queríamos para iOS 7. Esto significó dejar fuera detalles externos y enfocarnos en una clara jerarquía de información. Durante el tiempo de diseño de Office para iPad, si había un detalle visual o una etiqueta de texto que no fueran absolutamente necesarias, las quitábamos. El resultado es una clara jerarquía de la información, donde todo es más funcional y eficiente, pero también hermoso por naturaleza.


Los principios distintivos de diseño del Lenguaje Moderno de Microsoft incluyen:

  • Orgullo en la fabricación.

  • Rápido y fluido

  • Hacer más con menos

  • Ganar como uno

  • Cada uno de estos principios jugó un rol importante en nuestro proceso de diseño.

El orgullo por lo fabricado se refiere a la creencia de que cuando atención al detalle, los clientes lo notan. El nivel de fabricación es cada vez más elevado desde que cada pixel y cada movimiento que procesábamos en la pantalla también estaban listos para Retina Display. El resultado es que Office para iPad ofrece el texto más detallado y los gráficos más definidos de cualquier versión de Office que se haya fabricado hasta el momento.

Rápido y fluido. Con cuatro veces más pixeles por procesar, el texto y los gráficos detallados que buscábamos requerían de inversiones más profundas en ingeniería para asegurar que la experiencia de usuario se mantuviera rápida y fluida. Esto era cierto en especial en el departamento de movimiento por ejemplo, para cosas como el “salto de desplazamiento” de la rejilla de la hoja de cálculo y la “animación de selección de celda” en Excel. Para lograr el mejor desempeño, aprovechamos las API CoreAnimation de Appel para animaciones de UI; las API nativas de Office AirSpace para animaciones en el documento.

Hacer más con menos habla de nuestra creencia de que la reducción es un acto creativo. Creemos en el “contenido sobre el cromado”, lo que significa que los documentos de los usuarios deberían siempre estar al centro, no la UI. Los contornos o las sombras fueron reducidos al mínimo – y disponibles sólo para agregar usabilidad o para una profundidad jerárquica convenida en iOS 7 – a la vez que se mantiene “presente pero no a la vista”.

Ganar como uno es sobre cómo Word, Excel, PowerPoint y OneNote para iPad ofrecen experiencias coherentes que funcionan de manera excepcional juntas. No sólo nos detuvimos con nuestras ofertas de iPad. De manera colectiva, aplicamos estas cualidades de diseño cohesivo del Diseño de Lenguajes de Microsoft para asegurar que la función y la forma trabajan en conjunto para ir más allá de las expectativas.

Esa fue la historia de cómo aspiramos a llevar el estándar dorado de la productividad a iPad, mientras poníamos un nuevo estándar en productividad móvil. Espero que hayan disfrutado esta jornada sobre cómo pusimos Office en la punta de sus dedos – y espero que Office para iPad les ayude a conseguir su propio toque creativo.

Tags: , , , , ,

Publicaciones Relacionadas