Hola, soy Keri Vandeberghe y trabajo en el grupo de diseño de Office (ODG) de Microsoft como diseñadora de experiencia del usuario. Quisiera compartir los fundamentos del enfoque visual y la integración de marca de Office 2010 y la filosofía que nos llevó a elegir esta dirección para nuestro diseño actual.

Filosofía

Office 2010 no es una renovación total sino una actualización visual para pulir la superficie y quitar elementos visuales innecesarios, prestando más atención al contenido de los usuarios y menos a los bordes y widgets que enmarcan la parte de contenido de una ventana (este marco también se conoce como “cromo”). Para lograr esto, hemos reducido el número de bordes, cuadros y bandas horizontales, que devolvieron 6 píxeles más de espacio vertical al área de contenido. Agregando más espacio en blanco, y elementos visuales cuidadosamente ubicados, procuramos crear una interfaz menos engorrosa, más ágil y con más espacio para que los usuarios puedan expresarse.

En Office 2007 la cinta de opciones era un paradigma nuevo de la UI y se buscó un estilo visual que expusiera las características del producto, además de mostrar la relación entre los controles y poner en primer plano la funcionalidad que estaba oculta detrás de los menús y diálogos. Los cuadros y bordes alrededor de cada grupo de controles y de la cinta de opciones actuaban como “pistas visuales” para guiar al usuario. La cinta de opciones de Office 2007 usaba una superficie transparente de alto brillo, que era coherente con la estética de Windows Vista y le daba un toque atractivo adicional a la nueva interfaz.

RibbonCompare 
Comparación de la cinta de Office 2007 y Office 2010

En Office 2010 nos pareció que la UI había madurado y adoptado un aspecto más refinado sin sacrificar la estructura general de la cinta de opciones y su funcionalidad. Un cambio importante en los elementos visuales de Office 2010 es que el tema predeterminado ya no es de color azul. Elegimos una paleta neutra para reducir al mínimo la sobrecarga sensorial al crear documentos y, además, dejamos de lado los acabados llamativos. La cinta de opciones sigue siendo el componente más sobresaliente de la UI y fija el tono de todo lo demás. La interfaz de usuario debajo de la cinta de opciones es más sutil. Los degradados suaves y el uso de luz y color tienen como propósito llamar la atención o dirigir la mirada del usuario a un área específica. Hay un ritmo visual definido por el espacio en blanco y algunos pocos elementos de alto contraste, como el color anaranjado de la marca Office para indicar la selección y los colores de cada producto en la ficha Archivo.

Office2007_2010compareLarge

Continuamos con la tradición de incluir tres temas en la UI; plateado, azul y negro. Ahora, todo el texto del tema plateado tiene una relación de contraste de 5:1 (la diferencia percibida en un color cuando está rodeado por otro color) respecto de su fondo. Ésta es una solicitud habitual de los usuarios con dificultades visuales y comprobamos además que la mayoría se beneficia gracias a la mayor facilidad de lectura y mejoras.

imagen

Para cambiar de tema hay que hacer clic en la ficha Archivo > Opciones > General > Esquema de colores.

optionsDialog

Coherencia entre plataformas

La coherencia en el estilo visual general en todas las aplicaciones de Office, SharePoint y aplicaciones web fue un objetivo importante en esta versión. Queríamos una sensación de familiaridad y coherencia al pasar de un producto a otro. La paleta de colores neutra de SharePoint proporciona una plataforma para que la personalización de la marca individual de la compañía se destaque con mucho menos esfuerzo. La aplicación de la paleta de colores neutra a las aplicaciones web combina bien con una variedad de interfaces de aplicación host y vincula la experiencia con todas las aplicaciones de Office.

 platform_compare

Alineación con la estrategia de marca

El grupo de diseño de Office trabajó en estrecha colaboración con el equipo de marca de Microsoft para evaluar, refinar e identificar las oportunidades de personalización de marca en los productos. Esta colaboración permitió plasmar la marca en el producto de forma relevante y distintiva.

Con Office 2010 presentamos también un nuevo sistema de marca de Office. El logotipo de cuatro colores que representaba originalmente a Word, Excel, PowerPoint y Outlook ha evolucionado y ha adoptado el color anaranjado distintivo de la marca Office. Las piezas de rompecabezas que se usaron por última vez en el logotipo de Office XP han dado lugar a un diseño que transmite energía, impacto y conexión.

OfficeBrand_compare

Los iconos de las aplicaciones se han rediseñado para el lanzamiento de Office 2010. Los nuevos diseños de los iconos se basan en investigaciones cuyos resultados señalan que los usuarios pueden asociar más fácilmente los iconos por letra y color que por diseño abstracto. Hemos adoptado un sistema alfabético para dar un enfoque más uniforme a la amplia variedad de productos de la familia de Office.

ProductIcons

También decidimos acentuar los colores de cada aplicación en esta versión y actualizamos el espectro de colores para usar una paleta de colores más vibrantes y puros. Agregamos el color del producto a la ficha Archivo y algunos elementos específicos de la vista Backstage para facilitar la identificación de la aplicación de Office en la que se está trabajando. Piense en la ficha Archivo con el color de la aplicación como si fuera una especie de "muestrario" de la vista Backstage.

FileTabCoreSet

Backstage_all

El nuevo gesto de marca de Microsoft Office y la paleta de colores anaranjada actualizada se destacan en la pantalla de presentación animada. La animación agrega energía, expresividad y un toque de encanto a la experiencia de inicio del producto.

 splashsequence

No es solo una imagen bonita
El diseño y la implementación de los elementos visuales de Microsoft Office va más allá de los iconos y del eterno deseo de “verse bonito”. Se trata de acortar la distancia entre lo conocido y lo desconocido, de transmitir y desarrollar una marca y de ayudar a los usuarios a realizar sus tareas cotidianas sin obstáculos. Esperamos que esta breve descripción les haya ayudado a apreciar mejor la actualización visual que verán en Microsoft Office 2010.

Publicado originalmente: Viernes 11 de diciembre de 2009, 9:34 p.m. por OffTeam

Esta entrada de blog es una traducción. Puede consultar el artículo original en http://blogs.technet.com/office2010/archive/2009/12/11/office-2010-visuals-and-branding.aspx.