Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC's

Texto completo

(1)TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. "Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s". Autor: José Antonio Aranda Calderón Estudiante de Ingeniería Técnica en Informática de Gestión (ITIG) Universitat Oberta de Catalunya [email protected] Consultor: Elena Sánchez Sánchez. 1.

(2) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Índice de Contenidos 1. DESCRIPCIÓN DEL TFC …………….………………………………………….. 1.1. Introducción ……………………………………………………………………………………….. 1.2. Objetivos del TFC ……………………………………………………………………………….. 1.3. Fases del TFC ………………………………………………………………………………………. 3 3 3 4. 2. INVESTIGACIÓN Y ANÁLISIS ……………………………………………….. 2.1. Descripción …………………………………………………………………………………………. 2.2. Objetivos ……………………………………………………………………………………………. 2.3 Investigación ………………………………………………………………………………………. 2.3.1. Benchmarquing ……………………………………………………………………………. 2.3.2. Test usuarios ……………………………………………………………………………….. 2.3.3. Conclusiones …………………………………………………………………………………. 2.4. Usuarios y Análisis de Tareas ……………………………………………………………. 2.4.1. Perfiles de Usuarios …………………………………………………………………….. 2.4.2. Roles de Usuarios ……………………………………………………………………….. 2.4.3. Contextos de Uso ……………………………………………………………………….. 2.4.4. Análisis de Tareas ………………………………………………………………………... 4 5 5 6 6 11 19 20 20 21 22 24. 3. DISEÑO ……………………………………………………………………………… 3.1. Descripción ………………………………………………………………………………………… 3.2. Objetivos …………………………………………………………………………………………… 3.3. Escenarios de Uso …………………………………………………………………………….. 3.3.1. Administrador …………………………………………………………………………….. 3.3.2. Docente ………………………………………………………………………………………. 3.3.3. Alumno ……………………………………………………………………………………….. 3.3.4. Visitante ………………………………………………………………………………………. 3.4. Flujos de Interacción …………………………………………………………………………. 3.4.1. Mantenimiento Web ……………………………………………………………………… 3.4.2. Acceso sistema y registro ..…………………………………………………………. 3.4.3. Consulta material didáctico ………………………………………………………….. 3.4.4. Leer y/o escribir comentarios ………………………………………………………. 3.4.5. Opciones espacio personal ………………………………………………………….. 3.4.6. Resumen funcionalidades ……………………………………………………………. 26 26 27 27 28 28 32 35 36 36 37 37 38 39 40. 4. PROTOTIPADO …………………………………………………………………….. 4.1. Descripción ………………………………………………………………………………………… 4.2. Objetivos ……………………………………………………………………………………………. 4.3. Prototipo …………………………………………………………………………………………….. 4.3.1. IPO ……………………………………………………………………………………………….. 4.3.1.1. Tecnología ……………………………………………………………………………… 4.3.1.2. Factor Humano ……………………………………………………………………… 4.3.1.3. Diseño …………………………………………………………………………………… 4.3.2. Estructura ……………………………………………………………………………………. 4.3.3. Prototipo ……………………………………………………………………………………….. 41 41 41 42 42 42 44 46 49 51. 5. EVALUACIÓN PROTOTIPADO 6. CONCLUSIONES. ………………………………………………… 56. ………………………………………………………………….. 56. 7. REFERENCIAS BIBLIOGRÁFICAS ……………………………………………. 8. LISTADO DE FIGURAS E IMÁGENES ………………………………………. 9. LISTADO DE TABLAS …………………………………………………………… 10. GLOSARIO ………………………………………………………………………... 2. 57 58 59 60.

(3) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. 1. DESCRIPCIÓN TFC 1.1. Introducción La humanidad siempre ha sabido adaptarse a las nuevas situaciones que han ido apareciendo durante su existencia y de sacar partido de estas, no podía ser diferente en la actualidad, es decir, en la llamada "sociedad de la información" generada en los últimos años a una velocidad vertiginosa por la aparición de la "Tecnología de la información y las comunicaciones". Es en este marco donde la sociedad ha podido desarrollar exponencialmente nuevas vías de comunicación y aprendizaje que no eran ni tan siquiera imaginadas hace unos pocos años atrás. A nivel empresarial, social, de ocio,...son ejemplos donde basarnos, pero en el presente TFC nos centraremos en el efecto de estas en el mundo docente. El uso de las TIC no para de crecer y de extenderse, sobre todo en los países ricos, con el riesgo de acentuar localmente la brecha digital y social y la diferencia entre generaciones. En la sociedad en la que vivimos, la información y el conocimiento tienen cada vez más influencia en el entorno laboral y personal de los ciudadanos. El proceso educativo ha cambiado, y en la actualidad si una persona no quiere quedarse obsoleta, debe continuar su aprendizaje a lo largo de su vida. Las TIC favorecen la formación continua al ofrecer herramientas que permiten la aparición de entornos virtuales de aprendizaje, libres de las restricciones del tiempo y del espacio que exige la enseñanza presencial [Martin Laborda, Rocío 2005]. Es en este punto donde el presente TFC se centra, en el diseño de un entorno web destinado al acercamiento de estas nuevas tecnologías a personas sin experiencia previa, cuya generación ha crecido sin el uso de las mismas y de aquellas que no han podido realizar un acercamiento óptimo por la citada brecha social, basando su desarrollo en el diseño centrado en el usuario y en la usabilidad que facilite su introducción mediante las técnicas IPO disponibles.. 1.2. Objetivos del TFC El objetivo fundamental del presente TFC es la elaboración de un prototipo de página web para la iniciación y formación en la Tecnología de la Información mediante contenido on-line formativo en un entorno virtual de aprendizaje. Dicha página web estará enfocada a personas sin experiencia previa en las citadas TIC (personas de generaciones que han crecido sin acceso a las mismas y/o aquellas que no han tenido la oportunidad de acceder a las mismas) y, estará desarrollada mediante un diseño y usabilidad centrado en el usuario (DCU) y, facilitadora y accesible según los elementos de la interacción persona-ordenador (IPO). Los contenidos de la página web pretenden ser, como ya se ha citado, elementales para un primer acceso satisfactorio a las TIC, desde un modulo básico descriptivo de las herramientas disponibles, pasando por edición de textos y terminando en una introducción al mundo de internet y su seguridad. 3.

