Asignatura: Diseño de Interfaces multimedia.

Nombre del estudiante: Anna Ferry Mestres.

Consultor: Tona Monjo Palau.

Introducción

A partir de unos wireframes dados para rediseñar un sitio web, que fueron elaborados como práctica final en la asignatura de Arquitectura de la Información en un semestre anterior, se solicita el diseño de los prototipos gráficos de las diferentes pantallas de la aplicación. Se trata del rediseño del sitio web Revolutum (www.revolutum.com), una tienda electrónica donde se pueden encontrar regalos originales para ocasiones especiales.

Aunque teóricamente solo debería describir el proceso del desarrollo de la práctica final, considero que es importante repasar, aunque sea un poco por encima, el proceso seguido durante toda la asignatura, ya que en la práctica se puso la guinda al pastel, pero la conceptualización, las primeras propuestas gráficas y el esbozo de una primera versión de la guía de estilos llevados a cabo en las PEC 2 y 3 son igualmente importantes.

Etapas y retos

Conceptualización

• Modelización del usuario: Antes de empezar a crear, hay que saber a quién está dirigida la aplicación con el objetivo de que el diseñador tenga en mente un usuario real con unas características determinadas y le permita así adaptarse a unos objetivos concretos y optimizar el grado de satisfacción del usuario. Para la modelización de éste se utilizó la técnica llamada “Persona”, en la que se construyen varias fichas de personas a las que se les atribuye una identidad concreta (con nombre, fotografía, aficiones, etc.). Generalmente en un proyecto real estas características de la persona deben ser coherentes con la información obtenida sobre la audiencia en la fase de análisis, pero en el ámbito de esta práctica esta información se generó a partir de los rasgos que el estudiante presumiera que tendrían los principales usuarios de la web.
• Wall concept: En líneas generales se buscó un estilo retro con tipografía vintage y diferentes paletas de colores que podrían adaptarse. También se buscaron imágenes que representaran el concepto que se le quería dar a la página web, intentando mostrar un aspecto original (igual que los productos que ofrece la tienda online) y que mezclara en la medida de lo posible una estética antigua con una moderna. Este Wall concept, publicado en la plataforma Pinterest, todavía puede visitarse en el siguiente enlace: https://www.pinterest.com/laferry/wall-concept/

Wireframes
Para ver un poco la base de partida, estos son algunos de los wireframes proporcionados para realizar la práctica:

Primera propuesta gráfica
En la primera de las entregas se pedía una primera aproximación a la propuesta gráfica, adaptando la página de inicio de la web tanto en aplicación de escritorio como en dispositivo móvil.

Siguiendo la idea que se buscaba en el Wall Concept, se intentó plasmar un aire retro combinado con un estilo moderno. Esto se consiguió jugando con una paleta de colores mate, unas texturas de fondo y una tipografía cuidadosamente escogida.

Se introdujeron una serie de cambios respecto a los wireframes proporcionados razonando cada uno de ellos, ya que no se puede (o por lo menos no se debería) cambiar unas especificaciones solo porque al diseñador un día le apetece un cambio determinado, sino que tienen que ser siempre cambios fundamentados aportando pros y contras de la versión anterior y la revisada.

Diseño gráfico multiplataforma y guía de estilos

La siguiente entrega consistía en revisar la primera propuesta gráfica y adicionalmente diseñar varias páginas más (versión escritorio y móvil) y en paralelo hacer la primera versión de la guía de estilos en la que estaría basada la plataforma.

El hecho de trabajar las pantallas a la par con la guía de estilos hizo patentes algunos errores y ayudó a corregirlos, básicamente mediante la homogeneización de patrones en el diseño para evitar una falta de coherencia.

Algo a corregir fue el hecho de usar el mismo color en los botones de compra para todos los productos, ya que según el color de fondo se usaba un color de botón u otro, y eso podía resultar confuso para el usuario, de modo que se unificaron todos los botones de compra al mismo color principal (verde).

También se homogeneizaron, por ejemplo, las diferentes medidas de letra, ya que al estudiar a fondo los estilos para desarrollar la guía se vieron claros errores de concepto en los que, dos textos de la misma importancia, no tenía ningún sentido que tuvieran cuerpo de letra distinto.

