Diseñar una gran experiencia en móviles exige anticipar interacciones y jerarquizar acciones. Aquí se explica, con el ejemplo de Twitter, cómo articular un flujo de búsqueda, definir acciones primarias y secundarias, y usar recursos como elementos fijos, subnavegación con tabs y comportamientos durante el scroll para guiar al usuario con claridad.
¿Cómo se diseña un flujo de búsqueda sin fricciones?
Un producto no es una sola pantalla: es un conjunto de vistas y estados conectados para llevar al usuario de A a B con la menor fricción posible. En Twitter, la acción “buscar” desencadena varios pasos y vistas que deben estar diseñados de antemano.
¿Qué estados componen el flujo de búsqueda?
- Acceder a la sección de búsqueda y enfocar el campo search.
- Escribir la consulta e ingresar en el estado de autocompletar.
- Ver resultados y navegar por categorías: top, latest, people, photos.
- Aplicar filtros dentro de resultados según necesidad.
- Mantener la continuidad del flujo de búsqueda más allá del primer listado.
¿Cómo se extiende la experiencia tras ver resultados?
- Cambiar el criterio: relevancia (top) o tiempo (latest).
- Explorar perfiles desde resultados sin salir del flujo.
- Acceder a secciones relacionadas del perfil como tweets and replies.
- Tomar acciones contextuales: me gusta, retuit, responder.
¿De qué forma se priorizan acciones primarias y secundarias?
La interfaz debe comunicar qué importa en cada momento. Definir acciones primarias y secundarias reduce la carga cognitiva y evita que todo compita al mismo nivel.
¿Qué distingue acciones primarias de secundarias?
- Priorizar lo crítico con más color, tamaño o posición fija.
- Dejar visibles las acciones frecuentes y “esconder” las de baja frecuencia en un menú de tres puntitos.
- Ajustar acciones según el estado: al seguir a un perfil, puede desaparecer la opción de activar notificaciones si ya no aplica.
- Usar componentes expandibles tipo acordeón para opciones menos urgentes.
¿Qué patrones comunican relevancia?
- Botón fijo para crear un nuevo tuit abajo a la derecha: acción central para Twitter.
- Jerarquía de niveles de lectura: primero contenido, luego acciones inmediatas, y por último opciones adicionales en el menú contextual.
- Consistencia visual para que el usuario “piense menos” y actúe más.
¿Qué recursos de interfaz ayudan durante el scroll?
El scroll puede detonar comportamientos que orientan al usuario y preservan el contexto. Twitter lo aprovecha para presentar información clave en el momento justo.
¿Qué se mantiene fijo al hacer scroll?
- Encabezado emergente con el nombre del perfil (ej.: Aerolab) y cantidad de tuits.
- Subnavegación anclada con tabs cuando se avanza en la lectura.
- Accesos permanentes a acciones esenciales para no perderlas de vista.
¿Cómo conviven múltiples acciones en una pantalla?
- Priorizar: ¿qué quieres que haga el usuario aquí y ahora?.
- Distribuir acciones por relevancia y frecuencia de uso.
- Situar acciones infrecuentes en el menú de tres puntos para no saturar.
- Mantener claro el objetivo de la sección y el próximo paso del usuario.
¿Te gustaría compartir cómo priorizas acciones y estados en tus propias pantallas?
