Recuerde estas diez pautas si desea desarrollar un diseño de interfaz de usuario del sitio web hermoso, fácil de usar y centrado en el ser humano.
Un sitio web es más que una colección de páginas interconectadas. Es una interfaz, un lugar donde muchas cosas chocan, interactúan y se afectan unas a otras; en este caso, la presencia en línea de una persona y una empresa o un individuo. El visitante tendrá una experiencia como resultado de ese contacto, y es su trabajo como diseñador web hacer que esa experiencia sea lo mejor posible.
Y la clave es tener a su usuario en mente primero, ante todo y todo el tiempo.
Afortunadamente, a pesar de su juventud, el diseño web debe mucho al estudio científico de la interacción humano-computadora (HCI). Y estos nueve consejos de la investigación de HCI lo ayudarán a concentrarse en sus clientes durante todo el proceso de diseño.
El diseño de la interfaz, que se centra en la forma y función de las interfaces, es un subconjunto del diseño de la experiencia del usuario, que se centra en el panorama general: la experiencia completa, no solo la interfaz.
1. Familiarícese con sus clientes.
Sobre todo, debe tener un conocimiento profundo de sus usuarios internos y externos. Sí, requiere un conocimiento profundo de los datos demográficos que pueden recopilar sus aplicaciones de análisis. Pero, lo que es más importante, requiere una conciencia de lo que necesitan y lo que les impide alcanzar sus objetivos.
Para lograr ese nivel de empatía, se necesita más que una revisión exhaustiva de los datos. Se trata de conocer a los visitantes de su sitio web. Requiere hablar con ellos cara a cara, verlos usar tu producto (y tal vez otros) y hacerles preguntas más detalladas que «¿Qué te parece este diseño?»
¿Qué quieren lograr? ¿Qué les impide alcanzar sus objetivos? ¿Cómo puede un sitio web ayudar a las personas a superar o navegar estos desafíos?
No se limite a considerar lo que quieren sus usuarios. Profundice para descubrir lo que necesitan. Después de todo, los deseos son el producto de necesidades insatisfechas. Podrá satisfacer la necesidad más profunda de un usuario y al mismo tiempo abordar sus demandas más básicas si puede satisfacer su necesidad más profunda.
Los conocimientos que obtendrá del análisis de datos y la interacción con los clientes influirán en cada decisión que tome, desde cómo las personas usan su interfaz hasta qué tipo de información enfatizará dentro de esa interfaz.
2. Determine cómo los usuarios utilizarán su interfaz.
Antes de diseñar su interfaz, primero debe describir cómo la gente la usará. Dada la creciente prevalencia de los dispositivos táctiles, es un problema más urgente de lo que piensa.
Las personas interactúan con los sitios web y las aplicaciones de dos maneras: directamente (a través de los componentes de la interfaz del producto) e indirectamente (a través de los elementos de la interfaz del producto) (al interactuar con elementos de la interfaz de usuario externos al producto).
Ejemplos de encuentros directos
- El acto de presionar un botón.
- Usar una tarjeta de crédito para hacer una compra
- Arrastrar y soltar un elemento con la yema del dedo
Las interacciones indirectas son aquellas que ocurren cuando dos o más personas interactúan de manera diferente.
- Señalar y hacer clic con un mouse
- Uso de instrucciones clave y atajos de teclado
- Llenar un campo de formulario con datos
- Dibujar en una tableta Wacom
A veces, una interacción puede parecer demasiado sencilla.
Debe basar sus decisiones en quiénes son sus usuarios y qué dispositivos utilizan. Si está diseñando para personas mayores o para personas con destreza física limitada, no debe depender de deslizar. Si está diseñando para escritores o programadores que prefieren interactuar con aplicaciones usando el teclado en lugar del mouse, querrá incorporar todos los métodos abreviados de teclado comunes para ahorrar tiempo.
3. Establezca sus objetivos.
Muchas actividades en un sitio web o aplicación tienen consecuencias: presionar un botón puede resultar en que compre algo, elimine una página o publique un comentario sarcástico sobre el pastel de cumpleaños de la abuela. Y hay ansiedad dondequiera que haya implicaciones.
Como consecuencia, antes de que los usuarios hagan clic en ese botón, asegúrese de que entiendan lo que sucederá. Esto puede hacerse mediante diseño y/o copia.
Establecer expectativas a través del diseño
- Seleccionar y seleccionar el botón que corresponde a la acción prevista
- Usar un símbolo conocido (como una papelera para un botón de eliminación, un signo más para agregar algo o una lupa para buscar) junto con la copia.
- Elegir un color que tenga un significado particular (verde para «ir», rojo para «alto»)
Establecer expectativas con la copia
- Hacer una copia corta de un botón
- Proporcionar una copia direccional/alentadora en fases vacías
- Envío de alertas y solicitud de confirmación
Parece razonable preguntar a las personas si están seguras de las actividades con consecuencias irreversibles, como la eliminación permanente de algo.
4. Esté preparado para cometer errores.
Las personas cometen errores, pero no deben ser castigados por ellos (siempre). Puede ayudar a disminuir las consecuencias del error humano haciendo una de dos cosas:
- Asegúrate de no cometer ningún error en primer lugar.
- Cuando surjan, proporcione remedios.
Encontrará una variedad de técnicas de prevención de errores en el comercio electrónico y el diseño de formularios. Los botones se desactivarán hasta que se hayan completado todos los campos. El formulario detecta cuando una dirección de correo electrónico se ingresa incorrectamente. Las ventanas emergentes preguntan si realmente desea abandonar su carrito de compras (sí, Amazon, no importa cuánto pueda dañar a la pobre criatura).
Anticiparse a las fallas suele ser menos agravante que intentar remediarlas después del hecho. Esto se debe al hecho de que ocurren antes de la fantástica sensación de éxito que surge al presionar el botón «Siguiente» o «Enviar».
Sin embargo, hay momentos en los que solo tienes que dejar que las cosas sucedan. Los mensajes de error descriptivos realmente brillan en este momento.
Al crear mensajes de error, asegúrese de que logren dos objetivos:
Describe el problema. «Dijiste que naciste en Marte», por ejemplo, que la humanidad aún tiene que colonizar. Aún.»
Describa cómo solucionar el problema. Por ejemplo, «Ingrese un lugar de nacimiento aquí en la Tierra».
Vale la pena mencionar que el mismo libro puede usarse en situaciones sin error. Por ejemplo, si elimino algo por error pero es recuperable, notifícame con una línea de texto que diga «Siempre puedes restaurar el material eliminado yendo a tu Papelera y haciendo clic en Restaurar».
El enfoque poka-yoke es una forma de anticipar los errores del usuario. Poka-yoke es un término japonés que significa «a prueba de errores».
5. Da retroalimentación inmediata
En el mundo real, el entorno nos da información. Lo que decimos tiene un efecto en los demás (normalmente). Un gato ronronea o silba en reacción a nuestro rascado (dependiendo de su mal humor y de cuánto apestamos al rascarnos).
Con demasiada frecuencia, las interfaces digitales no responden, dejándonos confundidos sobre si recargar la página, reiniciar la computadora portátil o simplemente cerrarla en la primera ventana disponible.
Si un sitio web se carga en menos de 5 segundos, no muestre una barra de progreso, ya que hará que el tiempo de carga parezca más largo. En su lugar, utilice un diseño que no implique progreso, como el clásico «remolino de la perdición» de Mac. Ese no es el caso en absoluto. Si usa barras de progreso en su sitio, piense en utilizar algunos trucos estéticos para que la carga parezca más rápida.
6. Preste atención al tamaño y ubicación de los elementos.
La Ley de Fitts es una idea importante en la interacción humano-computadora (HCI), que establece:
La distancia y el tamaño de un objetivo influyen en el tiempo que se tarda en adquirirlo.
Para decirlo de otra manera, cuanto más cerca y/o más grande esté algo, más rápido puedes colocar el cursor (o el dedo) sobre él. Esto tiene una serie de implicaciones para la interacción y las tácticas de diseño de la interfaz de usuario, las más importantes de las cuales son las siguientes:
Haga que los botones y otros «objetivos de clic» sean visibles y se pueda hacer clic en ellos (como iconos y enlaces de texto). Esto es especialmente importante cuando se trata de fuentes, menús y otras listas de enlaces, ya que la escasez de espacio hará que los usuarios hagan clic en los enlaces incorrectos con frecuencia.
Para las actividades más populares, aumente el tamaño y la prominencia de los botones.
Coloque la navegación en los bordes o esquinas de la pantalla, junto con otros componentes visuales interactivos populares, como las barras de búsqueda. Este último método puede parecer contrario a la intuición, pero funciona porque reduce la necesidad de precisión: un usuario ya no tendrá que preocuparse por perder su objetivo de clic.
Al considerar la ubicación y el tamaño de los elementos, tenga en cuenta su modelo de interacción. Si su sitio requiere desplazamiento horizontal en lugar de desplazamiento vertical, deberá considerar dónde y cómo notificará a los clientes sobre el cambio.
7. Cuando se trata de estándares, no seas holgazán.
Los diseñadores tienden a rediseñar las cosas debido a su creatividad, pero esta no siempre es la mejor idea.
¿Por qué? Porque una versión modificada de una interacción o interfaz bien conocida genera una «carga cognitiva», lo que obliga a las personas a repensar una técnica previamente dominada. Por supuesto, puede reinventar la rueda tantas veces como quiera, pero solo si al hacerlo mejora el diseño.
8. Mantenga sus interfaces de usuario lo más básicas posible.
Cuando se trata de la simplicidad, las personas a menudo se refieren al estudio del psicólogo de Harvard George Miller «El número mágico siete, más o menos dos: algunos límites en nuestra capacidad para procesar información». Los humanos solo pueden mantener de manera confiable de 5 a 9 cosas en su memoria a corto plazo, según los hallazgos. Miller lo descartó como una coincidencia, pero no parece disuadir a otros de mencionarlo.
Como resultado, parece deducirse que cuanto más simple es algo, más fácil es recordarlo a corto plazo. Como consecuencia, minimice la cantidad de elementos que un usuario debe recordar para usar su interfaz de manera rápida y exitosa. Esto se puede simplificar fragmentando o dividiendo el material en pequeños fragmentos fáciles de digerir.
Esta idea está en línea con la Ley de Conservación de la Complejidad de Tesler, que establece que los diseñadores de interfaces de usuario deben hacer que sus interfaces sean lo más simples posible. Esto puede implicar ocultar la complejidad de una aplicación detrás de una interfaz simple cuando sea posible. Un ejemplo bien conocido de un producto que desafía este criterio es Microsoft Word.
La mayoría de las personas solo usan Word para algunas cosas, por ejemplo, escribir, mientras que otras lo usan para una variedad de actividades. Todos, por otro lado, comienzan con la misma versión de Word y la misma interfaz de usuario, lo que deja al Joe promedio, que no es un usuario avanzado, abrumado por la cantidad de funciones que casi definitivamente nunca usará.
Como consecuencia, se desarrolló la divulgación progresiva, en la que la funcionalidad avanzada está oculta detrás de las interfaces secundarias. Los textos breves presentan un producto o servicio antes de llevar a los visitantes a un sitio web donde pueden obtener más información. Esta es una ocurrencia típica en las páginas de inicio de los sitios web. (Esta también es una gran técnica para el diseño móvil, donde la navegación siempre es un desafío).
En enlaces y botones, use «aprender más» y términos no específicos similares con moderación. ¿Por qué? Porque no está claro sobre qué «aprenderán más» los clientes. Las personas a menudo buscan un enlace en un sitio web que los lleve a donde quieren ir, y decir «aprender más» 15 veces no ayuda. Esto es especialmente cierto para aquellos que usan lectores de pantalla.
9. Haga que la toma de decisiones sea lo más simple posible.
Gran parte de Internet nos grita: los «banners» se convierten en publicidad a pantalla completa. Surgen modales, apelando con nosotros a suscribirnos a blogs que aún no hemos leído. Los intersticiales de video detienen nuestro progreso y nos obligan a perder la noción del tiempo. Ni siquiera hablemos de widgets, controles flotantes o información sobre herramientas…
Esto tiene un impacto en casi todo lo que construimos:
- En general, los diseños
- Menús de navegación
- Las páginas de precios están disponibles.
- Directorios de blogs
- Fuentes de contenido
La lista podría continuar indefinidamente. Pero la verdad principal es que cuanto más sencillos son nuestros diseños, más rápido y fácil es para los clientes tomar las decisiones que queremos. Es por eso que las páginas de destino y los correos electrónicos que no son boletines solo deben tener una llamada a la acción.
10. Preste mucha atención a la información.
Si bien todos deseamos que nuestros diseños se evalúen solo por sus méritos artísticos, la verdad es que optimizar su diseño para cumplir con sus objetivos es igual de importante.
Si bien todos deseamos que nuestros diseños se evalúen solo por sus méritos artísticos, la verdad es que optimizar su diseño para cumplir con sus objetivos es igual de importante.
Si bien la investigación y las pruebas de los usuarios pueden ayudarlo a enfocar sus decisiones de diseño para lograr el objetivo de su sitio, los datos recopilados después del lanzamiento son invaluables.
Como consecuencia, configure los análisis de su sitio y analícelos regularmente. Hay muchas herramientas de análisis disponibles, sin embargo, recomiendo Google Analytics y/o Mixpanel según el tipo de proyecto.
Mixpanel se centra en los eventos, recopilando datos en función de lo que hacen los visitantes en su sitio, mientras que Google Analytics es más conductual, recopilando datos como la duración de las sesiones, las fuentes de tráfico y otros datos. Si bien ambas aplicaciones brindan ambos tipos de datos, se destacan en diferentes áreas, así que elija la que mejor se adapte a sus necesidades.
Ambas herramientas son de uso gratuito para una cantidad limitada de puntos de datos. El intercambio de claves de API es una forma común para que Webflow y tecnologías similares faciliten la configuración de análisis.
Has aprendido los conceptos básicos, así que ahora es el momento de seguir adelante.
Ahora siga adelante y diseñe algunas interfaces de usuario atractivas y útiles. Además, siéntase libre de dejar un comentario con los mejores y peores ejemplos de diseño de interfaz de usuario que haya visto en Internet.
