www.concreta.com.uy

Miro y Entiendo:Miro y Entiendo:fundamentos del diseño usablefundamentos del diseño usable

Miro y Entiendo:Miro y Entiendo:fundamentos del diseño usablefundamentos del diseño usable

Daniel Mordecki - daniel@concreta.com.uy - @mordecki

www.concreta.com.uy

Una definición formalUna 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.

www.concreta.com.uy

En forma esquemáticaEn 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.

www.concreta.com.uy

Áreas de trabajo de la UsabilidadÁ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 3 niveles de interaccióninteracción

Miro y entiendo

Leo y entiendo

Pienso y entiendo

¡¿ ?!

www.concreta.com.uy

Miro y entiendoMiro 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

www.concreta.com.uy

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

El tiempo de descargaEl tiempo de descarga

www.concreta.com.uy

www.concreta.com.uy

Tamaño de la páginaTamañ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

www.concreta.com.uy

La agrupación ayuda la comprensión

La agrupación dificulta la comprensión

www.concreta.com.uy

Fondo y marco para reforzar agrupación

www.concreta.com.uy

Contenedores: comprensión inmediata

Fuerte desorden visual dificulta la comprensión

www.concreta.com.uy

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

www.concreta.com.uy

Correcta agrupación

El espaciado podría mejorar

www.concreta.com.uy

www.concreta.com.uy

Correcta agrupación

Se ve casi como un bloque

www.concreta.com.uy

El espaciado podría mejorar

www.concreta.com.uy

Correcta agrupación

Se ve casi como un bloque

www.concreta.com.uy

No son links

Leo y entiendoLeo y entiendo

La información que se lee en la pantalla es suficiente para entender el 100% del

contenido y del contexto

Haga click aquí

www.concreta.com.uy

www.concreta.com.uy

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

LegibilidadLegibilidad

www.concreta.com.uy

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

Legibilidad Legibilidad (continuación)(continuación)

www.concreta.com.uy

RedacciónRedacció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

www.concreta.com.uy

Légibilidad mínima

Legibilidad baja

www.concreta.com.uy

Buena legibilidad

Legibilidad baja

www.concreta.com.uy

Legibilidad mínima

Legibilidad baja

www.concreta.com.uy

Redacción compacta y directa

La navegación es innecesaria

www.concreta.com.uy

Títulos claros, párrafos cortos

www.concreta.com.uy

Títulos claros, párrafos cortos

La estructura es pobre

www.concreta.com.uy

No son links (otra vez)

www.concreta.com.uy

presidencia.gov.ar

www.concreta.com.uy

presidencia.gub.uy

www.concreta.com.uy

gob.cl

Pienso y entiendoPienso 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

entiendowww.concreta.com.uy

www.concreta.com.uy

JerarquíaJerarquía

1

2

www.concreta.com.uy

24 segundos para la noticia 4

www.concreta.com.uy

33 segundos para la noticia 3

www.concreta.com.uy

30 segundos para la noticia 3

www.concreta.com.uy

Miro y Miro y entiendoentiendo

Pienso y Pienso y entiendoentiendo

1

2 - 3 - 4

5 …

3

6 - 7 - 8

15…

www.concreta.com.uy

Equilibrio total entre los 3 niveles

www.concreta.com.uy

www.concreta.com.uy

www.concreta.com.uy

www.concreta.com.uy

www.concreta.com.uy

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

www.concreta.com.uy

“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

www.concreta.com.uy

Datos de contactoDatos 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