Usar Mobbin para Patrones de UI

¿Qué es Mobbin y por qué es importante?

Cuando empiezas a diseñar una nueva pantalla — por ejemplo, una pantalla de inicio de sesión o una página de configuración — ¿cuál es lo primero que haces? Si eres como la mayoría de los diseñadores, abres otras aplicaciones y ves qué hicieron ellos. El problema es que esto lleva mucho tiempo — tienes que descargar las apps, registrarte y hacer capturas de pantalla de cada pantalla.

Mobbin ha resuelto este problema por completo. Es una plataforma con miles de pantallas de las aplicaciones más famosas del mundo — organizadas, categorizadas y fáciles de buscar. En lugar de pasar una hora buscando, puedes encontrar lo que necesitas en dos minutos.

Mobbin tiene más de 300.000 pantallas de más de 1.000 aplicaciones y sitios web, actualizadas de forma continua. Esto significa que no estás viendo diseños antiguos — estás viendo las últimas versiones de las aplicaciones.

Pero aclaremos algo importante: Mobbin no es para copiar diseños. Es para entender patrones, aprender de las mejores prácticas y aplicarlas a tu manera en tu proyecto.

¿Cómo funciona Mobbin?

Cuando abres Mobbin (mobbin.com), encontrarás una interfaz sencilla que te permite buscar de varias formas:

1. Búsqueda por palabra clave
Puedes escribir cualquier cosa en el buscador: "login", "onboarding", "checkout", "settings", "profile". Mobbin te devolverá todas las pantallas que contienen ese patrón de diferentes aplicaciones.

2. Filtrar por aplicación
¿Quieres ver los diseños de Spotify en particular? ¿O Netflix? ¿O Airbnb? Puedes seleccionar la aplicación y explorar todas sus pantallas.

3. Filtrar por tipo
Puedes seleccionar el tipo de pantalla: Onboarding, Authentication, Navigation, Search, Settings, Profile, y muchos más.

4. Filtrar por elemento
¿Buscas específicamente Bottom Navigation? ¿O una Search Bar? ¿O un Modal? Puedes filtrar por el elemento que necesitas.

5. iOS, Android y Web
Mobbin cubre las tres plataformas. Puedes ver la misma aplicación en iOS y Android y comparar las diferencias.

6. Colecciones
Puedes crear grupos y guardar en ellos las pantallas que te gustaron. Por ejemplo, una colección para patrones de Checkout y otra para patrones de Onboarding.

Patrones de UI fundamentales que encontrarás

Patrones de autenticación (Authentication)

Uno de los tipos de pantallas más buscados. Encontrarás diferentes patrones:

Social Login First: Muchas aplicaciones muestran primero los botones de Google, Apple y Facebook, con email/contraseña debajo. Esto se debe a que el Social Login reduce la fricción y aumenta la conversión.

Phone Number First: Aplicaciones como Uber y WhatsApp comienzan con el número de teléfono. Es más fácil para el usuario y no requiere recordar una contraseña.

Progressive Registration: En lugar de un formulario largo, la información se recopila en pasos. El primer paso podría ser solo el correo electrónico, con los detalles recogidos gradualmente.

Patrones de Onboarding

Las primeras pantallas que ves al abrir una nueva aplicación:

Carousel/Swipe: El patrón más famoso — 3 a 5 pantallas que presentan las características principales con imágenes, un título y una descripción breve.

Interactive Onboarding: En lugar de leer, haces. Duolingo por ejemplo te hace comenzar una pequeña lección como parte del onboarding.

Personalización: La aplicación te hace preguntas para personalizar la experiencia. Spotify pregunta sobre los artistas que te gustan, Pinterest pregunta sobre tus intereses.

Patrones de búsqueda (Search)

Search with Suggestions: Cuando empiezas a escribir, aparecen sugerencias. Esto ahorra tiempo y reduce los errores.

Search with Filters: Después de buscar, aparecen filtros que te permiten refinar los resultados. Airbnb tiene la mejor experiencia de filtros.

