Fundamentos de diseño de la idea a la interfaz

Hola, soy Majo, del equipo de Design Evangelism. Si te preguntas qué hago, me dedico a ayudar a diseñadores y desarrolladores a crear apps para Apple. Aprendí que todos conocemos esa sensación cuando una app funciona y cuando no. ¿Sentir la diferencia como usuarios? Es fácil. ¿Pero lograr esa experiencia fluida como diseñadores? Es un poco más complicado. Eso es exactamente lo que haremos hoy juntos. Te explicaré cómo pienso, qué preguntas hago y cómo manejo el desorden cuando no está del todo bien. Comenzaremos con la estructura: cómo organizar la información y definir qué es y qué hace la app. Luego la navegación: cómo diseñar para que las personas naveguen la app seguras y en control. Veremos el contenido y su organización, presentarlo con claridad y guiar la acción.

Por último, en diseño visual, veremos que el estilo puede dar personalidad y tono, favoreciendo la usabilidad. Comencemos con la estructura. Cada app se construye sobre una base que da forma a todo: cómo navegan las personas, qué destaca y cómo se transmite la experiencia. Cuando se hace bien, todo encaja. Si no, bueno, todos pasamos por eso.

Para fundamentar esto, te mostraré una app ficticia que creé. Ayuda a los usuarios a llevar un seguimiento de su colección de vinilos. Pueden ver su colección e inspirarse sobre qué escuchar. Pueden agrupar discos en cajas, agregar nuevos, registrar intercambios y guardar discos que quieran. Entonces, ¿cuál es tu primera impresión? ¿Hay algo confuso? ¿Qué funciona y qué parece extraño?

Cuando miro una app, quiero claridad. Hace que sea atractiva y me dé confianza.

Eso empieza por saber dónde estoy. Esto debería ser claro, para no dudar dónde estoy ni cómo llegué allí. La siguiente pregunta es “¿Qué puedo hacer?”. Las acciones deben ser claras y fáciles. Por último, pregunto “¿Adónde puedo ir?”. Entender los próximos pasos mantiene el ritmo y me ayuda a evitar dudas. Cuando son fáciles de responder, la app se siente atractiva y fluida. Esto suele ser señal de una base sólida. A primera vista, esta app parece bastante buena. A veces eso puede ser engañoso porque supongo que también funciona. Veamos cómo responde a las preguntas, empezando desde arriba. Espero saber dónde estoy, pero lo primero que encuentro es un menú. Esto no es ideal. Los menús pueden ser impredecibles, y lo que necesito primero es contexto. Después hay un título, pero parece más bien una marca. Se ve bien, pero no ayuda mucho. Quiero pasarlo por alto y eso me haría perder el contenido recomendado de la app, aunque parece útil.

