Tema 9 Usabilidad Comercio Electrónico. Universidad de Oviedo. acebal@uniovi.es

Transcripción

1 Tema 9 Usabilidad Comercio Electrónico Universidad de Oviedo acebal@uniovi.es Prefacio El 80 por ciento de los errores que cometerá en la arquitectura de la información n de su sitio web pueden ser evitados contratando a un experto en usabilidad. Si está dispuesto a gastarse más m s dinero, un grupo de expertos puede ayudarle a ahorrarse otro 10 por ciento. El resto no le quedará más s remedio que arreglarlo cuando entren en juego los verdaderos expertos: los clientes. Roger Black, en el prólogo del libro Don t t make me think!, de Steve Krug 2 1

2 Usa qué? El palabro proviene del inglés usability convenient and practicable for use Webster No quiere decir otra cosa que facilidad de uso No es un término t exclusivo del Web Podría hacer alusión a cualquier producto software 3 Problema Los diseñadores gráficos y los desarrolladores son los que se encargan de diseñar las interfaces de usuario Éstos no suelen prestar atención n a cuestiones como: Diseño o de interacción (qué ocurre cuando el usuario hace clic) Arquitectura de la información (cómo se organiza todo) 4 2

3 Las buenas noticias La mayor parte del trabajo se reduce a sentido común Claro que El buen sentido es la cosa mejor repartida del mundo: cada cual piensa estar tan bien provisto de él que aun los más difíciles de contentar en cualquier otro asunto no desean generalmente más del que tienen. René Descartes. Discurso del MétodoM Lo cierto es que muchas veces el sentido común n no resulta obvio hasta que alguien nos lo descubre 5 Pero, por qué es necesaria? Podríamos hablar de las ingentes cantidades de dinero que las empresas pierden por fallos de usabilidad Ejemplo: el coste de la asistencia técnicat O de que prestar atención n a la usabilidad significa visitantes más m s satisfechos y más m s posibilidades de que regresen a nuestro sitio Web En realidad, es tan sencillo como esto: Si algo es difícil de usar, simplemente no lo usaremos 6 3

4 El usuario no quiere sentirse estúpido Lo peor no es que el usuario el cliente nos culpe de una mala experiencia de navegación n por nuestro sitio Al igual que en el comercio tradicional, son los menos Lo malo son esa legión n de usuarios sufridores que se culpan a sís mismos Esto de Internet es demasiado complicado para mí. m Debo de ser muy tonto: mira que no haber encontrado! 7 Apologistas y supervivientes Existen dos grupos de usuarios de productos informáticos: A los apologistas les encanta el reto que supone tratar de dominar la complejidad de tales productos (Casi todos los informáticos se encuentran en este grupo) La mayoría son supervivientes: su experiencia con el uso de ordenadores es frustrante, pero lo achacan a una suerte de dificultad intrínseca al manejo de tales aparatos 8 4

5 Competencia en el Web A diferencia de las herramientas informáticas necesarias para hacer el trabajo diario nadie está obligado a visitar nuestro sitio Web Ni mucho menos a comprar en él! La competencia en el Web está a un solo clic de distancia 9 Algunas directrices de usabilidad Sin tiempo para impartir un seminario sobre usabilidad, veremos sólo, s a modo de ejemplo, algunas pautas a seguir a la hora de diseñar un sitio Web. Más M s que las directrices en sí, s, lo importante es aprender a pensar como lo haría a un experto en usabilidad. 5

6 No me hagas pensar Es la primera ley de usabilidad: : no hacer pensar al usuario Al llegar a una página p Web todo debe ser evidente Cómo de evidente? Como para que nuestro vecino, que a duras penas sabe manejar el botón de atrás del navegador, llegue a nuestro sitio y diga: Ah, es un sitio de..., ah!, y esto es para..., ah, y puedo..., ajá!, y aquí está lo que buscaba. 11 Ejemplos Dónde estoy? Dónde debería a empezar? Dónde pondrían? Qué es lo más m s importante de esta página? p Por qué lo llamarían an así? Nuestra misión n es tratar de evitar que a los usuarios se les plantee ninguna duda de este estilo. 12 6

