Transcripción de video
Experiencia de Usuario Parte Dos
9m 10s
0:09
Una vez que tenemos una buena idea de lo que la interfaz necesita tener para permitir que el usuario haga lo necesario,
0:17
¡necesitas proporcionarles los botones para que eso suceda!
0:20
Pero no solo pongas todos esos botones aleatoriamente en la pantalla.
0:25
Hay un montón de principios de diseño a
0:27
que debes tener en cuenta cuando empieces a organizar el diseño visual de cada página de la interfaz de usuario.
0:34
Una vez más, algunas de estas cosas pueden parecer obvias,
0:38
pero por lo mismo son fáciles de pasar por alto si no las mantienes en mente al diseñar tu UCI.
0:45
Empecemos por considerar algo de la psicología del usuario.
0:49
La mayoría de los países occidentales leen de arriba abajo y de izquierda a derecha,
0:55
lo que significa que instintivamente ponemos las cosas más importantes arriba a la izquierda.
1:01
Si estas creando botones de navegación de páginas, por ejemplo,
1:05
las páginas más importantes deben ir arriba o a la izquierda con las páginas menos importantes después.
1:13
La misma psicología de la lectura nos dice que podemos pasar a la siguiente página
1:18
cuando hemos terminado por lo que la esquina de abajo a la derecha es un lugar natural
1:23
para un botón de siguiente que avance a la siguiente página de la interfaz de usuario
1:27
Por supuesto esto no son reglas, puedes acomodar tu interfaz de usuario de la manera que quieras
1:33
Peeero, si vas en contra de la intuición entonces a los usuarios les puede costar trabajo acostumbrarse a navegar,
1:41
pero probablemente lo mas importante que debemos considerar es la consistencia
1:46
Una vez que eliges el metodo de navegación debes de mantener ese estilo a lo largo de toda la interfaz de usuario
1:53
No quieres tener un menú de navegación horizontal en una página y uno vertical en otra
1:59
que las paginas cambien aleatoriamente su orden o tamaño.
2:03
Mantener reglas consistentes dentro de tu diseño le da al usuario una mejor oportunidad de navegarlo con éxito.
2:11
Esto por supuesto no solo está limitado a la navegación de páginas.
2:16
Hay muchas formas de indicar la importancia de una acción
2:20
Piensa nuevamente en nuestro reproductor de audio de nuevo –
2:22
hay muchos botones que puede apretar, pero el botón de Play es probablemente el más importante.
2:28
La ubicación y tamaño del botón ayudan a decirle al usuario que esta es la función más importante en la página.
2:35
También puedes utilizar espacios en blanco para mostrar importancia.
2:40
En este ejemolo, el bton de Play no es más grande que los otros botoner,
2:45
pero puedes ver por el uso del espacio en blanco alrededor que ese boton es más importante que los otros
2:50
A muchos diseñadores les da miedo usar el espacio en blanco porque sienten la necesidad de llenar la página,
2:57
pero el espacio en blanco muchas veces puede ser tu amigo.
3:00
Este espacio divide objetos que nos son iguales, muestra importancia y mantiene tu diseño simple y fácil de entender.
3:09
Nuevamente, el encontrar un estilo consistente es importante.
3:14
Si le enseñas aun usuario que un botón importante se ve de una forma en una página,
3:19
probablemente debes mantener esa estética para otros botones importantes en otras páginas
3:24
Otra herramienta que tienes en tu caja de herramientas es el color
3:28
El color no solo es para hacer las cosas bonitas,
3:31
el color también puede comunicar distintas emociones y sentimientos.
3:35
El color rojo por ejemplo, es normalmente asociado a emociones urgentes como pánico y
3:41
peligro o la necesidad de una parada de emergencia
3:44
Por otro lado, el verde es un color más tranquilo y se normalmente se asocia con iniciar algo
3:50
Cambiar los colores de diferentes botones le da al usuario una
3:54
impresión inmediata de la naturaleza de ese botón sin que realmente se de cuenta.
3:58
En el mismo tenor, si toda tu interfaz de usuario utiliza el color rojo, puedes estar estresando al usuario
4:06
Hay muchas tendencias de razonamiento sobre el color, mucho más de lo que podemos cubrir en este video
4:11
Pero si piensas en una rueda de color básica,
4:15
hay algunas formas sencillas de encontrar colores que se ven bien juntos
4:19
Los colores complementarios son colores en lados opuestos de la rueda,
4:24
estas son combinaciones como rojo y verde, morado y amarillo o azul y naranja
4:31
Los colores complementarios son excelentes porque tienen el mayor contraste entre si,
4:35
lo cual es muy bueno para mostrar distinción.
4:39
Pero si abusas de estos colores complementarios,
4:42
entonces la experiencia puede ser chocante porque no hay un lugar cómodo donde mirar
4:47
Otras plantillas incluyen colores semi-complementarios, triada de colores, etc.
4:54
También es importante tener en mente la diferencia entre colores fríos y cálidos y el efecto que tienen en el usuario
5:02
Por supuesto cuando estás pensando en color,
5:05
puedes querer considerar los colores oficiales de la empresa para la que estas diseñando.
5:10
Si su logo es azul aciano, entonces querrás usar ese azul aciano como el color principal de la interfaz de usuario.
5:17
La mayoría de las empresas grandes tienen una guía de estilo que especifica los
5:22
colores que usan así como las reglas que aplican para el uso de su logo,
5:26
las cuales debes tener en mente antes de que accidentalmente juntes su logo con el color de la compañía de la competencia
5:33
Por supuesto que tampoco debes depender completamente del color,
5:36
ten en mente que hay mucha gente que no distingue colores y no quieres dejarlos fuera de la jugada
5:42
De hecho hay varios simuladores de daltonismo gratuitos en línea,
5:47
donde puedes cargar una captura de pantalla de tu interfaz de usuario para saber cómo lo vería alguien con daltonismo
5:54
Así que el color es útil pero no debe ser tu única herramienta.
5:59
Con esto en mente, querrás considerar como distinta gente aprende en formas distintas.
6:04
Algunas personas aprenden mejor leyendo, otras a través de imágenes y otros a través de asociación espacial –
6:13
así que si tienes la flexibilidad en ti diseño de satisfacer múltiples estilos, vale la pena considerarlo
6:20
En Q-sys puedes agregar iconos a tus botones, así como una etiqueta,
6:25
lo que puede ser una buena forma de satisfacer diferentes formas de aprendizaje
6:30
Hay un concepto critico más que considerar al crear la interfaz: Gráfica
6:35
la retroalimentación No, no estoy hablando de la retroalimentación de audio, no queremos eso. .
6:41
Estoy hablando de la reacción que la pantalla tiene para dejarte saber que has hecho algo
6:46
Para algunas acciones la retroalimentación es obvia:
6:49
cuando presionas un botón que navega a otra página, la pantalla cambia a esa página.
6:56
Muchos botones proveen retroalimentación natural –
7:00
un botón toggle o de activación por ejemplo cambiara su color cuando lo presionas.
7:05
Un botón de Play se encenderá mientras el reproductor está reproduciendo audio.
7:10
Pero otros botones pueden no darle al usuario la retroalimentación que espera.
7:16
Por ejemplo, si quieres darle al usuario botones de incremento/decremento de volumen,
7:21
ellos no saben realmente en qué lugar están en el rango de ganancia.
7:25
Aquí querrías darles un medidor que les de retroalimentación de ese nivel.
7:31
Si les permites llamar un snapshot que cambia los valores de controles que no están en la página actual de la interfaz de usuario,
7:37
quieres darles algún tipo de indicación de que se ha cargado ese snapshot
7:42
Cualquier pista que le puedas dar al usuario de que su acción ha tenido efecto le ayudara a su nivel de confianza al interactuar con el sistema
7:52
Finalmente no olvides probar tu interfaz de usuario.
7:55
No solamente tú, pídele a otras personas que la prueben para que tengas una mejor sensación de que tan intuitiva es.
8:02
Puedes aprender mucho viendo a los demás batallar para navegar en tus menús o viendo a donde van para realizar algunas tareas.
8:11
Trata de dejar atrás tu ego y aprende de ellos en vez de enseñarles cómo quieres tu que usen el sistema.
8:18
Dales una tarea a realizar y ve si pueden descifrar como hacerlo por si mismos.
8:24
Si no pueden, puede ser una buena señal de que tu interfaz necesita un poco más de trabajo.
8:29
Asi qeu no te enamores de tu diseño muy rápido – solo porque lo amas, no quiere decir que sea útil para alguien mas.
8:36
Y si vas a usar un diseñador gráfico para agregar un toque más visual al sistema,
8:40
quieres asegurarte que la interfaz sea probada en campo antes que se agreguen imágenes que sean más difíciles de cambiar después.
8:48
Con suerte esto te da una Buena base de cosas que hay que tener en mente al diseñar una interfaz de usuario.
8:55
La experiencia del usuario es tan importante como la plataforma audiovisual –
9:00
porque todo tu trabajo en el software es inútil si nadie puede descifrar como usarlo.
9:05
Gracias por ver el video
Descripción de la lección
Experiencia de Usuario Parte Dos
9m 10s
¡Próximamente!
Consejos Útiles y Definiciones
Experiencia de Usuario Parte Dos
9m 10s
¡Próximamente!