Diseño de Interfaces Multimedia: Una web responsiva

Estudiante: Juan Luis Naranjo Mora
Asignatura: Diseño de interfaces multimedia
Consultor/Profesor: Tona Monjo Palau / Laia Blasco Soplon

La asignatura de Diseño de Interfaces Multimedia es la continuación de la asignatura de Arquitectura de la Información que cursé el semestre pasado. Ambas representan diferentes fases de la creación de un producto multimedia y, ambas, son disciplinas que tienen como objetivo conseguir una buena experiencia de usuario (UX), utilizando técnicas y metodologías en las que se pone al usuario en el centro de todo el proceso (Diseño Centrado en el Usuario – DCU), para crear soluciones adecuadas a sus necesidades. Es, por tanto, importante tener muy claro cual es el público objetivo y en qué condiciones va a utilizar nuestra aplicación y comprobar, en cada fase del proyecto (mediante tests u otras técnicas), que se está realizando un trabajo acorde a este público y sus necesidades.

En el caso que nos ocupa se trata de la realización de una página web para una agencia de viajes (avial.es). En la primera asignatura (Arquitectura de la Información) trabajamos la organización de la información, el etiquetado, los diferentes sistemas de navegación y el sistema de búsqueda de esta web. Como resultado obtuvimos un árbol de contenidos y unos wireframes (esquemas de las diferentes pantallas). En la asignatura de Diseño de Interfaces Multimedia realizaremos dos fases más: el test de usuarios y de interacción sobre los wireframes y el prototipado gráfico de alta fidelidad.

Etapas y retos

La primera etapa del proyecto consistía en la realización de un test a 4 usuarios potenciales para probar la eficacia de los wireframes de la aplicación. Para crear el test debíamos elaborar una lista de 10 tareas que los usuarios debían realizar (Buscar ofertas sobre viajes a América, por ejemplo). Esto de por sí ya fue un reto, tanto buscar las personas con el perfil adecuado, como la creación de la lista adecuada de tareas y, por supuesto, hacer entender a los usuarios que la web no estaba creada y debían de realizar las tareas sobre papeles impresos con los esquemas de cada pantalla (simular que hacían clic en un enlace, por ejemplo).

A partir de los resultados del test (si los usuarios han podido finalizar o no las tareas y en qué condiciones) debíamos realizar modificaciones en los wireframes para mejorarlos. Personalmente realice también modificaciones basándose en mi propia experiencia como desarrollador web y como usuario y también basándome en mis conocimientos previos en usabilidad (vendría a ser lo que se denomina evaluación heurística).

En la segunda etapa teníamos que convertir los wireframes en un prototipo gráfico. El prototipo gráfico se refiere tanto al aspecto gráfico que tendrá la aplicación una vez acabada (pixel perfect), como todo lo referente a la interacción del usuario con la aplicación, por ejemplo el color que deben tener los enlaces al pasar el puntero del ratón por encima, el aspecto que ha de tener una menú al ser desplegado, etc.

El mayor reto de esta etapa fue dar a todas las pantallas una coherencia. Para ello fue importante crear una guía de estilo en las que se detallaban las retículas, las tipografías utilizadas, qué tamaños de tipografía debían tener los diferentes elementos, los colores y todas las soluciones gráficas que fui desarrollando. Con esto conseguiremos que todas las páginas que vayamos diseñando tengan esa coherencia deseada y también servirá de ayuda a terceras personas que tengan que desarrollar nuevas pantallas para la aplicación.

Hay que destacar que una de las condiciones del proyecto era que la web debía de ser responsiva, esto se refiere a que la web se ha de adaptar al dispositivo con el que se visualiza (ordenador, tableta, teléfono inteligente…). Concretamente teníamos que hacer, tanto los wireframes como el prototipo gráfico en dos versiones, una para smartphone y otra para pantalla de ordenador. Por adaptarse al dispositivo no hay que entender que la web se ha de ver más pequeña o más grande, si no que se ha de presentar el contenido de una manera diferente para visualizarlo de forma optima y, en el caso de acceder con un smartphone, por ejemplo, prescindir de algunos contenidos que no son críticos para el buen funcionamiento de la aplicación u ocultar grupos de opciones detrás de un icono.

Conclusiones

Probablemente una de las partes más divertidas de la creación de páginas web o de aplicaciones multimedia en general (al menos desde mi punto de vista), sea la del diseño gráfico. Abrir el Photoshop y ponerse a diseñar. Pero si no hay una trabajo previo, siguiendo las metodologías aprendidas tanto en la asignatura de Arquitectura de la Información como en la que nos ocupa de Diseño de Interfaces Multimedia el resultado será, seguramente, poco consistente y no tendrá en cuenta las necesidades de los usuarios.

Es por ello que resulta importante meditar cada fase de la creación de una manera cuidadosa. Poniendo al usuario en el foco y parándose a menudo para hacer tests y evaluaciones con el objetivo de no perder el rumbo.

También me gustaría destacar lo acertado de incluir en la práctica la realización de la versión para smartphones. A estas alturas ya es incuestionable que existen una diversidad creciente de dispositivos con los que los usuarios accedemos a las webs. Es imprescindible, por lo tanto, que estas estén adaptadas para ser visualizadas de una forma optima en cada uno de ellos. No solo se trata de ordenar los bloques de información de una manera distinta, sino que también hay analizar que información u opciones son susceptibles de aparecer en un tipo de dispositivo o en otro. Por ejemplo, en un ordenador de sobremesa el usuario, posiblemente, pueda dedicar más tiempo en profundizar en la información, en cambio, en un teléfono móvil querrá ir directamente al grano por lo que podemos ocultar o simplemente eliminar parte del contenido.

Documentación

Documento de la práctica.

Cita recomendada: NARANJO MORA, Juan Luis. Diseño de Interfaces Multimedia: Una web responsiva. Mosaic [en línea], octubre 2014, no. 121. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n121.1437.