7 Usar las convenciones Son útiles Hacen más fácil al usuario ir de un sitio a otro sin tener invertir un montón de esfuerzo en descubrir cómo funciona cada uno Proporcionan una noción de familiaridad Por ejemplo, la barra izquierda en otro color con las secciones del sitio La metáfora de la cesta de la compra A menudo, los diseñadores tratan de reinventar la rueda Motivados por el hecho de que los elogios de los colegas, los premios y las ofertas de trabajo rara vez se basan en criterios como el uso correcto de convenciones 13 Ejemplo La barra de desplazamiento vertical La barra de desplazamiento vertical Inherente al Web, desde la concepción del HTML La proporciona el navegador (como cualquier otra aplicación de un sistema operativo de ventanas) Los usuarios saben perfectamente para qué sirve y cómo utilizarla Entonces por qué tenemos que padecer ocurrencias como las siguientes? 14 7

8 Ejemplo de barra de desplazamiento 15 Otro ejemplo (mucho peor) condiciones Movistar Activa Cómo controlo la velocidad? Funcionan las teclas de desplazamiento? Y Y si lo quiero imprimir? Qué hará descarga contrato? 16 8

9 Un tercero (peor aún) a Dónde me tengo que poner para que se desplace? En las flechas de la izquierda o de la derecha? Para qué sirven los iconos de abajo? Se desplaza? 17 Cuándo no usar las convenciones? Si la estamos reemplazando por algo tan obvio que no requiere curva de aprendizaje Y resulta por tanto tan bueno como una convención Si proporciona tanto valor añadido a adido que merece la pena una ligera curva de aprendizaje En resumen: Innovar sólo cuando tengamos una idea mejor que la convención existente 18 9

10 Redacción n de contenido Eliminar la mitad de las palabras de cada página; después, s, eliminar la mitad de las que queden. Tercera ley de usabilidad de Krug Introducción No podemos diseñar las páginas p pensando que la gente las va a leer (ni mucho menos que las va a leer en orden) Lo que todos hacemos como usuarios de Internet es: Hojear cada nueva página Hacer una lectura rápida de parte del texto Pulsar en el primer enlace que capta nuestro interés o se parece remotamente a lo que estamos buscando Es decir, normalmente hay grandes porciones de la página p para las que ni siquiera miramos 20 10

11 Por qué hojeamos las páginas? p Normalmente tenemos prisa Sabemos que en cada página p hay mucha información irrelevante Estamos acostumbrados a hacerlo, somos buenos en ello Periódicos, revistas, libros en una librería... Tendemos a fijarnos en palabras que concuerdan con: La tarea que estamos tratando de hacer Nuestros intereses personales Las palabras que actúan como resortes en nuestro sistema nervioso: gratis, sexo, nuestro propio nombre Omitir las palabras innecesarias Reduce el nivel de ruido de la páginap Hace que el contenido útil sea más m s prominente Hace las páginas p más m s cortas Permite ver más contenido de un vistazo, sin desplazarse 22 11

