Patrones de diseño

En ese apartado quedan definidos los patrones de diseño utilizados en la aplicación. Estos patrones pretender resolver problemas de usabilidad aplicados sobre las funcionalidades y acciones que debe llevar a cabo el usuario.

HOME LINK

Problema: El usuario necesita volver a una ubicación de inicio segura dentro del sitio.

Uso: Se utiliza cuando los usuarios con frecuencia entran en el sitio web a través de una página que no sea la página de inicio. El usuario debe ser capaz de navegar fácilmente a la página principal del sitio web.

Solución: Situar el logotipo adecuado en todas las páginas del sitio web y siempre en el mismo lugar. Este logotipo debe vincularse con la página de inicio. Deberá situarse en esquina superior izquierda de la cabecera o como caso excepcional en la zona central.

Lógica de la aplicación: Se ha convertido en un estándar en diseño web, que el logo del sitio siempre está vinculado a una ubicación de inicio seguro para el usuario, colocado en la parte superior de cada página.

BREADCRUMS

Problema: El usuario tiene que saber su ubicación en la estructura jerárquica de la página web y poder acceder si lo desea a niveles anteriores.

Uso: Debe utilizarse en todos los sitios web aunque sean poco complejos jerárquicamente para que el usuario sepa en todo momento donde se encuentra. Servirá sobre todo en aquellos casos en los que se acceda desde otra página que no sea la de inicio y en estructuras de página profundas y complejas. Solución: Mostrar las etiquetas de las secciones correspondientes a la ruta jerárquica que conducen a la página en la que se encuentra el usuario.

Cada etiqueta debe enlazar con su sección correspondiente y deben utilizar términos que se asocien claramente al título de estas secciones.

Lógica de la aplicación: Se entiende de manera sencilla la estructura de la página, además de facilitar la navegación. Asimismo ocupan un espacio mínimo.

MENú PRINCIPAL

Problema: El usuario debe acceder a las secciones principales de la forma más rápida y sencilla. Uso: Cuando un usuario accede a un sitio web pretende realizar una o varias tareas principales, por lo que tendrán que facilitarse la consecución de las mismas.

Solución: Situar el acceso a dichas acciones en la zona superior, utilizando los términos adecuados que describan claramente las funciones.

Lógica de la aplicación: Es un estándar en los sitios web colocar los menús principales en la zona superior ya que es la más accesible para el usuario, siendo la parte derecha la más adecuada para ello.

Nota: Para smpartphone se utiliza un menú vertical lateral al que se accede desde un icono situada en la esquina superior derecha. Tanto el icono utilizado como este tipo de menús son muy utilizados para dar solución al problema.

BOTONES ACCIONES DE NAVEGACIÓN

Problema: El usuario necesita sentirse guiado para realizar cualquier acción.

Uso: Identificar de manera rápida y sencilla que acciones debe realizar para avanzar o retroceder en la realización de una función.

Solución: Utilizar en toda la aplicación los mismos colores, términos y disposición de los botones que realizan una misma acción.

En este caso el botón guardar siempre será de color azul y se situará a la izquierda, el botón atrás siempre estará a la derecha de este (si existe) y en color gris.

Los términos también se mantendrán constantes.

Lógica de la aplicación: El usuario relacionará de manera sencilla que los botones con los mismos términos y colores sirven para realizar la misma acción.

ESTILOS BOTONES - ENLACES

Problema: El usuario debe conocer cuando está pulsando sobre cualquier elemento que le lleve a otro lugar o realice una determinada acción.

Uso: Identificar el momento en el que se está efectuando una opción que suponen una consecuencia o un objetivo.

Solución: Existen tres estados de los botones y enlaces: - El usuario no está realizando ninguna acción sobre ellos. - Se ha colocado el ratón sobre estos elementos (sin pulsar). - Se ha pulsado sobre ellos.

Para que el usuario pueda percatarse de estas tres situaciones se atribuye un cambio visual en ellos, como variando el color o modificando los términos a la versión negrita.

Lógica de la aplicación: Al observarse estos cambios el usuario entiende claramente que ha pulsado sobre alguno de los elementos.

ellos.

Lógica de la aplicación: Es congruente que la acción relativa a una función se realice después de que se haya visualizado y/o interactuando con dicha función.

CHECKBOX

Problema: El usuario debe conocer cuando puede seleccionar más de un item en una lista. Uso: cuando son compatibles en un lista más de una opción y por lo tanto no son excluyentes. Solución: Utilizar los denominado checkbox para cada uno de los items en cuestión. En este caso para los tipos de entrenamiento que se pueden realizar.

Lógica de la aplicación: Es un elemento estándar dentro del mundo web siendo su funcionalidad comprendidapor toda la comunidad.

MENSAJES DE ERROR

Problema: El usuario debe conocer cuando no ha realizado correctamente una acción. Uso: informar al usuario cuando se ha producido un error y su motivo.

Solución: Mostrar de manera amigable un mensaje de error descriptivo sobre el error.

Lógica de la aplicación: Los mensajes de error son un estándar dentro de los dispositivos, tanto mó- viles

REPRESENTACIONES MENTALES

