Cómo funciona el flujo de búsqueda en Twitter

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?