Diseño de apps de salud: la pantalla de inicio de una app de citas médicas, antes y después
Una app de citas médicas que abre con un banner de descuento, y la misma pantalla corregida para que la próxima cita vaya primero. Cada cambio lado a lado, la razón de cada uno y el archivo gratis de Figma.
La gente abre una app de salud por una razón por encima de todas: su próxima cita. El primer borrador de abajo abre con un banner de descuento, y la cita queda en una franja delgada cerca del final. La corrección pone la cita primero y elimina todo lo que competía con ella.
Sobrevive cada función. Se puede seguir buscando, explorando especialidades, reservando con un médico y escribiendo a la clínica.
La pantalla completa, antes y después
Borrador junior
Corregido
A la izquierda, lo primero y más grande es una oferta: un banner turquesa con la foto de un médico, un botón y un enlace. Aquello a lo que la persona vino, su cita con la Dra. Sarah Lee el martes, es el bloque más pequeño de la pantalla y queda bajo otras dos secciones.
A la derecha, esa misma cita es el bloque más grande, con el médico, la fecha, la hora y un botón para iniciar la videollamada. La oferta desapareció de la pantalla de inicio, porque un descuento de primera visita es para quienes aún no han reservado, y esta persona ya lo hizo.
| Borrador junior | Corregido | |
|---|---|---|
| Primer bloque de la pantalla | Banner de descuento, 149 px de alto | Próxima cita, 174 px de alto |
| Margen lateral | 14 izquierda, 12 derecha | 20 en cada fila |
| Tamaños de texto | 8 a 18 px | 11 a 28 pt, la escala tipográfica de iOS |
| Colores de categorías | 8 | 1, el turquesa de marca |
| Elementos en la tarjeta del médico | 9 | 3 líneas y un chevron |
| Iconos del encabezado | 3 | 1, más un avatar |
| Pestañas | 5 | 4 |
Corrección 1: pon primero la próxima cita
Antes
Después
"¡Reserva tu primera cita ahora!" con 20 % de descuento en la primera consulta por video, un botón Reservar ahora, un enlace Saber más y puntos de carrusel, frente a una tarjeta de Próxima cita con la Dra. Sarah Lee, cardióloga, un botón de videollamada, y la fecha y la hora en una sola fila.
Una pantalla de inicio debe responder "¿qué tengo que hacer ahora?" antes que cualquier otra cosa. Para un paciente que regresa, eso es la cita: con quién, cuándo y cómo conectarse. En el borrador esa respuesta está al fondo del todo, en una línea de texto pequeño con un enlace "Detalles".
La corrección convierte la cita en el héroe. La cara y el nombre del médico dicen quién es, la fecha y la hora van en una fila, y el icono de video es un solo toque para entrar. Un banner hay que descartarlo, una tarjeta con botón se usa.
La fecha también se hizo más corta y fácil de leer. "Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM" pasó a ser "Mar, 28 oct" y "10:30 AM", porque el año no está en duda y la hora de fin rara vez hace falta para decidir si presentarse.
Regla para reutilizar: la parte superior de una pantalla de inicio pertenece a aquello por lo que la gente vuelve, no a lo que tú quieres vender.
Corrección 2: cuatro especialidades, un color
Antes
Después
Ocho iconos redondos en ocho colores, Cardiología, Dentista, Oftalmología, Neumología, Neurología, Ortopedia, Pediatría y Más, frente a cuatro fichas blancas con iconos turquesa: Cardio, Dental, Ojos y Más.
Ocho colores en ocho iconos le dan al ojo ocho lugares donde detenerse y ninguna razón para detenerse en ninguno. El color es una señal, y aquí no dice nada: el corazón rojo no es más urgente que el ojo morado.
La corrección conserva un solo color, el turquesa de marca, para que el color vuelva a significar algo. Las etiquetas son más cortas ("Cardio", "Dental", "Ojos") para que cada una quepa en una línea con un tamaño legible. Y solo se muestran cuatro, con una ficha "Más", porque quien necesite una especialidad menos común usará la búsqueda, que está justo encima.
Corrección 3: una tarjeta de médico que es una fila
Antes
Después
Una tarjeta con foto, nombre, "Cardiólogo | City Heart Clinic", cinco estrellas, 4,8 (120 reseñas), "Tarifa: $50", una píldora Disponible hoy, un botón Reservar ahora y un corazón, con la siguiente tarjeta cortada, frente a dos filas con una foto pequeña, un nombre, "Cardiólogo · 1,2 km" y una valoración de 4,9 (212).
La tarjeta del borrador lleva nueve datos y dos acciones. Cada uno es razonable por separado. Juntos convierten la tarjeta en un formulario que el lector tiene que escanear línea por línea, y el botón Reservar ahora en cada tarjeta transforma una pantalla de exploración en un puesto de ventas.
La corrección conserva tres líneas: el nombre, luego la especialidad y la distancia, que decide si realmente puedes ir, y después una valoración con su número de reseñas. La tarifa, la disponibilidad y el botón de reserva pasan a la página propia del médico, donde hay espacio para explicarlos. Un chevron dice "toca para abrir".
Las filas además son verticales, no un carrusel lateral. Una tarjeta cortada en el borde es una pista decente de que hay más, pero una lista permite comparar dos médicos de un vistazo, que es la tarea real.
Corrección 4: un solo icono en el encabezado
Antes
Después
"¡Hola, Leo!" con "¿Cómo te sientes hoy?" e iconos de búsqueda, campana y chat, frente a un avatar verde con iniciales, "Buenos días, Leo Martins" y una campana con un punto rojo.
El encabezado del borrador tiene tres iconos, y dos de ellos están repetidos. La campana del encabezado y la pestaña Notificaciones abren el mismo lugar, y lo mismo pasa con el icono de chat y la pestaña Chat. Cuando dos puertas llevan a la misma habitación, la gente se pregunta cuál es la de verdad.
El icono de búsqueda hace las veces de un campo de búsqueda. La corrección muestra el campo mismo, una fila debajo de la cita, así que no hay nada que abrir. La campana se queda porque un recordatorio o un mensaje de la clínica es lo único que merece un punto rojo.
Las correcciones menores
- Cuatro pestañas, no cinco. Notificaciones salió de la barra de pestañas porque la campana ya lo cubre. "Chat" pasó a ser "Mensajes", la palabra que está al otro lado de la mayoría de las bandejas de entrada.
- Un avatar con iniciales. Un círculo turquesa sólido con LM te dice de quién es la cuenta, igual que en cualquier otra app.
- Un solo margen. El borrador usa 14 a la izquierda y 12 a la derecha. La corrección usa 20 a ambos lados de cada fila, con espacios de 8, 12, 14 y 20.
- Saludo sencillo. "¡Hola, Leo! ¿Cómo te sientes hoy?" hacía una pregunta que la pantalla no podía responder. "Buenos días, Leo Martins" no.
- Sin carrusel de ofertas. El banner tenía tres puntos y un segundo enlace junto al botón. La corrección quita la oferta de esta pantalla y deja una acción clara en el héroe.
Audita tu propia app de salud
| Pregunta | Por qué importa |
|---|---|
| ¿Es la próxima cita lo primero en la pantalla? | Es la razón por la que la gente vuelve |
| ¿Se puede entrar a una videollamada con un toque? | La consulta es el producto |
| ¿Significa algo cada color? | Ocho colores no significan nada |
| ¿Muestra la fila del médico quién, qué, a qué distancia y qué tan bueno? | Así elige la gente |
| ¿Algún icono del encabezado repite una pestaña? | Las puertas duplicadas bajan la confianza |
| ¿Se muestra la oferta solo a quienes no han reservado? | Un paciente que vuelve no necesita un descuento de primera visita |
Consigue el archivo de Figma
El archivo gratis tiene las dos pantallas, cada pieza corregida como componente de antes y después, las variables de color de la UI, los estilos de texto de iOS y un léame con los créditos de las fotos.
Archivo gratis de Figma
Pantalla de inicio de citas médicas, antes y después
Las dos pantallas y cada pieza corregida como componentes de Figma. Gratis, solo lectura, duplícalo a tus borradores.
FAQ
¿Qué debe mostrar primero la pantalla de inicio de una app de citas médicas?
La próxima cita, con el médico, la fecha, la hora y una forma de unirse a una videollamada. La búsqueda y las especialidades van después.
¿Cuántas especialidades debe mostrar una app de salud en la pantalla de inicio?
Cuatro más o menos, y una ficha Más. Quien busca algo menos común usa la búsqueda, así que una cuadrícula larga de ocho o más iconos de colores solo añade ruido.
¿Qué debe mostrar la tarjeta de un médico en una app de salud?
El nombre, la especialidad, a qué distancia está el médico y una valoración con el número de reseñas. Las tarifas, la disponibilidad y el botón de reserva van en la página del médico.
¿Debe una app de salud usar un banner promocional en la pantalla de inicio?
No por encima de una cita próxima. Una oferta de primera visita sirve a quienes aún no han reservado, y los pacientes que regresan vinieron por otra cosa.
¿Cuántas pestañas necesita una app de salud?
Cuatro bastan: Inicio, Citas, Mensajes y Perfil. Las notificaciones pueden vivir en el encabezado como una campana con un punto.
Fuentes
- Las dos pantallas son nuestras, diseñadas y medidas en Figma.
- Fotos de Unsplash por Jonathan Borba, Bruno Rodrigues y vaibhav vivian, bajo la Licencia de Unsplash.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