A medida que me desplazo, encuentro álbumes, pero solo puedo explorar, y no sé dónde estoy ni qué debo hacer. En la parte inferior, se lee Records. Me responde a dónde estoy, pero ya es tarde. ¿Cuál es el resultado? La pantalla no me guió. Tuve que trabajar para entenderlo. Cuando la estructura no es clara, la gente lo siente: indecisión, confusión. Y a veces incluso se rinde. Tal vez con menos cosas, la app se sentiría más sencilla. Ese es el objetivo de la arquitectura de la información. Es organizar y priorizar la información para encontrar lo que se necesita, cuando se lo necesita. Lo primero es anotar todo lo que hace la app: funciones, flujos de trabajo y cosas interesantes. En este punto, intento no juzgar ni descartar. Luego, imagino cómo alguien podría usar la app. ¿Cuándo y dónde la usaría? ¿Cómo encaja en su rutina? ¿Para qué le ayuda y qué lo impide? Agrego estas respuestas a mi lista. Luego, elimino lo que no es esencial, cambio nombres y agrupo aspectos relacionados. Después de esto, entiendo que si no sé qué es esencial, no podré comunicarlo. Simplificar ayuda a afinar el propósito de la app. También me da una idea sobre cómo y cuándo se encuentran y usan las funciones. Veamos esto más a fondo en la navegación. Así es como la gente se mueve en la app, y debería ser más que solo toques al azar. Quiero que esté orientada y segura. Para eso, uso la arquitectura de la información para ir a las funciones, que están en la barra de pestañas para iOS. Admite la navegación entre secciones y está visible, por lo que es fácil acceder a ellas. Es importante simplificarla porque cada pestaña es una decisión más y puede hacer la app más compleja de lo que es. Hago una pausa y pregunto: ¿Qué es realmente esencial? ¿Qué merece una pestaña? ¿Un ejemplo de lo que no? Las cajas. Solo es una pantalla para agrupar discos. Así que los fusiono. No es necesario ambos. Add está aquí porque es la acción principal de la app. Pero me pregunto: ¿Es este el mejor lugar? Cuando no sé cuándo o cómo usar un componente, recurro a los Lineamientos de Interfaz Humana. Y efectivamente: las pestañas son para navegar, no realizar acciones. Entonces moveré Add dentro de Records, donde es más probable que alguien lo use. Ahora la barra de pestañas tiene tres secciones muy distintas. Como quiero hacerlo más predecible, puedo mejorar los nombres de esas pestañas. Quiero que las etiquetas e íconos den una idea de su función, para que los usuarios no duden en usarlas ni las pasen por alto por falta de claridad. Cambiaré el nombre de Swaps y Saves a etiquetas más directas. Y cambiaré sus íconos para reforzar el significado. Quiero que sean visualmente consistentes, así que en vez de diseñar los míos (lo cual es difícil), usaré SF Symbols, la biblioteca de íconos de Apple. Estos símbolos ya son familiares en cualquier plataforma de Apple, lo que hace las pestañas reconocibles. Gracias a una arquitectura simple, íconos familiares y etiquetas, el alcance y propósito son evidentes, y las pestañas más accesibles. Debido a este trabajo, las cosas se movieron, lo que hizo que el contenido quedara confuso. Así que vamos a aclararlo con una barra de herramientas. Es una buena manera de orientar a las personas en tu interfaz. Observa cómo resuelve los dos problemas que tenía al principio: dónde estoy y qué puedo hacer. Esto se debe a que la barra incluye un título con el nombre de la pantalla, en vez de un menú o una marca como antes. Establece expectativas sobre el contenido y ayuda a las personas a orientarse cuando navegan. También ofrece un lugar para acciones específicas, en lugar de la barra de pestañas. Como hay poco espacio, incluiré lo esencial con SF Symbols para que cada acción sea reconocible. Ahora puedo responder claramente: ¿Dónde estoy, qué puedo hacer y qué es posible? Preparar a las personas para una experiencia segura desde el principio. Todo gracias al trabajo en la estructura y al uso intencionado de componentes. Mirando hacia atrás, veo que no lo hice bien la primera vez. Pero eso es parte del proceso. Cada iteración hace que el diseño sea más acogedor, confiable y fácil de usar. Ahora que sentamos las bases, veamos qué hay realmente en la pantalla. El contenido debe organizarse para guiar a lo más importante y que esperas encontrar primero. Hasta ahora, me enfoqué en las partes correctas de la app, pero ¿y el contenido? Se siente desordenado porque hay dos tipos de contenido mezclados: Groups y Records. Así que intentaré algo sencillo: dividir ambas secciones. Es un buen comienzo, hay un título que aclara el contenido, pero a menos que me desplace, no puedo ver qué más hay. ¿Qué pasa si ahora muestro unos grupos y dejo que la gente descubra más cuando avance? Esto se llama divulgación progresiva. Se trata de mostrar solo lo necesario, lo suficiente para comenzar y, luego, revelar más. Lo verás cuando la interfaz comience simple y luego ofrezca más detalles u opciones avanzadas. El resto del contenido no está ausente, sino oculto en un control desplegable junto al título, listo para cuando se necesite. Cuando se abra esa pantalla, quiero que el contenido esté organizado igual. En conexión a la pantalla anterior, como si se estuviera expandiendo. Como expliqué, cada pantalla debe orientar, así que no olvidemos la barra de herramientas. Tiene acciones de la pantalla y el botón Atrás, por lo que es fácil ver cómo llegaste aquí y cómo moverte. En mi diseño, había elementos decorativos o sin propósito, lo que dificultaba descubrir las funciones importantes. Ahora quiero tener un diseño más inteligente, encontrando la mejor forma de mostrar el contenido. Analicemos algunos ejemplos. La divulgación progresiva fue el primer paso, pero el diseño de la cuadrícula no parece bien. Ocupa mucho espacio para dos artículos. Y no maneja bien textos más largos, haciendo que el contenido no sea claro. Vamos a trabajar en eso. Una lista funciona mucho mejor: es flexible y familiar, y permite ver la información rápidamente. También ocupa menos espacio, lo que significa más elementos en la pantalla a la vez. No lo diseñé desde cero, aprendí de componentes que diseñar para priorizar la función realmente vale la pena. Uso la plantilla de Recursos de diseño de Apple, que fue fácil de adaptar a mi contenido. El diseño empieza a ser más intencional y admite más funciones, como una app real. Vamos a ver la última sección. Cuando me desplazo, encuentro todos los discos cargados en la app. Mi objetivo era que todo estuviera disponible para que la gente explore. Pero mientras más opciones haya, aumenta el esfuerzo para procesarlas. Me preocupa que, en vez de navegar, la gente se abrume y abandone la app. Antes de mostrar una gran cantidad de contenido, necesitaba organizarlo. Agrupar por temas, como en la arquitectura de la información, me permitió concentrarme en lo que importa. Hay algunos temas que las apps usan para mantenerse organizadas. Agrupar contenidos por tiempo es una de las formas más frecuentes: piensa en lo útil que es encontrar tus archivos recientes o continuar viendo una serie. Agrupar según la estación y los eventos actuales también hace la experiencia más viva y relevante. Agrupar por progreso permite retomar un trabajo donde lo dejaste, como borradores o una clase en curso. Es una buena forma de que la app sea receptiva a la vida porque rara vez terminas todo de una sola vez. Agrupar por patrones consiste en mostrar elementos relacionados. Mostrar patrones transforma una consulta rápida en una exploración, al mostrar conexiones inesperadas. Estas ideas de agrupación no se limitan a un solo tipo de app. Aunque el contenido no sea muy visual o cambie poco, reducen la sobrecarga y hacen que la app anticipe lo que necesitas. Sé que definitivamente los usaré. Para mostrar muchas imágenes, como necesito, es mejor usar una colección. Es ideal para mostrar grupos como fotos, videos o productos que se puedan desplazar dentro y fuera de la pantalla. Me encanta lo dinámico que se siente. Para eso, mantengo un espaciado uniforme y evito tener mucho texto. Creé colecciones con las ideas de antes. Aquí, por tiempo: con discos ideales para el verano. Por progreso: con conjuntos completos o discografías, y por patrones: como estilo o género. Cuando el contenido está organizado y diseñado con componentes familiares, las personas encuentran lo que importa, creando un espacio intuitivo que invita. Cuando una app se siente bien, casi siempre es gracias al diseño visual. Comunica la personalidad de la app y determina la experiencia de las personas. Es combinar jerarquía, tipografía, imágenes y color con intención, sin perder la función. Para llevar el diseño visual más allá, debo ver qué funciona y qué hay que mejorar. Presto atención a cómo se combinan el tipo, el color y las imágenes. Cuando entrecierro los ojos, veo la primera colección, porque es visualmente pesada y colorida. Me pierdo la mitad del contenido y la sensación de ubicación. Lo que falta aquí es la jerarquía visual. Se trata de guiar la mirada, para notar elementos según importancia. Voy a reforzar esta sugerencia como ancla visual, resaltando lo más importante con tamaño o contraste y así guiar la atención. Y funciona: visualmente cumple su función. ¿Pero resistirá? ¿Qué pasa si el texto se alarga, el idioma cambia o alguien usa otro tamaño de texto? Necesito diseñar con más flexibilidad, especialmente en lo que respecta a la letra. Aquí es donde los estilos de texto del sistema son útiles. Permiten crear jerarquía y buena legibilidad en cualquier pantalla. Ofrecen un estilo coherente, para expresar niveles de importancia sin ajustar tamaños ni diseñar desde cero. Mantendré el diseño, moviendo la portada al fondo. Eso crea un espacio constante, y los tres estilos ofrecen variaciones que guían la mirada. También admite el Tamaño de letra dinámico, que permite elegir un tamaño de texto, haciendo la app inclusiva y fácil. Pero cuando el texto se superpone a una imagen, la legibilidad es un problema, especialmente en imágenes recargadas. En esos casos, la claridad debe ser lo primero.