(4) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. 1.3. Fases del TFC. Planificación. El presente TFC ha sido dividido en 5 apartados diferenciados que han permitido la elaboración del mismo basándose en el Diseño centrado en el Usuario (DCU) y en la Interacción Persona-Ordenador (IPO). Las diferentes fases del proyecto son: FASE o FASE o FASE o FASE o FASE o. • • • • •. 1. PLAN DE TRABAJO. Objeto del TFC y Planificación. 2. INVESTIGACIÓN Y ANALISIS. Perfiles de usuario, contextos de uso y análisis de tareas. 3. DISEÑO. Diseño de escenarios y Flujos de Interacción. 4. PROTOTIPADO. Prototipo de entorno Web. 5. REVISION Y MEMORIA. Revisión y realización Memoria TFC.. 2. INVESTIGACIÓN Y ANÁLISIS Actualmente en el mercado existen multitud de productos y, a la hora de decidirnos por uno de ellos, no encontramos una única opción. Es en este punto donde hay que emplear conceptos como el de la usabilidad y la propia experiencia del usuario para marcar la diferencia con el resto y hacer que el resultado final satisfaga plenamente al mismo. Para conseguir dicha diferencia con el resto y que proporcione una experiencia de usuario satisfactoria, es imprescindible conocer al usuario y sus expectativas. Con este fin emplearemos el Diseño Centrado en el Usuario (DCU), el cual se considera como la aplicación práctica de la disciplina de la interacción persona-ordenador (IPO), la usabilidad y la experiencia de usuario. Con esta finalidad, en la creación del presente proyecto, un entorno web para la iniciación en las tecnologías de la información, se aplicarán las distintas fases del DCU de forma iterativa. Las diferentes fases del DCU son: -. Investigación y análisis de usuarios Diseño Evaluación. 4.

(5) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. 2.1. Descripción En esta primera fase, centrada en la investigación y el análisis, nos centraremos en la búsqueda de información y análisis posterior sobre los usuarios aplicando el diseño centrado en el usuario que nos permita obtener tanto una usabilidad como una accesibilidad óptimas en el producto final. Para obtener dicha eficiencia es importante en esta fase tener en cuenta los siguientes aspectos para conocer al usuario, su contexto de uso y las tareas que realizaran: -. ¿Quiénes son los usuarios del producto? ¿Cuáles son sus conocimientos y sus objetivos finales? ¿Qué formación tienen los usuarios? ¿Qué experiencia tienen los usuarios con el producto o productos similares? ¿Qué funcionalidades esperan los usuarios?. En esta primera fase de investigación y análisis, siguiendo con el diseño centrado en el usuario, se utilizarán los siguientes métodos: -. Observación Entrevistas Encuestas Benchmarquing. Dichos métodos harán posible la definición de los usuarios obteniendo: -. Perfiles de usuarios Roles de usuarios Contextos de uso Análisis de tareas. 2.2. Objetivos El objetivo fundamental de esta primera fase de investigación y análisis, es la de obtener respuesta a las preguntas planteadas en el punto anterior así como la aplicación de los métodos descritos, que faciliten las fases posteriores del diseño y, que hagan posible un (DCU) Diseño Centrado en el Usuario de la página web con la intención de conseguir los siguientes objetivos: -. Aumentar la satisfacción del cliente Aumentar la productividad y eficiencia del usuario Reducir costes de soporte y formación Reducir el tiempo y coste de desarrollo Reducir costes de mantenimiento. 5.

(6) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. El contexto inicial del presente proyecto es el siguiente: PROYECTO Preguntas ¿Cuál es el sistema o servicio?. Respuestas Prototipo/Web para la iniciación y formación en la Tecnología de la Información. ¿Cuáles son las aspiraciones?. Ofrecer contenido on-line formativo entorno virtual de aprendizaje tutelado.. ¿Para quién está pensado?. Usuarios sin experiencia previa en TIC o que pretendan asentar sus conocimientos básicos.. ¿Cómo aprenderá el usuario?. Mediante un sistema formativos y ejercicios.. ¿Cómo se mantendrá?. Mediante docente.. un. intuitivo. administrador. web. en. un. de. módulos. y. personal. Tabla 1. Contexto inicial del proyecto. 2.3. Investigación. Métodos de Indagación. Los métodos de indagación involucran a los usuarios en las diferentes actividades que se llevan a cabo y están orientados a la obtención de información para definir el producto final. Estos métodos se clasifican por el tipo de información que permiten recoger: métodos cualitativos (observación, entrevistas, dinámicas de grupo) y métodos cuantitativos (encuestas y cuestionarios). Es muy importante tener claro que cada tipología permite obtener un tipo de información distinta y que debe ser analizada teniendo en cuenta sus ventajas y limitaciones. [Garreta et al. 2011]. Los métodos utilizados han sido: -. Benchmarquing Test de usuarios (cuestionarios y entrevistas) Observación e investigación contextual. 2.3.1.. Benchmarquing. El análisis competitivo o comparativo (benchmarquing), consiste en analizar productos que son similares y/o que compiten con el sistema o proyecto a diseñar. Los diferentes objetivos de analizar estos productos o servicios son, entre otros: conocer las expectativas de los usuarios, entender tendencias del mercado, aprender de los errores, conocer funcionalidades básicas o comunes, estudiar las diferentes interfaces,… [Garreta et al. 2011].. 6.

(7) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. De los numerosos productos didácticos presentes en la web actualmente, se han elegido los siguientes, por su contenido didáctico similar al pretendido en el presente proyecto dentro de las nuevas tecnologías:. www.aulafacil.com. Figura 1. Página principal AulaFacil.com. Aulafácil es una página web con una gran cantidad de contenido educativo que engloba diferentes y variadas temáticas. Este contenido incluye desde informática, pasando por idiomas o matemáticas y, terminando en otros como pueden ser cocina o manualidades. La estructura inicial de aulafacil.com es sencilla y nos muestra nada más acceder un índice de las temáticas ofertadas en el área central de la misma. Una vez elegimos una de estas, accedemos a un índice específico para dicho área, el cual a pesar de ser muy completo no presenta un diseño facilitador, estando todos los contenidos muy condensados y sin cabeceras bien diferenciadas por temas.. -Rápida visualización de contenido didáctico -Contenido didáctico muy variado. 7. -Diseño poco atractivo -Tamaño de fuente -Diseño de índices.

(8) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. www.aulaclic.es. Figura 2. Página principal aulaClic.com. AulaClic es una página web con contenido didáctico exclusivamente de informática. Dicho contenido es muy variado y engloba desde una introducción a los sistemas operativos Windows hasta llegar a otros contenidos más avanzados como pueden ser las Bases de Datos (Access, SQL,..) o la elaboración de páginas webs (FrontPage, HTML,…). Su estructura es sencilla y directa, obteniendo nada más acceder al inicio un listado con todos los cursos ofertados en el área central de la misma. Una vez se accede al curso deseado, este se nos muestra organizado en un índice muy completo y accesible organizado por capítulos. Al acceder a una unidad didáctica esta nos permite interactuar además (en algunos casos) con ejercicios propuestos y video tutoriales.. -Rápida visualización de contenido didáctico -Organización de contenido / índices -Ejercicios -Video tutoriales. 8. -Diseño poco atractivo -Tamaño de fuente -Contenido didáctico avanzado.

