Tendencia de diseño: objetivos de presión modernos (y cómo hacerlo) – Usabilidad web y seo

Tendencia de diseño: objetivos de presión modernos (y cómo hacerlo)

Vistas: 69
0 0
Tiempo de lectura:8 Minutos, 16 Segundos


Un objetivo de toque duro puede arruinar su sitio o aplicación móvil. El tamaño, la forma, la posición y el diseño general de un botón o enlace determinan si un usuario completa una acción o no. Esto puede parecer una cosa pequeña, pero puede ser uno de los elementos de diseño más importantes.

Las metas alcanzables modernas son fáciles de reconocer, funcionan como se espera y fomentan la interacción.

Hoy veremos cómo diseñarlos, cómo crear llamadas a la acción efectivas y considerar la elección del color y la fuente.

Degradados y color

diseño móvil

Los objetivos en los que se puede hacer clic con degradado azul, morado y verde son algunas de las opciones de diseño más populares en este momento.

Una de las tendencias de diseño más importantes que puede ver cuando se trata de botones y otros objetivos en los que se puede hacer clic es el color. Los degradados y los colores vibrantes son la norma.

Estas opciones para llamar la atención ayudan a los usuarios a reconocer el objetivo de un toque y llamar la atención sobre la acción en la pantalla.

Érase una vez, casi todo el mundo diseñó botones y elementos táctiles en rojo o naranja, pero esto realmente ha dado paso a otros colores, especialmente degradados.

Los objetivos en los que se puede hacer clic con degradado azul, morado y verde son algunas de las opciones de diseño más populares en este momento. Funcionan muy bien con fondos (o modos) claros u oscuros, lo que la convierte en una opción viable para diseños en los que los usuarios pueden controlar el esquema de color predeterminado.

El tamaño importa

diseño móvil

El tamaño de la etiqueta es más que estética, es igualmente importante en términos de accesibilidad.

La mayoría de las recomendaciones para el tamaño de los elementos en los que se puede hacer clic recomiendan al menos 44 píxeles. Este es aproximadamente el tamaño del dedo del pie de un adulto promedio.

Esto no significa que todos los elementos visuales deban tener al menos este tamaño, pero debe asegurarse de que toda el área táctil alrededor del elemento exceda este tamaño. (Considere lo molesto que es cubrir la pequeña “x” en un anuncio en una aplicación, lo que a menudo resulta en un clic erróneo en el anuncio en sí.) Las áreas de clic adecuadas resuelven este problema.

La Guía de accesibilidad para el nivel de éxito AAA señala que los “objetivos” deben tener al menos 44 por 44 píxeles CSS, con algunas excepciones relacionadas con el contexto del enlace.

Diseño de capacidades visuales

diseño móvil

¿El objetivo en el que se puede hacer clic parece que el usuario tiene que tocarlo?

Si bien este puede ser un concepto muy simple, a menudo se pasa por alto. La experiencia visual, que utiliza patrones y elementos de diseño conocidos y reconocibles, ayuda a los usuarios a comprender qué hacer con un elemento interactivo cuando lo ven.

Los elementos visuales comunes para los objetivos en los que se puede hacer clic incluyen:

  • Subrayado o colores diferentes para enlaces de texto en línea
  • Sombras o sombras interiores para objetos
  • Esquinas o círculos redondeados
  • Elementos con texto en vivo, como Iniciar sesión o Enviar.
  • Un lugar separado en una columna sin otros objetos a cada lado

Creación de estados de desplazamiento y enfoque

diseño móvil

Los estados flotantes son una opción común para elementos interactivos en dispositivos de escritorio. Cuando el mouse se mueve sobre un elemento en el que se puede hacer clic, puede cambiar de color, moverse o reaccionar de manera diferente que antes.

Estas acciones no funcionan para objetivos táctiles móviles porque no hay mouse o cursor para moverse por la pantalla. Pero eso no significa que no sean igualmente importantes.

Los estados flotantes son importantes para las versiones de escritorio de un diseño.

Los estados flotantes son importantes para las versiones de escritorio de un diseño. Para los dispositivos móviles, esta microinteracción pasa a un estado activo, que indica si el botón o elemento está activo / tocado o “presionado” táctilmente.

Esto también se refiere a los estados de enfoque como una herramienta de accesibilidad, donde los usuarios navegan a un objetivo táctil usando un teclado o lector de pantalla. El estado de enfoque mostrará qué objetivo está seleccionado actualmente, por ejemplo, resaltando un campo activo en un formulario o habilitando / deshabilitando ciertos elementos en un diseño (por ejemplo, abriendo el teclado).

Llenar es suficiente

A menos que esté creando un patrón oscuro, probablemente desee asegurarse de que los usuarios estén tocando el objetivo deseado, no el objeto más cercano. Este problema potencial puede resolverse con suficiente espaciador alrededor de cada elemento de presión.

Además del hecho de que el elemento táctil debe tener al menos 44 píxeles, agregue al menos 8 píxeles más alrededor de todo el perímetro del área táctil. Mejor aún sería usar la mitad del tamaño del Tap a su alrededor. Esto ayuda a prevenir presionar accidentalmente.

