¿Redondeado o cuadrado? Esa es la pregunta.¿Necesito cambiar los botones puntiagudos habituales por botones redondeados? ¿Cuáles son mejores para la usabilidad? ¿Cómo tomamos tales decisiones?
Precisamente estos problemas los encontrará cuando esté inmerso en el UX asociado con botones redondos en las aplicaciones. Ya sabemos que el tamaño, el contraste y la sombra proyectada pueden hacer que el botón sea notable, pero encontrar el equilibrio adecuado para los elementos de la acción principal y secundaria no siempre es fácil. La redondez en este caso puede venir al rescate.
Variables utilizadas para mejorar la visibilidad. ¿El redondeo aumenta el reconocimiento?
Los elementos redondeados son más fáciles de leer. Es más fácil contar la cantidad de cartas seguidas si sus esquinas no están afiladas.
Los elementos redondeados son más fáciles de reconocer que los afilados.Esto se debe a que una mejor redondez distinguible ayuda a nuestros ojos a distinguir rápidamente entre las propias tarjetas. Por el contrario, las tarjetas con esquinas afiladas se ven unificadas y uniformes, lo que dificulta su reconocimiento.
En el diseño de cuadrícula, el redondeo funciona aún mejor.
Por ejemplo, en un tablero de TurboTax, el ojo se aferra a elementos con esquinas redondeadas en la sección superior mejor que la sección central, donde las tarjetas tienen esquinas afiladas.
Panel de Turbotax¿Necesito usar botones completamente redondeados?
Los botones completamente redondeados se ven muy bien en las interfaces donde hay una cantidad adecuada de espacio libre. Un ejemplo de una disposición muy exitosa de tales botones es Spotify, donde el llamado a la acción se siente bien.
Botones redondeados en SpotifyEn términos generales, en este ejemplo en particular, dado que trabajar con Spotify siempre se reduce a la reproducción (pistas, podcasts, listas de reproducción), la acción principal se define de manera única. Y los botones de reproducción completamente redondeados son muy distinguibles de los álbumes y listas de reproducción de la interfaz de usuario, lo que a su vez alienta al usuario a hacer clic en "Reproducir".
"Jugar" en SpotifyCuando los botones completamente redondeados NO funcionan?
En algunos casos, la redondez puede afectar la usabilidad, por ejemplo:
1. Cuando los botones redondeados parecen etiquetas
Si distinguir un botón de una etiqueta (filtro) no es fácil, llevará a la gente a la confusión: "¿Hago clic en un botón o en un filtro?"
¿Qué es: botones o filtros? Para nada obvio.2. Los botones redondeados no pueden mostrar opciones anidadas
Los botones completamente redondeados generalmente usan el icono de "flecha" para indicar la presencia de opciones anidadas. Pero el área de clic (o carretilla) para mostrar opciones está limitada por el tamaño del icono (generalmente 16x16 o 24x24 px).
¿Será conveniente ver las opciones en cada caso?
Si usamos solo botones ligeramente redondeados, podemos ocultar la flecha para que el botón se comporte como un botón emergente. Este enfoque funciona mejor.
Apple no recomienda el uso de botones redondeados para acciones (ver botones ). Los botones completamente redondeados están reservados para " Ayuda " o para proporcionar opciones mutuamente excluyentes (ver botones de radio ).
Ilustraciones de las
pautas de interfaz humana de Apple
3. Los botones completamente redondeados no son adecuados para pilas
Cuando colocamos botones redondeados en filas en tablas y tarjetas, se ven fuera de lugar. Por ejemplo, para una tabla de 10 filas, obtenemos una columna de 10 botones, cada uno de los cuales parece un botón para la acción principal.
Como alternativa, puede probar los botones "sin bordes", como se hace en las nuevas notificaciones de macOS, o mostrar los botones solo cuando pasa el cursor por encima. Al minimizar la visibilidad de los botones, permitimos que el usuario se concentre en el área de trabajo principal.
Botones "sin bordes" en la pilaEstética de esquinas redondeadas
La redondez se ve moderna. La aplicación del redondeo completo comenzó en las interfaces móviles y migró a la web. La falta de nitidez provoca sentimientos de simplicidad, optimismo y accesibilidad. Esta es probablemente la razón por la cual muchos sistemas de diseño han adoptado elementos redondeados y son ampliamente utilizados para iconos, botones o incluso imágenes.
En Chrome, después de una actualización reciente (han pasado seis meses desde la publicación del artículo original, aprox. Transl.), La barra de direcciones se ha redondeado para expresar mejor la disponibilidad del uso simultáneo para la búsqueda. Los usuarios pueden ver parte de los resultados de búsqueda en el momento de la impresión, incluso antes de ir a la página.
Nueva barra de búsqueda en Chrome (fuente - blog de Google )De acuerdo con el nuevo concepto, los botones de la barra de herramientas comenzaron a resaltarse redondeados al pasar el mouse sobre ellos. Es fácil encontrar elementos redondeados en otras aplicaciones de Google, como Calendario, Gmail y Drive.
Resumiendo
No hay una respuesta definitiva que sea mejor: redondez o nitidez. Pero los elementos redondeados pueden ayudar a alentar al usuario a interactuar con la aplicación sin ser distraído por una IU secundaria.
Lista de recursos para un estudio en profundidad del tema:
Usar formas redondas en diseños de materiales
Características de las esquinas redondeadas.
¿Por qué las esquinas redondeadas son más fáciles para los ojos?