En cuanto a la guía de estilos, se empezó por una descripción de los elementos utilizados, mostrando muchas capturas de pantalla de modo que fuera una guía lo más visual posible. Se hizo especial hincapié en la retícula usada (de 12 columnas), la tipografía, que combina dos familias de letra diferentes para textos y titulares (Roboto Slab y League Gothic) con sus diferentes cuerpos y medidas de utilización, la gama cromática usada, los elementos de interacción y finalmente el uso y proporción de las imágenes.

Finalización del prototipo gráfico
La última entrega estaba formada por los prototipos de la totalidad de pantallas del proyecto, incluyendo una revisión de las 8 entregadas en la etapa anterior y sumando una última pantalla restante: el subhome.

Desde el inicio se comenzó a trabajar sobre una retícula de 12 columnas que ha permitido la organización de los elementos en la pantalla. Es por este motivo que, por ejemplo, en los prototipos de la página de inicio elaborados en la PEC2 se decidió no mostró 5 elementos por fila, sino mostrar 4 (podían haber sido 6, pero en este caso el espacio para mostrar la información habría sido demasiado reducido).

Por otra parte, dos aspectos en el que se trabajó desde el principio antes de empezar a diseñar nada fue la selección de una paleta de colores y la de las dos familias tipográficas que constituirían el diseño, ya que ambos aspectos son clave a la vez de dar una personalidad al proyecto.

El hecho de tomar decisiones claves de diseño antes de comenzar a arrastrar elementos dentro del lienzo en blanco conlleva que todo tenga un motivo y una coherencia, a la vez que evita tener que hacer cambios radicales durante el proceso.

Naturalmente siempre hay cambios, pero una buena planificación hará que estos no sean tan radicales como para tener que dar 10 pasos atrás.

Uno de los cambios que tuvo que hacerse fue adaptar el tamaño de la letra de algunas partes (campos de formulario, títulos de productos, pie de página, etc.) para mantener el mismo tamaño de cuerpo de texto de 14px en todas partes. Había elementos que habían quedado excesivamente pequeños y, por tanto, ilegibles y no ha sido hasta el momento de hacer la guía de estilo que no se ha detectado este problema.

También se modificó el color de algunos botones, ya que se detectó, por ejemplo, que en la página de producto había un tipo de botón gris que no se utilizaba en ningún lugar más de la página y además se podía confundir con el botón de estado desactivado, por tanto se ha modificado por el tipo de botón “azul secundario” tal como se muestra en las imágenes siguientes:

Optimización para móviles

En entregas anteriores se había modificado la cabecera de la web para que ocupara menos espacio (en los wireframes abarcaba media pantalla del dispositivo) y se llegó a una versión en la que el logotipo, centrado, estaba a la misma altura que el botón para desplegar el menú, el botón de búsqueda y el botón de desplegar el cesto de compra:

Al hacer clic sobre el botón de buscar, el filtro de búsqueda se colocaba sobre el logotipo provocando un cambio demasiado radical:

Por ese motivo se acabó optando por desplegar el campo de búsqueda en la fila de abajo, volviéndose a esconder si se perdía el foco del campo de texto. Este fue el resultado final:

En la página de inicio se sigue conservando la cabecera que ya se había entregado en PECs anteriores, que incluye el logo con el slogan como bienvenida al usuario (que sepa dónde ha ido a parar) y con el buscador abierto para que pueda ir directo a dónde quiera.

Otra opción sería colocar el buscador dentro del menú desplegable pero de este modo ya no sería tan visible, y en una tienda electrónica la posibilidad de buscar por concepto es muy importante.

Accesibilidad
La accesibilidad web tiene como objetivo facilitar la navegación web a personas con problemas visuales y auditivos que generalmente utilizan software especial para leer y navegar por el contenido. Aparte, desarrollar una web accesible tiene la ventaja de que será indexado por los buscadores más fácilmente.

De la PEC3 a la práctica no ha habido modificaciones para mejorar la accesibilidad, ya que han sido aspectos que se han tenido en cuenta a lo largo de todo el proceso: no puede ser un tema de dejar para el final porque podría implicar rehacer demasiadas cosas del diseño, así que es importante tener en cuenta desde el inicio de un proyecto.