(9) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. www.deseoaprender.com. Figura 3. Página principal deseoaprender.com. Deseoaprender es una página web con contenido didáctico de informática, pintura y dibujo. El contenido informático está principalmente enfocado a elementos básicos, desde los conceptos introductorios hasta las herramientas principales de ofimática, sin entrar en módulos más avanzados como pueden ser las bases de datos. Su estructura es sencilla, presentando en su página principal el menú general de contenidos bien estructurado, si bien es cierto que éste se encuentra localizado en forma de columna en el lado izquierdo de la misma no siendo este el eje central de atención para el usuario novel. Una vez se acceden a los módulos didácticos, estos son claros y concisos, en todo momento el usuario dispone de un índice del mismo en el lado izquierdo de la interfaz y, presenta capturas de pantalla e imágenes además de contener al final de los mismos tests de autoevaluación.. -Índice de contenidos -Tests de autoevaluación -Informática básica. 9. -Diseño poco atractivo -Menú pequeño y no central -Tamaño de fuente.

(10) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. www.edu365.cat. Figura 4. Página principal edu365.cat. Edu365 es la página web del Departamento de Educación de la Generalitat de Catalunya, con noticias, agenda, novedades y contenido didáctico organizado por niveles educativos. Diseño atractivo y organizado por niveles educativos, desde la etapa infantil hasta el bachillerato o la formación profesional. Índices de contenidos y menús bien estructurados, facilitando la atención visual del usuario y siendo la visibilidad de contenidos el eje central del diseño. En definitiva presenta un gran trabajo de diseño enfocado al usuario y aprovechando los elementos de la IPO (Interacción Persona-Ordenador). El contenido didáctico es muy específico y está enfocado para usuarios en edad escolar. No contiene unidades formativas para usuarios que quieren iniciarse en las nuevas tecnologías.. -Diseño y estructura. 10. -Enfocado para usuarios escolar -Contenido especifico. en. edad.

(11) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 2.3.2.. José Antonio Aranda Calderón. Test usuarios. Se ha elaborado una encuesta técnica cuantitativa con la intención de evaluar las páginas webs anteriormente seleccionadas, la cual ha sido entregada a una muestra representativa de usuarios y de esta forma conocer qué aspectos son los más valorados y menos, aportando un input más en la presente fase que ayude a la elaboración de la web. Para la realización de dicha encuesta se le ha pedido a los usuarios que realizasen tareas concretas en cada una de las páginas a estudio y así poder determinar la facilidad de uso de las mismas y aspectos de mejora. Las tareas a realizar han sido: -. Acceder a página web Búsqueda y acceso a cursos Lectura de una unidad didáctica Volver a menú principal. A continuación se muestra el modelo de encuesta utilizado:. Figura 5. Modelo de encuesta. La muestra representativa ha sido seleccionada en un centro formativo presencial en el que se imparten cursos orientados a la iniciación en las nuevas tecnologías, por lo que la información extraída de la misma es muy relevante para el objetivo final. Junto con la entrega de las encuestas, las cuales se han realizado in situ en el aula, se han utilizado otras técnicas y métodos de indagación que han complementado las conclusiones finales. Estas técnicas han sido:. 11.

(12) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. -. -. Observación e investigación contextual. Consiste en la observación de los usuarios en su entorno habitual [Garreta et al. 2011], en este caso, observando a la muestra representativa durante la realización de la encuesta y mientras navegaban por las webs y realizaban las tareas encomendadas. Entrevistas. Preguntando a la muestra representativa durante la realización de la encuesta y mientras navegaban por las webs que se les pedía.. A continuación se muestran los resultados:. Figura 6. Encuesta 1. 12. José Antonio Aranda Calderón.

(13) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. Figura 7. Encuesta 2. Figura 8. Encuesta 3. 13. José Antonio Aranda Calderón.





(18) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. Figura 17. Encuesta 12. 18. José Antonio Aranda Calderón.

(19) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 2.3.3.. José Antonio Aranda Calderón. Conclusiones. Una vez analizados los datos extraídos mediante las distintas técnicas de investigación utilizadas, se han determinado las siguientes conclusiones que servirán para la siguiente fase del DCU, la fase de Diseño. Dichas conclusiones están evidentemente enfocadas también para el perfil de usuario al cual va destinado el web de iniciación a las TIC. Los perfiles de usuarios se encuentran en el punto 3 del presente informe. DISEÑO DE LA WEB La Web al estar destinada a usuarios con un nivel nulo o básico en nuevas tecnologías debe de presentar un entorno gráfico amigable y que aproveche elementos de la IPO, como pueden ser las metáforas, restricciones, visibilidad,… que faciliten la usabilidad de la misma por este tipo de usuarios. De las técnicas de investigación utilizadas se ha extraído que a nivel de diseño, la página www.edu365.cat ha sido la más valorada en este sentido, es la que presenta colores más vivos, iconos y caracteres más grandes,…y en consecuencia será un input importante para el diseño de nuestra web. ESTRUCTURA DE LA WEB En cuanto a la estructura de la web, esta deberá ser lo más accesible posible, con todas las opciones visibles y fácil de localizar sus contenidos. Se ha podido concluir, que por ejemplo www.aulaclic.es, la cual nada más entrar ya muestra los cursos disponibles en el área central y/o principal, es una de las más valoradas por los usuarios en este sentido, ya que no deben de buscar en exceso para encontrar aquello que buscan. Por lo tanto, se trabajará en este aspecto, dando una estructura a la web muy intuitiva y sencilla, con los menús y contenidos formativos claramente diferenciados y, tal y como hemos concluido en el diseño, con caracteres grandes y colores vivos. CONTENIDO DIDACTICO Debido a las características de los usuarios a los que va destinada la web, el contenido didáctico que se deberá incluir va en función de estos. No podemos olvidar que su experiencia en nuevas tecnologías es nula o muy baja, por lo que cursos muy avanzados no serán aprovechados. De los métodos de indagación utilizados se ha podido extraer lo anteriormente citado, los usuarios han valorado muy bien los cursos ofrecidos por www.deseoaprender.com ya que contiene muchos de estos para la iniciación. El contenido didáctico a incluir irá en este sentido, y se ofrecerán cursos para iniciarse en TIC, incluyendo en un principio: Informática básica. Elementos. Iniciación Windows. Sistema de carpetas. Procesador de texto. Internet. Correo electrónico… A medida que los usuarios vayan incrementando sus conocimientos en TIC se irán incluyendo más cursos y/o ejercicios. Los usuarios también podrán sugerir diferentes temas. Tabla 2. Conclusiones fase investigación. 19.

