10 consejos esenciales de diseño de UI (interfaz de usuario)

Memorice estas 10 pautas si desea crear diseños de interfaz de usuario elegantes, fáciles de usar y centrados en las personas.

Un sitio web es mucho más que un grupo de páginas conectadas por enlaces. Es una interfaz, un espacio donde diferentes cosas, en este caso, una persona y la presencia web de una empresa o individuo, se encuentran, se comunican y se afectan entre sí. Esa interacción crea una experiencia para el visitante y, como diseñador web, es su trabajo asegurarse de que la experiencia sea lo mejor posible.

Y la clave para eso es pensar en su usuario ante todo, y siempre.

Afortunadamente, aunque el diseño web es una disciplina relativamente nueva, le debe mucho al estudio científico de la interacción humano-computadora (HCI). Y estas 9 prácticas pautas directamente de la investigación de HCI lo ayudarán a concentrarse en sus usuarios durante el proceso de diseño .

El diseño de la interfaz, que se centra en el diseño de la funcionalidad de las interfaces, es un subconjunto del diseño de la experiencia del usuario, que se centra en el panorama general: es decir, toda la experiencia, no solo la interfaz.

1. Conozca a sus usuarios

Por encima de todo, debe saber quiénes son sus usuarios, por dentro y por fuera. Eso significa conocer todos los datos demográficos que pueden extraer sus aplicaciones de análisis, sí. Pero lo que es más importante, significa saber qué necesitan y qué se interpone en su camino para lograr sus objetivos.

Llegar a ese nivel de empatía requiere más que un análisis cuidadoso de las estadísticas. Requiere conocer a las personas que utilizan su sitio web. Significa hablar con ellos cara a cara, verlos usar su producto (y tal vez otros) y hacerles preguntas que van más allá de “¿Qué piensas de este diseño?”

Cuales son sus metas? ¿Qué se interpone en su camino para lograr esos objetivos? ¿Cómo puede un sitio web ayudarlos a superar o superar esos desafíos?

No dejes de saber lo que quieren tus usuarios. Profundice y descubra lo que necesitan. Después de todo, los deseos son sólo consecuencia de las necesidades. Si puede abordar la necesidad profundamente arraigada de un usuario, abordará sus deseos al mismo tiempo que cumple con requisitos más fundamentales. 

La información que descubrirá al analizar los datos y hablar con los usuarios informará cada decisión que tome, desde cómo las personas usan su interfaz hasta qué tipos de contenido destacará dentro de esa interfaz.

2. Defina cómo las personas usan su interfaz

Antes de diseñar su interfaz, debe definir cómo la usarán las personas. Con la creciente prevalencia de los dispositivos táctiles, es una preocupación más fundamental de lo que podría pensar. Solo mira 

Tinder: la experiencia del usuario de la aplicación se define literalmente por la facilidad y la impulsividad de un simple deslizamiento.

Las personas utilizan los sitios web y las aplicaciones de dos maneras: directamente (interactuando con los elementos de la interfaz del producto) e indirectamente (interactuando con elementos de la interfaz de usuario externos al producto).

Ejemplos de interacciones directas

  • ‍Pulsar un botón
  • Deslizar una tarjeta
  • Arrastrar y soltar un elemento con la yema del dedo

Ejemplos de interacciones indirectas

  • Señalar y hacer clic con el mouse
  • Usar comandos de teclado / atajos
  • Escribir en un campo de formulario
  • Dibujar en una tableta Wacom

Quiénes son sus usuarios y qué dispositivos utilizan deben informar profundamente sus decisiones aquí. Si está diseñando para personas mayores u otras personas con destreza manual limitada, no querrá apoyarse en deslizar. Si está diseñando para escritores o codificadores, que interactúan principalmente con aplicaciones a través del teclado, querrá admitir todos los atajos de teclado comunes para minimizar el tiempo de trabajo con el mouse.

3. Establecer expectativas

