Miro y Entiendo: fundamentos del diseño usable

1. Miro y Entiendo:fundamentos del diseño usable Daniel Mordecki - daniel@concreta.com.uy - @mordecki

2. Una definición formal La Usabilidad es la disciplina que tiene como objetivo reducir al mínimo las dificultades de uso inherentes a una herramienta informática, analizando la forma en que los usuarios utilizan las aplicaciones y sitios Web con el objetivo de detectar los problemas que se les presentan y proponer alternativas para solucionarlos, de modo de que la interacción de dichos usuarios con las aplicaciones y sitios Web sea sencilla, agradable y productiva.

3. En forma esquemática • Objetivo: Reducir las dificultades de uso inherentes a una herramienta informática • Metodología: Analizar la forma en que los usuarios utilizan las aplicaciones y sitios Web • Resultado: Interacción sencilla, agradable y productiva.

4. Á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.

5. 3 niveles de interacción • Miro y entiendo • Leo y entiendo • Pienso y entiendo ¡¿ ?! www.concreta.com.uy

6. Miro y entiendo La asociación de formas, colores, tamaños, y ubicación, entre otros, permite comprender sin información adicional www.concreta.com.uy

7. 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 www.concreta.com.uy

8. Tamaño de la página 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 www.concreta.com.uy

9. La agrupación ayuda la comprensión La agrupación dificulta la comprensión

10. Fondo y marco para reforzar agrupación

11. Fuerte desorden visual dificulta la comprensión Contenedores: comprensión inmediata

12. No continúa el tema, pese a que “se ve” así.

13. El espaciado podría mejorar Correcta agrupación

15. Se ve casi como un bloque Correcta agrupación

16. El espaciado podría mejorar

17. Se ve casi como un bloque Correcta agrupación

18. No son links

19. 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 www.concreta.com.uy

20. 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

21. Legibilidad (continuació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?

22. Redacción • Breve: sin concesiones • Un párrafo una idea • Directo: lenguaje positivo, conciso, sin floreos (evitar modo pasivo) • Siempre con título • Uso intensivo de listas • Cuidar relación contenido  navegación

23. Légibilidad mínima Legibilidad baja

24. Buena legibilidad Legibilidad baja

25. Legibilidad mínima Legibilidad baja

26. Redacción compacta y directa La navegación es innecesaria

27. Títulos claros, párrafos cortos

28. Títulos claros, párrafos cortos La estructura es pobre

29. No son links (otra vez)

30. presidencia.gov.ar

31. presidencia.gub.uy

32. gob.cl

33. 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 www.concreta.com.uy

34. Jerarquía 1 2

35. 24 segundos para la noticia 4

36. 33 segundos para la noticia 3

37. 30 segundos para la noticia 3

38. Pienso y entiendo Miro y entiendo 3 1 2 - 3 - 4 6 - 7 - 8 15… 5 …

39. Equilibrio total entre los 3 niveles

44. Es una animación y una página a la vez

45. “Lo esencial es invisible a los ojos…Los hombres han olvidado esta verdad. Pero tú no debes olvidarla.” Diálogo entre El Principito y el zorroAntoine De Saint-Exupéry

46. Datos de contacto • Daniel Mordecki - • daniel@concreta.com.uy daniel@mordecki.com@mordecki en twitter • www.concreta.com.uy • Material sobre Usabilidad y estrategia en Internet: mordecki.com