(20) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. 2.4. Usuarios y Análisis de tareas Siguiendo con el proceso de investigación e indagación del DCU, a continuación se mostrarán los resultados del análisis del usuario y de sus funciones y/o roles. Los elementos analizados y descritos para dicho objetivo son: -. Perfiles de usuario Roles de usuario Contextos de uso Análisis de tareas. Esta definición es importante ya que nos servirá como base de entrada para la siguiente fase del DCU, la de Diseño.. 2.4.1.. Perfiles de usuarios. Los perfiles de usuario son agrupaciones de usuarios según sus características y han sido determinadas a través del estudio previo elaborado y visto en el punto anterior a través de las encuestas y otros métodos de investigación. El resultado de los citados perfiles de usuario es el siguiente:. USUARIOS INTERNOS Usuario Administrador Web. Características -Personas cualificadas con un nivel de estudios medio/alto. -Ámbito profesional de la informática y TIC’s. -Experto en administración web.. Tabla 3. Perfil usuario interno. USUARIOS EXTERNOS Usuario Docente Alumno. Visitante. Características -Personas cualificadas con un nivel de estudios medio/alto. -Usuarios de TIC’s con un nivel mínimo intermedio. -Personas habituadas a trabajar en entornos web. -Personas con diferentes niveles de estudios. -Personas con 40 o más años. -Genero indistinto. -Usuarios básicos de TIC’s. -Personas con diferentes niveles de estudios. -Personas con diferentes rangos de edad. -Genero indistinto.. Tabla 4. Perfil usuario externo. 20.

(21) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 2.4.2.. José Antonio Aranda Calderón. Roles de usuarios. Una vez establecidos los diferentes perfiles de usuario, procederemos a especificar para cada uno de ellos cuáles serán sus roles. Con la definición de los diferentes roles es pretende separar las diferentes funcionalidades que el sistema proporcionará y como los usuarios las hará servir. Estos roles y funcionalidades serán analizadas con más profundidad en el apartado 2.4.4.Analisis de tareas.. USUARIOS INTERNOS Usuario Administrador Web. Roles Mantenimiento de la página web. Tabla 5. Roles usuario interno. USUARIOS EXTERNOS Usuario Docente. Alumno. Visitante. Roles Usuarios Consulta Consulta Consulta Usuarios Consulta Consulta Consulta Usuarios Consulta. Tabla 6. Roles usuario externo. 21. habituales / registrados cursos ejercicios estadísticas habituales /registrados cursos ejercicios estadísticas esporádicos / no registrados cursos.

(22) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 2.4.3.. José Antonio Aranda Calderón. Contextos de uso. A continuación se listan los contextos de uso según los perfiles de usuarios a los que va destinada la página web.. USUARIO INTERNOS Administrador Web Sexo Nivel Edad Social. Nivel Estudios Nivel Formativo. Nivel Técnico. Indistinto Laboral. Nivel TIC’s. Enseñanza profesional superior Estudios Universitarios Experto. Experiencia en entornos similares. Alta. Autonomía/Conexión. Alta. Soporte de hardware requerido. No necesario. Hardware requerido. Equipo informático avanzado. Hardware adicional. Servidor. Tipo de conexión requerida. Calidad Alta. Software requerido. Específico diseño y mantenimiento de páginas web. Tabla 7. Contextos de uso usuario interno. USUARIO EXTERNOS Docente Nivel Social Nivel Formativo. Nivel Técnico. 22. Sexo. Indistinto. Edad. Laboral. Nivel Estudios Nivel TIC’s. Enseñanza profesional superior Estudios Universitarios Alta. Experiencia en entornos similares. Alta. Autonomía/Conexión. Alta. Soporte de hardware requerido. Nivel laboral. Hardware requerido Hardware adicional. Equipo informático con conexión a internet Impresora. Tipo de conexión requerida. Normal. Software requerido. Navegador Web.

(23) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. Alumno Nivel Social. Nivel Formativo. Sexo. Indistinto. Edad. Indistinto. Nivel Estudios. No requerido. Nivel TIC’s. Autonomía/Conexión. Sin experiencia Básica Sin experiencia Básica No requerida. Soporte de hardware requerido. Nivel usuario. Hardware requerido. Equipo informático con conexión a internet. Hardware adicional. Impresora. Tipo de conexión requerida. Calidad normal. Software requerido. Navegador Web. Sexo. Indistinto. Edad. Indistinto. Nivel Estudios. No requerido. Nivel TIC’s. Básica. Experiencia en entornos similares. Básica. Autonomía/Conexión. No requerida/Esporádica. Soporte de hardware requerido. Nivel usuario. Hardware requerido. Equipo informático con conexión a internet. Hardware adicional. No requerido. Tipo de conexión requerida. Calidad Normal. Software requerido. Navegador Web. Experiencia en entornos similares. Nivel Técnico. Visitante Nivel Social. Nivel Formativo. Nivel Técnico. Tabla 8. Contextos de uso usuario externo. 23. José Antonio Aranda Calderón.

(24) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 2.4.4.. José Antonio Aranda Calderón. Análisis de tareas. Una vez establecidos los usuarios y sus roles, se ha procedido a establecer las tareas que estos podrán realizar en la página web. Estas tareas han sido determinadas en función de los requisitos mínimos que se desean implementar en la misma.. USUARIOS INTERNOS Usuario. Tareas. Administrador Web. -Diseño página web mediante DCU (diseño centrado en el usuario) -Creación web -Implementación web -Mantenimiento web -Análisis Web. Tabla 9. Análisis de tareas usuario interno. USUARIOS EXTERNOS Usuario. Tareas. Docente. -Registro. El usuario Docente se dará de alta en el sistema. -Acceso. El usuario Docente accederá al sistema. -Elaboración y mantenimiento del material didáctico. -Consulta material didáctico. Cursos y Ejercicios. -Realizar seguimiento de Alumnos. El Docente accederá al perfil del Alumno. -Acceso a Buzón personal. Sistema de correo interno para usuarios registrados. -Alojar dudas/comentarios. Estos se podrán realizar para cada unidad didáctica al final de la misma (foro discusión) -Consulta dudas/comentarios. -Responder dudas/comentarios.. 24.