Para que una web cumpla con el nivel de conformidad de accesibilidad “Doble A” (AA) debe alcanzar unas pautas que se implementarán en el diseño y en el código. Las que se pueden apreciar en nuestro rediseño son las siguientes:

• Hay un alto contraste entre el texto y el fondo. Aunque no se utiliza el negro sobre blanco, en que se han evitado los bajos contrastes en pro a la legibilidad.
• El contenido no depende de colores: Aunque en ciertos casos los colores pueden ayudar a la identificación de un estado (como el color verde para marcar un producto en stock y el rojo para marcar uno retirado), estos no dependen sólo de los colores ya que también se pueden identificar por el texto que los acompaña, evitando así que una persona con problemas de diferenciación de colores (daltonismo) pueda sentirse perdido.
• Se ofrece al menos dos maneras de navegar por la web: Se puede navegar por el menú de navegación de la cabecera, utilizando el buscador, utilizando las migas de pan (breadcrumbs) y utilizando los enlaces de categorías relacionadas.
• En cada página hay cabeceras descriptivas para que el usuario sepa en todo momento dónde se encuentra.
• No hay más de 3 flashes o cambios de imagen por segundo: sólo en la página principal habrá un carrusel que variará cada x segundos (se valorará este tiempo para asegurar que da tiempo de leer el contenido de cada diapositiva ), pero no habrá más elementos cambiantes que puedan agobiar al usuario

Aparte de las mejoras de accesibilidad introducidas, hay unas cuantas no visibles al diseño, pero que se deberán tener en cuenta a la hora de llevar a cabo la codificación y programación del sitio, tales como:

• Todas las imágenes deberán llevar la etiqueta con el texto alternativo (alto).
• Las funcionalidades de la página (enlaces) deberán ser accesibles desde el teclado (mediante el atributo “accesskey”).
• Se podrá variar el tamaño de la letra hasta un 200% sin pérdida de la funcionalidad, ya que el diseño responsivo ayudará a adaptarse para que todo se visualice igual de bien.
• En los envíos de información confidencial debe haber un sistema para corregir, retroceder o advertencia del error que permita corregirlo.
• El contenido tendrá un orden de lectura que no dependerá del diseño o estilos.
• Código HTML válido (Markup Validation Service)

Hay aspectos que no se han tenido en cuenta para este proyecto concreto, por ejemplo los que hacen referencia al etiquetado de elementos multimedia diferentes fotos (que en principio no hay en esta web) o subtítulos para contenido multimedia con audio.

Para tener una guía sobre la conformidad de la accesibilidad hay webs que ayudan a localizar determinados errores, aunque hay otros que un validador no podrá detectar porque no es capaz de discernir la coherencia en el contexto determinado.

Finalización de la guía de estilos
En la última entrega también se acabó de definir la guía de estilos, rematando cabos sueltos que habían quedado un poco en el aire en la entrega anterior, corrigiendo errores y aportando nuevas reglas e información.

Los puntos principales de la guía de estilos (muy resumidos) eran los siguientes:

