Miro y Entiendo: fundamentos del diseño usable

Presentación del tema: "Miro y Entiendo: fundamentos del diseño usable"— Transcripción de la presentación:

1 Miro y Entiendo: fundamentos del diseño usable
Daniel 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 ¡¿ ?!

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

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

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

9 La agrupación dificulta la comprensión
La agrupación ayuda 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 Correcta agrupación El espaciado podría mejorar

14

15 Correcta agrupación Se ve casi como un bloque

16 El espaciado podría mejorar

17 Correcta agrupación Se ve casi como un bloque

18 No son links

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

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 ¿O prefiere este tipo de letra extraño?
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

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 Miro y entiendo Pienso y entiendo 1 3 15… 5 …

39 Equilibrio total entre los 3 niveles

40

41

42

43

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 zorro Antoine De Saint-Exupéry

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