(25) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. Alumno. José Antonio Aranda Calderón. -Registro. El usuario Alumno se dará de alta en el sistema. -Acceso. El usuario Alumno accederá al sistema. -Consulta perfil. El Alumno accederá a su espacio personal, donde podrá visualizar entre otras cosas, los avances y progresos, módulos realizados,.. -Acceso a Buzón personal. Sistema de correo interno para usuarios registrados. -Consulta material didáctico. Cursos y Ejercicios. -Alojar dudas/comentarios. Estos se podrán realizar para cada unidad didáctica al final de la misma (foro discusión). -Consulta dudas/comentarios. -Responder dudas/comentarios.. Visitante. -Consulta material didáctico. Cursos. -Consulta dudas/comentarios.. Tabla 10. Análisis de tareas usuario externo. 25.

(26) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. 3. DISEÑO Siguiendo con el diseño centrado en el usuario (DCU) para la página web destinada a ofrecer contenido formativo para la iniciación en las nuevas tecnologías y, después de haber realizado en la fase anterior el proceso de Investigación y Análisis, en esta fase nos centraremos en la fase de Diseño. Es en esta fase donde se terminaran de definir las tareas previamente descritas en la fase anterior y los escenarios y diagramas de interacción pertinentes.. 3.1. Descripción Tal y como se ha descrito con anterioridad, en esta segunda fase del DCU nos centraremos en el diseño de la página web. Esta fase ha sido desglosada en 2 unidades diferenciadas, diseño y prototipo, y en esta primera parte nos centraremos en el diseño según el análisis de tareas realizado en la fase anterior. La importancia de esta fase de diseño radica en la definición específica de las citadas tareas que la página web ofrecerá al usuario y en función del rol de este las distintas funcionalidades accesibles. Con este fin se han definido: -. Escenarios de uso Diagramas de interacción. 3.2. Objetivos El objetivo fundamental de esta fase es la de definir las tareas descritas en la fase anterior junto con las funcionalidades de la página web y, así facilitar la siguiente fase destinada a la realización del prototipo de la página web.. 3.3. Escenarios de uso Un escenario de uso se define como la descripción de un personaje en una situación de uso real del producto a elaborar y, esta descripción incluye el contexto en el que tiene lugar y la secuencia de acciones que se llevan a cabo. [Garreta et al. 2011] Los escenarios suelen ser relatos que cuentan una historia en la que se describe una o más tareas desarrolladas en una situación ambiental concreta. Por lo tanto, la definición de estos escenarios nos facilitará la tarea de analizar las distintas situaciones por las que los usuarios de la página web se irán encontrando. No podemos olvidar que estas situaciones nos serán de gran utilidad para considerar los posteriores aspectos del diseño y es por esto que nuestros escenarios de uso incluyen al usuario involucrado y las distintas interacciones que éste presenta con el producto final, en nuestro caso la página web. 26.

(27) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 3.3.1.. José Antonio Aranda Calderón. Administrador Web. Mantenimiento Web – Actualización Escenario. El personal docente ha enviado al administrador web nuevo contenido para alojar en la página web. Este contenido didáctico se compone de un tema nuevo para el módulo de OpenOffice Writer, en concreto el tema de creación de tablas y de un ejercicio.. Acciones. Alojar dicho contenido didáctico en el apartado correspondiente de la página web. Crear nuevo apartado en espacio personal de alumnos para dicho nuevo material y poder así realizar seguimiento de módulos realizados.. Elementos. Unidad didáctica creación de tablas. Ejercicio creación de tablas.. Interacción. Tabla 11. Escenario de uso. Administrador. Mantenimiento Web. 3.3.2.. Docente. Acceso sistema Escenario. José, como personal docente que es, quiere acceder al sistema para poder realizar el seguimiento de los alumnos registrados.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso.. Elementos Interacción. Tabla 12. Escenario de uso. Docente. Acceso sistema. 27.

(28) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Elaboración y Mantenimiento material didáctico Escenario. José, ha elaborado nuevo material formativo destinado a explicar el funcionamiento del correo electrónico Gmail. Este contenido es un archivo pdf, el cual enviará al administrador web para que pueda actualizar la página web con el mismo.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Entrar en Buzón y enviar correo al Administrador web con el pdf adjunto al mismo.. Elementos. Archivo tipo pdf con el tutorial de funcionamiento del correo Gmail.. Interacción. Tabla 13. Escenario de uso. Docente. Elaboración material didáctico. Consulta material didáctico (módulos y ejercicios) Escenario. José está elaborando nuevo contenido didáctico para el módulo de OpenOffice (en concreto para el módulo Writter) y, quiere comprobar los temas y ejercicios existentes dentro del mismo antes de comenzar con uno nuevo.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Entrar en apartado Ofimática y dentro de este en el apartado de Writter. Consultar temas y ejercicios.. Elementos Interacción. Tabla 14. Escenario de uso. Docente. Consulta material didáctico. 28.

(29) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Seguimiento de Alumnos Escenario. José quiere realizar el seguimiento del alumno Francisco, el cual está realizando el modulo de OpenOffice-Writter, y así comprobar qué temas ya lleva realizados y poder enviarle un correo personalizado si así lo creyera conveniente con sugerencias de estudio y planteamiento de posibles dudas y comentarios.. Acciones. Entrar en página web. Ir a apartado login. Cumplimentar datos de acceso. Entrar en Seguimiento Alumnos. Seleccionar alumno Francisco, ver estadísticas.. Elementos Interacción. Tabla 15. Escenario de uso. Docente. Seguimiento de alumnos. Acceso Buzón Escenario. José después de realizar un seguimiento del alumno Francisco, ha podido comprobar que éste ha finalizado por completo el modulo de OpenOffice-Writter. En este sentido, quiere enviar un correo interno a Francisco para preguntar al mismo sobre el asimilamiento del contenido y plantear posibles dudar generadas.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Entrar en Buzón. Escribir correo.. Elementos Interacción Tabla 16. Escenario de uso. Docente. Acceso buzón. 29.

(30) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Consulta dudas/comentarios Escenario. Acciones. José ha recibido un correo interno comunicándole que dentro del modulo Informática Básica – Carpetas y Archivos, se ha generado un nuevo comentario. Con la intención de poder leer dicho comentario accederá al dicho modulo para poder leer el mismo. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Entrar en buzón y leer correo. Entrar al modulo Informática Básica y al tema de Carpetas y Archivos. Leer nuevo comentario.. Elementos Interacción. Tabla 17. Escenario de uso. Docente. Consulta de dudas y comentarios. Alojar y responder dudas/comentarios Escenario. José ha leído un comentario realizado por un alumno dentro del tema Carpetas y Archivos. Dicho comentario es una duda sobre la creación de carpetas. Al ser una duda que puede servir al resto, decide responder a dicho comentario de forma general dentro del tema para que el resto de alumnos pueda verlo también.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Entrar en modulo Informática Básica y al tema de Carpetas y Archivos. Alojar una respuesta.. Elementos Interacción. Tabla 18. Escenario de uso. Docente. Alojar y responder comentarios. 30.

