Diseño UX
La respuesta no es falta de imaginación, sino psicología evolutiva. El cerebro humano odia gastar energía innecesaria.
Lo familiar transmite seguridad; lo radicalmente distinto genera fricción.
La magia no está en romper las reglas, sino en saber cuáles doblar sin romper la experiencia del usuario.
Convenciones en diseño UX
Hay normas no escritas que el cerebro reconoce como «puertos seguros». Si las cambias, asegúrate de que el beneficio supere la confusión.
Estas son algunas convencionalidades que debemos tener en cuenta al diseñar para web:
El menú hamburguesa
Arriba a la derecha. ¡Como manda la tradición! Estamos acostumbrados a buscar esas 3 rayitas en la esquina superior derecha de nuestros móviles.
Aunque debatido en escritorio, en móvil es el estándar universal. Cambiar su posición (arriba a la derecha) suele penalizar la tasa de conversión.
El logo como ancla
Situado arriba a la izquierda, es el botón de «pánico» o retorno a casa. No es solo marca, es navegación básica.
- Es algo que los usuarios han interiorizado.
- Facilita la navegación y ayuda a los usuarios a orientarse.
- Es un punto de referencia visual que refuerza la identidad de marca.
Navegación y arquitectura de la información
Los menús deben ser fáciles de entender y navegar. Las categorías deben ser lógicas y estar organizadas de manera intuitiva.
Utiliza categorías amplias y evita la jerarquía excesiva en menús principales.
Enlaces subrayados: aunque el diseño moderno a menudo elimina los subrayados, siguen siendo un indicador visual fuerte de que un texto es un enlace.
En contextos donde la claridad es primordial, como en contenido extenso, mantener los subrayados puede ser beneficioso.
Breadcrums (migas de pan): las migas de pan ayudan a los usuarios a entender su ubicación dentro de un sitio web y facilitan la navegación hacia atrás.
Ejemplo: "Inicio > Categoría > Subcategoría > Página actual".
Formularios
En los formularios, la creatividad suele ser el enemigo de la conversión. La regla de oro es la eficiencia cognitiva:
- Etiquetas claras y concisas: No intentes ser poético. «Nombre» es mejor que «Dinos cómo te llamas».
- Evita las preguntas ambiguas o confusas.
- Campos obligatorios marcados: un asterisco rojo o un mensaje claro: «campo obligatorio»
- Feedback en tiempo real: Si hay un error, el usuario debe saberlo mientras escribe, no después de dar clic en enviar.
- Botón de envío visible y fácil de usar:
- «Enviar», «Contactar», «Suscribirse»… ¡que se entienda!
- Un color llamativo y un color adecuado ayudan.
- El botón de acción: Debe ser un verbo. «Enviar» es genérico; «Quiero mi presupuesto» es una intención.
Iconos
Un icono debe explicar, no decorar. Si tienes que pensar más de dos segundos qué significa un icono, ese icono ha fallado.
- Utiliza iconos reconocibles. ¡No inventes iconos raros!
- Texto descriptivo opcional: si hay dudas utiliza un pequeño texto debajo del icono.
Buscar
Carrito
Correo
Usuario
Repetir
Actualizar
Comentarios
Envío
Ubicación
Factura
Imagen
Tienda
Si el icono es mínimamente ambiguo, añade una etiqueta de texto. La claridad siempre gana a la estética minimalista.
Pie de página
En el pie de página o footer de un sitio web es común encontrar lo siguiente:
- Información de contacto: Dirección, teléfono, correo electrónico… ¡Que te encuentren fácilmente!
- Enlaces útiles: Política de privacidad, términos y condiciones, mapa del sitio… Todo lo que no cabe en el menú principal.
- Redes sociales: Iconos que enlazan a tus perfiles.
Estas convenciones no son casuales. Surgen de miles de interacciones repetidas que condicionan el comportamiento del usuario.
Entonces... ¿nunca se deben romper las reglas?
Romper una convención por rebeldía es de amateurs; hacerlo por estrategia es de expertos. Puedes ser disruptivo si:
- Tu audiencia es nativa digital: Un público joven o técnico tolera mejor las interfaces experimentales.
- El producto es el mensaje: Si vendes arte o diseño de vanguardia, tu web debe ser la prueba de tu capacidad creativa.
- No bloqueas el «Happy Path»: Puedes innovar en las animaciones o el scroll, siempre que el usuario pueda seguir comprando o contactando sin fricción.
Rompe si...
- Tu marca se define por lo disruptivo.
- Tienes un público digitalmente maduro.
- La interacción inusual refuerza tu historia (no la distrae).
- Lo haces conscientemente, no por “ser diferente”.
Ejemplo
- Tesla puede poner un menú minimalista casi invisible.
- Apple puede esconder funciones tras gestos.
Porque sus públicos esperan eso.
Pero si eres una clínica dental, y escondes tu formulario bajo un icono misterioso, no eres disruptivo: eres confuso.
Convenciones que aún funcionan (y las que no)
Convenciones que son oro
- Logo arriba a la izquierda (reconocimiento inmediato de marca).
- CTA visible en la primera pantalla.
- Scroll vertical largo (el usuario ya está habituado).
- Contraste fuerte para guiar la atención.
- Microinteracciones con feedback visual (clicks, hovers, animaciones sutiles).
Convenciones en fase de mutación
- Sliders automáticos: obsoletos. El usuario no espera. Prefiere control manual.
- Hero con texto estático: reemplazado por mensajes dinámicos o microvídeos de 3–5 segundos.
- Footer recargado: pasa a ser un “microcentro de confianza” (contacto, sello, política clara).
- Menú hamburguesa: efectivo en móvil, pero cada vez menos intuitivo en escritorio.
👉 Tendencia: menús híbridos o contextuales que aparecen según scroll o intención.
Convenciones obsoletas
- Botones 3D o con degradados innecesarios.
- Formularios infinitos.
- Tipografías ultra finas con fondos blancos.
- Stock photos que no representan a nadie real.
El diseño evoluciona con la cultura visual. Y la cultura visual, actualmente, se define por autenticidad y eficiencia emocional.
La psicología detrás del píxel
La web perfecta no existe, pero el cerebro humano sigue patrones predecibles:
- Ley de la proximidad: elementos cercanos se perciben como un grupo.
- Ley de similitud: repetición visual = coherencia = confianza.
- Efecto de primacía y recencia: lo primero y lo último se recuerdan más. Pon lo más importante en el hero y en el cierre.
👉 Empieza con impacto, termina con propósito. - Carga cognitiva: demasiada información = parálisis. Menos opciones = Decisiones más rápidas. El diseño debe eliminar el ruido, no aumentarlo.
El usuario no lee. Escanea. Por eso el diseño debe hablarle sin palabras.
En Bocau, sabemos que la innovación no es un concurso de originalidad, sino de empatía. Tu usuario no recordará el código de color de tu botón, pero sí recordará lo fácil que fue encontrar lo que buscaba.
Porque la verdadera innovación no está en romper todas las reglas, sino en saber cuáles romper sin perder la confianza del usuario.
¿Sientes que tu web es una copia más del montón?
Hablemos sobre cómo darle identidad propia sin sacrificar la usabilidad.
Contactar
