1. Introducción
En el diseño de interfaces de usuario es muy importante tener en cuenta principios de diseño que faciliten su uso. Por este motivo, se han de realizar diferentes prototipos a lo largo del diseño de la interfaz para comprobar de primera mano que problemas habituales tiene el usuario cuando hace uso del sistema y poder así mejorar la interacción de este con la aplicación
A lo largo del presente documento se explican de forma detallada los criterios que se han tenido en cuenta para diseñar una interfaz de usuario correspondiente a una web de noticias sobre deportes minoritarios. Para ello se han realizado dos prototipos, uno inicial o de baja fidelidad donde se esboza una interfaz preliminar teniendo en cuenta los requisitos previos del usuario, y otra más detallada o de alta fidelidad donde se expone como será la interfaz final de la web.
Para en desarrollo del prototipo de baja fidelidad se ha usado la herramienta Denim (Washington, 2008), la cual facilita la realización de este tipo de diseños permitiendo tener una primera aproximación usable de la web.
El prototipo de alta fidelidad ha sido creado con la herramienta Pencil (Evolus, 2010). Esta herramienta permite diseñar la interfaz final de la web con todo tipo de detalles, por lo que es posible realizar las pruebas de usabilidad oportunas antes de diseñar la interfaz real de la aplicación.
Tras el análisis de cada uno de los prototipos desarrollados se expresan una serie de conclusiones generales con respecto a su creación y como se puede mejorar la calidad de uso en estos, analizando detenidamente las ventajas y desventajas que este tipo de diseños suponen.
En el siguiente punto se reflejan los principales requisitos que debe tener la web a desarrollar para cubrir de forma completa con las necesidades de los usuarios.
2. Requisitos en lenguaje natural
Una vez introducidos en el tema a abordar, en este punto se tratarán de explicar detalladamente los principales requisitos que se han de tener en cuenta a la hora de diseñar el sitio web. De esta forma, al tratarse de un espacio apto para todos los usuarios y teniendo en cuenta que un alto porcentaje de estos no tiene conocimientos informáticos se tratará de simplificar al máximo la interfaz reduciendo con esto la carga cognitiva del usuario (Scapin & Bastien, 1993) para que resulte realmente sencillo navegar a través de esta aportando a su vez calidad en uso.
Al tratarse de un espacio de Noticias sobre deportes minoritarios, se ha de conseguir que la atención del usuario que entra en la web se centre única y exclusivamente en las noticias que se exponen. Esto tiene un grado alto de importancia ya que si mostramos otra serie de cosas no relacionadas con el tema principal del espacio, se puede generar una perdida de contexto en el usuario y por tanto causar en este una tremenda frustración que puede hacer que no vuelva a visitar la web.
Por tanto y teniendo en cuenta todo lo anteriormente expuesto, se ha de lograr que las capacidades del producto con respecto a su usabilidad para ser fácil de aprender, de entender y operar generen en el producto final una satisfacción suficiente para que haga recordar al usuario el espacio de noticias cuando este piense en temas de esta índole.
A la hora de diseñar el producto, es muy importante que sea atractivo, es decir, que llame la atención del usuario al acceder a este. En este aspecto se ha de tener en cuenta que para cumplir este requisito visual no es necesario inundar la web con objetos, menús o imágenes que no sean realmente necesarios o aporten algo al buen funcionamiento de la web, evitando por todos los medios la creación de iconos y menús ambiguos que pueden generar un despiste en el usuario.
Por otro lado, se ofrecerá feedback al usuario en cada acción que realice y se ofrecerán en todo momento mecanismos de ayuda para la realización de todas las tareas disponibles en la web.
En los puntos siguientes se detallan los prototipos creados para llevar a cabo el diseño de la interfaz de la web expuesta, teniendo en cuenta los requisitos expuestos en este punto.
3. Prototipos realizados.
3.1. Prototipo de Baja fidelidad.
Para el desarrollo del prototipo de Baja fidelidad se ha usado la herramienta Denim (Washington, 2008). Esta herramienta permite la realización de prototipos de una forma sencilla y ordenada, ya que todo se realiza como si se estuviera escribiendo el boceto a papel y lápiz.
De forma general, se intenta que la web tenga consistencia (Schneiderman) entre todas las páginas de las que dispone, es decir, la agrupación de los menús, iconos, cuadros con información, etc. Se ordenan de la misma forma en todas las secciones de esta. Con esto se permite que el usuario tenga un mayor grado de asimilación de la web, aportando reconocimiento antes que recuerdo (Nielsen, 1995), de este modo si el usuario es capaz de controlar la pagina de inicio será capaz de navegar sin problemas por el resto de la aplicación.
Por otro lado, se pretende crear un modelo estético y minimalista ofreciendo al usuario únicamente lo necesario para navegar e interactuar con todo el sitio.
Si se analiza la Figura 1: Página de inicio del prototipo de Baja fidelidad.Figura 1, correspondiente al “Home” de la aplicación, se puede observar la estructura que tendrá la web en todas sus páginas. En este aspecto, se dividen las páginas en varias zonas claramente definidas, pon lo que inicialmente, en la parte superior izquierda se muestra el título y una pequeña descripción de la web y en la parte superior derecha, se encuentra el Logo del espacio.
Además, para acceder a la diferentes secciones, se diseña un modo de navegación lo más coherente posible, resaltando en todo momento los elementos que más se necesitan tener a mano como la pestaña “Home”, para la que se usa un icono como metáfora relacionada (el dibujo de una casa). La navegación siempre se realiza utilizando estas pestañas, y el usuario puede saber donde se encuentra en cada momento por el color de estas.
Otro aspecto a resaltar, visible también en la Figura 1es que se muestra toda la información necesaria para realizar cualquier tarea. Para ello se sigue una estructura jerárquica donde se le da mayor importancia a las últimas noticias redactadas (primer cuadro con información, al lado izquierdo), pero se deja un pequeño espacio para otro tipo de noticias referentes a últimos eventos, eventos futuros y noticias más vistas. También se puede visualizar en la parte inferior de la página y como acceso directo, todo el contenido multimedia que dispone el sitio web, para facilitar así el acceso a este.
Para mostrar la información referente a cada una de las secciones, se mantiene la estructura inicial redactada anteriormente, pero en este caso la información mostrada como principal hace referencia únicamente a breves resúmenes de noticias referentes a esta sección y por consecuente las noticias más vistas y lo eventos actuales y futuros mostrados a la derecha ahora son exclusivos de la sección que se está visualizando (Véase Figura 2).
Si se desea visualizar en detalle una noticia en concreto, el usuario podrá hacer Click en el título de esta y se le mostrará el contenido de toda la noticia. Para ello se ha de resaltar de forma clara donde puede hacer Click el usuario para visualizar dicha noticia, y no hacerle pensar demasiado.
Como se puede observar en la Figura 3 expuesta a continuación, toda la estructura de la página se mantiene, aunque en esta ocasión la información más importante pasa a ser la noticia concreta que se está visualizando estableciendo como información secundaria las posibles noticias relacionadas. Se añade además un botón de regreso, para que el usuario vuelva a la sección concreta una vez visualizada la noticia.
El prototipo de baja fidelidad finaliza con la creación de la sección referente al contenido multimedia alojado en el espacio web (Véase Figura 4 expuesta a continuación). En este aspecto se pretende utilizar una gama de colores que resalte el contenido multimedia como vídeos, imágenes, etc. captando así toda la atención del usuario en el punto importante de esta sección.
Tras esta primera aproximación al diseño de la interfaz de usuario con el desarrollo del prototipo de Baja fidelidad, en el punto siguiente se procederá a redactar de forma detallada el prototipo de Alta fidelidad.
3.2. Prototipo de Alta fidelidad.
Tras estudiar con detenimiento los requisitos iniciales de la web y llevar a cabo el desarrollo del prototipo de Baja fidelidad, se tratará de desarrollar el prototipo de Alta fidelidad que mostrará con más detalle el diseño de la interfaz de usuario e intenta mejorar algunos aspectos estudiados anteriormente con respecto a la usabilidad de la aplicación.
Para el desarrollo de este prototipo se ha usado la herramienta Pencil (Evolus, 2010), la cual nos permite definir la interfaz de usuario de forma gráfica (sin entrar en su implementación) y con todo detalle.
Cuando un usuario entra en la web, se encuentra con la página principal o “Home”. Como se muestra en la Figura 5. En esta se puede observar que inicialmente y en la parte superior izquierda se muestra el Logo del espacio y el título de este. A continuación, en el centro, se expone en que parte de la web se encuentra el usuario y en la parte de la izquierda una serie de elementos que se tendrán siempre a mano a lo largo de su estancia en la web. (Barra de búsqueda, suscripción RSS, contacto e información general sobre la web). Esto cambia un poco el estilo inicial diseñado, mejorando así su comprensión.
En la Figura 5, se detalla además la barra de navegación principal, la cual mantendrá su aspecto en todo momento. Dicha barra será usada para navegar entre las diferentes secciones principales del sitio. El usuario puede detectar rápidamente en que sección se encuentra visualizando el color de la etiqueta seleccionada (Además en el apartado “Estas en”, se mostrará una metáfora real en consistencia con la sección en la que se encuentre), ofreciendo además un rápido acceso a todas las secciones disponibles (Krug, 2006).
En la página principal, como en todas las secciones, se mostrará en la parte inferior un acceso directo al contenido multimedia del sitio, con lo que en todo momento se tendrán visibles todas las tareas que podemos realizar en el espacio web. Se ha de destacar, que en el “Home” la información más importante será mostrada como tal en el cuadro de la izquierda y corresponderá a las últimas noticias redactadas. Además el usuario solo podrá desplazarse arriba y abajo en el cuadro de visualización de noticias, quedando el resto de la página estática, donde se mostrará información secundaria en cuadros más pequeños en la parte de la derecha.
Cuando se selecciona una sección, como la mostrada en la Figura 6, “Karate”, la consistencia y estructura de la página no sufre apenas modificaciones. En este contexto, se actualiza la etiqueta de la sección actual y el icono del apartado “Estas en”. Obviamente la información mostrada en este apartado es referente a la sección que se está visualizando (información principal y secundaria).
Cuando el usuario está visualizando resúmenes de noticias, bien en la página de inicio, o bien en cualquiera de las secciones, este puede ver la información de toda la noticia simplemente pulsando sobre el título de esta. Esto es fácilmente detectable debido a que el icono del puntero y el texto en cuestión cambian de aspecto al pasar por encima del título de la noticia.
En la Figura 7, se observa como se visualiza el contenido completo de una noticia en el cuadro principal de la página. Además, se muestra un nuevo icono en la parte izquierda de este cuadro para dar la posibilidad al usuario de volver a visualizar todos los resúmenes de las noticias relacionadas con la sección actual.
La única sección que difiere un poco del resto, es la sección multimedia (Véase Figura 8). En esta sección se muestran los enlaces a todo el contenido multimedia disponible. Para facilitar la usabilidad del usuario se le indica claramente y al principio lo que debe hacer para mostrar un vídeo o imagen en concreto. (Esta sección difiere completamente de la especificada en el prototipo de Baja fidelidad.)
Por otro lado, en la barra inferior se le muestran aquel contenido que ha sido visitado un mayor número de veces y se resalta en la parte derecha el último vídeo subido al sitio (con una breve descripción).
También se observa el uso de colores oscuros para resaltar la información principal de esta sección, es decir, el contenido multimedia en cuestión.
Para concluir, se muestra como sería la visualización de un objeto multimedia en concreto (Véase Figura 9). Es este contexto, la información principal es el vídeo o imagen que se está visualizando, aunque también se le muestra al usuario, como información secundaría, una breve descripción el contenido multimedia que está visualizando o pretende visualizar.
Por otro lado y como se mostraba también en la visualización de una noticia en concreto (Véase Figura 7) se añade un link (Atrás) que permite volver a mostrar todos los objetos de la sección multimedia, para facilitar la interacción del usuario.
Además se mantiene la barra de acceso directo a multimedia situada en la parte inferior para que el usuario pueda visualizar otros vídeos sin volver atrás.
Figura 9: Visualización de contenido multimedia en el prototipo de Alta fidelidad
4. Conclusión.
Tras realizar un estudio más detallado sobre el prototipado de interfaces de usuario puedo concluir que es una buena práctica para tener una primera aproximación de la usabilidad que tendrá nuestra aplicación. Se ha de destacar que al poder realizar prototipos de Alta y Baja fidelidad, se logra tener inicialmente una primera aproximación de lo que se pretende diseñar para después detallar y a su vez corregir los pequeños errores o detalles que no se tuvieron en cuenta inicialmente o que difieren de los requisitos previos.
Además, es muy interesante poder realizar pruebas de usabilidad y accesibilidad antes de comenzar a implementar nada, por lo que una vez que comencemos a implementar tendremos mayor certeza de si realmente nuestra aplicación cubrirá las expectativas de los usuarios en lo que a usabilidad se refiere. En contra a lo anteriormente expuesto se ha de tener muy en cuenta que el diseño de prototipos debe costar lo menos posible tanto en tiempo de creación como de destrucción y que es un pequeño coste que ha de tener el proyecto a desarrollar.
Como análisis del trabajo realizado en esta práctica, he de confesar que me ha servido para conocer algunas de las herramientas utilizadas en prototipado, las cuales desconocía por completo de su existencia.
Por otro lado, llego a la conclusión de que es muy importante realizar tanto prototipos de Baja como de Alta fidelidad ya que ambos son complementarios, y por lo general ayudan inicialmente a organizar todas las ideas relacionadas con el diseño de la interfaz, adaptándose a los requisitos iniciales, para posteriormente desarrollar con mayor detalle la interfaz final.
Si se comparan los dos tipos de prototipos desarrollados en este trabajo, pueden observarse pequeñas diferencias entre ambos. Por ejemplo, en el prototipo de Alta fidelidad, más en concreto en la Figura 8 de este documento, se observa que esta página cambia de la mostrada en la Figura 4. Esto es debido a que en un principio como requisito inicial no se tuvo en cuenta mostrar una lista con todos los vídeos disponibles en el sitio, pensando mostrar únicamente el último vídeo subido y una lista de acceso a otros vídeos (barra inferior). Tras comenzar a probar el prototipo de Alta fidelidad, observo que es más usable mostrar esta lista de vídeos añadiendo esta a la interfaz final.
Otra diferencia puede hallarse en el sitio como estructura general, donde en el prototipo de Alta fidelidad se decide poner el Logo al lado izquierdo junto al título y no al lado izquierdo. Además, es este último prototipo se añaden detalles que muestran al usuario donde se encuentra en cada momento, los cuales no se expresan inicialmente (Véanse Figura 1 y Figura 5)
5. Bibliografía
Evolus. (2010). Pencil Project. Recuperado el 09 de Marzo de 2012, de Pencil - http://pencil.evolus.vn/en-US/Home.aspx
López Jaquero., V. M. (Febrero de 2012). Tema 2: El diseño centrado en el usuario. Albacete.
López Jaquero., V. M. (Marzo de 2012). Tema 3: Usabilidad y modelos de calidad centrados en la usabilidad. Albacete.
Krug, S. (2006). No me hagas pensar. Madrid: Pearson Educación S.A.
Nielsen, J. (1995). Useit - 10 Heuristicas de usabilidad. Recuperado el 09 de Marzo de 2012, de http://www.useit.com/papers/heuristic/heuristic_list.html
Scapin, & Bastien. (1993). Ergonomic criteria.
Schneiderman, B. (s.f.). Designing the User Interface.
Washington, U. o. (3 de Octubre de 2008). Denim. Recuperado el 9 de Marzo de 2012, de http://dub.washington.edu:2007/denim/
0 comentarios:
Publicar un comentario