(31) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 3.3.3.. José Antonio Aranda Calderón. Alumno. Acceso sistema Escenario. Francisco, quiere continuar con el siguiente tema del modulo de Informática Básica que está realizando. Con la intención de poder tener acceso a los ejercicios y que su progreso quede registrado en su espacio personal entrará al sistema con sus datos de acceso.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso.. Elementos Interacción. Tabla 19. Escenario de uso. Alumno. Acceso sistema. Consulta perfil Escenario. Francisco quiere consultar sus avances y comprobar los temas que ya ha realizado dentro del modulo de Informática Básica.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Ir a Espacio Personal.. Elementos Interacción. Tabla 20. Escenario de uso. Alumno. Consulta perfil. 31.

(32) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Acceso Buzón Escenario. Francisco ha realizado un ejercicio del modulo openOfficeWritter. Dicho ejercicio quiere enviarlo a José para que pueda corregirlo. Para tal fin entrará en el buzón y enviará un correo con el archivo adjunto.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Ir a Buzón, redactar correo nuevo, adjuntar archivo de ejercicio y enviar.. Elementos. Ejercicio realizado (.odt). Interacción. Tabla 21. Escenario de uso. Alumno. Acceso buzón. Consulta material didáctico (módulos y ejercicios) Escenario. Francisco, quiere continuar con el siguiente tema del modulo de Informática Básica que está realizando. Además quiere imprimir el tema y los ejercicios relacionados.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Ir a modulo de Informática Básica.. Elementos Interacción. Tabla 22. Escenario de uso. Alumno. Consulta material didáctico. 32.

(33) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Consulta dudas/comentarios Escenario. Francisco está realizando el tema de creación de tablas dentro del modulo Ofimática-OpenOffice-Writter, y tiene una duda en relación a cambiar el grosor de los bordes de la tabla. Decide leer los comentarios del tema para ver si dicha duda ha sido planteada previamente. Los comentarios se encuentran alojados al final de cada tema en forma de foro de discusión.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Entrar en modulo Ofimática-OpenOffice-WritterCreación Tablas. Leer comentarios.. Elementos Interacción Tabla 23. Escenario de uso. Alumno. Consulta comentarios. Alojar dudas/comentarios Escenario. Francisco está realizando el tema de creación de tablas dentro del modulo Ofimática-OpenOffice-Writter, y tiene una duda en relación a cambiar el grosor de los bordes de la tabla. Decide plantear dicha duda de forma pública en el apartado destinado a tal efecto ya que nadie ha planteado una duda similar.. Acciones. Entrar en página web. Ir a apartado Login. Cumplimentar datos de acceso. Entrar en modulo Ofimática-OpenOffice-WritterCreación Tablas. Alojar un comentario.. Elementos Interacción Tabla 24. Escenario de uso. Alumno. Alojar comentarios. 33.

(34) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 3.3.4.. José Antonio Aranda Calderón. Visitante. Registro Usuario Escenario. Acciones. María acaba de jubilarse y quiere comenzar a utilizar las nuevas tecnologías con la intención de poder comunicarse de una forma ágil con sus hijos y nietos. Le han recomendado este sitio web y para poder acceder a todas sus funcionalidades ha decidido registrarse como usuario alumno. Entrar en página web. Ir a Registro. Cumplimentar los datos personales requeridos. Confirmar registro.. Elementos Interacción. Tabla 25. Escenario de uso. Visitante. Registro usuario. Consulta material didáctico (módulos) Escenario. Lucía está interesada en el uso de las nuevas tecnologías. Su experiencia previa es muy básica, limitándose a navegar por internet, y querría aprender el uso de un procesador de texto ya que ha comenzado un curso de narrativa. Le han recomendado este sitio web y antes de registrarse quiere comprobar el material didáctico alojado. Los usuarios no registrado podrán acceder a los distintos temas pero tendrán limitado el acceso a todas las funcionalidades, como por ejemplo ejercicios, espacio personal, buzón, alojar comentarios.. Acciones. Entrar en página web. Entrar en modulo Ofimática-OpenOfficeWritter.. Elementos Interacción. Tabla 26. Escenario de uso. Visitante. Consulta material didáctico. 34.

(35) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. 3.4. Flujos de Interacción Una vez definidos los distintos escenarios de uso procederemos a definir los distintos flujos de interacción posibles para éstos. Estas interacciones las mostraremos a través de Diagramas de Flujo. El Diagrama de Flujo representa la esquematización gráfica de las distintas tareas descritas y nos muestra paso a paso los distintos procesos para la consecución de la citada tarea. Se trata de un esquema para representar gráficamente una situación mediante la utilización de diversos símbolos para representar operaciones específicas, es decir, la representación grafica de las distintas operaciones que se tienen que realizar para resolver un problema, con indicación expresa del orden lógico en que deben realizarse. [Millan et al. 2008] Esta herramienta, junto con los escenarios nos facilitará la tarea de la segunda fase del diseño, el prototipo. Se han utilizado los siguientes básicos símbolos para su realización: Inicio tarea Fin tarea Proceso Decisión Documento Proceso manual. 3.4.1.. Mantenimiento Página Web. Actualización.. Figura 18. Diagrama flujo mantenimiento. 35.

(36) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. 3.4.2.. Acceso Sistema y Registro Usuarios. Figura 19. Diagrama flujo acceso sistema. 3.4.3.. Consulta Material Didáctico. Usuarios registrados. Figura 20. Diagrama flujo consulta material didáctico. 36. José Antonio Aranda Calderón.

(37) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. Usuarios no registrados. Figura 21. Diagrama flujo consulta material didáctico visitante. 3.4.4.. Leer y/o escribir comentarios. Usuarios registrados. Figura 22. Diagrama flujo leer y escribir comentarios. 37. José Antonio Aranda Calderón.

(38) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. Usuarios no registrados. Figura 23. Diagrama flujo leer y escribir comentarios visitante. 3.4.5.. Opciones del espacio personal. Usuarios Docente. Figura 24. Diagrama flujo área personal docente. 38. José Antonio Aranda Calderón.

