Deja de ser tan cuadrado
Como profesional del diseño, está familiarizado (y posiblemente contribuyendo) con el uso creciente de círculos en todos los elementos del diseño.
Desde artículos de decoración para el hogar, como espejos con marcos redondos e impresiones hasta herramientas manuales en la ferretería, los círculos están en todas partes. Los círculos incluso han llegado a nuestros sitios web, apareciendo en encabezados, menús y, a veces, justo en el medio de la página.
Algunos sitios de diseño incluso han creado publicaciones de blog que incluyen excelentes capturas de pantalla del uso creativo de círculos en el diseño web. Sin embargo, poco se ha dicho sobre la psicología detrás del uso de círculos en el diseño, o cómo la respuesta del usuario a los círculos se puede incorporar efectivamente en el creciente fenómeno del uso móvil.
Sabemos que nos gustan los círculos, pero ¿por qué? ¿Y cómo puede un diseñador web utilizar mejor los círculos para optimizar la experiencia del usuario en un diseño receptivo?
Círculos y el cerebro
Cognición y percepción
Los círculos atraen a las personas porque son más fáciles de entender que las formas y los objetos con líneas duras.
El ojo se ve atraído por los círculos y la información que contiene, y son más rápidos y fáciles de procesar para el cerebro que los cuadrados y rectángulos de bordes duros.
El matemático y físico suizo Jurg Nonni, autor de Visual Perception, sugiere que eliminar bordes nos permite percibir un objeto más rápidamente. De acuerdo con Nonni, "Un rectángulo con bordes filosos requiere de hecho un poco más de esfuerzo visible cognitivo que, por ejemplo, una elipse del mismo tamaño. Nuestro "ojo de fovea" es aún más rápido al registrar un círculo. Los bordes implican herramientas de imagen neuronal adicionales. El proceso, por lo tanto, se ralentiza ".
Curvas familiares y reconfortantes
Además de la capacidad cognitiva del cerebro para procesar círculos más rápidamente de lo que puede procesar cuadrados y rectángulos, procesamos información familiar y objetos más rápido que aquellos que no reconocemos.
Todos reconocen círculos, y las personas aprenden a conectar formas con acciones y resultados específicos, como el signo de "ALTO" del octágono rojo universal. De acuerdo con las Pautas de interfaz humana OS X de Apple, "las personas aprenden a asociar ciertos comportamientos con elementos específicos en función de su apariencia. Por ejemplo, las personas reconocen los botones por su forma redondeada ".
Un uso efectivo de los círculos en elementos de menú icónicos en Azonmedia Página de servicios.
Encontramos círculos, óvalos y objetos de bordes redondeados de muchas maneras cálidas y no amenazantes en las culturas y los entornos. Las nubes, los huevos, el sol y la luna en la naturaleza aparecen redondeados a simple vista. Caras sonrientes, pasteles, pasteles, figuras curvas son agradables a los sentidos.
Nuestros cerebros responden bien a los círculos y las curvas, mientras perciben los objetos de bordes duros como más duros, más definidos y con el potencial de ser una amenaza.
Círculos y la experiencia del usuario
Los círculos son efectivos en el diseño web precisamente por estos motivos.
Los usuarios en línea son notoriamente impacientes, y debido a que los círculos se perciben y entienden más fácilmente, lleva menos tiempo procesar la información que representan.
Los usuarios de dispositivos móviles son aún más impacientes. También están ocupados, a menudo en movimiento, multitarea y usando un dedo índice o pulgar para navegar en su dispositivo de mano. Quieren su información AHORA. Los círculos ayudan a los usuarios de dispositivos móviles a identificar la información que buscan de manera más eficiente.
Círculos y pulgares
Otra forma en que los círculos son beneficiosos en un entorno de diseño móvil primero y receptivo es su idoneidad como elementos en las interfaces de pantalla táctil.
A medida que los smartphones con pantalla táctil y los usuarios de tabletas toquen con el dedo, se deslicen o vean hacia la información que buscan, tiene sentido usar círculos para dirigir al usuario. No solo imitan la forma de la punta del dedo, asociamos círculos y bordes redondeados con botones pulsadores y nuestros cerebros procesan rápidamente las acciones requeridas.
desarrollador web Oliver James Gosling
Cuando incorpora círculos en una interfaz móvil con pantalla táctil, diseñe hasta la pantalla más pequeña. El texto o las imágenes dentro del círculo todavía se deben leer fácilmente, y el tamaño debe ser al menos del tamaño de la yema del dedo, o 44 píxeles.
Círculos y espacio de pantalla
Las buenas noticias sobre el uso de círculos en el diseño receptivo es que CSS3 simplifica en gran medida los requisitos de codificación.
La mala noticia es que los círculos ocupan muchos bienes inmuebles y dan como resultado un área de pantalla más abierta.
Como el espacio de la pantalla en teléfonos inteligentes y tabletas puede ser bastante pequeño, ¿cómo se pueden introducir círculos sin preocuparse de que se vuelvan tan pequeños que son imposibles de leer, tocar o hacer clic?
Una interfaz móvil simple
Ayuda a mantener su interfaz móvil simple. Como el ojo se ve atraído por el círculo de todos modos, no tiene sentido revolver el resto de la pantalla con contenido que el usuario perderá.
A menos que sean parte del encabezado o logotipo, mantenga el uso del círculo a un mínimo de uno o dos en cada página. Intente utilizar un botón de búsqueda circular, o use uno para su llamado a la acción, como "llamar aquí" o "registrarse aquí".
Gravitar el diseño usa círculos y colores para atraer la atención hacia el logotipo, la cartera y el texto en la página de inicio.
Fondos y botones para compartir
Al igual que con cualquier elemento de diseño, el uso de círculos debe adecuarse al contenido, producto o servicio, estilo y marca del sitio. Debe mejorar la experiencia del usuario y simplificar la interfaz.
Si el uso de un llamado a la acción no es apropiado para el sitio, o si los elementos de navegación y menú simplemente no funcionan dentro de un círculo, considere la incorporación de un círculo en el fondo. Use un círculo más grande en el fondo para llamar la atención sobre el contenido más importante de la página (semitransparente detrás del texto).
Recuerde, el contenido es para lo que el usuario móvil está aquí en primer lugar. Aliente la participación del usuario eligiendo botones redondos para compartir redes sociales en lugar de las opciones rectangulares.
Iconos circulares en diseño receptivo
Una de las formas más populares de incorporar círculos en sitios web es como iconos en un menú. Esto se adapta bien al diseño receptivo, ya que reemplaza texto extenso y / o confuso con una imagen más simple.
Buza usa círculos para complementar el menú móvil vertical.
Un ícono circular ocupa menos espacio, lo que permite más espacio para el contenido. Se ve bien y el usuario procesa rápidamente lo que representa.
Óvalos o rectángulos redondeados
Tal vez no estés listo para envolver tus brazos alrededor de un gran círculo viejo. Esta bien. Pero no te quedes con los bordes duros.
Agregue algunos rectángulos redondeados u óvalos a su kit de herramientas de diseño receptivo. Las esquinas alisadas harán que sea más fácil enfocarse en el contenido dentro de las curvas, en lugar de llamar su atención hacia los bordes externos.
Palabra final
Mientras que los diseñadores web pueden pasar horas agonizando sobre los méritos de los círculos o rectángulos de bordes redondeados versus bordes afilados, cuando se trata de complacer al usuario con el diseño móvil, todo se trata del contenido. El usuario desea contenido atractivo y útil presentado en una interfaz simple y fácil de encontrar. Todo lo demás es secundario.
Aunque el diseño web receptivo busca responder al entorno, también debe responder a las necesidades del usuario. Los usuarios reconocen la forma familiar del círculo, lo perciben rápidamente y pueden señalar fácilmente el punto que se puede hacer clic en la pantalla. Use un círculo simple en su próximo proyecto de diseño receptivo. Tus usuarios te lo agradecerán.
¿Utiliza círculos para sus llamados a la acción? ¿Te arriesgas con rectángulos sutilmente redondeados? Háganos saber en los comentarios a continuación.
Imagen / miniatura destacada, imagen de círculos a través de Shutterstock