Una solución fácil es agregar un fondo detrás del texto, como un degradado o desenfoque. Mejora la legibilidad y agrega cierta dimensión sin alterar el diseño. Quiero mostrarte cómo las imágenes y el color transmiten la personalidad de la app. Empezando por la lista. Creo que lo simplifiqué demasiado y se pierde entre los componentes. Entonces agregaré imágenes para cada grupo y para que sea más fácil de escanear. Pero no todas las imágenes funcionan. Son muy diferentes en color y estilo. Lo que realmente necesito es un estilo visual cohesivo. Para lograrlo, elijo una paleta de colores y establezco reglas simples para utilizarla. Esto me dará una estética consistente y evocará el sentimiento adecuado. Elijo cuatro colores, algunas formas retro y, luego, los combino. Para los grupos que muestran un título, usé una fuente audaz, para que se vean diferentes. Me gusta mucho cómo está quedando, estas decisiones refuerzan la personalidad y dan coherencia. Como estoy trabajando con color, pienso: ¿En qué otro lugar de la app puedo usarlo? Quizás fondos, texto, íconos, pero estos ya tienen color, solo que no lo elijo. No es negro ni púrpura, tienen nombres como etiqueta o secondarySystemBackground. Son colores semánticos y reciben su nombre por su propósito, no su apariencia, son dinámicos. Cambian según la configuración, los entornos y modos, como oscuro y claro. Puedo usar colores de acento, en botones, controles, o mostrar lo seleccionado. Pero no debe interferir con los cambios dinámicos, la legibilidad o la comodidad. Entonces para cualquier cosa dinámica, esta es mi paleta de colores del sistema. Son parte de los Recursos de diseño de Apple y brindan opciones que se adaptan a la apariencia preferida de las personas, sin trabajo adicional. Es una buena manera de ver cuándo confiar en el sistema y dónde agregar personalidad. Puede ser tentador tratar estos elementos como pequeños proyectos y lo son, necesitan reflexión y atención. Pero el verdadero valor surge cuando se integran y dan sentido al conjunto de la interfaz. El diseño con el que comencé ya no existe. Simplifiqué su estructura y navegación, presenté su contenido con significado y en un espacio que todos pueden usar y disfrutar. Cada elemento se basa en nuestras decisiones, desde el primer toque hasta el último desplazamiento. El diseño nunca se termina y no existe una sola respuesta correcta. Hoy exploramos las bases y aún puedes potenciar tu app con tipografía, escritura UX y animación. Hay infinitas posibilidades. Si quieres continuar, consulta estas sesiones y conoce el nuevo sistema de diseño. Hay mucho por explorar y aprender, así que sigue con curiosidad y creando. ¡Me emociona ver tus ideas crecer!