12 Qué debe eliminarse? Todo el texto que resuene a Bla, bla, bla... El Web no debe ser un mal folleto de marketing: Para nosotros la calidad es la primero bla, bla, bla... Este sitio contiene las mejores bla, bla, bla... Las instrucciones largas Nadie las lee (primero se prueba) Tratar de que todo sea explicativo por sí mismo, si no evidente Si son necesarias, estructurarlas y hacerlas breves 23 Estilo del texto Eliminar el marketing superfluo Estructurar las páginas p con dos o tres niveles de títulos tulos (<h1>( <h1>, <h2>...) Además, beneficia a los lectores de pantalla Usar títulos t tulos significativos más m s que ocurrentes Facilitar la lectura rápidar Emplear listas, márgenes, párrafos Usar resaltado y énfasis 24 12

13 Navegación No solemos regresar a los sitios Web en los que no podemos encontrar lo que buscamos o en los que no sabemos cómo c se organiza la información Ejemplo: hipermercado Menaje Deportes Automóvil Baterías de cocina Cuberterías Limpieza 26 13

14 Ejemplo: hipermercado Además, siempre tenemos la opción n de preguntar a algún n encargado Ya sea por frustración, después de no encontrar el producto O como primera opción, si tenemos prisa o no nos apetece buscar 27 Navegación n Web Normalmente, estamos buscando algo Primero decidimos si buscar o navegar 28 14

15 Algunas diferencias Falta de noción n de escala Cuántas páginas tiene el sitio? 50? 1.000? ? Por eso es tan importante distinguir entre enlaces visitados y no visitados No hay noción n de dirección No hay derecha, izquierda, arriba o abajo, más que en la jerarquía No hay noción n de ubicación En el mundo físico es más fácil recordar dónde estaba cada cosa Por eso son tan importantes los favoritos y el botón de atrás (representa entre el 30 y el 40% de todos los clics en el Web) 29 Propósitos de la navegación Llevar al usuario de un lugar a otro Decirle dónde d está Al hacer visible la jerarquía del sitio, revela su contenido Le dice, implícitamente, cómo c utilizar el sitio Crea una buena impresión n del sitio 30 15

16 Convenciones de navegación Las hay en todos los ámbitos Señalización vial Números de página en una revista Índice de un libro 31 Convenciones de navegación n en el Web ID del sitio Secciones Indicador Esta usted aquí Subsecciones Utilidades 32 16

17 Convenciones de navegación n en el Web Nombre de la página Navegación local (elementos de este nivel) Según algunos autores, abajo del todo debería ir una versión sólo texto del menú principal 33 Navegación n persistente (o global) Son los elementos de navegación n que aparecen en todas las páginas p de un sitio Posibles excepciones: La página inicial (puede tener una apariencia distinta) Formularios (tal vez baste con el ID, el enlace a la página principal y alguna ayuda) Debe aparecer siempre en el mismo lugar y tener la misma apariencia Debe incluir los siguientes cinco elementos: Identificador (ID) del sitio Secciones Enlace a la página p principal Búsqueda Utilidades (cesta de la compra, ayuda...) 34 17

18 El ID del sitio Es necesario para saber que seguimos en el mismo sitio El el mayor nivel en la jerarquía a lógica l del sitio: Este sitio Secciones de este sitio Subsecciones Sub-subsecciones, etc. Esta página Áreas de esta página Elementos de esta página Debe aparecer arriba a la izquierda y ser reconocible 35 Las secciones A veces se llama navegación n primaria Son enlaces a las secciones principales del sitio Muchas veces incluye espacio para la navegación secundaria: las subsecciones 36 18

19 Las utilidades Enlaces a partes importantes del sitio que no forman parte de la jerarquía a del mismo Sirven para ayudar a utilizar el sitio: Ayuda Mapa del sitio Cesta de la compra O para ofrecer información sobre el mismo: Acerca de Contacto Deben ser menos prominentes que las secciones No incluir más m s de cuatro o cinco en la navegación n persistente Las menos usadas pueden agruparse en la página de inicio 37 Enlace a la página p inicial Si el usuario se pierde, debe poder volver al inicio Además, puede entrar al sitio desde cualquier páginap P. ej., mediante una búsqueda en un buscador Existe el convenio de que sea el propio ID del sitio Todavía a hay usuarios que no lo saben Es buena idea incluir un enlace explícito que ponga Inicio en las utilidades o bajo el ID 38 19

20 Búsqueda Usar buscar y no búsqueda rápidar pida, búsqueda por palabras clave,, etc. No añadir a adir instrucciones Introduce las palabras clave a buscar Tratar de evitar las opciones: Buscar por título, autor o palabra clave Buscar sólo en parte del sitio Buscar en todo el Web 39 Niveles de navegación Inicio Productos Novedades Atención al cliente Sobre nosotros Ayuda Hardware Software FAQs Contacto 40 20

21 Niveles de navegación No diseñar esquemas de navegación n sólo s para los dos primeros niveles Al diseñar el sitio, lo primero es pensar ejemplos de páginas de los niveles más m s bajos de la jerarquía Problema: poco espacio en la página p para diseñar esquemas de navegación n de más m s de dos niveles 41 Ejemplo: AA Funky 42 21

22 Nombres de las páginas p ( ginas (<h1> <h1>) Como los carteles con los nombres de las calles de una ciudad Cada página p necesita un nombre No basta con la marca Esta usted aquí El nombre tiene que estar en el lugar adecuado Tiene que ser prominente Posición, tamaño, color, tipo de fuente Tiene que concordar con el enlace que llevó a la páginap Si no iguales, lo más parecidos posible 43 Esta usted aquí Debe verse claramente lo que son Puede venir bien aplicar más m s de una distinción n visual Por ejemplo, en negrita y otro color 44 22

23 Migas de pan Muestran al usuario donde se encuentra Indican la ruta, el camino desde la página p inicial hasta la actual No deben ser el único esquema de navegación Al menos, mantener los dos primeros niveles Ponerlas arriba del todo Usar > entre los distintos niveles (no : o - ) Usar una fuente pequeña a (es sólo s un accesorio) Poner en negrita el último elemento Debe ser el nombre de la página actual 45 Algunas consideraciones finales Esta última parte pretende ser un cajón n de sastre que aglutine algunas cuestiones que no debemos dejar de lado a la hora de abordar el desarrollo de nuestro sitio Web 23

24 Contenidos actualizados De poco sirve gastarnos dinero en crear un sitio Web si nunca más m s nos vamos a ocupar de él Puede ser peor el remedio que la enfermedad Con qué frecuencia? Depende del tipo de sitio y de a quién se dirija la página Una inmobiliaria debería tener actualizadas las ofertas permanentemente Un profesional liberal probablemente pueda permitirse no actualizarla durante bastante tiempo 47 Información n de contacto Debe aparecer en un lugar destacado la forma de ponerse en contacto con la empresa Dirección de correo electrónico Dirección postal Números de teléfono, fax, etc. Además, ahora, en España, a, estaríamos amos obligados a ello, por la Ley de Servicios de la Sociedad de la Información n y de Comercio Electrónico (LSSICE) 48 24

25 Conclusiones El usuario de Internet es enormemente exigente La calidad es más importante que nunca Hay que responder siempre y con la mayor inmediatez posible al correo electrónico Los contenidos deben estar actualizados Aprovechar el Web para anunciar nuevos productos y cualquier otra cosa que de otro modo llevaría más tiempo (y dinero) Si algo es difícil de usar, simplemente no lo usamos 49 Algunos flagrantes errores de usabilidad Un vistazo a algunos fallos de usabilidad (no necesariamente en el Web) que pueden ayudarnos a comprender mejor de qué se ocupa ésta y qué tipo de cosas son las que se pretenden evitar 25

26 Algunos errores Agencia Tributaria Corrección de errores u u omisiones en los datos fiscales solicitados a Hacienda INEM (Contrat@( Contrat@) Permite comunicar contratos a través de Internet En teoría, esto es válido tanto para sociedades y los contratos de sus empleados como para autónomos en representación de terceros De hecho, pide el régimen de la Seguridad Social Pero luego resulta que nos pide el número de la patronal, de 11 dígitos (cuando el de los autónomos tiene 12) 51 Fallos de usabilidad en otros medios Cajeros automáticos ticos Desea consultar los movimientos anteriores de esta cuenta? Teléfonos móvilesm 52 26

27 Caso de estudio Sistema de entretenimiento a bordo (In( In-Flight Entertainment System) ) de Sony,, para vuelos comerciales, llamado P@ssport Introducción El sistema, desarrollado en 1997, ofrece películas, programas de TV, música, m juegos, etc. Permite vídeo v a petición María, en el asiento 23A podría empezar a ver una película 10 minutos después del despegue, mientras que Ana, en el 16C, podría hacerlo 45 minutos después Cada asiento contenía un ordenador Pentium con Windows 95, conectados por fibra óptica a varios ordenadores con el contenido 54 27

28 Diseño o de interacción Cómo hacer que la interfaz de usuario sea fácil f de usar para todo el mundo? 55 La solución n típicat Una jerarquía a de pantallas, por las que el usuario tenía a que navegar, tomando decisiones en cada una de ellas Por ejemplo, en la primera pantalla seleccionamos entre vídeo o música A continuación vamos seleccionando distintos tipos de películas 56 28

29 El rediseño o de Alan Cooper No caer en la trampa de cero, uno o infinito Cuántas películas hay en total? Mostrar los carteles de todas girando con una rueda 57 El rediseño o de Alan Cooper 58 29