Visual Search: En lugar de escribir, fotografías. Pinterest y Google Lens admiten búsqueda por imagen.

Patrones de navegación (Navigation)

Tab Bar: La navegación principal en la parte inferior de la pantalla en las aplicaciones. Normalmente 4 a 5 tabs.

Hamburger Menu: El menú lateral. Menos común hoy en día porque oculta la navegación.

Bottom Sheet: Una pantalla que sube desde abajo. Apple Maps y Google Maps la usan extensamente.

Flujo de trabajo práctico con Mobbin

Hagamos un ejemplo práctico. Imagina que estás diseñando una app de entrega de comida y quieres diseñar la pantalla de Checkout:

Paso 1: Búsqueda amplia
Abre Mobbin y busca "checkout" u "order summary". Encontrarás docenas de resultados de diferentes aplicaciones. Navega rápidamente y guarda lo que llame tu atención en una colección.

Paso 2: Análisis enfocado
Abre las pantallas que guardaste y empieza a analizarlas:

• ¿Qué información se muestra? (resumen, precio, tiempo de entrega, dirección)
• ¿Cuál es el orden? ¿Qué información va primero y cuál va al final?
• ¿Qué elementos son comunes en la mayoría de las aplicaciones?
• ¿Qué cosas innovadoras hizo alguna aplicación en particular?

Paso 3: Identificar los patrones comunes
Notarás que la mayoría de las aplicaciones de entrega coinciden en ciertas cosas:

• Resumen del pedido en la parte superior
• Dirección de entrega
• Método de pago
• Resumen del precio (subtotal + entrega + impuestos = total)
• Un botón "Place Order" grande y claro en la parte inferior

Paso 4: Aplicarlo en el diseño
Usa los patrones comunes como base y añade el toque especial de tu proyecto encima. No copies una pantalla completa — toma los principios y aplícalos con tu estilo.

Usar Mobbin para comparar y aprender

Uno de los mejores usos de Mobbin es comparar diferentes aplicaciones que resuelven el mismo problema:

Ejemplo: Comparar la pantalla de búsqueda

• Spotify: búsqueda simple con sugerencias basadas en el historial de escucha + browse by categories
• YouTube: búsqueda con sugerencias + voice search + trending searches
• Amazon: búsqueda con auto-complete + búsqueda por código de barras + búsqueda por imagen

Cuando comparas, entiendes:

• Cuáles son los patrones comunes (todos tienen auto-complete)
• Qué decisiones difirieron y por qué (Amazon añadió búsqueda por código de barras por la naturaleza del producto)
• Qué puedes aplicar en tu proyecto

Consejos para aprovechar al máximo Mobbin

1. No busques para copiar
El objetivo no es copiar una pantalla completa. El objetivo es entender por qué esa aplicación tomó esa decisión. Cuando entiendes el "por qué", puedes aplicar el mismo principio de una manera adecuada para tu proyecto.

2. Presta atención a los pequeños detalles
No mires solo la pantalla en su conjunto. Enfócate en los detalles:

• ¿Qué microcopy se usa?
• ¿Cuál es el espaciado entre los elementos?
• ¿Qué colores tienen los botones CTA?
• ¿Cómo se muestran los estados de error?

3. Documenta tus descubrimientos
Cuando encuentres un buen patrón o una idea inteligente, documéntala. Crea un documento con capturas de pantalla y tus notas junto a ellas. Esto será una referencia para ti en el futuro.

4. Mira apps de diferentes culturas
Mobbin tiene aplicaciones de todo el mundo. Las aplicaciones chinas por ejemplo (WeChat, Alipay) tienen patrones completamente diferentes a las aplicaciones americanas. Esta diversidad amplía tu perspectiva.

5. Sigue las actualizaciones
Mobbin actualiza las aplicaciones de forma continua. Cuando una aplicación importante hace un rediseño, lo encontrarás en Mobbin. Sigue las actualizaciones para estar siempre al día.