(39) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Usuarios Alumno. Figura 25. Diagrama flujo área personal alumno. 3.4.6.. Resumen Funcionalidades Admon.. Mantenimiento Web Acceso a la página Web Consulta del contenido didáctico Consulta de ejercicios Imprimir contenido y ejercicios Ver los comentarios Escribir comentarios Buzón Modificar datos personales Ver progreso personal Ver estadísticas de los alumnos. Tabla 27. Resumen funcionalidades usuarios. 39. Docente. Alumno. Visitante.

(40) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. 4. PROTOTIPADO Una vez definidos los usuarios, las tareas y sus interacciones en la fase anterior, procederemos al diseño del prototipo de la página web. Como elementos de entrada utilizaremos los citados inputs así como los elementos que la IPO (Interacción Persona-Ordenador) nos proporciona.. 4.1. Descripción Tal y como se ha descrito, en esta fase procederemos a iniciar el desarrollo del prototipo de nuestra página web. Dicho prototipo será elaborado con la herramienta Axure RP Pro 6.5 [Axure Software Solutions, Inc. 2002-2013], la cual está orientada a diseñar wireframes y prototipos básicos de forma fácil y predictiva, además de permitir una simulación de su interacción y de ser una herramienta que puede ser utilizada con cualquier navegador HTML. Esta fase de diseño mostrará una primera aproximación al prototipo final, y se limitará a una captura de pantalla del menú principal. Es importante remarcar que el prototipo final no será el definitivo hasta la última fase del proyecto y después de recoger el feedback del usuario. Asimismo, el prototipo final no incluirá el contenido didáctico como tal y si la estructura completa de la página web.. 4.2. Objetivos El principal objetivo de la presente fase es la de realizar una primera aproximación al prototipo de la página web destinada a la iniciación en las nuevas tecnologías basándonos en: -. Perfiles de usuarios, tareas e interacciones establecidas en las fases anteriores. Elementos de la IPO que faciliten la interacción de los usuarios.. Una vez realizado, dicho prototipo será sometido a las pertinentes pruebas mediante estudios de usabilidad a través de los usuarios, que permitirán su evaluación y pertinente iteración para la mejora del producto final (fase no incluida).. 40.

(41) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. 4.3. Prototipo Un prototipo consiste en construir un modelo del sistema o página web que se diseñe. Estos modelos simulan partes del sistema final y se utilizan para hacer pruebas que no se podrían ejecutar hasta que el proyecto estuviera finalizado. Es importante remarcar que estos prototipos no pretenden reproducir la web, sino que normalmente corresponden a partes concretas. [Garreta et al. 2011] En nuestro caso se ha optado por un prototipo de de alta fidelidad y horizontal. Un prototipo de alta fidelidad trata de construir un modelo tan cercano al producto final como sea posible y, al ser horizontal se busca que éste contenga todas las funcionalidades, espacios y/o menús.. 4.3.1.. IPO. Con la intención de diseñar una web los más accesible y facilitadora posible dentro del marco de los perfiles de usuarios definidos, en el diseño de la misma se han seguido directrices/recomendaciones de IPO (Interacción Persona-Ordenador). La IPO se puede definir como la disciplina dedicada a estudiar la relación interactiva entre las personas y la tecnología y, a mejorar esta relación a través de diseño [Hassan 2011]. Es por este motivo que se ha considerado como fundamental en el diseño del presente prototipo a través de estos tres elementos que conforman los ejes centrales de la disciplina: tecnología, personas y diseño. A continuación se muestran los elementos de la IPO que se han tenido en consideración a la hora de realizar el prototipo.. 4.3.1.1. Tecnología Cualquier dispositivo interactivo está construido en base a elementos y productos tecnológicos, los cuales aplicados conjuntamente hacen posible el producto final de acuerdo al producto final requerido. A continuación mostraremos los conceptos que han sido aplicados en nuestra página web.. Interfaz de usuario La interfaz de usuario incluye o engloba todos los componentes destinados a posibilitar el intercambio de mensajes e instrucciones entre la persona y el ordenador. Los dos grupos principales de interfaces son: -. Interfaz de indicadores de ordenes Interfaces gráficas. Las interfaces gráficas, a diferencia de las de indicadores de órdenes, posibilitan y facilitan un número más elevado de estilos de interacción. La ventaja principal de éstas es que resultan más fáciles de usar y requieren un esfuerzo de aprendizaje 41.

(42) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. más pequeño respecto a las de indicadores de órdenes, ya que el usuario puede reconocer visualmente como se han de ejecutar las tareas en lugar de tener que memorizar previamente las instrucciones necesarias. Es por este motivo que se ha utilizado esta interfaz gráfica para la elaboración del prototipo.. Dispositivos de la interfaz Los dispositivos de la interfaz están clasificados como dispositivos de entrada y de salida y, su función es la de transmitir información del usuario al producto (entrada) y del producto al usuario (salida). Los dispositivos de salida serán: -. Visuales. Pantalla 2D donde se mostrará la interfaz. Auditivos. Altavoces o auriculares, que posibilitarán la reproducción de contenido multimedia.. Los dispositivos de entrada serán: -. Teclado. El cual permitirá la escritura de correos y comentarios. Ratón. El cual permitirá la interacción con los elementos de la interfaz.. Interacción La interacción es la acción que el usuario realiza sobre el ordenador y el efecto perceptible que éste produce como respuesta. De los distintos tipos de interacción posibles se ha elegido el de Manipulación Directa, por ser este el más intuitivo y fácil de aprender para usuarios no expertos. Este tipo de interacción permite al usuario manipular y controlar físicamente los elementos presentes en la interfaz, siendo estos en todo momento visibles así como también las acciones realizadas.. 4.3.1.2. Factor Humano Todo producto está diseñado para ser utilizado por personas, con perfiles y comportamientos variados, es por este motivo que el factor humano es uno de los que más complejidad e incertidumbre presentan a la hora de diseñar cualquier producto. A continuación se presentan algunos principios encaminados a minimizar esta incertidumbre y que han sido aplicados en el diseño de la página web.. 42.

