Post on 06-Feb-2016
description
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