Procesos y métodos de trabajo para desarrollar, comprender y aplicar usabilidad a proyectos web.

1. danielnavarrorojo@hotmail.com
danielnavarrorojo
dnavarrorojo

3. En los productos primero
se paga y luego se comprueba
su usabilidad.
En la web primero
se comprueba la usabilidad
y en función de ésta
se paga o consume.

4. Diseño
El ideal artístico 1
de expresarse por uno mismo
El ideal de ingeniería 2
de resolver un problema
para un cliente

5. La innovación
es un 10% inspiración
y un 90% transpiración

6. Pon las necesidades
de tus clientes
en el centro de tu estrategia

7. Workflow de Diseño
Estrategia
y comportamiento
del usuario
Seguimiento y Arquitectura de
medición información
Investigación
OnLine
Diseño
de Interfaz
Test Diseño de
de Usuarios interacción

8. DON’T
MAKE
ME
THINK

9. Market
(*)
Laptops Laptops Laptops
Phones Phones Phones
Tablets Tablets Tablets
Desktops Desktops
(*)Largest Mobile Companny

10. Linux
CÓDIGO LIBRE
CÓDIGO LIBRE CÓDIGO CERRADO
ANDROID iOS
CHROME OS OSX
HARDWARE
TELÉFONOS - TABLETS - LAPTOPS - TELEVISORES - REPRODUCTORES BLUYRAY - MP4 - CÁMARAS DIGITALES
SALUD - EDUCACIÓN - ENTRETENIMIENTO - ADMINISTRACIÓN
SOFTWARE
KINECT
!?

11. Navegación
Contenido 50% IDEAL
Se pierde
UN 16% BROWSER
&
S.O.
Si funciona bien sin él, ELIMÍNALO!
SIMPLICITY ALWAYS WIN! ;)

12. 10 SEGUNDOS
Es el tiempo máximo
para mantener la atención
del usuario sin que se
DISTRAIGA

13. DISEÑO
GUI WEB
creación evolución
control del diseñador control del usuario

14. DISEÑO
DE
INTERFACES

15. GUI
El diseño de interfaces es el proceso de diseñar la
representación física de la interfaz tal y como los usuarios la
verán en sus pantallas.
El objetivo del diseño de interfaces visuales es comunicar una
funcionalidad, y ésto se consigue diseñando u ordenando los
elementos visuales que mejor reflejen lo que hace nuestra
aplicación y como se puede operar con ella.
Crear el look and feel de un producto no es el primer objetivo
del diseño de interfaces, es un componente más de ése trabajo.
El principal objetivo es la comunicación: comunicar para ayudar
a los usuarios a entender cómo funciona el producto.

16. Posicionamiento
La maquetas
proporcionan
estructura a todos
los elementos de la
interfaz.
También define la
jerarquía y por tanto
las relaciones entre
los diferentes
elementos.

17. Relación y Jerarquía
El posicionamiento
puede mejorar
también el flujo
visual. Por ejemplo
posicionar las
etiquetas encima de
los campos de texto
en lugar de a la
izquierda, permite al
usuario una lectura
más fácil y cómoda
puesto que el
recorrido de los ojos
será en vertical en
lugar de zig-zag.

18. Forma
Ya sea de los
contenedores de
información como
aquellos que
realizan la
separación de
contenidos.

19. Tamaño
El tamaño también
se puede usar para
indicar importancia,
siendo los
elementos más
grandes, los más
significativos.

20. Tamaño
También puede
mejorar la
usabilidad de los
controles clickables
( ley de Fitts, que
dice que cuanto
más grande es un
control, más rápido
se puede manejar).
Hacer los controles
más habituales de
nuestra interfaz más
grandes, facilitará la
tarea de los
usuarios y mejorará
la eficiencia de la
interfaz.

21. Color
El color es útil para
varios propósitos.
Puede atraer la
atención, por
ejemplo mediante el
contraste con el
color de fondo.

22. Color
Puede expresar
significado, por
ejemplo el rojo y el
verde. Uno significa
peligro o parada
mientras que otro
significa éxito o
invitación a
proceder. De ésta
manera el rojo se
reserva para los
mensajes de error y
vice-versa.

24. Color
El color también puede
destacar relaciones,
por ejemplo
estableciendo un
código con botones y
barras de herramientas
para ayudar al usuario.
Habrá que tener en
cuenta también las
connotaciones
culturales del color, y
los tipos de
discapacidades
relacionados con el
color. Es decir no dejar
que todo el significado
de la interfaz se
transmita por los
colores, porque
algunas personas no lo
distinguirán.

25. Contraste
La tonalidad que
tiene algo en
relación a los
elementos que le
rodean, afectará a la
usabilidad de la
interfaz. La clave es
el contraste. Bajar el
contraste de
algunos elementos
permitirá fundirlos
con el fondo
permitiendo a los
usuarios diferenciar
entre los más
importantes.

27. Luces y Sombras
Mediante la FX y la
iconografía
podemos comunicar
funcionalidades. Su
correcta utilización
comunica al usuario
como algo está
concebido para ser
usado.
Por ejemplo utilizar
efecto de relieve
para los scrolls, o
esquinas
cuarteadas para las
ventanas que se
pueden cambiar de
tamaño.