(43) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Atención Visual Al explorar visualmente una interfaz gráfica, se está expuesto a una cantidad de información visual más grande de la que el ser humano puede atender simultáneamente. Únicamente se procesa la zona de la interfaz a la cual el ser humano dirige la visión central, siendo el resto de la interfaz procesada paralelamente con la visión periférica, la cual no nos permite identificar claramente los objetos o elementos presentes. Con la intención que los objetos de nuestra interfaz sean visibles y atraigan la atención del usuario, se ha utilizado la llamada Activación Intrínseca, la cual busca que las propiedades gráficas de los objetos tengan la capacidad de atraer la atención a través de una asociación con el elemento deseado. La web presentará sus interacciones a través de botones grandes que favorezcan esta atención visual.. Memoria La memoria humana se estructura en dos sistemas, conocidos como memoria a corto y a largo plazo. La memoria a corto plazo, es la memoria sobre el presente y se caracteriza por el hecho de tener una capacidad limitada y por su temporalidad. La memoria a largo plazo, es la memoria sobre el pasado y se caracteriza por el hecho de retener información durante largos periodos de tiempo y sin límite de capacidad. Debido al perfil de los usuarios definidos, la página web no requerirá una memoria a largo plazo, y todos sus elementos e interacciones posibles se mostrarán mediante una interfaz predictiva y accesible, siendo el usuario y la contraseña los únicos datos a memorizar. Asimismo el sistema dispondrá de una herramienta para poder recuperar la contraseña en caso de no recordarla, mediante la respuesta a una pregunta previamente formulada durante el proceso de registro.. Procesamiento de la información, toma de decisiones y transparencia de la interfaz La página web ha sido diseñada de tal forma que el usuario pueda utilizarla de manera intuitiva, presentando ésta una estructura básica, incluyendo además un botón destinado a volver en todo momento a la página anterior y/o al inicio de la web y, siguiendo con la apariencia y comportamiento de productos a los cuales ya se encuentran habituados, como pueden ser los navegadores. La complejidad de una tarea interactiva viene definida a través de su estructura, estas están definidas por su amplitud y profundidad. [Garreta et al. 2011] Cuanto más amplitud y profundidad contengan más complejidad tendrá, por lo que, la web presentará una estructura sencilla y con los niveles mínimos necesarios.. 43.

(44) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Error Humano Debido al carácter intuitivo y al perfil de usuario de la web, es probable que puedan generarse situaciones no deseadas o inconsistentes. La interfaz de la web informará al usuario en aquellas situaciones críticas que puedan generarse mediante una ventana emergente o similar. Affordance El concepto de Affordance se refiere a las propiedades perceptibles de los objetos y que determinan como se pueden usar, dando un aspecto auto-explicativo y, de forma explícita mostrando cómo se han de usar y con qué objetivos. Además, para conferir un grado de calidad extra al diseño de la web, a este concepto de Affordance también se aplicarán los siguientes principios: -. Visibilidad. Partes y opciones más relevantes han de ser visibles en todo momento. o Aplicación: La interfaz mostrará en todo momento las opciones disponibles en la parte superior. Además el contenido formativo de la misma también cumplirá este requisito y facilitará su búsqueda.. -. Retroacción. El producto o aplicación ha de informar en todo momento al usuario en qué estado se encuentra y que ha pasado o está pasando como consecuencia de una acción determinada realizada. o Aplicación: Se mostrarán ventanas informativas cuando, 1)el resultado de las acciones no sea inmediato informando del tiempo de espera, 2)cuando la acción haya finalizado con éxito, 3)en situaciones de errores o tareas no realizadas.. -. Mapa Natural. El resultado de nuestras acciones ha de corresponderse con la intención que se tenía al ejecutarlas, evitando las brechas de evaluación.. -. Restricciones. Se limitarán las acciones posibles que puede ejecutar el usuario para así reducir la posibilidad de cometer errores.. 4.3.1.3. Diseño El diseño consiste en idear soluciones a problemas de interacción y determinar cómo se han de comportar y presentar los productos interactivos para que estos sean cómodos y fáciles de usar, atractivos, satisfactorios y en definitiva, útiles. En el diseño de productos interactivos, no hay que olvidar que se han de aplicar conjuntamente conceptos tecnológicos y humanos. A continuación veremos los conceptos aplicados.. 44.

(45) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. José Antonio Aranda Calderón. Color El color ha sido un concepto muy importante a la hora de diseñar la web. Es uno de los recursos que aportan más impacto en la estética de una interfaz, pero no ha sido únicamente utilizado con este fin, sino también como recurso comunicativo importante. Se ha incidido principalmente en la no utilización de un número elevado de colores que puedan provocar el colapso de la capacidad de la memoria operativa y, en la combinación de éstos evitando la combinación de colores incompatibles (rojo, verde, azul y amarillo) o utilizar letras sobre fondos que puedan inhibir su visibilidad [Garreta et al. 2011] A continuación se muestran las decisiones tomadas: -. Número de Colores. El número de colores utilizado ha sido limitado a una paleta de dos colores primando la sencillez.. -. Combinación de Colores. La gama de colores utilizada es una combinación de azul y blanco.. Metáforas Las metáforas consisten en usar una palabra o expresión para referirse a un concepto, que no se denota de manera literal, sino en sentido figurado sobre la base de sus similitudes. La función y utilidad de estas es la de favorecer la comprensión de una situación desconocida sobre la base de las similitudes que se puedan establecer respecto a una realidad conocida. En este sentido, en nuestro prototipo se utilizarán estas metáforas para así facilitar la interacción y comprensión por parte de los usuarios.. Iconos Los iconos son elementos omnipresentes en todas las interfaces gráficas actuales de usuario, en nuestro caso tampoco serán una excepción y tendrán un lugar importante en la página web, el uso de estos iconos tienen la función de mejorar la estética y mejorar la usabilidad de la misma. La inclusión de estos iconos estará focalizada en dos aspectos principales, su interpretación y su ubicación, siendo estos dos aspectos fundamentales en la citada facilidad en que el usuario pueda interpretar su significado. Estos iconos además irán acompañados de un texto o su botón correspondiente explicativo. Los principales iconos utilizados serán los siguientes:. 45.

(46) TRABAJO FINAL CARRERA Diseño centrado en el usuario y usabilidad en un entorno web para la iniciación en las TIC’s. Ir a Inicio. José Antonio Aranda Calderón. Pagina Anterior. Inicio sesión. Cerrar Sesión. Operación realizada. Operación no realizada. Error. Imprimir. Ejercicios. Ampliar. Reducir. Area Personal. Modificar datos personales. Correo. Estadísticas. Tema. Informática Básica. Tema. Ofimática, OpenOffice. Tema. Internet. Tema. Seguridad. Jerarquía Visual y Simplicidad En cuanto al diseño visual de la página web, se ha enfocado hacia una jerarquía visual clara, donde sus elementos y/o contenidos más relevantes estarán enfatizados i destacarán sobre el resto, además de eliminar o suprimir todas las funciones y/o opciones que no resulten esenciales para los objetivos del usuario. En este sentido, la página inicial incluirá botones grandes con cada uno de los temas didácticos principales incluidos (informática Básica, OpenOffice, Internet y Seguridad) y las funcionalidades básicas ofrecidas (Login, Correo, Datos Personales, Estadísticas).. 46.