Miro y Entiendo:

Fundamentos

del diseño usable

Curso Usabilidad Web: Monitores, Tabletas y celulares.

Dictado por Daniel Mordecki

Hotel Sheraton Montevideo

24/01/2014

Una definición formal

La Usabilidad 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

esenciales de 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.

3 niveles de interacción

Miro y entiendo

Leo y entiendo

Pienso y entiendo

¡¿ ?!

Miro y entiendo

La asociación de formas, colores, tamaños, y

ubicación, entre otros, permite comprender sin

información adicional

Google

Google Una Sola imagen poco texto menos es mas,

vínculos azules y subrayados.

Fondo y marco para

reforzar agrupación

Bloques bien definidos

El fondo agrega

desorden visual

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!!!

Leo y entiendo

Haga click aquí

Textos en los botones: entender bien Call to action,

siempre se puede ser más claros. Leo y Entiendo

Ejemplo: Google Una Sola imagen poco texto menos

es mas, vínculos azules y subrayados.

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

Legibilidad

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

Legibilidad

Redacción

Breve: sin concesiones

Un párrafo una idea

Directo: lenguaje positivo, conciso, sin

floreos. Siempre con título

Uso intensivo de listas

Cuidar relación contenido navegación

Légibilidad mínima

Legibilidad baja

Legibilidad mínima

Legibilidad baja

Títulos claros,

párrafos cortos

Jerarquía

1

2

24 segundos para

la noticia 4

33 segundos para

la noticia 3

30 segundos para

la noticia 3

Julio 2013

Alternativas para móviles

Distribución de tráfico - 1

Sitio con 5 millones de visitas al

mes

Distribución de tráfico - 2

Sitio con 130 mil visitas al mes

Distribución de tráfico - 3

Sitio con 1 millón de visitas al mes

Distribución de tráfico – 3

Un año atrás (10/2012)

Sitio con 1 millón de visitas al mes

Sistemas Operativos

Combinación de sitios

Tablet 10.2 pulgadas

Tablet 10.2 pulgadas

Tablet 10.2 pulgadas

Tablet 10.2 pulgadas

Tablet 10.2 pulgadas

La mayoría tiene además una App

Solo para iOS

BROU tiene además una app

Diseño responsivo

Se basa en el diseño líquido. Agrega la

modificación del esquema de distribución

de elementos.

Ejemplo

Diseño responsivo - Ventajas

Un solo sitio para todos los dispositivos

Brinda una experiencia móvil de calidad

en el 100% del contenido del sitio

La adaptación es a nivel de estilos: no

requiere ni contenido ni programación

especial

Permite trabajar sobre la navegación, los

formularios y la interacción

Aplicación Móvil (App) - Ventajas

Control total del dispositivo, con acceso a

todas las características (teléfono, sms,

cámara, brújula, GPS, etc.)

Se puede almacenar datos localmente

Velocidad de ejecución

Funcionamiento con o sin conexión

Aplicación Móvil (App) - Desventajas

Una versión para cada sistema operativo:

iOS, Android, Windows Phone, etc.

Implementación compleja para obtener

calidad

El usuario tiene que instalarla para poder

usarla, no está siempre disponible

Dependencia de las tiendas (Google

Play, Apple Store, Windows Phone Store,

…)

Manejo de versiones y compatibilidades

Usabilidad de

dispositivos

móviles

Tiempo de descarga

Obsesión por páginas

delgadas es la única

receta

El mundo móvil castiga

más duramente la

lentitud que el escritorio

Para peor, el teléfono se

“duerme” si la descarga

demora

Contenido

primero,

después

navegación

Modelo de interacción de los 80 …

… pero ahora es touch

1 - Login

2 - Contenido

1 - Menú 2 - Login 3 - Digitación 4 – Nuevo menú 5 - Contenido

El teclado tapa los campos, inclusive en una pantalla de 5”

Textos: más grandes, más breves

Textos: más grandes, más breves

Textos: más grandes, más breves

Imágenes: recortar específicamente

Original

“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