Estamos viviendo en un mundo material y yo soy una chica material
O cómo le dimos a la aplicación de Android Trello AMaterial Design Makeover.
En este momento probablemente ya has leído, usado y nos has dado información útil sobre nuestra última versión de la aplicación Android de Trello. Ahora es el momento de que te demos una pequeña idea de cómo trajimos al mundo esta hermosa aplicación.
¿Qué es la materia y por qué la abrazamos?
Las directrices de Material de Google se crearon para desarrollar una experiencia coherente en todos los dispositivos y plataformas. Es cualquier cosa menos «diseño plano». Las pautas se basan en la realidad – usando papel, tinta y sombras – sin caer en el reino del skeuomorfismo. También enfatizan el uso de interacciones y animaciones mágicas, inteligentes e intuitivas. La interacción con una aplicación que utiliza los principios de Material es más tangible e innata, pero tiene un toque de deleite y capricho.
Así que, en agosto, el equipo estaba discutiendo una hoja de ruta para la aplicación de Android. Sabíamos que la próxima versión de Android, Lollipop, iba a ser lanzada al público en unos meses y queríamos estar preparados para ello. Nuestra aplicación se sentía obsoleta. Hasta ahora, las nuevas características estaban atornilladas en lugar de ser masajeadas con los dedos hábiles de un diseñador. Esto parecía una oportunidad perfecta para reimaginar Trello en el móvil. Decidimos que debíamos rediseñar la aplicación usando Material, mientras abordábamos los puntos débiles existentes, para un producto más fácil de usar.
¿Cómo hicimos para que la aplicación se sintiera como Trello?
Éramos muy conscientes de la posibilidad de perder la experiencia de Trello si actualizábamos nuestro estilo visual al de Material. También queríamos mantener las cosas unificadas a través de Android, iOS y la web tanto como fuera posible. La estructura de la aplicación y el flujo de usuarios debían ser tomados en consideración antes de saltar al diseño y desarrollo. Utilizamos los principios de Material como guía en lugar de las estrictas reglas que deben seguirse al pie de la letra.
Nuestros principales objetivos para la aplicación eran:
- Ser reconocido como Trello
- Conservar la funcionalidad básica que nuestros usuarios actuales conocen y aman
- Será más fácil de descifrar para las personas que son nuevas en Trello
- Ser el punto de partida para diseñar una experiencia más consistente a través de todas las plataformas
No todo lo que se describe en las directrices de Material encaja con la forma de trabajar de Trello:
-
Las cartas en una lista son un no-no
- Pero, así es como funciona trello
-
El Botón de Acción Flotante (FAB) no siempre se ajusta a ciertas situaciones
- Tener uno en una tabla sería demasiado confuso, aunque realmente lo intentamos
-
Los colores proporcionados en la guía de materiales, aunque vibrantes y juguetones, no encajaban con nuestra marca
- Nos ceñimos a los colores especificados en nuestra guía de marca. Aunque no parezca gran cosa, el hecho de permanecer en la marca ayudó a enfatizar el Trello-ness . Esto también ayudará con la consistencia en el futuro cuando se trabaje en otras plataformas como iOS.
Muy bien, entonces, ¿qué cambió?
TODO… ¡Pero terminarlo no sería una gran entrada en un blog! Vamos a profundizar más.
La estructura general se ha… materializado.
Trello para Android: antes y después.
Nos apegamos muy de cerca a los principios de la materia, la métrica, las líneas clave, la estructura y la tipografía. Estos por sí solos tuvieron un gran impacto en la claridad y limpieza general de la aplicación, y como son cambios universales, no entraré en detalles en cada sección.
Los usuarios llegan más rápido a la funcionalidad central de la aplicación. El diseño se basa en una cuadrícula de línea base de 8dp. La tipografía ha sido limpiada, así como nuestro uso del color. Decir que tenemos cincuenta (ugh, lo siento) muchos tonos de gris (y azul) en toda la aplicación sería quedarse corto.
Adiós, cajón de navegación. ¡Hola pantalla de inicio!
Pantalla principal: antes y después.
Después de mucha deliberación entre los diseñadores y los devs, nos deshicimos del cajón de navegación. El cajón era una gran parte de nuestra aplicación, y fue difícil de desechar. Cada reunión de progreso tocaba el tema, cada uno tenía sus propias opiniones, y hasta que el equipo de diseño llegó a un flujo convincente, hubo dudas en cuanto a la implementación.
Nuestro uso de InVision nos ayudó a experimentar el flujo de la aplicación sin atar los desarrollos. Fue invaluable. También establecimos un sistema en el que todo el mundo puede expresar sus preocupaciones, pero nuestro dictador estuvo de acuerdo en que el diseñador, «The Decider», tomaría todo en consideración y tomaría una decisión final.
Así que, en lugar de tener un icono de hamburguesa disponible para abrir un cajón que no ofrece mucho espacio para ver una lista de tableros, ahora tenemos al usuario navegando hacia y desde la pantalla de inicio. La pantalla de inicio ya existía, pero era redundante cuando la tenías y el cajón de navegación abierto al mismo tiempo.
La pantalla de inicio se llena con todos los tableros del usuario, listados por prioridad: Starred, My Boards, y los tableros de la organización. Es un mejor uso del espacio, proporciona una jerarquía más clara, y es una forma visualmente más amigable de encontrar el tablero que uno necesita. Los tableros con estrellas, los tableros más frecuentemente abiertos por un usuario, atienden convenientemente la sugerencia de Material de usar «imágenes audaces, gráficas e intencionales». También hacen uso de los títulos de héroes, incluso en los teléfonos, debido al espacio extra, proporcionando más señales de jerarquía.
Sabíamos que habíamos ganado con esta nueva solución cuando uno de los devs – uno de nuestros principales oponentes contra la pérdida del cajón de navegación, de hecho – mencionó que no había perdido el cajón al usar la aplicación!
Se siente bien, hombre.
Aquí hay algo que hay que tener en cuenta: un componente clave para cualquier rediseño/creación de una aplicación es que las personas que trabajan en ella también deben utilizar el producto. Si no fuéramos ávidos trellistas, no habríamos pensado o debatido tanto sobre lo que estábamos trabajando. Si no utilizáramos realmente todas las versiones beta que se nos ocurrieron (no sólo las pruebas para los detalles), estaríamos mal informados al tomar decisiones y no tendríamos ni idea de qué problemas se han resuelto o creado.
Barra de aplicaciones
Menú de la barra de aplicaciones.
La barra de aplicaciones, «un tipo especial de barra de herramientas que se utiliza para la marca, la navegación, la búsqueda y las acciones», ha sufrido algunos cambios, además de perder el icono de la hamburguesa.
Nuestro logo ya no está incluido en la barra de aplicaciones. Si ya estás dentro y usando la aplicación, confiamos en que recordarás cómo se llama. Además, si estuviera allí, no tendríamos espacio para tu avatar y tu nombre, que actúa como un menú para cambiar la pantalla de inicio de mostrar tus tableros a los tableros de tu organización.
La búsqueda y las notificaciones han sido actualizadas para que se ajusten a las directrices de Material, así como al menú de desbordamiento. Sin embargo, hay una cosa que falta en el desbordamiento, y es la opción de «crear un tablero». Lo hemos convertido en un FAB!
Creación de la Junta
Toca el FAB para crear un nuevo tablero.
Anteriormente, se podían crear nuevos tableros a través del cajón de navegación, lo que significaba que era fácil de descartar; y el menú de desbordamiento, que estaba oculto. Ninguno de los dos tenía sentido para una función central de la aplicación. Esto era especialmente doloroso para una primera experiencia de usuario y necesitaba ser arreglado. Ahora, el FAB está siempre visible en la parte inferior derecha de la pantalla de inicio para que el usuario pueda crear nuevos tableros en un momento dado.
Tablas
Vista del tablero: antes y después.
Hicimos uso de la elevación, dando a la vista del tablero alguna jerarquía y dimensión, usando el eje z, empezando desde abajo donde tenemos el tablero, luego construyendo hacia arriba a las listas, luego a las cartas.
La barra de aplicaciones dentro de un tablero es un poco diferente a la de la pantalla de inicio. Junto con la eliminación del menú de hamburguesas y el logo de Trello, ya no tenemos un girador que esconda los miembros o las tarjetas y listas archivadas. Debido a este maravilloso desarrollo, ahora tenemos espacio para que el nombre de la pizarra respire.
¡Todos los colores!
Si una tabla usa una imagen de fondo, la barra de aplicación sacará un color de ella, personalizando aún más la tabla. El icono de notificación ha sido eliminado – las actualizaciones de las actividades del tablero están en nuestro nuevo menú de cajones. El filtrado se ha movido a la barra de aplicaciones para ayudar a los usuarios a encontrar fácilmente la tarjeta que están buscando. Por último, el icono de desbordamiento activa un cajón con elementos de menú para las acciones del tablero.
Nueva adición: Cajón de cartón 1
Se puede acceder al cajón de la pizarra tocando el icono de desbordamiento (las elipses de la derecha) en la barra de aplicaciones. El cajón se desliza hacia fuera desde la derecha, sobre todo, proporcionando un acceso más fácil a las diferentes acciones que una persona puede realizar en el tablero en el que se encuentra actualmente.
Nuestra interfaz anterior requería que la gente cazara y picoteara por las acciones que querían hacer. Por ejemplo, era casi imposible encontrar elementos como objetos archivados o miembros, especialmente para aquellos que eran nuevos en la aplicación. Necesitábamos una solución que diera a un usuario un acceso fácil a cada acción que pudiera realizar en un tablero sin perder tiempo.
Jugamos con la idea de tener una barra de herramientas para los miembros, la actividad y los objetos archivados en la parte inferior de la pantalla; pero eso habría requerido preciosos bienes raíces, dejando muy poco espacio para el contenido real, y causando demasiadas idas y venidas entre las pantallas. También creaba un problema en el que se daba importancia a elementos que podían no importar a algunos usuarios.
Finalmente, llegamos a la solución de tener todos los elementos accionables en un lugar de fácil acceso. Tenía más sentido. Proporcionaba mayor facilidad de uso y perdía menos tiempo.
Artículos archivados: antes y después.
El cajón también incluye artículos archivados, que antes se escondían detrás del girador de la barra de aplicaciones. Ahora, uno puede ver qué cartas y listas han sido archivadas para el tablero en cuestión y fácilmente desarchivarlas si sienten la necesidad de volver a visitarlas.
Entendemos que tener una interfaz de cajón más robusta donde debería haber un menú rompe un patrón en Android, pero creemos que funciona como una solución fuerte y seguimos adelante con ella. El cajón sirve como una forma directa de acceder a los elementos que no son lo suficientemente importantes como para estar al frente y al centro, pero que aún así merecen más que un flujo de usuarios enrevesado para acceder a un diálogo o a una hoja inferior.
Listas
Listas: antes y después.
Las listas ahora se ven más presentables con cabeceras y pies de página distinguibles que también juegan con nuestro uso de la elevación. Este cambio da el aspecto de tarjetas que se deslizan bajo los pedazos de papel en lugar de desaparecer misteriosamente bajo el título de una lista al desplazarse. Sólo ese pequeño cambio limpió el aspecto de las listas (y posteriormente, de los tableros) diez veces.
Tarjetas
Cartas: antes y después.
Las tarjetas tienen el mismo contenido que antes, así que no hay que preocuparse cuando se trata de buscar información rápidamente. De hecho, ¡debería haber alguna celebración! Las tarjetas son más legibles, y se sienten más a gusto con otras aplicaciones Android de Material, debido a nuestro uso de las pautas de diseño de tarjetas de Material.
Los avatares circulares están de moda, pero nuestro uso de ellos es más que una simple moda. Cambiar nuestros avatares de cuadrados a círculos suaviza el aspecto de la aplicación, que puede tender a ser rectángulos encima de rectángulos. Los círculos también ayudan a diferenciar los avatares de las miniaturas de los tableros, que son cuadrados redondeados.
Las imágenes de la portada están al ras de la parte superior y los lados de una tarjeta para algunas imágenes deliciosamente limpias, a todo lo ancho. Debido a esto, las tarjetas tienen un aspecto más uniforme sin importar el verdadero tamaño de una imagen. ¡Hurra por no más espacios en blanco raros! Este ha sido un punto de discusión dentro de Trello, especialmente para la aplicación web. Con toda la información que contiene una tarjeta, especialmente las etiquetas, es difícil priorizar lo que debe mostrarse primero, o lo que recibe más énfasis.
Hablando de etiquetas… Las amamos y las usamos casi obsesivamente. Pero, ¿qué sentido tiene tener tantas etiquetas maravillosamente coloridas si no puedes verlas? Exactamente. Por eso decidimos moverlas debajo de esas hermosas imágenes de la portada para darles espacio para crecer. Las etiquetas más grandes sirven para reunir información de un vistazo, especialmente para aquellos de nosotros con vista menguante. El tamaño y el movimiento más grande también está en preparación para las Etiquetas Ilimitadas, una característica que ya está disponible en la web, y que llegará muy pronto a Android. (¡Lo prometemos!)
Devolución de la tarjeta
Tarjeta de vuelta: antes y después.
Hemos estado experimentando con la interfaz de la tarjeta de vuelta durante más de un año – mucho antes y durante la introducción del Diseño de Materiales. El respaldo de la tarjeta es la interfaz que ves cuando tocas una tarjeta. Nuestras dos principales preocupaciones son siempre:
- Una tarjeta puede contener mucha o muy poca información. ¿Cómo equilibramos el diseño para que sea bonito, funcional y rápido de usar para las cantidades variables de datos que una persona puede introducir?
- ¿Cómo añadimos tipos de datos complejos como miembros, etiquetas, fechas de vencimiento, etc., que tienen acciones de datos dentro de cada uno?
La devolución de la tarjeta siempre ha sido un gran desafío de diseño para nosotros y estamos constantemente buscando formas de mejorarla. Las nuevas directrices nos ofrecieron otra oportunidad para hacer algunas preguntas difíciles adicionales:
- ¿Qué pasaría si no hubiera diálogos y el usuario pudiera añadir contenido en línea o a través de hojas inferiores?
- ¿Y si el FAB estaba pegado a la cabecera? ¿Necesitamos el FAB?
- ¿Y si tuviéramos una barra de herramientas inferior para añadir rápidamente el contenido?. (Ver esto en InVision.)
Ver cómo funcionaría una barra de herramientas en InVision
La lista continúa, pero llegamos a la conclusión de que necesitábamos validar estos experimentos a fondo. Decidimos mantener las cosas simples y limpiar los principales puntos de dolor de la tarjeta para esta liberación.
El reverso de la tarjeta ha tenido un FAB incluso antes de que se introdujera como parte de las Directrices de Diseño de Materiales. No hemos cambiado mucho la funcionalidad del FAB, pero hemos pasado por muchas iteraciones sobre la mejor colocación. Optamos por mantener la misma posición, actualizamos la interfaz de usuario y añadimos etiquetas para identificar fácilmente los iconos.
¡Toca el FAB para añadir tu tarjeta!
Como el resto de la aplicación, reajustamos completamente las métricas de la tarjeta para alinearlas con los patrones de Diseño Material. Actualizamos los iconos, el espaciado, la alineación y la obsesión por el pulido de la interfaz de usuario para asegurarnos de que puedas encontrar lo que buscas y procesar la información rápidamente.
Hemos limpiado todas las t
