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

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.

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.

Á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 niveles de interacción Miro y entiendo Leo y entiendo Pienso y entiendo ¡¿ ?! www.concreta.com.uy

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

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

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

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

Fondo y marco para reforzar agrupación

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

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

Correcta agrupación El espaciado podría mejorar

Correcta agrupación Se ve casi como un bloque

El espaciado podría mejorar

Correcta agrupación Se ve casi como un bloque

No son links

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

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

¿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?

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

Légibilidad mínima Legibilidad baja

Buena legibilidad Legibilidad baja

Legibilidad mínima Legibilidad baja

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

Títulos claros, párrafos cortos

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

No son links (otra vez)

presidencia.gov.ar

presidencia.gub.uy

gob.cl

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

Jerarquía 1 2

24 segundos para la noticia 4

33 segundos para la noticia 3

30 segundos para la noticia 3

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

Equilibrio total entre los 3 niveles

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

“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

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