Necesitas un sistema de formas

Cómo usar la forma para mejorar su marca, atención directa e interacciones de soporte

Cuando los diseñadores expresan marca y jerarquía en la interfaz de usuario, a menudo recurren a sistemas familiares de color, tipografía e imágenes. Pero hay otro elemento que se pasa por alto en la caja de herramientas del diseñador: la forma.

Desde botones hasta tarjetas, campos de texto, menús y botones de acción flotante (FAB), la forma es un aspecto innegable de cada interfaz. Y ahora la sección más reciente de las pautas de diseño de materiales está completamente dedicada a las mejores prácticas para usar la forma en la interfaz de usuario. Lo que sigue es un poco de inspiración sobre cómo puede usar la forma para mejorar su marca, atención directa e interacciones de soporte.

La forma refuerza tu marca

Una de las formas más holísticas de abordar la forma en la interfaz de usuario es considerar su capacidad para expresar la marca cuando se aplica cuidadosamente en una aplicación. Una marca con una sensación más orgánica o amigable podría optar por formas redondeadas, mientras que una marca con un estilo geométrico o un deseo de expresar precisión podría optar por una forma más angular. Por ejemplo, la aplicación Shrine usa cortes agudos en toda su interfaz de usuario para reflejar la forma angular de su logotipo.

Jerarquía de unidades de forma

Las fuertes diferencias de forma se pueden usar expresamente para dirigir la atención. Por ejemplo, si una interfaz de usuario presenta formas mayormente redondeadas, la introducción de un botón afilado con forma de diamante puede llamar la atención sobre ese componente. La clásica interfaz de usuario de diseño de materiales de una FAB redonda frente a tarjetas rectangulares es otro ejemplo de cómo se puede usar la forma para enfatizar. Un uso más armonioso o sutil de la forma dentro de la jerarquía visual puede comunicar relaciones entre elementos, como tarjetas con formas similares que aparecen como pares, o formas que ayudan a distinguir superficies separadas, un enfoque utilizado por el componente de fondo.

La forma apunta a la interacción

La forma también se puede usar de forma más táctica para indicar estados específicos u oportunidades de interacción. Cambiar la esquina de una tarjeta para indicar un estado de selección puede complementar técnicas como el uso de iconos, cambiar la opacidad del contenido de la tarjeta o cambiar el tamaño de la tarjeta. Los cambios en la forma también pueden indicar sutilmente la oportunidad de interacción con una superficie. Por ejemplo, las esquinas redondeadas pueden implicar que una hoja inferior se puede tirar hacia arriba, mientras que las esquinas cuadradas pueden implicar que todo el contenido se muestra actualmente. Sin embargo, el uso de este tipo de lenguaje visual para indicar oportunidades de interacción no está bien establecido o sistematizado, por lo tanto, evite depender únicamente de la forma para comunicar el significado.

Comience a construir su sistema de formas

  1. Considera los atributos de tu marca. ¿Qué forma central encarna el ambiente y la personalidad de su marca? Use ese punto de partida para desarrollar una familia complementaria de formas. ¿Su forma central es redondeada? Intente combinar tarjetas con esquinas redondeadas con un FAB extendido con forma de píldora que llame la atención. ¿Más en ángulos? Considere cortar esquinas en botones y hojas inferiores.
  2. Piense en la jerarquía de su interfaz de usuario y cómo se puede implementar la forma para llamar la atención sobre las partes apropiadas de la pantalla.
  3. Use la forma de manera consistente y decidida en toda su aplicación, para que sus elecciones de forma desarrollen significado para sus usuarios. El uso inconsistente de la forma puede ser confuso, y el uso excesivo puede diluir la expresión de su marca. Además, asegúrese de que la forma puramente ornamental no parezca funcional o interactiva, y que la forma utilizada para comunicar el significado sea obvia e inequívoca.
  4. También pruebe su historia de forma con los usuarios. Por sí solo, la forma puede ser ambigua y puede combinarse mejor con un icono o texto para comunicar un significado explícito. En última instancia, las pruebas de usuario son la mejor manera de determinar si su uso previsto de la forma funciona y se entiende de la manera que lo desea.

Ayúdanos a diseñar el futuro.

A diferencia de los sistemas existentes, como el tipo y el color, la forma no tiene reglas bien definidas para la aplicación en la interfaz de usuario. Aproveche esta oportunidad para experimentar solo con la forma o en combinación con patrones de IU más establecidos para encontrar la forma más efectiva de comunicarse con sus usuarios.

Comparta sus experimentos de forma con nosotros @materialdesign.