Usabilidad Web PDF

IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Contenido 1. Introducción............................................................................................................................. 2 2. Concepto de usabilidad.............................................................................

IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Contenido 1. Introducción............................................................................................................................. 2 2. Concepto de usabilidad............................................................................................................ 2 3. Análisis de la usabilidad. Técnicas............................................................................................ 3 4. Principios para conseguir webs amigables................................................................................ 3  Evaluación heurística de Jakob Nielsen................................................................................ 3  Prueba del seis..................................................................................................................... 4  Bruce Tognazzini.................................................................................................................. 4  Hassan Montero y Martín Fernández................................................................................... 5 5. Tipos de usuarios. Necesidades................................................................................................ 6  Modelado de usuarios.......................................................................................................... 6 6. Navegación fácilmente recordada frente a navegación redescubierta.................................... 7 7. Facilidad de navegación en la web........................................................................................... 7 8. Anexos...................................................................................................................................... 8  No me hagas pensar............................................................................................................. 8  ¿Cómo usamos realmente la web?.................................................................................... 10 9. Diseño de rótulos................................................................................................................... 12 10. Omisión de palabras innecesarias...................................................................................... 14 11. Formularios........................................................................................................................ 15  K I S S ! Keep It Simple, Stupid!........................................................................................... 16 12. Consejos............................................................................................................................. 16 13. Autoría del documento...................................................................................................... 17 P á g i n a 1 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez IMPLEMENTACIÓN DE LA USABILIDAD EN LA WEB. DISEÑO AMIGABLE 1. Introducción Cualquier diseñador deberá considerar a la hora de crear webs amigables tres actividades fundamentales:    Conocer al usuario potencial de su sitio web y las tareas que éste desea abordar utilizando este sitio. Realizar diferentes prototipos y barajar distintas alternativas de diseño del sitio web. Mejorar los prototipos que vaya realizando. Estas actividades se conocen como Diseño Centrado en el Usuario. 2. Concepto de usabilidad Desde el punto de vista del usuario, cuando se quiere hacer referencia a que un sitio web es de calidad, se dice que dicho producto es amigable o que tiene un alto grado de usabilidad. Usabilidad hace referencia a la facilidad con que un usuario puede utilizar una herramienta fabricada por otras personas con el fin de alcanzar ciertos objetivos. La usabilidad es la medida de la facilidad de uso de un producto o servicio, típicamente una aplicación software o un elemento hardware. Generalmente las necesidades de los usuarios entran en conflicto directo con las intenciones de los diseñadores. Así pues, la usabilidad se encarga de todo lo que influya en el éxito y la satisfacción del usuario. Según la Organización Internacional para la Estandarización (ISO) se define usabilidad como “el grado de eficacia, eficiencia y satisfacción con la que los usuarios específicos alcanzan metas específicas en entornos concretos”. La usabilidad está vinculada con simpleza, facilidad, comodidad y practicidad. La usabilidad se compone de dos tipos de atributos:   Cuantificables de forma objetiva: son la eficacia o número de errores cometidos por el usuario durante la realización de una tarea, y eficiencia o tiempo empleado por el usuario para la consecución de una tarea. Cuantificables de forma subjetiva: es la satisfacción de uso, medible a través de interrogatorios al usuario. P á g i n a 2 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 3. Análisis de la usabilidad. Técnicas Para lograr incrementar el grado de usabilidad de un sitio web tendremos que identificar qué necesitan los usuarios potenciales de los sitios web para que el diseñador lo tenga en cuenta al desarrollar dichos sitios. Existen diferentes grupos de técnicas:    Técnicas de sondeo o indagación Técnicas de inspección Técnicas de prueba con usuarios A partir de estas técnicas se pueden identificar barreras que los usuarios identifican en los desarrollos. 4. Principios para conseguir webs amigables La evaluación de la usabilidad es la etapa más importante del proceso de Diseño Centrado en el Usuario (el proceso de diseño y desarrollo del sitio web debe estar conducido por el usuario, sus necesidades, características y objetivos). Éste se puede realizar a través de varios métodos o técnicas y sobre diferentes representaciones del sitio (prototipo en papel, prototipo software, sitio web implementado,…) Este es el que ha tenido mas exito  Evaluación heurística de Jakob Nielsen Uno de los gurús en el ámbito de la usabilidad es Jakob Nielsen y sus 10 principios de diseño son: 1. Visibilidad del estado del sistema: El sitio web siempre debe mantener informado a los usuarios de lo que ocurre, con un correcto feedback en un tiempo razonable. ¿Se deben mostrar barras de progreso? ¿Se deben mostrar mensajes de espera?... 2. Correspondencia entre los contenidos del sitio web y el mundo real: El sitio web debe hablar el lenguaje de los usuarios con palabras, frases y conceptos familiares. ¿El lenguaje empleado es correcto y adecuado al perfil de usuarios? ¿Los usuarios pueden entender fácilmente el contenido del sitio? 3. Control y libertad del usuario: El diseñador debe indicar una salida clara a situaciones de error no deseadas, sin necesidad de pasar por diálogos extensos o poco claros. Además, los usuarios deben poder volver fácilmente a un estado anterior. ¿El usuario tiene total libertad para moverse por el sitio? ¿puede avanzar, retroceder,volver al inicio…? 4. Consistencia y estándares: Los colores, fuentes, distribución de los contenidos a lo largo de las distintas secciones y páginas deben ser homogéneas a lo largo de todo el sitio web. ¿El diseño es adecuado? ¿Es consistente? 5. Evitar errores: Un diseño cuidado que previene la ocurrencia de problemas de cara al usuario es mejor que buenos mensajes de error. P á g i n a 3 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez ¿Hay enlaces rotos? ¿Faltan imágenes?... 6. Reconocer mejor que recordar: Hay que intentar, en la medida de lo posible, mostrar objetos, acciones y opciones para minimizar el uso de memoria por parte del usuario. El usuario no debería tener que recordar información de unas zonas de un sitio web a otras. Si para hacer unas determinadas tareas se necesitan instrucciones, deben estar visibles o fácilmente recuperables. ¿Están correctamente identificados los menús? ¿Se muestran las diferentes opciones correctamente? ¿Existen migas de pan?... 7. Flexible y eficiente: El diseño no debe imponer retrasos a usuarios avanzados ni impedir que usuarios novatos no puedan interactuar con facilidad. 8. Estética y diseño minimalista: Intentar simplificar, eliminar contenido irrelevante para que el usuario sólo se fije en lo realmente importante. Cualquier contenido que aparezca en el sitio web debería estar justificado (no nos referimos a alineación sino a que debe tener un motivo por el que se muestra). 9. Ayudar a los usuarios a reconocer, diagnosticar y recuperar de los errores: Los mensajes de error deben indicar el problema de forma precisa e indicar la solución. 10. Ayuda y documentación: El sitio web, si fuera necesario para realizar determinadas tareas, facilitará documentación (pasos concretos y breves)  Prueba del seis Si una página es correcta desde el punto de vista de la usabilidad tiene que poder contestar a las siguientes preguntas sin ninguna dificultad: 1. ¿Qué sitio es este?  Identificador del sitio 2. ¿En qué página estoy?  Nombre de la página 3. ¿Cuáles son las principales secciones del sitio?  Secciones identificadas 4. ¿Qué opciones tengo en este nivel?  Navegación local 5. ¿Dónde estoy en el esquema de las cosas?  Indicadores de “Usted está aquí” 6. ¿Cómo busco algo?  Buscador  Bruce Tognazzini Los principios propuestos por Bruce Tognazzini son: 1. Anticipación: el sitio web debe anticiparse a las necesidades del usuario. 2. Autonomía: los usuarios deben tener el control sobre el sitio web. 3. Los colores: han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores. 4. Consistencia: las aplicaciones deben ser consistentes con las expectativas de los usuarios. P á g i n a 4 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 5. Eficiencia del usuario: los sitios web se deben centrar en la productividad del usuario. 6. Reversibilidad: Un sitio web debe permitir deshacer las acciones realizadas. 7. Ley de Fitts: “el tiempo para alcanzar un objetivo con el ratón está en función de la distancia y el tamaño del objetivo”. A menor distancia y mayor tamaño, mayor facilidad para usar un mecanismo de interacción. 8. Reducción del tiempo de latencia: se debe tratar de optimizar el tiempo de espera, permitiendo al usuario realizar mientras otras tareas e información del tiempo pendiente para la finalización. 9. Aprendizaje: los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento. 10. Protección del trabajo de los usuarios: se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error. 11. Legibilidad: el color de los textos debe contrastar con el del fondo y el tamaño debe ser suficientemente grande. 12. Seguimiento de las acciones del usuario: se debe permitir al usuario realizar operaciones frecuentes de manera más rápida. 13. Interfaz visible: se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas,…  Hassan Montero y Martín Fernández El modelo de evaluación heurística propuesto por Hassan Montero y Martín Fernández es: 1. Aspectos generales: Apariencia de la interfaz gráfica, coherencia y nivel de adecuación de contenidos. 2. Identidad e información: Identidad del sitio e información proporcionada por el proveedor y la autoría de los contenidos. 3. Lenguaje y redacción: Calidad de los contenidos textuales. 4. Rotulado: Significación y familiaridad de los rotulados de los contenidos. 5. Estructura y navegación: Idoneidad de la arquitectura de información y navegación del sitio. 6. Layout de la página: Distribución y aspecto de los elementos de navegación e información en la interfaz. 7. Búsqueda: Buscador interno del sitio. 8. Elementos multimedia: Grado de adecuación de los contenidos multimedia al sitio. 9. Ayuda: Documentación y ayuda contextual ofrecida al usuario para la navegación. 10. Accesibilidad: Cumplimiento de las directrices de accesibilidad. 11. Control y retroalimentación: Libertad del usuario en la navegación. P á g i n a 5 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 5. Tipos de usuarios. Necesidades Independientemente de las características, objetivos y del potencial de un sitio web, será el usuario final el que mejor determinará el grado de usabilidad, y de calidad, que dicho sitio ofrece. El problema de los sitios web frente al software tradicional es que los usuarios pueden ser muy diversos. Atendiendo al tipo de usuarios y a sus necesidades tenemos los siguientes sitios web:    Sitios web públicos para usuarios en general: los usuarios no tienen restricciones de acceso a los contenidos. Sitios web públicos con registro de usuarios: Los usuarios deben identificarse en el sitio y en función de esto sus contenidos pueden variar. Sitios web privados: El acceso está restringido a usuarios de una empresa o institución.  Modelado de usuarios El modelado de usuarios consiste en la definición de perfiles de usuarios basados en atributos comunes tales como necesidades de información, condiciones de uso, experiencia y conocimientos. Mediante esta técnica, el diseñador tendrá en mente para quién diseña, qué espera encontrar y en qué forma. El problema es cuando la audiencia es demasiado extensa y heterogénea. El modelado de usuarios se basa en la definición de arquetipos de usuarios que representan patrones de conducta, objetivos y necesidades. Estos arquetipos son “personas” a las que se les da una identidad inventada: fotografía, nombre,… Pero todos los atributos, características y necesidades deben estar basados en información real extraída de la audiencia objetiva del sitio. Además, se les añaden unos escenarios, que son descripciones de uso del sitio. P á g i n a 6 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 6. Navegación fácilmente recordada frente a navegación redescubierta Los elementos de navegación son los que permiten al usuario moverse por un sitio web y encontrar la información que busca. Con un sistema predecible y consistente se ayudará al usuario a hacerse una idea de la organización del sitio. Una interfaz de navegación estará bien diseñada y será fácil de recordar, ofrecerá soporte a las actividades de los usuarios, si fue diseñada para dar respuesta a las siguientes preguntas: 1. ¿Dónde estoy? La web es un medio de enormes dimensiones, un usuario puede pasar de un sitio web a otro sin darse cuenta. Por ello, es absolutamente necesario que el usuario sepa en todo momento dónde está. 2. ¿Quién me está contando todo lo que encuentro en este sitio? Siempre hay que decirle al usuario quién ha creado la página consiguiendo una mayor confianza en el contenido. 3. ¿Qué puedo encontrar aquí? Todos los documentos necesitan títulos claros que capten su atención, además, es la frase que se guardará en favoritos. 4. ¿Dónde he estado? y ¿qué he visitado ya? Son preguntas que debería poder responder sin esfuerzo. 5. ¿Dónde puedo ir desde dónde estoy? Esta pregunta es fácil de responder si los enlaces están bien identificados. 6. ¿Cuándo? Existen miles de páginas en Internet desactualizadas y el diseñador debe ayudar a sus visitantes a saber si su información es actual o no, incluyendo fechas o referencias. 7. Facilidad de navegación en la web Para facilitar la navegación de los usuarios se deben tener presentes las siguientes recomendaciones:     Ofrecer enlaces “volver”: A la hora de incluir enlaces y botones debemos asegurarnos que incluyan etiquetas que describan y anticipen al usuario hacia dónde va. El menú de navegación debe estar siempre visible: El hecho de que le usuario pueda acceder al menú principal desde cualquier parte provoca en el usuario una sensación de control de sus movimientos sobre el sitio. Si la estructura y la navegación es adecuada el usuario puede acceder a cualquier información en menos de 3 clicks. Indicar la situación actual dentro del sitio. Evitar diseños de sitios pesados, que impidan rapidez de descarga: Si una página tarda mucho en cargar, el usuario posiblemente la abandone. Se deben optimizar las imágenes, gráficos y animaciones incluidas. P á g i n a 7 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 8. Anexos  No me hagas pensar “Si algo es complicado de utilizar, simplemente no lo uso” ¿Qué es lo que tengo que tener en cuenta si quiero que una web sea fácil de usar? La web ha de ser obvia, evidente, clara y fácil de entender para que… NO ME HAGA PENSAR. P á g i n a 8 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez P á g i n a 9 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  ¿Cómo usamos realmente la web? Cuando se crean sitios web nuevos, creemos que cada una de las páginas van a estudiarse de la forma en que se ha organizado todo, sopesando las opciones antes de decidir el vínculo en el que hacer clic. Pero lo que en realidad se suele hacer es echar un vistazo a cada página, leer rápidamente el texto y hacer clic en el primer vínculo que resulte interesante o se parezca a lo que estamos buscando. P á g i n a 10 | 17 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Para diseñar páginas web eficientes, hay que aprender a convivir con tres factores sobre cómo se utiliza realmente la web: 1. Factor 1: No leemos las páginas, las hojeamos 2. Factor 2: No tomamos soluciones óptimas. Nos es suficiente. 3. Factor 3: No averiguamos el funcionamiento de las cosas. Nos las arreglamos. Factor 1: No leemos las páginas, las hojeamos. Normalmente se invierte poco tiempo en leer las webs, a excepción de noticias, reportajes,… ¿Por qué echamos sólo un vistazo?    Tenemos prisa Sabemos que no hay que leerlo todo Somos buenos en ello Factor 2: No tomamos soluciones óptimas. Nos es suficiente. En la mayoría de las ocasiones no seleccionamos la mejor opción, nos quedamos con la primera que nos puede valer. ¿Por qué no elegimos la mejor?     Tenemos prisa Las consecuencias por el error cometido no son importantes Sopesar distintas opciones no garantiza la mejor Adivinar es más divertido P á g i n a 11 | 17 Factor 3: No averiguamos el funcionamiento de las cosas. Nos las arreglamos. Una de las cosas más obvias en las pruebas de usabilidad (tanto software o incluso electrodomésticos) es el grado de desconocimiento sobre su uso. Son muy pocas las personas que se toman un tiempo para leer las instrucciones, nos las arreglamos para dar con su funcionamiento. 9. Diseño de rótulos Creación de una jerarquía visual clara P á g i n a 12 | 17 Las convenciones nos favorecen: Uso de metáforas, logotipos, iconos,… crean una sensación de familiaridad y permiten descubrir información aunque no se entienda ni una palabra. P á g i n a 13 | 17 10. Omisión de palabras innecesarias “Elimine la mitad de las palabras y después prescinda de la mitad de lo que haya quedado” P á g i n a 14 | 17 11. Formularios Adaptarse al usuario Ofrecer un comportamiento predecible Consistencia: Usar el etiquetado e imput de forma consistente. P á g i n a 15 | 17 Nombre de los botones específicos Hacer uso correcto de placeholder  K I S S ! Keep It Simple, Stupid!    Pedir solo la información necesaria Inferir información a partir de la disponible No pedir la misma información dos veces 12.       Consejos No abusar de mayúsculas y subrayados Si no ayuda no lo pongas El espacio en blanco no es inútil El contenido es lo importante Limita el número de tipos de letra y los colores en tu sitio y aplícalos con consistencia El consejo de las dos frases. Pregúntate si alguien que sólo lea las dos primeras frases de tu página obtendrá la información que quieres transmitir (Jakob Nielsen) P á g i n a 16 | 17 13. Autoría del documento Este manual es una recopilación de documentos adaptados por la profesora Isabel Cayuela Pérez. P á g i n a 17 | 17