Muchas interacciones con un sitio o aplicación tienen consecuencias: hacer clic en un botón puede significar gastar dinero, borrar un sitio web o hacer un comentario despectivo sobre el pastel de cumpleaños de la abuela. Y siempre que hay consecuencias, también hay ansiedad.

Por lo tanto, asegúrese de informar a los usuarios qué sucederá después de hacer clic en ese botón antes de hacerlo. Puede hacer esto a través del diseño y / o copia.

Estableciendo expectativas con diseño 

  • Resaltando el botón que corresponde a la acción deseada
  • Usar un símbolo ampliamente comprendido (como un bote de basura para un botón de eliminar, un signo más para agregar algo o una lupa para buscar) en combinación con copiar
  • Elegir un color con un significado relevante (verde para un botón “ir”, rojo para “detener”)

Establecer expectativas con copia

  • Escribir copia de botón claro
  • Proporcionar una copia direccional / alentadora en estados vacíos
  • Entrega de advertencias y solicitud de confirmación

Para acciones con consecuencias irreversibles, como eliminar algo de forma permanente, tiene sentido preguntar a las personas si están seguras.

4. Anticipa errores

> Errar es humano; perdonar, divino.

Alexander Pope, “Un ensayo sobre la crítica”

Las personas cometen errores, pero no deberían (siempre) tener que sufrir las consecuencias. Hay dos formas de ayudar a reducir el impacto del error humano:

  1. Evite errores antes de que ocurran
  2. Proporcionar formas de solucionarlos después de que sucedan

Ve muchas técnicas de prevención de errores en el comercio electrónico y el diseño de formularios. Los botones permanecen inactivos hasta que complete todos los campos. Los formularios detectan que una dirección de correo electrónico no se ha introducido correctamente. Las ventanas emergentes le preguntan si realmente desea abandonar su carrito de compras (sí, lo hago, Amazon, no importa cuánto le marque al pobrecito).

Anticipar los errores suele ser menos frustrante que tratar de corregirlos después de los hechos. Esto se debe a que ocurren antes de que la sensación satisfactoria de finalización que viene al hacer clic en el botón “Siguiente” o “Enviar” pueda establecerse.

Dicho esto, a veces hay que dejar que ocurran accidentes. Ahí es cuando los mensajes de error detallados realmente entran en juego.

Cuando escriba mensajes de error, asegúrese de que hagan dos cosas:

  1. Explique el problema. Por ejemplo, “Dijiste que naciste en Marte, que los humanos no han colonizado. Todavía.”
  2. Explique cómo solucionarlo. Por ejemplo, “Introduzca un lugar de nacimiento aquí en la Tierra”.

Tenga en cuenta que puede tomar una página de ese mismo libro para situaciones sin errores. Por ejemplo, si elimino algo, pero es posible restaurarlo, avíseme con una línea de copia como “Siempre puede restaurar los elementos eliminados yendo a la Papelera y haciendo clic en Restaurar”.

El principio de anticipar el error del usuario se denomina principio poka-yoke. Poka-yoke es un término japonés que se traduce como “a prueba de errores”.

5. Envíe sus comentarios rápidamente

En el mundo real, el entorno nos retroalimenta. Hablamos y otros responden (normalmente). Rascamos a un gato y este ronronea o sisea (dependiendo de su mal humor y de cuánto chupamos cuando el gato se rasca).

Con demasiada frecuencia, las interfaces digitales no devuelven mucho, dejándonos preguntándonos si deberíamos volver a cargar la página, reiniciar la computadora portátil o simplemente tirarla por la ventana más cercana disponible.

Así que dame esa animación de carga. Haga que ese botón salte y vuelva a abrirse cuando lo toque, pero no demasiado. Y dame un choca esos cinco cuando hago algo que tú y yo estoy de acuerdo es increíble.

image_pdfwww.dineroclub.netimage_printwww.dineroclub.net