Experiencia de Usuario Parte Dos

Una vez que tenemos una buena idea de lo que la interfaz necesita tener para permitir que el usuario haga lo necesario,

¡necesitas proporcionarles los botones para que eso suceda!

Pero no solo pongas todos esos botones aleatoriamente en la pantalla.

Hay un montón de principios de diseño a

que debes tener en cuenta cuando empieces a organizar el diseño visual de cada página de la interfaz de usuario.

Una vez más, algunas de estas cosas pueden parecer obvias,

pero por lo mismo son fáciles de pasar por alto si no las mantienes en mente al diseñar tu UCI.

Empecemos por considerar algo de la psicología del usuario.

La mayoría de los países occidentales leen de arriba abajo y de izquierda a derecha,

lo que significa que instintivamente ponemos las cosas más importantes arriba a la izquierda.

Si estas creando botones de navegación de páginas, por ejemplo,

las páginas más importantes deben ir arriba o a la izquierda con las páginas menos importantes después.

La misma psicología de la lectura nos dice que podemos pasar a la siguiente página

cuando hemos terminado por lo que la esquina de abajo a la derecha es un lugar natural

para un botón de siguiente que avance a la siguiente página de la interfaz de usuario

Por supuesto esto no son reglas, puedes acomodar tu interfaz de usuario de la manera que quieras

Peeero, si vas en contra de la intuición entonces a los usuarios les puede costar trabajo acostumbrarse a navegar,

pero probablemente lo mas importante que debemos considerar es la consistencia

Una vez que eliges el metodo de navegación debes de mantener ese estilo a lo largo de toda la interfaz de usuario

No quieres tener un menú de navegación horizontal en una página y uno vertical en otra

que las paginas cambien aleatoriamente su orden o tamaño.

Mantener reglas consistentes dentro de tu diseño le da al usuario una mejor oportunidad de navegarlo con éxito.

Esto por supuesto no solo está limitado a la navegación de páginas.

Hay muchas formas de indicar la importancia de una acción

Piensa nuevamente en nuestro reproductor de audio de nuevo –

hay muchos botones que puede apretar, pero el botón de Play es probablemente el más importante.

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.

También puedes utilizar espacios en blanco para mostrar importancia.

En este ejemolo, el bton de Play no es más grande que los otros botoner,

pero puedes ver por el uso del espacio en blanco alrededor que ese boton es más importante que los otros

A muchos diseñadores les da miedo usar el espacio en blanco porque sienten la necesidad de llenar la página,

pero el espacio en blanco muchas veces puede ser tu amigo.

Este espacio divide objetos que nos son iguales, muestra importancia y mantiene tu diseño simple y fácil de entender.

Nuevamente, el encontrar un estilo consistente es importante.

Si le enseñas aun usuario que un botón importante se ve de una forma en una página,

probablemente debes mantener esa estética para otros botones importantes en otras páginas

Otra herramienta que tienes en tu caja de herramientas es el color

El color no solo es para hacer las cosas bonitas,

el color también puede comunicar distintas emociones y sentimientos.

El color rojo por ejemplo, es normalmente asociado a emociones urgentes como pánico y

peligro o la necesidad de una parada de emergencia

Por otro lado, el verde es un color más tranquilo y se normalmente se asocia con iniciar algo

Cambiar los colores de diferentes botones le da al usuario una

impresión inmediata de la naturaleza de ese botón sin que realmente se de cuenta.

En el mismo tenor, si toda tu interfaz de usuario utiliza el color rojo, puedes estar estresando al usuario

Hay muchas tendencias de razonamiento sobre el color, mucho más de lo que podemos cubrir en este video

Pero si piensas en una rueda de color básica,

hay algunas formas sencillas de encontrar colores que se ven bien juntos

Los colores complementarios son colores en lados opuestos de la rueda,

estas son combinaciones como rojo y verde, morado y amarillo o azul y naranja

Los colores complementarios son excelentes porque tienen el mayor contraste entre si,

lo cual es muy bueno para mostrar distinción.

Pero si abusas de estos colores complementarios,

entonces la experiencia puede ser chocante porque no hay un lugar cómodo donde mirar

Otras plantillas incluyen colores semi-complementarios, triada de colores, etc.

También es importante tener en mente la diferencia entre colores fríos y cálidos y el efecto que tienen en el usuario

Por supuesto cuando estás pensando en color,

puedes querer considerar los colores oficiales de la empresa para la que estas diseñando.

Si su logo es azul aciano, entonces querrás usar ese azul aciano como el color principal de la interfaz de usuario.

La mayoría de las empresas grandes tienen una guía de estilo que especifica los

colores que usan así como las reglas que aplican para el uso de su logo,

las cuales debes tener en mente antes de que accidentalmente juntes su logo con el color de la compañía de la competencia

Por supuesto que tampoco debes depender completamente del color,

ten en mente que hay mucha gente que no distingue colores y no quieres dejarlos fuera de la jugada

De hecho hay varios simuladores de daltonismo gratuitos en línea,

donde puedes cargar una captura de pantalla de tu interfaz de usuario para saber cómo lo vería alguien con daltonismo

Así que el color es útil pero no debe ser tu única herramienta.

Con esto en mente, querrás considerar como distinta gente aprende en formas distintas.

Algunas personas aprenden mejor leyendo, otras a través de imágenes y otros a través de asociación espacial –

así que si tienes la flexibilidad en ti diseño de satisfacer múltiples estilos, vale la pena considerarlo

En Q-sys puedes agregar iconos a tus botones, así como una etiqueta,

lo que puede ser una buena forma de satisfacer diferentes formas de aprendizaje

Hay un concepto critico más que considerar al crear la interfaz: Gráfica

la retroalimentación No, no estoy hablando de la retroalimentación de audio, no queremos eso. .

Estoy hablando de la reacción que la pantalla tiene para dejarte saber que has hecho algo

Para algunas acciones la retroalimentación es obvia:

cuando presionas un botón que navega a otra página, la pantalla cambia a esa página.

Muchos botones proveen retroalimentación natural –

un botón toggle o de activación por ejemplo cambiara su color cuando lo presionas.

Un botón de Play se encenderá mientras el reproductor está reproduciendo audio.

Pero otros botones pueden no darle al usuario la retroalimentación que espera.

Por ejemplo, si quieres darle al usuario botones de incremento/decremento de volumen,

ellos no saben realmente en qué lugar están en el rango de ganancia.

Aquí querrías darles un medidor que les de retroalimentación de ese nivel.

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,

quieres darles algún tipo de indicación de que se ha cargado ese snapshot

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

Finalmente no olvides probar tu interfaz de usuario.

No solamente tú, pídele a otras personas que la prueben para que tengas una mejor sensación de que tan intuitiva es.

Puedes aprender mucho viendo a los demás batallar para navegar en tus menús o viendo a donde van para realizar algunas tareas.

Trata de dejar atrás tu ego y aprende de ellos en vez de enseñarles cómo quieres tu que usen el sistema.

Dales una tarea a realizar y ve si pueden descifrar como hacerlo por si mismos.

Si no pueden, puede ser una buena señal de que tu interfaz necesita un poco más de trabajo.

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.

Y si vas a usar un diseñador gráfico para agregar un toque más visual al sistema,

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.

Con suerte esto te da una Buena base de cosas que hay que tener en mente al diseñar una interfaz de usuario.

La experiencia del usuario es tan importante como la plataforma audiovisual –

porque todo tu trabajo en el software es inútil si nadie puede descifrar como usarlo.

Gracias por ver el video