Órbita 1: Diseñar para que funcione Introducción

Introducción

El diseño de interfaces no consiste en hacer algo "bonito", sino en facilitar que el usuario logre sus objetivos de manera clara, rápida y sin fricciones. Esta órbita se centra en el diseño funcional: en pensar primero en tareas, flujos y estructura antes de aplicar cualquier decisión visual.

La interfaz es el puente entre el usuario y el sistema. Si ese puente está mal diseñado, el usuario se pierde, se frustra o abandona. Por eso, antes de decidir colores o tipografías, debemos entender para qué sirve la interfaz, qué necesita el usuario, y cómo debe estar organizada la información.

1. UX primero, UI después: pensar en funcionalidad

En el mundo del diseño web y de interfaces, es muy fácil dejarse llevar por lo visual. Muchas veces empezamos un proyecto pensando en el logo, los colores corporativos o los estilos tipográficos. Pero esta no es la forma más eficaz de construir una interfaz que realmente funcione.

El punto de partida siempre debe ser la funcionalidad: entender al usuario, identificar qué tareas necesita realizar, y diseñar una estructura que le permita lograr su objetivo sin frustración. Esto es lo que diferencia una interfaz atractiva pero inútil de una interfaz efectiva.

¿Qué es la UX y en qué se diferencia de la UI?

UX (User Experience) es la experiencia completa que tiene una persona al interactuar con una app, web o sistema. Abarca desde la lógica de navegación hasta cómo se siente al usarla: ¿es fácil?, ¿consigue lo que busca?, ¿se siente frustrado o satisfecho?
UI (User Interface) es el aspecto visual de la interfaz: botones, colores, iconos, tipografía, animaciones... Es la parte “visible”, pero no debe determinar el funcionamiento, sino estar al servicio del mismo.

Pensar primero en la UX significa diseñar desde las tareas, no desde los colores. Significa analizar qué necesita hacer el usuario y en qué orden, antes de decidir cómo se verá cada pantalla.

Las leyes de UX: principios para un diseño funcional

Los profesionales del diseño de experiencia de usuario trabajan apoyándose en principios basados en la psicología y el comportamiento humano. Estas leyes de UX nos ayudan a diseñar con más criterio. Aquí tienes algunas fundamentales:

1. Ley de Hick

Cuantas más opciones tiene una persona, más tarda en decidir.

Por eso es mejor simplificar. No muestres 12 botones cuando el usuario solo necesita 3. Un menú corto es más efectivo que uno con 15 categorías.

2. Ley de Fitts

El tiempo que se tarda en alcanzar un objetivo depende de su tamaño y cercanía.

En dispositivos móviles, los botones más usados deben ser grandes y estar al alcance del pulgar. No escondas funciones clave en esquinas lejanas.

3. Ley de Jakob

Las personas esperan que tu web/app funcione como las que ya conocen.

Esto no es malo: aprovecha los patrones familiares. Si un icono de carrito siempre está arriba a la derecha, no lo pongas en el pie de página sin motivo.

4. Ley de Tesler (Ley de la complejidad)

Cada sistema tiene una complejidad mínima. Si no la gestiona el diseñador, la asume el usuario.

Simplificar no es eliminar opciones, sino organizar bien la complejidad: agrupando, mostrando por pasos o usando asistentes.

5. Ley de Miller

El cerebro humano sólo puede procesar entre 5 y 9 elementos a la vez.

Si en una pantalla hay más de 9 cosas “gritando”, el usuario se bloquea. Usa jerarquía, espacios, agrupaciones y orden lógico.

Ejemplo práctico: app de comida a domicilio

Imaginemos que vamos a diseñar una aplicación de comida a domicilio similar a Glovo o Just Eat. En este tipo de apps, el objetivo del usuario es claro: pedir comida de forma rápida, cómoda y segura. Pero ¿cómo se traduce eso en pantallas funcionales? Para hacerlo bien, necesitamos pensar en términos de experiencia de usuario y responder a una serie de preguntas clave.

¿Qué es lo primero que necesita hacer el usuario al entrar?

Lo más probable es que quiera ver qué restaurantes tiene disponibles cerca. Por tanto, lo primero debería ser introducir su dirección o permitir la geolocalización. Si esa información ya está guardada, puede pasar directamente al listado de restaurantes.

Funcionalidad recomendada: una pantalla inicial con buscador de dirección o botón de “Usar mi ubicación”.

¿Debe buscar un restaurante, o iniciar sesión?

No debería ser obligatorio iniciar sesión para navegar y explorar opciones. Obligar al registro en el primer paso genera fricción. Es más recomendable dejarlo para el momento del pedido.

Funcionalidad recomendada: navegación libre por el catálogo; la sesión solo se solicita al confirmar el pedido.

¿Cómo se muestra la información del producto?

Cuando un usuario entra en un restaurante, lo que necesita ver es el menú clasificado, con nombre, descripción, precio, imagen opcional y un botón para añadir. No conviene mostrar demasiada información en bloque. Los platos deben estar organizados en categorías (entrantes, principales, postres...).

Funcionalidad recomendada: menú estructurado con listas claras, elementos clicables y opción de añadir al carrito directamente.

¿Cómo se simplifica el proceso de pago?

El pago debe requerir el menor número posible de pasos. Idealmente, se resume en una pantalla clara donde se pueda revisar el pedido, añadir dirección si no estaba guardada, elegir método de pago y confirmar.

Funcionalidad recomendada: pantalla de revisión con totales, dirección editable, opciones de pago guardadas o rápidas.

¿Dónde puede consultar su pedido actual?

El usuario debe tener acceso rápido al estado de su pedido. Lo más habitual es incluir un icono fijo de carrito (en la parte superior) que lleve directamente a la pantalla del pedido.

Funcionalidad recomendada: icono de carrito visible en todo momento, con número de productos y acceso directo al resumen.

Este tipo de análisis funcional es lo que permite construir una experiencia de usuario fluida, centrada en las tareas reales del usuario. El orden de los pasos, la visibilidad de la información y la simplicidad de las acciones son aspectos que definen una buena UX.

Una vez esté claro qué pantallas necesita el usuario, qué datos debe ver y cómo fluye la navegación entre ellas… entonces nos preocuparemos por los colores y la tipografía.

En resumen, el diseño funcional es la base de todo buen diseño de interfaz. Una buena experiencia de usuario es lo que hace que una app sea útil, clara y agradable. La interfaz visual debe servir a esa experiencia, no sustituirla ni taparla.

Enlaces de referencia

Actividad práctica en clase

Título: “Analizar y repensar la funcionalidad”

Divide al alumnado en pequeños grupos.
Cada grupo elegirá una app popular (puede ser Instagram, Amazon, Glovo, Duolingo...).
Deben responder por escrito:
¿Cuál es el objetivo principal del usuario?
¿Cuáles son los pasos que debe dar para lograrlo?
¿Qué elementos visuales lo ayudan o lo entorpecen?
¿Qué decisión de diseño visual no tiene sentido desde el punto de vista funcional?
Después, cada grupo debe proponer una mejora funcional (no estética) que haría más fácil o clara la experiencia del usuario.

Esta actividad puede completarse con una puesta en común o una presentación breve por grupo.