Universitat Oberta de Catalunya

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).

Wireframes de la página principal de la web para pantalla de ordenador (izquierda) y para smartphone (derecha). Se puede observar como se ha modificado la disposición y la apariencia de algunos elementos y se han eliminado otros.
Wireframes de la página principal de la web para pantalla de ordenador (izquierda) y para smartphone (derecha). Se puede observar como se ha modificado la disposición y la apariencia de algunos elementos y se han eliminado otros.

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.

Prototipo gráfico de la pantalla principal de la web tanto para  pantalla de ordenador (izquierda) como para smartphone (derecha). Este es el aspecto que tendrán las pantallas en la web acabada. Como se puede ver siguen las mismas estructuras que los correspondientes wireframes.
Prototipo gráfico de la pantalla principal de la web tanto para pantalla de ordenador (izquierda) como para smartphone (derecha). Este es el aspecto que tendrán las pantallas en la web acabada. Como se puede ver siguen las mismas estructuras que los correspondientes wireframes.

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.

Ejemplo de una página de la guía de estilo donde se muestra qué tipografía y qué etiqueta de html corresponde a cada elemento de una parte de la página.
Ejemplo de una página de la guía de estilo donde se muestra qué tipografía y qué etiqueta de html corresponde a cada elemento de una parte de la página.

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.

En este ejemplo se puede observar como las opciones de filtrar y de buscar aparecen en la columna de la izquierda en el caso del diseño para pantalla de ordenador y, en cambio, en la versión para smartphone he optado por que solo se vean si el usuario pulsa en los iconos correspondientes. De esta manera, el usuario de la versión móvil, no tiene la pantalla saturada de opciones.
En este ejemplo se puede observar como las opciones de filtrar y de buscar aparecen en la columna de la izquierda en el caso del diseño para pantalla de ordenador y, en cambio, en la versión para smartphone he optado por que solo se vean si el usuario pulsa en los iconos correspondientes. De esta manera, el usuario de la versión móvil, no tiene la pantalla saturada de opciones.

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.

Etiquetas:

Acerca del autor

Soy Juan Luis Naranjo, estudiante del Grado Multimedia en la UOC. Trabajo como diseñador gráfico y de páginas web desde hace 15 años. He trabajado en proyectos tanto para grandes compañías como para pymes. Desde hace unos años realizo mi trabajo como freelance desde la Pobla de Segur. Más información: www.jambuling.com es.linkedin.com/in/jambuling

Un comentario

Deja un comentario

  1. Muy interesante la transición entre el wireframe y el ‘mockup’ final. También la ‘guía de estilo’ me ha parecido acertada a la hora de crear la imagen definitiva del sitio, para mantener la coherencia.

    Un apunte que me gustaría hacer, más un matiz que una crítica:

    En la realidad actual de nuestro trabajo, y dado lo que permiten los navegadores en cuanto a interpretación responsiva, estamos explorando ahora mismo la presentación de la información no en dos ‘vistas’ únicamente como presentas aquí, sino un contínuo fluir desde 1300 píxeles de ancho (wide desktop) hasta 480px (old-smartphone).

    Encuentro personalmente que ya tenemos la capacidad para romper el clásico ‘960’ de ancho tradicional y llenar más pantalla. Ésa costumbre queda desfasada, y podemos, con las herramientas de hoy en día, permitir una experiencia más responsiva a todo nivel, creando no dos vistas distintas, sino un número equivalente a la cantidad de unidades que haya entre nuestros 1300 y 480. por lo menos!

    Responder

Deja un comentario