usabilidad y workflow de diseño web
DESCRIPTION
Procesos y métodos de trabajo para desarrollar, comprender y aplicar usabilidad a proyectos web.TRANSCRIPT
![Page 2: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/2.jpg)
![Page 3: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/3.jpg)
En la web primerose comprueba la usabilidady en función de éstase paga o consume.
En los productos primerose paga y luego se compruebasu usabilidad.
![Page 4: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/4.jpg)
DiseñoEl ideal de ingeniería
de resolver un problema
para un cliente
El ideal artístico
de expresarse por uno mismo1
2
![Page 5: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/5.jpg)
La innovaciónes un 10% inspiración y un 90% transpiración
![Page 6: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/6.jpg)
Pon las necesidades de tus clientes en el centro de tu estrategia
![Page 7: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/7.jpg)
Estrategiay comportamiento del usuario
Seguimiento y medición
Arquitectura de información
Testde Usuarios
Diseño de interacción
Investigación OnLine
Diseñode Interfaz
Workflow de Diseño
![Page 8: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/8.jpg)
DON’TMAKE
METHINK
![Page 9: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/9.jpg)
Market
Laptops
Phones
Tablets
Laptops
Phones
Tablets
Desktops
(*)
(*)Largest Mobile Companny
Laptops
Phones
Tablets
Desktops
![Page 10: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/10.jpg)
CÓDIGO LIBRE
CÓDIGO LIBRE
HARDWARE
SOFTWARE
CÓDIGO CERRADO
ANDROID
CHROME OS
iOS
OSX
Linux
TELÉFONOS - TABLETS - LAPTOPS - TELEVISORES - REPRODUCTORES BLUYRAY - MP4 - CÁMARAS DIGITALES
SALUD - EDUCACIÓN - ENTRETENIMIENTO - ADMINISTRACIÓN
!?KINECT
![Page 11: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/11.jpg)
Navegación
Contenido
Se pierdeUN
BROWSER&
S.O.
50%16%
;)
IDEAL
Si funciona bien sin él, ELIMÍNALO!
SIMPLICITY ALWAYS WIN!
![Page 12: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/12.jpg)
DISTRAIGA
Es el tiempo máximopara mantener la atención
del usuario sin que se
10SEGUNDOS
![Page 13: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/13.jpg)
GUIDISEÑO
WEBevolucióncreación
control del diseñador control del usuario
![Page 14: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/14.jpg)
DISEÑODE
INTERFACES
![Page 15: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/15.jpg)
GUIEl 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.
![Page 16: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/16.jpg)
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.
Posicionamiento
![Page 17: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/17.jpg)
Relación y JerarquíaEl 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.
![Page 18: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/18.jpg)
FormaYa sea de los
contenedores de
información como
aquellos que
realizan la
separación de
contenidos.
![Page 19: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/19.jpg)
TamañoEl tamaño también
se puede usar para
indicar importancia,
siendo los
elementos más
grandes, los más
significativos.
![Page 20: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/20.jpg)
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.
Tamaño
![Page 21: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/21.jpg)
El color es útil para
varios propósitos.
Puede atraer la
atención, por
ejemplo mediante el
contraste con el
color de fondo.
Color
![Page 22: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/22.jpg)
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.
Color
![Page 23: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/23.jpg)
![Page 24: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/24.jpg)
ColorEl 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.
![Page 25: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/25.jpg)
ContrasteLa 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.
![Page 26: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/26.jpg)
![Page 27: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/27.jpg)
Luces y SombrasMediante 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.
![Page 28: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/28.jpg)
![Page 29: Usabilidad y Workflow de diseño Web](https://reader038.vdocuments.pub/reader038/viewer/2022102517/557bbedfd8b42ace668b5080/html5/thumbnails/29.jpg)