Los usuarios crean modelos mentales al interactuar con un sistema, por lo que hay que tener en cuenta como se presenta la información para que el sistema presente las mejores soluciones. En la aplicación desarrollada se han utilizado los tres tipos existentes de representaciones mentales:

Representación icónica: utilizando únicamente los símbolos para editar y eliminar registros ya que el usuario es capaz de identificar su función sin problema. Y para los botones de modificaciones y mensajes.

Representación mixta: para cada una de las secciones que conforman el menú principal se han utilizado este tipo de elementos. No son términos fáciles de asociar a un único símbolo, por lo tanto mediante la combinación de ambos elementos queda más definido su significado.

Para usuarios recurrentes de la aplicación en sus posteriores usos gracias a experiencias anteriores podrán reconocer solamente con el símbolo la sección asociada, obteniendo así una navegación más rápida.

De igual modo para todos los botones destinados a “añadir” algún registro se han utilizado estas repre- sentaciones mixtas.

Representaciones proposicionales: el resto de etiquetas han sido creadas mediante este tipo de re- presentación ya que no existían ningún símbolo con el que se identificase o porque se ha considerado mejor solución valorando el conjunto de la interacción.

RECuRSOS INTERACTIVOS

Los recursos interactivos que utiliza la aplicación son de tipo instructivo y explorativo ya que se dan al usuario unas pequeñas indicaciones para que pueda avanzar pero al mismo tiempo debe explorar y descubrir el contenido mediante sus acciones y comprensión de la información.

Para ello se muestra toda la información de manera relevante, clara y memorable, es decir que pueda impactar en la mente del usuario para posteriormente ser recordada en futuras interacciones.

Cada una de las pantallas está creada estableciendo una jerarquía visual a través de niveles visuales. Para

ello se ha utilizado el tamaño, los colores y la disposición de los elementos.

Por ejemplo los títulos de cada página tiene un tamaño de letra grande respecto a los demás elemen- tos y están en la parte superior. Otro ejemplo es que las cabeceras de cada gráfica también tienen un tamaño de letra mayor que el resto de elementos a excepción del título de sección.

Capítulo 4: Conclusiones

4.1 Conclusiones

4.2 Líneas de futuro

Durante la realización del proyecto se ha trabajo con diferentes disciplinas aprendidas a lo largo del máster, uniendo todas ellas para obtener un producto final. Debido a la tipología del trabajo los conocimientos aprendidos en la asignatura de Diseño de Interfaces Interactivas han sido los más útiles. Este proyecto también ha servido para obtener un mayor manejo de todas las herramientas necesarias además de pensar la manera más eficiente y útil de trabajar con y entre ellas, algo indispensable en el perfil profesional que se desarrollo durante el máster.

Los mayores dificultades han sido relativas a la planificación, estimar la duración y el alcance de cada tarea. Inicialmente se programaron más tareas de las realizadas pero a lo largo di las diferentes entregas se concluyo que no podía realizarse en el tiempo establecido todo lo planificado.

Para obtener un producto completamente finalizado deberían realizarse los prototipos operativos para la versión tablet y escritorio. Además debería hacerse un test de usuarios muy amplio para testear la usabilidad y funcionalidad de la aplicación ya que es relativamente compleja.

Completamente finalizado hace referencia a la parte que puedo desarrollar con mis conocimientos, ya que para poder lanzar el producto al mercado tendría que ser programado.

Bibliografía

Clarisó, R. (2013) “Introducción al trabajo final”. Universitat Oberta de Catalunya.

Sáenz, N.; Vidal, R. (2008) “Redacción de textos cientifico-técnicos”. Universitat Oberta de Catalunya.

Rodríguez, J.R. (2013) “La gestión del proyecto a lo largo del trabajo final”. Universitat Oberta de Catalunya.

Patricia Gil, E. de Lera Tatjer E. Monjo Palau, Antònia. “Usuarios y sistemas interactivos”. Universitat Oberta de Catalunya.

Monjo Palau, Antònia. Diseño web y de interfaces multimedia.

Flamarich Zampalo, Jordi. Diseño de interfaces para dispositivos móviles.

Patricia Gil, E. de Lera Tatjer E. Monjo Palau, Antònia. “Usuarios y sistemas interactivos”. Universitat Oberta de Catalunya.

Ditrendia

Mobile en España y en el Mundo 2015

22 de Julio de 2015

http://www.ditrendia.es/wp-content/uploads/2015/07/Ditrendia-Informe-Mobile-en-Espa%C3%- B1a-y-en-el-Mundo-2015.pdf

No solo usabilidad

Guía práctica de Arquitectura de Información para aplicaciones multimedia educativas

Yusef Hassan

Patrones de diseño de interacción

9 noviembre, 2012

http://yusef.es/blog/2012/11/patrones-de-diseno-de-interaccion/

User Interface Design patterns

http://ui-patterns.com/patterns/HomeLink

Daniela Macias

Psicología del color y su influencia en el Deporte 2 de Diciembre de 2012

Anexos

Anexo A

Prototipos baja fidelidad

Anexo B

Prototipos alta fidelidad

Anexo C

Prototipos operativo

Anexo D