Usabilidad de Sitios Web. Daniel Mordecki - daniel@concreta.com.uy

Transcripción

1 Usabilidad de Sitios Web Daniel Mordecki - daniel@concreta.com.uy

2 Áreas de trabajo de la Usabilidad Estudio de la facilidad con que los usuarios consiguen sus objetivos Mejores Prácticas: Sistematización del aprendizaje de estos estudios, para mejorar la usabilidad de los nuevos desarrollos.

3 La teoría a del "magazine de balas" Imagine que su visitante es un soldado en terreno desconocido, con un magazine de 30 balas en su rifle. Cada dificultad que se le presente implicará 1, 2, 3 o más balas. Si gasta todo el magazine y todavía no consiguió su objetivo huirá del sitio, por lo que usted es hombre muerto.

4 3 niveles de interacción Miro y entiendo Leo y entiendo Pienso y entiendo?!

5 Miro y entiendo La asociación de formas, colores, tamaños, y ubicación, entre otros, permite comprender sin información adicional

6 Esta es una noticia de Tímpano, el programa de Daniel Viglietti? Setiembre

7 Ahora está mejor octubre

8 De quién es esta Versión página? 2006 de los TABS de Amazon

9 Mejor, Versión pero 2006 todavía de los TABS falta de Amazon

10 La fecha, va arriba o Versión abajo del 2006 texto? de los (setiembre TABS de Amazon 2007)

11 Mejoró... Pero falta. Versión 2006 de los (octubre 2009) TABS de Amazon

12 Leo y entiendo Haga click aquí La información que se lee en la pantalla es suficiente para entender el 100% del contenido y del contexto

13 Qué diferencia hay entre ofertas, recomendados y novedades? setiembre 2007 Mucho mejor!!! (aunque agregamos el carnaval de colores...) noviembre 2008 Seguimos mejorando octubre 2009

14 setiembre 2007 Dónde busco el yogur diet? Versión 2006 de los TABS de Amazon octubre 2009

15 mayo 2007 Qué hay en Uruguay Versión 2006 Cambia? de los TABS de Amazon Que diferencia hay entre Documentos y Archivo? setiembre 2007

16 Octubre 2009

17 Pienso y entiendo Necesito recurrir a información que NO está en la pantalla para entender el contenido y/o el contexto Solo el contenido referido al tema o la tarea del propio sitio debería recurrir al dominio de Pienso y entiendo

18 Qué es esta página? setiembre 2007

19 noviembre 2008

20 Octubre 2009

21 Analizaremos Diseño de páginas Diseño de sitios Diseño de contenido para la Web

22 Diseño o de páginasp

23 El tiempo de descarga El tiempo en el que bajan las páginas Web es el criterio de usabilidad más importante. No debería incluir ningún elemento de diseño o característica que implique concesiones en los tiempos de descarga de las páginas

24 Fuente: estudios de Robert B. Miller, 1968 Reacción n a los tiempos de respuesta Menos de 0.1 segundos: El usuario percibe funcionamiento instantáneo. Menos de 1 segundo: El usuario percibe que la computadora trabaja o "piensa" para responder al estímulo, pero mantiene el 100% de atención en la tarea que estaba realizando. Menos de 10 segundos: La interacción sigue siendo fluida, pero el usuario abre un foco secundario de atención. Más s de 10 segundos y menos de 1 minuto: se incrementa la posibilidad de que el usuario genere un nuevo foco de atención y que este se convierta en primario. Más s de 1 minuto: Es imposible mantener un flujo continuo de interacción.

25 Tamaño o de la páginap Contrariamente a lo que creen muchos diseñadores, la experiencia muestra que los usuarios prefieren menos imágenes si con ello obtienen más velocidad de descarga

26 Hotmail anterior

27 "New Hotmail is fast, fast, fast!" (15/10/2008) Dick Craddock, Group Program Manager for Hotmail

