Diseño de apps de tareas: rediseño de la pantalla Hoy, antes y después
Una pantalla de app de tareas de principiante con el progreso como fracción con dos decimales, cinco filtros de colores, una fecha roja en cada tarea y un botón flotante sobre la última, y la misma pantalla corregida. Cada cambio lado a lado y el archivo de Figma gratis.
Una app de tareas tiene que sentirse como una ayuda. El primer borrador de abajo sabe exactamente qué vence hoy, y lo dice con una fecha roja en cada línea, chips de colores para cada prioridad y un botón aparcado encima de la última tarea. Suena a alarma. La corrección conserva cada tarea y cada dato y baja la alarma al nivel de una lista tranquila.
La pantalla completa, antes y después
Borrador de principiante
Corregido
A la izquierda, cada tarea lleva una descripción, hasta tres etiquetas, una fecha roja y un montón de caras. A la derecha, cada tarea es una línea y media, y la lista es lo primero en lo que se posa el ojo.
Cuenta lo que el ojo tiene que procesar. El borrador tiene un recuadro de progreso teñido, cinco chips de filtro en cinco colores y, en cada tarea, una descripción, etiquetas de colores, una fecha roja y a menudo un grupo de avatares. La pantalla corregida tiene un anillo, un selector de tres partes y una lista.
| Borrador de principiante | Corregido | |
|---|---|---|
| Progreso | "1/5 tareas completadas (20.00%)" y una barra | un anillo al 20% y "1 de 5 hechas" |
| Filtros | 5 chips en 5 colores | 3 palabras en un selector |
| Etiquetas de color por tarea | hasta 3 | 0 |
| Fechas en rojo | todas las tareas | ninguna |
| Prioridad mostrada con | un filtro de chips de color y una etiqueta | un pequeño punto |
| Añadir tarea | un botón flotante de 56 px sobre la lista | una fila al final de la lista |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px a la izquierda, 12 px a la derecha | 20 px a ambos lados |
| Tamaños de texto | de 8 a 20 px | de 11 a 28 pt |
Corrección 1: el progreso como un anillo y una frase
Antes
Después
Una fracción, un porcentaje con dos decimales, una barra y una arenga, frente a un anillo y una frase.
El borrador dice lo mismo tres veces: "1/5", "20.00%" y una barra llena en una quinta parte. Los dos decimales delatan: "20.00%" es un número que imprimió un programa, no uno que una persona necesite. Y la línea de debajo es pequeña, gris y termina en dos signos de exclamación.
La corrección elige una sola imagen, un anillo al 20%, y una frase con los dos datos que importan: una de cinco hecha, cuatro por hacer. La frase termina con la parte útil, "siguiente a las 4:00 pm", que le dice al usuario qué hacer a continuación en lugar de animarlo con porras.
El anillo está dibujado en el rojo de marca, el mismo rojo de la fila de añadir y de la pestaña activa.
Corrección 2: filtrar por cuándo, no por color
Antes
Después
Cinco chips de prioridad y estado en cinco colores, frente a tres palabras en un selector.
Los chips del borrador mezclan dos preguntas. Alta, Media y Baja preguntan cuán importante es una tarea, Hecha pregunta en qué estado está y Todas (5) pide todo. Los cinco chips usan cinco colores con dos radios de esquina, así que ni las formas se ponen de acuerdo.
Para usarlos, el usuario primero debe aprender que el rojo significa urgente, el naranja intermedio y el verde bajo, y
La corrección hace una sola pregunta, la que la gente le hace a una lista de tareas: cuándo. Todas, Hoy y Próximas son tres palabras en un único selector, que se lee como un control con un estado seleccionado, y coincide con las pestañas de abajo: la pestaña Hoy, la pestaña Próximas. La prioridad no desapareció. Se mudó a las filas, como un pequeño punto (corrección 3).
Corrección 3: una tarea es una línea y media
Antes
Después
Título, descripción, etiquetas, una línea roja de vencimiento y avatares en cada tarea, frente a un título, una hora y una lista.
Cada tarea del borrador puede llevar cinco tipos de información: una descripción, hasta tres etiquetas de colores, un "Vence: 24/10/2026 5:00 PM" en rojo, un grupo de avatares y una casilla. "¡¡Urgente!!" aparece como etiqueta en una tarea que ya está en rojo en la línea de vencimiento. Todas las tareas vencen hoy y todas las fechas están en rojo, así que el rojo deja de significar atraso y pasa a significar "hay una tarea".
La corrección da a cada tarea un título y una línea gris: la hora y la lista a la que pertenece. "5:00 pm, Trabajo". La fecha desapareció porque el encabezado ya dice qué día es.
Las etiquetas se colapsaron en el nombre de la lista. La prioridad se convirtió en un pequeño punto a la derecha, rojo para la primera tarea y naranja para la segunda, y sin punto donde no hay nada que señalar. La tarea terminada se queda en la lista, tachada y etiquetada como "Hecha", con un check relleno en el rojo de marca.
Las tareas viven en una sola tarjeta blanca con un divisor fino entre ellas, así que la lista se lee como una sola cosa.
Corrección 4: "Añadir tarea" al final de la lista
Antes
Después
Un botón flotante que tapa la última tarea, frente a una fila al final de la lista.
Un botón flotante sigue al usuario y tapa lo que hay debajo. En el borrador está encima de la última tarea, cortando los avatares a la derecha de la fila, y es el objeto más pesado de la pantalla: 56 px, rojo saturado, con sombra.
La corrección hace lo que hace una lista: termina con aquello a lo que puedes añadir. "Añadir tarea" está en una fila justo donde acaba la última tarea, con un pequeño más y el mismo rojo de las demás acciones. No hay sombra y nada queda tapado. Quien recorre una lista ya está mirando su final, así que la acción de añadir se encuentra donde el ojo se detiene.
Las correcciones menores
- Cuatro pestañas, no cinco. Hoy, Próximas, Explorar y Perfil reemplazan a Hoy, Próximas, Proyectos, Buscar y Perfil.
- Un solo margen. El borrador usaba 14 px a la izquierda y 12 px a la derecha. La corrección usa 20 px a ambos lados.
- Un encabezado de verdad. "Mis tareas" con una fecha completa pasó a ser un pequeño "Sábado, 24 oct" sobre un gran "Hoy", y el avatar se convirtió en una campana.
- Un solo rojo. El rojo de marca,
#E5484D, cubre el anillo, el icono de añadir y la pestaña activa. El texto rojo usa un#D92D20más profundo, para que siga siendo legible. - Una escala tipográfica de verdad. El texto pasó de 8 a 20 px a los tamaños de iOS de 11 a 28 pt.
Audita tu propia app de tareas
| Pregunta | Por qué importa |
|---|---|
| ¿Aparece un número en dos formas, como 1/5 y 20%? | Elige una imagen y una frase |
| ¿Los filtros hacen una sola pregunta? | Mezclar importancia y estado obliga a descifrar |
| ¿Se usa el rojo para algo más que acción y urgencia? | Si todo es rojo, nada va tarde |
| ¿Se puede leer una tarea en una línea y media? | Las listas se escanean, no se leen |
| ¿El botón de añadir tapa contenido? | Un botón flotante oculta el último elemento |
| ¿Aparece la fecha en las filas cuando la pantalla ya es de un solo día? | Repetir el día es ruido |
Consigue el archivo de Figma
El archivo gratuito tiene ambas pantallas como componentes, cada corrección como un par de antes y después, las variables de color y los estilos de texto de iOS.
Archivo de Figma gratis
Pantalla Hoy de una app de tareas, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo en tus borradores.
FAQ
¿Qué debe mostrar la pantalla Hoy de una app de tareas?
El progreso de hoy, una forma de alternar entre Todas, Hoy y Próximas, la lista de tareas con sus horas y una acción Añadir tarea. Las descripciones y las fechas largas pueden esperar al detalle de la tarea.
¿Cómo debe mostrar el progreso una app de tareas?
Como un anillo o una barra más una frase, como "1 de 5 hechas". No imprimas el mismo número como fracción, porcentaje y barra. Si muestras un porcentaje, redondéalo.
¿Cómo debe mostrar la prioridad una app de tareas?
Con un pequeño punto, o una bandera, en las filas que lo necesitan, no con etiquetas de colores en cada tarea. La prioridad también puede ser un filtro o un orden, pero no tiene por qué ser el principal.
¿Debe una app de tareas usar un botón flotante para añadir?
Un botón flotante es habitual, pero en una pantalla de lista puede tapar el último elemento. Una fila "Añadir tarea" al final de la lista no tapa nada y está donde el ojo se detiene.
¿Cómo deben ser los filtros de una app de tareas?
Las preguntas que la gente hace: todas, hoy y próximas. Mantén una pregunta por control y no mezcles un filtro de prioridad con uno de estado en la misma fila.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. Las tareas, las personas y el cliente son inventados para el ejercicio. 1 de 5 tareas hechas es el 20%.
- Fotos de Pexels por pessoas uem, Iphanyi Ezemenari y Ajan Yogi.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- Apple Human Interface Guidelines: Color, sobre no depender solo del color para transmitir significado.
- 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