Herramientas complementarias a Mobbin

Mobbin no es la única herramienta. Hay otras herramientas que la complementan:

Screenlane: Similar a Mobbin pero se enfoca más en los flows — es decir, no solo pantallas individuales, sino la secuencia completa (por ejemplo, todos los pasos del proceso de compra del principio al final).

Page Flows: Muestra los user flows completos con vídeos. Puedes ver las interacciones y animaciones, no solo las pantallas estáticas.

Dribbble y Behance: No muestran aplicaciones reales, sino conceptos e ideas creativas. Útiles para inspiración, pero ten en cuenta que muchos diseños en ellos no son prácticos.

Apple Human Interface Guidelines y Material Design: Las referencias oficiales de Apple y Google. Debes conocerlas bien para diseñar aplicaciones que sigan las directrices de la plataforma.

Construir una biblioteca de patrones personal

Una de las mejores cosas que puedes hacer como diseñador es construir una biblioteca de patrones personal. Y empieza desde Mobbin:

Paso 1: Identifica los patrones fundamentales
Empieza con los patrones que necesitas en cada proyecto:

• Authentication (Login, Signup, Forgot Password)
• Navigation (Tab Bar, Side Menu, Top Bar)
• Search (Search Bar, Results, Filters)
• Forms (Input Fields, Dropdowns, Date Pickers)
• Feedback (Success, Error, Loading, Empty States)
• Settings (Profile, Preferences, Notifications)

Paso 2: Recopila ejemplos para cada patrón
Desde Mobbin, recopila 5-10 ejemplos para cada patrón. Intenta diversificar — toma ejemplos de diferentes aplicaciones e industrias diferentes.

Paso 3: Analiza y extrae los principios
Para cada grupo, escribe notas:

• ¿Qué tienen en común todos los ejemplos?
• ¿Cuáles son las diferencias y por qué?
• ¿Qué mejores prácticas se repiten?

Paso 4: Construye tus propios templates
Basándote en tu análisis, construye templates en Figma que puedas usar como punto de partida en cualquier nuevo proyecto.

Errores comunes al usar Mobbin

1. Copiar el diseño por completo
El mayor error. Cada aplicación tiene un contexto diferente — audiencia diferente, objetivos diferentes, restricciones diferentes. Lo que funciona para Uber no necesariamente funciona para tu app.

2. Dejarse influenciar solo por el diseño más reciente
No todo rediseño es mejor que el anterior. A veces una aplicación hace un rediseño, fracasa y vuelve al diseño antiguo. Que tu estándar sea la efectividad, no la novedad.

3. Ignorar el contexto
Cuando ves una pantalla bonita, pregúntate: ¿por qué es así? Puede ser así por razones que no son obvias — como restricciones técnicas, requisitos legales o resultados de A/B testing.

4. Pasar demasiado tiempo buscando
Mobbin es una herramienta de inspiración y referencia, no una excusa para procrastinar. Establece un tiempo concreto para la búsqueda (por ejemplo, 30 minutos) y luego empieza a diseñar.

5. No documentar
Si viste algo bonito y seguiste adelante, lo olvidarás. Siempre documenta — guarda en una colección en Mobbin o haz una captura de pantalla con notas.

Resumen

Mobbin es una herramienta esencial para cualquier diseñador de UI/UX. Ahorra mucho tiempo en investigación e inspiración y te permite aprender de las mejores aplicaciones del mundo. Pero lo más importante es que la uses correctamente — como referencia e inspiración, no como fuente para copiar.

Empieza abriendo Mobbin y buscando el tipo de pantalla que estás diseñando actualmente. Mira 10 ejemplos, analízalos y extrae los principios comunes. Luego vuelve a Figma y diseña tu pantalla basándote en lo que aprendiste. Con el tiempo, tu ojo se entrenará para notar los patrones y los pequeños detalles que marcan la diferencia entre un diseño ordinario y uno excelente.