28 Primero el texto, después s el resto A pesar de que una página demore en bajar, el efecto se minimiza si aparece el texto rápidamente. Siempre debe mostrarse primero el texto, y luego el resto. Las páginas que no se muestran hasta que no bajaron el 100% de los elementos están prohibidas La parte superior de la pagina debe tener sentido, aunque aún falte descargar las imágenes.

29

30 Legibilidad Utilice colores con contraste entre texto y fondo: Negro sobre fondo blanco (óptimo) Blanco sobre fondo negro (casi tan bueno) Evitar color de fondo y texto distinto de blanco o negro a la vez (rojo sobre verde, azul sobre rosado, etc.) Si utiliza fondo, es mejor liso que con imágenes y si utiliza imágenes, que sean muy sutiles. Utilizar fuentes lo suficientemente grandes como para que se puedan leer

31 Legibilidad (continuación) n) Deje el texto quieto!!! EVITE ESCRIBIR CON MAYÚSCULAS, ES 10% MÁS DIFÍCIL DE LEER. Las itálicas se leen muy mal sobre la pantalla, sobre todo cuando son pequeñas Y ni que hablar de los tipos de letra extraños, como script, entre muchos otros. O prefiere este tipo de letra extraño?

32 Legibilidad (continuación) n) Texto común y corriente Mejor Texto común y corriente Texto común y corriente TEXTO COMÚN Y CORRIENTE Texto común y corriente Texto común y corriente Texto común y corriente

33 Gris al al 45%

34 Los que no pueden Entre los que no tienen la versión adecuada de navegador, el plugin, el sistema operativo, la velocidad de conexión, etc. usted puede perder la mayoría de sus clientes.

35 Los links Los links deben dar la mayor información sobre la página destino, de una forma concisa, compacta y no retórica. En general son mejores los vínculos dentro del texto que separados de él. El vínculo debe contener hasta 6 palabras, en general 4 o menos está bien. Incorrecto: Si desea conocer los horarios de nuestro cine, haga click aquí Correcto: Nuestro cine tiene los horarios más convenientes

36 Links: generar expectativas reales Señalar explícitamente lo que el usuario encontrará "detrás" del link, si difiere de lo obvio: Tiempo de descarga Formato de la página Requisitos para acceder: registro, costos, acceso limitado Idioma destino Incorrecto: Para leer la entrevista a Michael Schumacher, haga click aquí. Correcto: Entrevista a Michael Schumacher (en ingles, PDF 60KB)

37 Los links: colores y formas estándar Azul subrayado para los links no visitados. Rojo o morado subrayado para los links ya visitados (se está dejando de usar) Jamás usar azul y/o subrayado para otra cosa que links Si no va utilizar estos criterios, adopte otro, pero sólo uno y aplíquelo de forma consistente Los menús están fuera de estas reglas No hay motivo para perder segundos valiosos y escasos en que el visitante aprenda la codificación de links de su página.

38 Diseño o del sitio

39 La página p de inicio No hay una segunda oportunidad para causar una primera buena impresión La página de inicio debe contestar 5 preguntas: De quién es este sitio? Qué tienen en este sitio? Qué puedo hacer en este sitio? Por qué debo visitar este sitio y no otro? Por dónde empiezo?

40

41 Las páginas p interiores Los usuarios llegan a las páginas interiores desde cualquier parte de la Web Todas las páginas deben indicar a qué sitio pertenecen Todas las páginas deben tener herramientas mínimas de navegación Todas las páginas deben poder ser linkeables, por los buscadores y los favoritos de los usuarios (vinculación profunda)

42 Adivina adivinador: a qué sitio pertenece está página? Al diccionario de la Real Academia Española!

43 El uso de Frames genera habitualmente pérdida del "contexto" Noviembre 2008

44 Octubre 2009

45 Navegación No intente forzar la navegación en su sitio, esto enfurece a los usuarios El sitio debe proporcionar herramientas de navegación que indiquen: Dónde estoy Dónde he estado Dónde puedo ir