• Retícula. Se optó por utilizar una retícula de 12 columnas por su flexibilidad y por haberse convertido casi en un estándar (en ella se basan los frameworks Front-End más utilizados). La anchura de una columna de la retícula equivale a un 8,33% de la anchura total. No obstante, cualquier objeto que se coloque dentro de la retícula puede ocupar entre 1 y 12 columnas. Entre cada una de ellas hay una separación de 30px, a razón de 15px por cada uno de los lados.
• Tipografía. Se combinaron dos familias de letra diferentes: Roboto Slab (romana) para cuerpo de texto y para titulares secundarios y League Gothic (palo seco) para titulares principales. Ambas muy diferentes y por tanto ofrecen un buen contraste. En la guía de estilos se definió también la utilización de fuentes en cada uno de los casos (títulos principales, títulos de segundo y tercer nivel, cuerpo) especificando tipo de letra, estilo, color y tamaño de letra en escritorio y en móvil.
• Gama cromática. Se eligió el color verde (#8acc56) como color principal y un azul marino como color secundario. En la guía se mostraban los colores junto a su valor RGB y su valor hexagesimal y se indicaba donde se utilizaba cada color. También se mostraba una colección de texturas de fondo decorativas.

• Elementos de formulario. Los elementos de formulario de tipo campo de texto utilizan la misma tipografía y cuerpo que la letra principal y se define un borde gris claro (#a1a1a1) de un pixel de grosor y 5px de redondeo en cada una de las esquinas.
• Elementos de interacción. Los botones de acción principales (botones de compra, botones de “siguiente” o botones que implican una acción importante se muestran en color verde principal, con sombra verde oscura. Se utilizan también botones secundarios en color azul apagado para no quitar protagonismo a las acciones principales. Se define el comportamiento de los botones al pasar por encima o el aspecto al estar deshabilitados, el comportamiento de los elementos de formulario cuando tienen el foco y el aspecto de los enlaces de texto.
• Uso y proporción de las imágenes. Las medidas de las imágenes pueden variar adaptándose a los contenedores de la pantalla en una retícula de diseño responsivo, pero siempre van a mantener su formato cuadrado. Las imágenes están optimizadas para web en formato JPG o PNG, recomendándose usar las fotografías en formato JGP y las infografías o gráficos en PNG. Se indica, por último, que el cliente será el responsable de que estas respeten todos los derechos de propiedad intelectual.

Resultado final: Pantallas de escritorio

Resultado final: pantallas para móvil

Conclusiones

Esta práctica me pareció muy estimulante, ya que a menudo al trabajar en un proyecto real sucede que el cliente pide cambios basados más en sus gustos personales que en lo que realmente es más adecuado desde un punto de vista objetivo profesional, con unas bases de arquitectura de la información, diseño y usabilidad. Estos cambios pueden llegar a ser desquiciantes para el diseñador/desarrollador, pero como “el cliente siempre tiene razón” y no siempre es posible hacerles cambiar de opinión, el resultado final puede producir vergüenza ajena y no ser apto para ser añadido al portafolio.

Por este motivo, el hecho de poder trabajar en un proyecto con “manga ancha” tanto en la creatividad gráfica como para introducir cambios en la arquitectura de los wireframes proporcionados es todo un lujo y un gozo.

Pese a estar bastante satisfecha con el resultado obtenido, en la práctica no se pedía desarrollar todas las pantallas de la aplicación, sino solo las que se habían trabajado en la asignatura previa (Arquitectura de la Información) y eso me dejó un poco “con ganas de más”, ya que por ejemplo, no se trabaja en ningún momento la zona privada de usuario. Supongo que es porque ya había suficiente carga de trabajo, pero es un apartado al que a menudo se le da poca importancia y que sin embargo, bien elaborado puede ayudar a aumentar el porcentaje de conversiones (ventas, en este caso), mediante por ejemplo un sistema de puntos/descuentos que incentiven el volver a comprar o mediante sugerencias basadas en compras realizadas en el pasado.

Para terminar quisiera añadir que para realizar el diseño de una interfaz interactiva no solo es importante haber asimilado los conceptos teóricos que se estudian a lo largo de la asignatura, sino que a parte de una base teórica es también muy importante contar con experiencia y bagaje cultural bien interiorizados para idear el diseño desde el punto de vista del usuario final de la plataforma para que su experiencia sea lo más intuitiva posible. Parece un comentario obvio (y el siguiente parece un comentario despectivo y sobrado) pero la verdad es que, para mí sorpresa, al ver muestras de trabajos de compañeros me di cuenta que no es tan evidente. Pero para eso estamos aquí: para aprender y mejorar.

Documentación

• Palau Monjo, Tona (2014) Disseny d’interfícies multimèdia. UOC. Barcelona
• UOC; Disseny d’interfícies multimèdia: Dispositius [En línea] http://multimedia.uoc.edu/blogs/dim/dispositius/ [Data de consulta: Mayo 2015]
• Hera 2.1: Revisando la Accesibilidad con Estilo http://www.sidar.org/hera/
• W3.org (2014) How to meet WCAG 2.0 http://www.w3.org/WAI/WCAG20/quickref/ [Data de consulta: Mayo 2015]
• Icomoon https://icomoon.io/

Cita recomendada: FERRY MESTRES, Anna. Diseño de interfaces de una web multiplataforma. Mosaic [en línea], noviembre 2015, no. 133. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n133.1531.