Los botones son uno de los principales componentes interactivos para que los usuarios creen interfaces de usuario. En este artículo, presentaré las cosas a las que debe prestar atención sobre el diseño de botones.
Para diseñar la interacción correcta, necesitamos revisar el historial y el origen del botón físico, que es el predecesor directo de los componentes de la interfaz de usuario que se utilizan ampliamente en todos los productos digitales de hoy. Las teclas son sorprendentes, incluso si el usuario no comprende el mecanismo o algoritmo subyacente, el estado de movimiento del aparato, automóvil o sistema solo se puede configurar con solo tocar el dedo. En el libro "PowerButton", RachelPlotnick rastrea los orígenes de la cultura de botones de hoy y describe cómo los botones se convierten en una forma de comandos digitales.
"Usted viene a presionar el botón, nosotros haremos el resto". Las cámaras Kodak atraen a los consumidores potenciales a través de un eslogan pegadizo.
Incluso hoy, esta es la razón principal por la cual los botones atraen a los usuarios. ** Puede hacer que las cosas sucedan con un simple toque, y las personas pueden obtener satisfacción instantánea. ** Aunque una gran cantidad de nuevos electrodomésticos y otros dispositivos están migrando al control de la pantalla táctil, los botones físicos no desaparecerán rápidamente. Los hábitos de comportamiento formados por ellos afectarán la intuición y la facilidad de uso del diseño del botón.
Botón vs enlace
El botón comunica las acciones que el usuario puede tomar. Están en toda la interfaz de usuario, como cuadros de diálogo, formularios, barras de herramientas, etc. Es importante comprender la diferencia entre botones y enlaces:
-
Use el enlace ** cuando navegue a otra ubicación , por ejemplo: página "ver todo", ver perfil, etc.
-
Use botones cuando realice acciones , como: "Enviar", "Fusionar", "Crear nuevo ...", "Cargar", etc.
Comunicar el estado del botón al usuario.
Crear las interacciones y estilos correctos para sus botones es una de las partes más importantes de este proceso. Cada estado debe tener un mensaje claro para distinguirlo de otros estados y el diseño circundante, pero no debe cambiar completamente los componentes ni generar mucho ruido visual.
** Normal ( Normal ) **** - ** indica que el componente es interactivo y habilitado.
** Focus ( Focus ) **** - ** indica que el usuario resalta el componente (usando el teclado u otros métodos de entrada).
** Hover ( Hover ) **** - ** indica que el usuario coloca el cursor sobre el componente.
** Activo ( Activo ) **** - ** indica el estado activo / presionado, es decir, el usuario ha hecho clic en el componente.
Progreso ** / Carga (Progreso / Carga) - ** Se utiliza cuando la acción no se ejecuta inmediatamente, lo que indica que el componente está completando la acción.
** Desactivar ( Desactivar ) **** - ** indica que el componente se encuentra actualmente en un estado no interactivo, pero se puede activar más adelante.
Los botones vienen en varios colores, formas y tamaños.
Los más comunes son los botones rectangulares con esquinas redondeadas, que son fáciles de identificar y se ven bien al lado del campo de entrada. Elegir el estilo de botón correcto depende del propósito, la plataforma y las pautas. Estos son algunos de los estilos más populares:
El estilo transmite la importancia de la acción.
Los estilos se utilizan principalmente para distinguir entre acciones más importantes y acciones menos importantes. Cree una jerarquía de acciones que guíe a los usuarios a través de múltiples opciones. Por lo general, puede tener un botón destacado (este estilo a menudo se denomina botón "primario"), así como varias acciones "secundarias" de bajo nivel y "terceras" de bajo perfil.
Los estilos se utilizan principalmente para distinguir entre operaciones más importantes y operaciones menos importantes. La estructura jerárquica de las acciones guiará al usuario a elegir dónde hay múltiples opciones. Normalmente, puede tener un botón destacado (a menudo llamado "botón primario"), así como varios "botones secundarios" medianos y un "botón de tres niveles" de bajo énfasis.
A veces no hay "defecto"
En general, desea establecer los botones utilizados con más frecuencia en "predeterminado" (utilizando el estilo principal) y ponerlos en foco. Esto puede ayudar a la mayoría de los usuarios a completar tareas más rápido y apuntarlas en la dirección correcta.
La única excepción es cuando todas las opciones son iguales, o cuando la operación es particularmente peligrosa, en cuyo caso desea que el usuario elija explícitamente, en lugar de seleccionar accidentalmente la opción predeterminada.
No me hagas pensar
"Don't Make Me Think" es el título del libro escrito por el ingeniero de usabilidad Steve Krug. Uno de los muchos puntos tratados en el libro es hacer que la interfaz parezca obvia para los usuarios, en lugar de causar confusión. En base a años de experiencia en el uso de varios dispositivos y otros productos, hemos formado ciertas expectativas para la apariencia y función de los botones. Si hay una gran desviación del pensamiento "estándar", la gente causará demoras y confusión a los usuarios.
Evite usar el mismo color para elementos interactivos y no interactivos . Si los colores son los mismos, es difícil para las personas saber dónde hacer clic.
La consistencia mejora la velocidad y la precisión.
" La consistencia es uno de los más poderosos principios de usabilidad: cuando las cosas siempre se comportan de la misma, los usuarios no tienen que preocuparse de lo que sucederá de forma accidental." - Jacob * * * Nielsen ( JakobNielsen )
La consistencia mejora la velocidad y la precisión y ayuda a evitar errores. Establecer la previsibilidad puede ayudar a los usuarios a sentirse controlables y la posibilidad de lograr objetivos en sus productos. Cuando cree estilos de primer, segundo y tercer nivel, intente encontrar algunos elementos comunes, como colores y formas. No solo debe ser coherente dentro del sistema de diseño, sino también ser consciente de la coherencia con la plataforma utilizada.
Haga que los botones sean lo suficientemente grandes para una interacción confiable
Presionar un botón debería ser una tarea simple: si el usuario no hace clic con éxito en el botón o si hace clic en un elemento adyacente en el proceso, causará una experiencia negativa para el usuario y una pérdida de tiempo.
Para la mayoría de las plataformas, considere hacer el objetivo táctil al menos 48 × 48dp. Independientemente del tamaño de la pantalla, el tamaño físico real del objetivo táctil de este tamaño es de aproximadamente 9 mm, lo cual es conveniente para la interacción del usuario. El tamaño objetivo de los elementos generales de la pantalla táctil debe ser de al menos 7-10 mm. Para los botones de iconos, asegúrese de que el objetivo táctil se extienda más allá del alcance visual del elemento.
Diseño de accesibilidad
Esta recomendación debe repetirse para cada componente. El tamaño del área objetivo es uno de los factores que afectan la accesibilidad. Otros factores incluyen el tamaño de fuente, el color y el contraste. Existen muchas herramientas en la web para ayudarlo a verificar fácilmente el rendimiento del diseño de sus componentes.
Los gestos son ampliamente adoptados
Los gestos permiten a los usuarios interactuar con las aplicaciones a través del tacto. Usar el tacto como otro método para realizar tareas puede ahorrar tiempo y proporcionar control táctil. Aunque algunos gestos (como deslizar, hacer doble clic o presionar prolongadamente) se usan ampliamente todos los días, para los usuarios comunes, estos gestos aún no son muy obvios. Sugiero usarlos como un método alternativo para que los usuarios avanzados realicen operaciones.
La etiqueta del botón Ok invita a los usuarios a tomar medidas
La etiqueta del botón es tan importante como su apariencia. El uso de una etiqueta de texto incorrecta puede causar confusión a los usuarios, perder tiempo y también puede causar algunos errores importantes.
Una buena etiqueta de botón invita a los usuarios a tomar medidas. Es mejor usar un verbo y marcar su función real en el botón. Es como el botón que le pregunta al usuario: "¿Desea ( agregar a la cesta de la compra )?" O "¿Desea ( confirmar el pedido )?".
Evite usar etiquetas sí *, no o demasiado genéricas, como submit *.
Primero "OK" o "Cancelar" primero? Ok
Ambas son solo opciones, y los diseñadores pueden discutir durante horas sobre sus preferencias.
-
El frente de operación "determinar" puede soportar el orden de lectura natural. Si sabemos que la operación que el usuario tiene más probabilidades de elegir es "OK", esta ubicación puede ayudar a ahorrar algo de tiempo. El sistema de Windows pone primero la operación "OK".
-
"Ok" después de la operación puede mejorar el proceso. Algunas personas pueden igualar "OK" con "Siguiente". Por lo tanto, la operación posterior a la determinación ayuda a los usuarios a evaluar todas las opciones antes de tomar medidas, y ayuda a evitar errores y decisiones apresuradas. El sistema Apple pone la operación "OK" al final.
De cualquier manera, hay buenos argumentos, y ninguna opción puede conducir a desastres de usabilidad. Básicamente puse "OK" al final de la lista de acciones (probablemente porque soy principalmente un usuario de Mac).
Use el botón de deshabilitar con precaución
Todos se han encontrado con esta situación: estar atascados en la pantalla durante unos segundos o minutos, tratando de descubrir por qué su progreso está bloqueado por el botón deshabilitado y qué debe hacer para que este botón vuelva a un estado interactivo. El control deshabilitado se usa para indicar que el componente actualmente no es interactivo, pero se puede habilitar en el futuro. El botón deshabilitado se usa porque si el botón se quita de su posición nativa y se muestra después de que se cumplan las condiciones, puede confundir al usuario.
Si es posible, recomiendo evitar el botón de deshabilitar. Es mejor habilitarlo todo el tiempo. Si el usuario no proporciona la información necesaria, simplemente resalte el campo vacío o muestre la notificación.
Recomendación de servicio