46 Buscar Plugins Favoritos Buscador Web Atrás y adelante Direcciones Pestañas Scroll Jamás elimine la barra de navegación del navegador (botón atrás, adelante, detener, etc.) representan entre el 30% y el 40% de los clicks de la Web

47 Navegación n y estructura del sitio La navegación se basa en la estructura lógica del sitio. Ya sea jerárquica (tipo árbol) o temática (tipo tabla) debe corresponderse con la lógica del contenido y no con el organigrama de la empresa.

48 Navegación n en 3 contextos Navegación Global Navegación Local Navegación Contextual

49 Setiembre 2007

50 Noviembre 2008

51 Doble menú: Empeora el el problema de de contexto Octubre 2009

52 2006

53 setiembre 2007

54 octubre 2008

55 noviembre 2009

56 setiembre 2007

57 noviembre 2008

58 octubre 2009

59 Tabs ( pesta( pestañas? Fuente: Don't make me think - Steve Krug orejas? ) as? orejas? ) Pobre, sin conexión, efecto mínimo Mejor, conectado per sin contraste, efecto limitado Óptimo: máximo efecto

60 Tabs?

61 ente: The History of Amazon s Tab Navigation Luke Wroblewski at Los Tabs no son un tema sencillo

62

63 Versión 2006/2007 de de los los TABS de de Amazon

64 2008: abandonaron los los TABS

65 2009: Más lejos aún

66 Breadcrumbs Un excelente indicador para "usted está aquí", con un costo mínimo de espacio y navegabilidad hacia arriba en la estructura. About.com Yahoo! Download.com uruguaytotal.com < antes < ahora < antes < ahora < antes < ahora < antes < ahora

67 Por qué podemos necesitar un buscador Es la herramienta más efectiva para espacios de información muy grandes Permite unir almacenes de información aislados (Silos) Es muy buena con información actualizada dinámicamente Es una obligación: los usuarios esperan encontrar uno

68 Qué presuponen los usuarios sobre la búsqueda? b Alcanza con tipear uno o dos términos que describan lo que estoy buscando No tengo que preocuparme por OR, AND, NOT, comillas y esas cosas, ni siquiera sé que existen. No me importan los sinónimos: los perros no son canes, son perros. Mi búsqueda va a buscar en todo el sitio Mi búsqueda va a funcionar rápido Los mejores resultados aparecen arriba

69 Necesidades de búsquedab Sé exactamente en qué documento está lo que quiero (ej.: busco una cita en un libro) Sé exactamente lo que quiero, pero no se dónde está. (Ej.: busco el resultado de la final del mundial del 86) Quiero explorar información acerca de lo que estoy buscando. (Ej.: busco jurisprudencia sobre un delito específico)

70 Precisión n vs. Amplitud (recall) Amplitud = Precisión = # documentos recuperados # total de documentos # documentos recuperados # documentos relevantes Ambos son deseables, pero uno va en detrimento del otro

71 Cómo buscar? Lo mejor, la barra de búsqueda más simple: Si existen opciones, restricciones, herramientas para lenguaje booleano, dejarlos en un lugar aparte (búsqueda avanzada)

72 Otras opciones para la búsquedab Mejor En la home, razonablemente buena En las páginas internas, mala

73 Ay, ay, ay... As Así no!! Solo una duda: Todas o cualquiera? setiembre 2007

74 Mejoramos, pero falta mucho octubre 2009

75 Encontrar o no encontrar: that is the question (1) Clave de Búsqueda: Francisco Casal. Por qué no figura?

76 Encontrar o no encontrar: that is the question (2)

77 Esto es otra cosa!

78 Encontrar o no encontrar: that is the question (3) enero 2003

79 setiembre 2007

80 noviembre 2008

81 octubre 2009

82 Otras herramientas de navegación apa del sitio Índice Guías ategoría 1 SubCat 1, SubCat 2, SubCat 3 ategoría 2 SubCat 1, SubCat 2, ategoría 3 SubCat 1, SubCat 2, SubCat 3, SubCat 4 A B C PASO 1 PASO 2 PASO 3