Texto disponible para lectura y acción

diseño móvil

El texto en el diseño de elementos en los que se puede hacer clic proporciona un contexto para la acción y la interacción.

Hay varias tendencias en lo que respecta a la apariencia de las instrucciones de texto.

  • Los botones y los controles táctiles usan mayúsculas y minúsculas
  • Las fuentes son de estilo sencillo, regular o medio.

Hay algunas consideraciones cuando se trata de escribir una copia de la interfaz de usuario.

  • El texto tiene un efecto directo y les dice a los usuarios lo que sucederá a continuación, incluso si es un poco más largo que Click Here.
  • Pero excluye palabras innecesarias
  • Evite la jerga o el discurso lindo y hable directamente
  • Sea coherente y utilice los mismos términos en todo el diseño (¿los usuarios “inician sesión” o “inician sesión”?)

Los enlaces de texto no siguen las mismas reglas que otros elementos en los que se puede hacer clic, pero el diseño debe incluir la misma consideración.

Lo primero en lo que debe pensar es en la frecuencia con la que utiliza enlaces de texto en línea. En las pantallas pequeñas, es más difícil hacer clic en ellas, y cuantos más enlaces haya, más probable es que estas áreas táctiles se superpongan y hagan que los usuarios hagan clic en el enlace incorrecto.

El mejor consejo es usarlos con moderación y usar tantos enlaces de estilo de botón como sea posible.

El siguiente mejor consejo es crear un halo extendido o un área táctil alrededor del enlace de texto para que sea más fácil hacer clic de manera efectiva. Esto es típico de los enlaces de texto en los menús o los enlaces en los pies de página. (No tiene sentido en el texto principal).

Las Pautas de accesibilidad de WCAG ofrecen un poco más de orientación sobre los objetivos integrados:

“Los objetivos pueden aparecer en cualquier lugar de la línea y pueden cambiar de posición según el ancho de la pantalla disponible. Dado que los objetivos pueden aparecer en cualquier lugar de una línea, el tamaño no puede ser mayor que el texto disponible y el espaciado entre oraciones o párrafos, o los objetivos pueden superponerse. Es por esta razón que los objetivos contenidos en una o más oraciones se excluyen de los requisitos de tamaño del objetivo “.

Los objetivos táctiles pueden (y deben) tener una jerarquía

diseño móvil

Su diseño puede incluir varios tipos de objetivos en los que se puede hacer clic, cada uno con un aspecto y una sensación diferentes.

Esta jerarquía de diseño es cada vez más frecuente con la selección de ciertos botones o niveles de objetivos en los que se puede hacer clic según el sitio web o los objetivos comerciales.

Los botones en la parte superior de la jerarquía deben ser los más contrastantes y de mayor tamaño y reducir proporcionalmente según el uso deseado.

¿Cómo se ve la jerarquía del proyecto de objetivos en los que se puede hacer clic?

Primero, determine cuántos niveles necesita. Para la mayoría de los proyectos, las variaciones primarias y secundarias son suficientes, pero algunos proyectos utilizan elementos de clic de tercer y cuarto nivel.

Establece un estilo para todos. Comencemos con el diseño principal. Lo más probable es que se trate de un botón de color / degradado. Este es el elemento en el que los usuarios deben hacer clic primero. El diseño secundario debe ser similar al botón principal, pero debe incluir uno de los siguientes cambios: estilo fantasma, color menos contrastante o tamaño más pequeño. Los botones de tercer y cuarto nivel pueden usar los mismos cambios.

Los botones en la parte superior de la jerarquía deben ser los más contrastantes y de mayor tamaño, y deben reducirse proporcionalmente según el uso deseado.

¿Hay algún elemento táctil que desee que los usuarios vean e interactúen primero? Utilice elementos en los que se puede hacer clic con una jerarquía visual clara para definir el flujo y la intención del usuario.

Los elementos táctiles deben diseñarse con tamaño y visibilidad para que sea obvio para los usuarios que necesitan ser tocados (observe el botón central naranja + arriba). El tamaño puede ser uno de los factores más importantes para predecir la intención del usuario.

Una pequeña advertencia: si bien la jerarquía de objetivos del punto de contacto es buena, demasiados parámetros pueden frustrar al usuario. Es un equilibrio delicado que debe probarse.

Conclusión

Sí, todavía estamos haciendo diseños de pulgares. Esto sigue siendo cierto sin importar cuán grandes (o pequeños) sean los teléfonos. Los objetivos personalizados pueden ser desde botones hasta controles y enlaces de texto con los que los usuarios interactúan para mantener su sitio o aplicación funcionando según lo previsto.

Un buen objetivo para hacer clic parece algo para tocar (o hacer clic) y realizar la acción que el usuario espera.

Desafortunadamente, el diseño de estos elementos a menudo se pasa por alto durante el proceso de diseño. No caigas en esta trampa con tus proyectos.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Por qué los diseñadores están divididos y cómo salir de ella
Next post El llamado dilema social no tiene por qué ser un dilema profesional.

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta