Post on 27-Jun-2015
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 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