Un sitio web es mucho más que un conjunto de páginas conectadas por enlaces. Es una interfaz, un espacio donde diferentes elementos —en este caso, una persona y la presencia web de una empresa o individuo— se encuentran, se comunican y se influyen mutuamente. Esa interacción crea una experiencia para el visitante y, como diseñador web, tu trabajo es asegurarte de que esa experiencia sea lo mejor posible.
Y la clave para lograrlo es pensar en tu usuario primero, 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 persona-ordenador (IPO). Y estas 9 prácticas pautas, extraídas directamente de la investigación en IPO, te ayudarán a centrarte en tus usuarios durante el proceso de diseño.
El diseño de interfaces, que se centra en la disposición y funcionalidad de los elementos, es un subconjunto del diseño de experiencia de usuario, que se enfoca en el panorama general: es decir, la experiencia completa, no solo la interfaz.
10 consejos esenciales de UI web
1. Conoce a tus usuarios
Por encima de todo, tienes que conocer a tus usuarios a fondo. Eso significa conocer todos los datos demográficos que tus aplicaciones de análisis puedan extraer, sí. Pero, lo que es más importante, significa saber qué necesitan y qué les impide alcanzar sus objetivos.
Alcanzar ese nivel de empatía requiere algo más que un análisis cuidadoso de las estadísticas. Requiere conocer a las personas que usan tu sitio web. Significa hablar con ellas cara a cara, ver cómo usan tu producto (y quizás otros) y hacerles preguntas que vayan más allá de un simple "¿Qué te parece este diseño?".
¿Cuáles son sus objetivos? ¿Qué les impide alcanzarlos? ¿Cómo puede un sitio web ayudarles a superar o sortear esos desafíos?
No te quedes solo en saber qué quieren tus usuarios. Profundiza y descubre qué necesitan. Al fin y al cabo, los deseos son solo una consecuencia de las necesidades. Si logras satisfacer una necesidad profunda del usuario, cubrirás sus deseos y, al mismo tiempo, cumplirás con requisitos más fundamentales.
Las ideas que descubras al analizar los datos y hablar con los usuarios guiarán cada decisión que tomes, desde cómo interactúan las personas con tu interfaz hasta qué tipo de contenido destacarás en ella.
2. Define cómo interactúa la gente con tu interfaz
Antes de diseñar tu interfaz, debes definir cómo la utilizarán las personas. Con la creciente popularidad de los dispositivos táctiles, es una preocupación más crucial de lo que podrías pensar. Solo tienes que fijarte en
Tinder: la experiencia de usuario de la aplicación está definida literalmente por la facilidad y la impulsividad de un simple deslizamiento.
La gente usa sitios web y aplicaciones de dos maneras: directamente (interactuando con los elementos de la interfaz del producto) e indirectamente (interactuando con elementos de UI externos al producto).
Ejemplos de interacciones directas:
- Tocar un botón
- Deslizar una tarjeta
- Arrastrar y soltar un elemento con la punta del dedo
Ejemplos de interacciones indirectas:
- Apuntar y hacer clic con el ratón
- Usar comandos o atajos de teclado
- Escribir en un campo de formulario
- Dibujar en una tableta Wacom
Quiénes son tus usuarios y qué dispositivos utilizan debería influir profundamente en tus decisiones aquí. Si diseñas para personas mayores u otros usuarios con destreza manual limitada, no querrás depender de gestos de deslizamiento. Si diseñas para escritores o programadores, que interactúan principalmente con las aplicaciones mediante el teclado, querrás admitir todos los atajos de teclado comunes para minimizar el tiempo que pasan usando el ratón.
3. Define las 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.
Así que asegúrate de que los usuarios sepan qué sucederá después de hacer clic en ese botón antes de que lo hagan. Puedes lograrlo mediante el diseño y/o el texto.
Definir expectativas con el diseño:
- Resaltar el botón que corresponde a la acción deseada
- Usar un símbolo ampliamente reconocido (como una papelera para un botón de eliminar, un signo más para añadir algo o una lupa para buscar) en combinación con texto
- Elegir un color con un significado relevante (verde para un botón de "continuar", rojo para "detener")
Definir expectativas con el texto:
- Escribir textos claros para los botones
- Proporcionar texto orientativo o motivador en estados vacíos
- Ofrecer advertencias y solicitar confirmación
Para acciones con consecuencias irreversibles, como eliminar algo de forma permanente, tiene sentido preguntar a los usuarios si están seguros.
4. Anticípate a los errores
Errar es humano; perdonar, divino.
Alexander Pope, "An Essay on Criticism"
La gente comete errores, pero no debería (siempre) tener que sufrir las consecuencias. Hay dos formas de ayudar a reducir el impacto del error humano:
- Prevenir los errores antes de que ocurran
- Ofrecer formas de solucionarlos después de que ocurran
En el comercio electrónico y en el diseño de formularios se ven muchas técnicas de prevención de errores. Los botones permanecen inactivos hasta que rellenas todos los campos. Los formularios detectan si una dirección de correo electrónico no se ha introducido correctamente. Las ventanas emergentes te preguntan si realmente quieres abandonar tu carrito de la compra (sí, Amazon, quiero, por mucho que eso pueda traumatizar al pobre).
Anticiparse a los errores suele ser menos frustrante que intentar arreglarlos a posteriori. Esto se debe a que ocurren antes de que aparezca esa satisfactoria sensación de haber terminado al hacer clic en el botón "Siguiente" o "Enviar".
Dicho esto, a veces hay que dejar que los accidentes ocurran. Es entonces cuando los mensajes de error detallados demuestran su verdadero valor.
Cuando redactes mensajes de error, asegúrate de que cumplan dos funciones:
- Explicar el problema. Por ejemplo: "Has dicho que naciste en Marte, planeta que los humanos aún no han colonizado. Todavía".
- Explicar cómo solucionarlo. Por ejemplo: "Por favor, introduce un lugar de nacimiento aquí en la Tierra".
Ten en cuenta que puedes aplicar la misma lógica a situaciones que no sean errores. Por ejemplo, si borro algo pero es posible recuperarlo, házmelo saber con una frase como: "Siempre puedes restaurar los elementos eliminados yendo a la Papelera y haciendo clic en Restaurar".
El principio de anticiparse al 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. Da feedback, y rápido
En el mundo real, el entorno nos da feedback. Hablamos y los demás responden (normalmente). Acariciamos a un gato y ronronea o bufa (dependiendo de su humor y de lo mal que se nos dé acariciar gatos).
Con demasiada frecuencia, las interfaces digitales no nos devuelven nada, dejándonos con la duda de si debemos recargar la página, reiniciar el portátil o simplemente lanzarlo por la ventana más cercana.
Así que dame esa animación de carga. Haz que el botón salte y vuelva a su sitio cuando lo pulse, pero sin pasarte. Y dame un choque de manos virtual cuando haga algo que ambos consideremos genial. (Gracias, MailChimp).
Solo asegúrate de que todo ocurra rápido. Usability.gov define cualquier retraso superior a 1 segundo como una interrupción. Más de 10 segundos, una perturbación. Y eso siendo generosos: para casi la mitad de la población estadounidense, 3 segundos son suficientes para abandonar la página.
Si una página va a cargarse en menos de 5 segundos, no muestres una barra de progreso, ya que hará que el tiempo de carga parezca más largo. En su lugar, utiliza una visualización que no implique progreso, como la infame "ruleta de la muerte" de Mac. Pero esa no. Si utilizas barras de progreso en tu sitio, considera probar algunos trucos visuales para que la carga parezca más rápida.
6. Piensa bien en el tamaño y la ubicación de los elementos
La ley de Fitts, un principio fundamental de la interacción persona-ordenador (IPO), establece que:
El tiempo necesario para alcanzar un objetivo es función de la distancia hasta el mismo y de su tamaño.
En otras palabras: cuanto más cerca o más grande sea algo, más rápido podrás colocar el cursor (o el dedo) sobre ello. Esto tiene, obviamente, todo tipo de implicaciones para las técnicas de diseño de interfaces y de interacción, pero tres de las más importantes son:
Haz que los botones y otros «objetivos de clic» (como iconos y enlaces de texto) sean lo suficientemente grandes para verlos y pulsarlos con facilidad. Esto es especialmente importante en la tipografía, los menús y otras listas de enlaces, ya que un espacio insuficiente hará que los usuarios pulsen los enlaces equivocados una y otra vez.
Haz que los botones de las acciones más comunes sean más grandes y llamativos.
Coloca la navegación (y otros elementos visuales interactivos comunes, como las barras de búsqueda) en los bordes o esquinas de la pantalla. Esto último puede parecer contraintuitivo, pero funciona porque reduce la necesidad de precisión: el usuario no tiene que preocuparse por pasarse de largo al hacer clic.
Mientras piensas en la ubicación y el tamaño de los elementos, ten siempre presente tu modelo de interacción. Si tu sitio requiere desplazamiento horizontal en lugar de vertical, tendrás que considerar dónde y cómo indicar a los usuarios este tipo de interacción poco habitual.
7. No ignores los estándares
Como buenos creativos, a los diseñadores les encanta reinventar las cosas, pero no siempre es la mejor idea.
¿Por qué? Porque una versión renovada de una interfaz o interacción familiar añade «carga cognitiva»: obliga a la gente a volver a pensar en un proceso que ya habían aprendido. Por supuesto, puedes reinventar la rueda todo lo que quieras, pero solo si realmente mejora el diseño.
Esta regla de oro explica por qué la barra de menús de Google Docs incluye casi las mismas opciones que la de Microsoft Word antes de Vista:
También explica por qué Pocket tuvo que cambiar la ubicación del botón de archivo en su aplicación para Android hace unos años.</segment 15>
Hasta el otoño de 2013, el botón de archivo estaba en la parte superior izquierda de la pantalla, justo donde las especificaciones de diseño de Android decían que debía estar el botón «Atrás». Pocket quería que la gente se centrara en la experiencia de lectura y no duplicar un control de hardware existente, pero la ubicación inconsistente provocaba que los nuevos usuarios cerraran y archivaran accidentalmente el artículo que estaban leyendo, en lugar de volver simplemente a su lista de lectura como se esperaba.
Ese pequeño cambio «aumentó en un 23% la probabilidad de que [los nuevos usuarios] siguieran usando Pocket a partir de ese momento».
8. Haz que tus interfaces sean fáciles de aprender
Cuando se habla de simplicidad, a menudo se cita un artículo del psicólogo de Harvard George Miller titulado «El número mágico siete, más o menos dos: algunos límites de nuestra capacidad para procesar información». El artículo sugiere que las personas solo pueden retener de 5 a 9 elementos en su memoria a corto plazo con cierta fiabilidad. El propio Miller lo llamó una coincidencia, pero eso no parece frenar a nadie a la hora de citarlo.
Dicho esto, es lógico que cuanto más sencillo sea algo, más fácil será recordarlo a corto plazo. Por eso, siempre que sea posible, limita la cantidad de cosas que una persona debe recordar para usar tu interfaz de manera eficiente y efectiva. Puedes facilitar esto agrupando la información, es decir, dividiéndola en trozos pequeños y fáciles de digerir.
Esta idea encaja a la perfección con la Ley de Conservación de la Complejidad de Tesler, que establece que los diseñadores de interfaces deben hacerlas lo más sencillas posible. Esto puede significar ocultar la complejidad de una aplicación tras una interfaz simplificada siempre que se pueda. Un ejemplo popular de un producto que no sigue esta ley es Microsoft Word.
La mayoría de la gente solo hace unas pocas cosas en Word —como escribir—, mientras que otros pueden usarlo para realizar todo tipo de tareas avanzadas. Pero en todo el mundo, todo el mundo abre la misma versión de Word, con la misma interfaz, dejando al usuario promedio —que no es un experto— abrumado por la variedad de opciones que probablemente nunca usará.
Esto dio lugar a un concepto llamado divulgación progresiva, donde las funciones avanzadas se esconden en interfaces secundarias. A menudo verás esto en las páginas de inicio de los sitios web, donde breves fragmentos de texto presentan un producto o función y luego enlazan a una página donde los usuarios pueden obtener más información. (Esto también resulta ser una buena práctica para el diseño móvil, donde una navegación robusta siempre es un desafío).
Consejo profesional: evita usar "más información" y textos similares poco específicos en enlaces y botones. ¿Por qué? Porque no le dicen a los usuarios sobre qué obtendrán "más información". A menudo, la gente simplemente escanea una página buscando un enlace que los lleve a donde quieren ir, y un "más información" repetido 15 veces no ayuda en nada. Esto es especialmente cierto para los usuarios de lectores de pantalla.
9. Simplifica la toma de decisiones
Gran parte de la web nos grita: los "banners" se expanden de repente para convertirse en anuncios a pantalla completa. Aparecen ventanas emergentes rogándonos que nos suscribamos a blogs que ni siquiera hemos tenido oportunidad de leer. Los anuncios de video nos detienen en seco, obligándonos a ver cómo pasan los segundos preciosos, muy lentamente. Y ni hablemos de los widgets, menús desplegables, información sobre herramientas...
A veces anhelo una web más tranquila, y la Ley de Hicks nos da a todos una razón para construirla. La idea es tan sencilla como su resultado final: cuantas más opciones de interfaz le presentes a un usuario, más difícil le resultará tomar una decisión.
Esto afecta a casi todo lo que construimos:
- Diseños generales
- Menús de navegación
- Páginas de precios
- Índices de blogs
- Fuentes de contenido
La lista continúa. Pero la conclusión es: cuanto más sencillos hagamos nuestros diseños, más rápido y fácil será para los usuarios tomar las decisiones que queremos que tomen. Es precisamente por eso que las páginas de destino y los correos electrónicos que no son boletines informativos solo deberían tener una llamada a la acción.
Consejo profesional: a veces, realmente quieres que los usuarios se detengan y consideren sus opciones. Es por eso que los diseños en mosaico de Pinterest, Dribbble y muchos blogs funcionan tan bien. Después de todo, cuantas más opciones tengas para elegir, más probable es que encuentres una que te funcione.
Lecturas relacionadas: UX vs UI: diferencias clave que todo diseñador debería conocer
10. Escucha a los datos
Aunque a todos nos gustaría que nuestros diseños se evaluaran puramente por su mérito artístico, la realidad es que optimizar tu diseño para cumplir su objetivo es igual de importante.
Aunque a todos nos gustaría que nuestros diseños se evaluaran puramente por su mérito artístico, la realidad es que optimizar tu diseño para cumplir su objetivo es igual de importante.
Aunque la investigación y las pruebas con usuarios son increíblemente útiles para orientar tus decisiones de diseño hacia el cumplimiento de los objetivos de tu sitio, los datos recopilados después del lanzamiento siguen siendo invaluables.
Así que configura herramientas de análisis para tu sitio y revísalas con frecuencia. Existen muchísimas opciones, pero yo recomiendo Google Analytics o Mixpanel, dependiendo del tipo de proyecto.
Mixpanel se centra en eventos, por lo que recopila datos basados en las acciones que realiza un visitante en tu sitio, mientras que Google Analytics es más conductual y te ofrece tiempos de sesión, fuentes de tráfico, etc. Aunque ambas herramientas pueden proporcionar ambos tipos de datos, realmente brillan en sus áreas de especialización, así que elige la que mejor se adapte a tus necesidades.
Nota: ambas herramientas son gratuitas hasta cierto volumen de datos. Webflow y plataformas similares suelen facilitar la configuración de analíticas mediante un sencillo intercambio de claves API.
Lecturas relacionadas: 17 herramientas útiles para diseñadores UI/UX
Gran diseño de interacción en sitios de Webflow
Muchos diseñadores que usan Webflow han aplicado estas pautas para crear interacciones intuitivas y atractivas. Aquí tienes algunos ejemplos.
Navegación circular expansible
Waldo Broodryk creó un menú animado muy divertido, optimizado tanto para móviles como para escritorio. Al cargar la página, el círculo en la esquina inferior derecha dice "Menú". Al hacer clic, se expande para revelar las páginas disponibles y se transforma en una X, permitiendo al usuario cerrar el menú y volver a centrarse en el contenido.
Es una combinación fantástica de diseño claro y atractivo, que presta mucha atención a la Ley de Fitts: es más fácil apuntar a los enlaces que están en los bordes de la pantalla. La navegación circular es una opción interesante cuando no quieres sugerir una jerarquía específica en tu navegación.
¿Le invitas una copa a esa chica?
El diseñador Shane Hurt creó este increíble árbol de decisiones interactivo para ayudarte a decidir si invitar o no a una chica a una copa. El diseño concentra una gran cantidad de contenido, pero te mantiene totalmente enfocado en la tarea: responder a la pregunta actual y avanzar hacia tu decisión. ¡Bien hecho, Shane, por mantener la interfaz tan sencilla!
Rediseño de Uniqlo
El diseñador Tim Noah estaba comprando en el sitio web de Uniqlo un día cuando se dio cuenta de lo complejo y único que es su sistema de navegación. Inspirado, decidió “recrearlo pero de una forma más amigable para tabletas y móviles”.
Lo que más me gusta es cómo convirtió la navegación multinivel de Uniqlo, que requiere varios clics y cargas de página en su sitio de escritorio, en una experiencia de una sola página. (Para ser justos, Uniqlo hace lo mismo en su sitio móvil, pero es un subdominio móvil, no una versión responsiva de su sitio de escritorio).
Nota: este rediseño fue solo un proyecto personal y no tiene ninguna afiliación con Uniqlo.
Lead Sport Accelerator
A principios de 2017, el diseñador Jaro Quastenberg lanzó un sitio que realmente demuestra el poder de las interacciones visuales en Webflow: Lead Sport Accelerator.
El sitio destaca especialmente en dos de los consejos mencionados anteriormente. El primero: conocer a tus usuarios. Lead Sports Accelerator sabe que buscan atraer a creadores de productos y, para lograrlo, deben causar una gran primera impresión a través de su sitio web. El segundo es ofrecer retroalimentación. Ya sea que estés haciendo scroll, pasando el cursor o haciendo clic en un elemento, el sitio responde de inmediato a la acción del visitante, a menudo de formas dramáticas y encantadoras.
Desde el menú hasta las interacciones de scroll, este es un gran ejemplo de cómo combinar una funcionalidad optimizada con lo que algunos podrían considerar arte.
¡Genial, ya dominas lo básico!
Ahora sal ahí fuera y crea interfaces preciosas y funcionales. Y no dudes en compartir en los comentarios los mejores —y peores— ejemplos de diseño de interfaz que te hayas encontrado por la red.
Crea sitios web que dan resultados.
Diseña visualmente, publica al instante y escala de forma segura y rápida. Todo con la plataforma de marketing web con IA de Webflow.
