Evolution Day: Usabilidad Web

64
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

Transcript of Evolution Day: Usabilidad Web

Page 1: Evolution Day: Usabilidad Web

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

Page 2: Evolution Day: Usabilidad Web

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.

Page 3: Evolution Day: Usabilidad Web

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.

Page 4: Evolution Day: Usabilidad Web

3 niveles de interacción

Miro y entiendo

Leo y entiendo

Pienso y entiendo

¡¿ ?!

Page 5: Evolution Day: Usabilidad Web

Miro y entiendo

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

ubicación, entre otros, permite comprender sin

información adicional

Page 6: Evolution Day: Usabilidad Web

Google

Google Una Sola imagen poco texto menos es mas,

vínculos azules y subrayados.

Page 7: Evolution Day: Usabilidad Web

Fondo y marco para

reforzar agrupación

Page 8: Evolution Day: Usabilidad Web

Bloques bien definidos

El fondo agrega

desorden visual

Page 9: Evolution Day: Usabilidad Web

Correcta agrupación

El espaciado podría

mejorar

Page 10: Evolution Day: Usabilidad Web
Page 11: Evolution Day: Usabilidad Web

Correcta agrupación

Se ve casi como un

bloque

Page 12: Evolution Day: Usabilidad Web

El espaciado podría

mejorar

Page 13: Evolution Day: Usabilidad Web

Correcta agrupación

Se ve casi como un

bloque

Page 14: Evolution Day: Usabilidad Web

No son links!!!

Page 15: Evolution Day: Usabilidad Web

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.

Page 16: Evolution Day: Usabilidad Web

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

Page 17: Evolution Day: Usabilidad Web

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

Page 18: Evolution Day: Usabilidad Web

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

Page 19: Evolution Day: Usabilidad Web

Légibilidad mínima

Legibilidad baja

Page 20: Evolution Day: Usabilidad Web

Legibilidad mínima

Legibilidad baja

Page 21: Evolution Day: Usabilidad Web

Títulos claros,

párrafos cortos

Page 22: Evolution Day: Usabilidad Web

Jerarquía

1

2

Page 23: Evolution Day: Usabilidad Web

24 segundos para

la noticia 4

Page 24: Evolution Day: Usabilidad Web

33 segundos para

la noticia 3

Page 25: Evolution Day: Usabilidad Web

30 segundos para

la noticia 3

Julio 2013

Page 26: Evolution Day: Usabilidad Web

Alternativas para móviles

Page 27: Evolution Day: Usabilidad Web

Distribución de tráfico - 1

Sitio con 5 millones de visitas al

mes

Page 28: Evolution Day: Usabilidad Web

Distribución de tráfico - 2

Sitio con 130 mil visitas al mes

Page 29: Evolution Day: Usabilidad Web

Distribución de tráfico - 3

Sitio con 1 millón de visitas al mes

Page 30: Evolution Day: Usabilidad Web

Distribución de tráfico – 3

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

Sitio con 1 millón de visitas al mes

Page 31: Evolution Day: Usabilidad Web

Sistemas Operativos

Combinación de sitios

Page 32: Evolution Day: Usabilidad Web
Page 33: Evolution Day: Usabilidad Web

Tablet 10.2 pulgadas

Page 34: Evolution Day: Usabilidad Web
Page 35: Evolution Day: Usabilidad Web

Tablet 10.2 pulgadas

Page 36: Evolution Day: Usabilidad Web
Page 37: Evolution Day: Usabilidad Web

Tablet 10.2 pulgadas

Page 38: Evolution Day: Usabilidad Web
Page 39: Evolution Day: Usabilidad Web

Tablet 10.2 pulgadas

Page 40: Evolution Day: Usabilidad Web
Page 41: Evolution Day: Usabilidad Web

Tablet 10.2 pulgadas

Page 42: Evolution Day: Usabilidad Web

La mayoría tiene además una App

Solo para iOS

Page 43: Evolution Day: Usabilidad Web
Page 44: Evolution Day: Usabilidad Web
Page 45: Evolution Day: Usabilidad Web
Page 46: Evolution Day: Usabilidad Web

BROU tiene además una app

Page 47: Evolution Day: Usabilidad Web

Diseño responsivo

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

modificación del esquema de distribución

de elementos.

Page 48: Evolution Day: Usabilidad Web

Ejemplo

Page 49: Evolution Day: Usabilidad Web

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

Page 50: Evolution Day: Usabilidad Web

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

Page 51: Evolution Day: Usabilidad Web

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

Page 52: Evolution Day: Usabilidad Web

Usabilidad de

dispositivos

móviles

Page 53: Evolution Day: Usabilidad Web

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

Page 54: Evolution Day: Usabilidad Web

Contenido

primero,

después

navegación

Page 55: Evolution Day: Usabilidad Web

Modelo de interacción de los 80 …

… pero ahora es touch

Page 56: Evolution Day: Usabilidad Web

1 - Login

Page 57: Evolution Day: Usabilidad Web

2 - Contenido

Page 58: Evolution Day: Usabilidad Web

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

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

Page 59: Evolution Day: Usabilidad Web

Textos: más grandes, más breves

Page 60: Evolution Day: Usabilidad Web

Textos: más grandes, más breves

Page 61: Evolution Day: Usabilidad Web

Textos: más grandes, más breves

Page 62: Evolution Day: Usabilidad Web

Imágenes: recortar específicamente

Original

Page 63: Evolution Day: Usabilidad Web

“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

Page 64: Evolution Day: Usabilidad Web