Product Craft Bible
Search UX
Inicio Navegación y Búsqueda Search UX
Navegación y Búsqueda

Search UX

4 reglas investigacion 2026
61

Search UX

4 reglas
543

Autocomplete: 5-8 sugerencias inmediatas

El dropdown de autocomplete debe mostrar 5-8 resultados · menos no justifica el componente, mas abruma. Resaltar la parte que coincide con lo escrito (bold en la coincidencia), mostrar metadatos contextuales (categoria, precio, fecha) y responder en menos de 150ms. Por encima de 300ms el usuario asume que no hay resultados.

investigacion 2026
Preferir
ani|
Animacion
Seccion 08
Animacion de entrada
Regla 98
Animacion compartida (shared)
Regla 489
<150ms de respuesta · bold en coincidencia · icono por tipo · numero de regla
Evitar
ani|
Animacion
Animacion de entrada
Animacion de salida
Animacion compartida
Sin bold en "ani", sin tipo de resultado, sin numero · todos identicos visualmente
544

Busquedas recientes: estado cero util

Al activar el campo de busqueda sin texto, mostrar busquedas recientes del usuario y tendencias populares. Un campo vacio y un dropdown en blanco es una oportunidad perdida. Las busquedas recientes reducen la friccion de retorno; las tendencias orientan al usuario nuevo.

investigacion 2026
Preferir
Buscar...
Recientes
tipografia variable
color tokens dark mode
Populares
grid composition
state machines
Evitar
Buscar...
Escribe para buscar
545

Zero results: nunca pantalla vacia

Cero resultados no es un error sino una oportunidad de orientar. Siempre incluir: confirmacion de la busqueda realizada (para verificar que no hay typo), sugerencias de terminos alternativos, resultados de categorias relacionadas y un CTA para ampliar el criterio. La pantalla vacia es un callejon sin salida.

investigacion 2026
Preferir
haptic feedbck
0 resultados para "haptic feedbck"
Quizas quisiste decir: haptic feedback
Temas relacionados
Gestos nativos Feedback sensorial A11y mobile
Busquedas populares
Evitar
haptic feedbck
No hay resultados para "haptic feedbck"
Sin deteccion de typo, sin alternativas, sin salida
546

Filtros integrados como chips

Los filtros como chips debajo del campo de busqueda son el patron mas eficiente: visibles, tocables, y con estado activo inmediatamente visible. Un filtro activo debe diferenciarse visualmente y poder removerse sin salir de la vista. Maximo 5-6 chips antes de necesitar un panel expandido.

investigacion 2026
Preferir
Buscar reglas...
Animacion Color Tipografia Mobile Formularios
Mostrando 34 reglas · filtro: Animacion