CICE - La Escuela Profesional de Nuevas Tecnologías CICE - La Escuela Profesional de Nuevas Tecnologías
contacto Te llamamos Campus Online

Consejos para diseñar botones de interfaz

consejos-disenar-botones-interfaz

¿Cuántas veces has maldecido al diseñador de una app o web por el diseño inapropiado de sus botones? Un buen diseño de interfaz no es producto del azar. A continuación te damos algunos consejos de diseño de botones.

La importancia de los botones en un diseño interactivo

Los botones no solo son un elemento común en cualquier diseño interactivo (como por ejemplo en una web, una app o en un panel informativo), son fundamentales ya que de ellos depende la interacción y experiencia de usuario. Un mal diseño, o no tener en consideración las siguientes recomendaciones, pueden provocar un efecto negativo al usuario que cause su abandono. Seguro que has experimentado en algún momento esa sensación de frustración de no poder darle bien a un botón, que te cueste localizarlo dentro del interfaz o que no seas capaz de conocer su estado, ¿le habré dado bien, se ha activado?

Cuando seguir los estándares establecidos, funciona

Es tentador para muchos diseñadores buscar algo rompedor, innovador. Pero cuando tratamos con botones o elementos comunes de cualquier interfaz, es recomendable hacerlo dentro de los estándares para que el usuario sea capaz de identificarlos sin dificultad. Por tanto, la norma dice que un botón debería ser cuadrado o rectangular. Aunque en un segundo grupo también aceptado tendríamos los botones circulares, también muy utilizados especialmente en apps.

El resto de tipos de formas de botones que incluyamos en nuestros diseños, pueden que no todos los usuarios los reconozcan como tal, por lo que será necesario destacarlos de alguna forma, como ocurre con los botones de retroceso, home y el navegador de apps activas de los dispositivos con Android (resaltados con un fondo negro, por ejemplo).

consejos-disenar-botones-interfaz-android

O mención aparte merecen aquellos que representan el tipo de activación que necesitan, como los slider, que requieren por parte del usuario que deslicen su dedo para activar o desactivar una determinada opción. Pero siempre bajo los mismos estándares comunes entre sistemas operativos y aplicaciones. Es necesario que sean consistentes.

Aplicando efectos sencillos para indicar interactividad

Ya en los primeros tiempos de Internet, los enlaces incluían su propio código visual para identificar sus diferentes estados (a:visited, a:active, a:hover) y lo mismo ocurre con los botones gráficos, pero con un nivel más de complejidad.

consejos-disenar-botones-interfaz-estados

Además de las diferentes opciones de color de textos y fondos, estos 3 estados básicos de todo enlace / botón, pueden reforzarse visualmente con el uso de sombras, que dan a entender al usuario que pueden ser presionados.

consejos-disenar-botones-interfaz-boton-sombra

Factores de diseño que podemos complementar con un indicador de animación para hacerlo más dinámico, más vivo.

Utilizar un etiquetado adecuado

Las indicaciones de un botón deben ser claras. Bien mediante el uso de un icono o de un verbo que represente sin confusión. Por ejemplo, un claro ejemplo de mal etiquetado o identificación de un botón sería el siguiente:

consejos-disenar-botones-interfaz-etiqueta

Localización y orden

Si debemos seguir unos estándares ya definidos a nivel de forma, también deberíamos hacerlo a nivel de localización y orden. ¿Cuántas veces has buscado un botón en el lugar “que suelen estar” y no lo encuentras ahí? No utilizar una localización estándar provocará irremediablemente una molesta sensación de desorientación en el usuario. Y algo muy similar ocurre cuando el orden de los botones con respecto a otros no es el habitual. Por ejemplo, cuando en una ventana de diálogo de confirmación, los botones de “OK” y “Cancelar” están intercambiados. Molesto, ¿verdad?

Tanto en el caso de las recomendaciones de forma, como en las de localización y orden, los responsables de los sistemas operativos como Google con Android y Apple con iOS, suelen ofrecer a los desarrolladores una guía de estilo para ofrecer una experiencia de usuario uniforme, sea cual sea la app que se utilice, sea cual sea su desarrollador.

Tamaño y espacios entre botones

Porque no es lo mismo un botón en un ordenador, que en una app. Porque no es lo mismo un botón en una app en un smartphone de 4 pulgadas que en una tableta de 10,1 pulgadas. Por ello, es necesario crear los botones responsive y ajustar su tamaño a unas medidas mínimas en función del dispositivo, así como su separación con respecto a otros.

consejos-disenar-botones-interfaz-size

Un botón demasiado pequeño, dificultará lógicamente su activación. O dos botones muy próximos, pueden provocar que el usuario active el botón equivocado. Por tanto, el tamaño y la separación de elementos importa, y mucho.

Cuando el diseño influye en el comportamiento del usuario: Call to Action

El diseño de un botón no es un aspecto puramente estético, también es una herramienta para provocar una determinada acción en el usuario. Por ejemplo, en la siguiente captura tenemos marcado por defecto el botón de “vaciar la papelera”, pero ¿es lo que realmente queremos? Si queremos evitar que por error el usuario elimine los ficheros, lo que podemos hacer es marcar por defecto el botón de “cancelar” y que sea necesario un “esfuerzo adicional” por parte del usuario para eliminar los ficheros de forma segura (una opción que no se puede revertir y por tanto peligrosa).

consejos-disenar-botones-interfaz-macos

Este mismo principio de influencia sobre el comportamiento, también puede aplicarse a nivel comercial con los denominados “Call to Action”. Un botón que destaca sobre todos los demás y que normalmente suele inducir al usuario a una determinada acción: identificarse en la web o crear una nueva cuenta, enviar un formulario, llamar por teléfono, etc.

consejos-disenar-botones-interfaz-call-to-action

El diseño de los Call to Action es la máxima expresión de todas las recomendaciones anteriores por una sencilla razón: suele ser el botón más importante de toda página, ya que generalmente suele tener un objetivo comercial.

Conclusiones del diseño de los botones

En diseño todos los elementos suman. Pero lo que es indudable es que en un diseño interactivo, el correcto diseño de un botón es clave para alcanzar los objetivos comerciales o de uso de la web o app. Para lograrlo, seguir unos estándares en cuanto a forma y comportamientos, una correcta etiquetación para facilitar la identificación de las acciones, localizarlos donde los usuarios esperan encontrarlos, mantener una constancia de los elementos, facilitar que el usuario pueda interactuar sin dificultad ajustando su tamaño y separación, o utilizar el color para influir en el comportamiento.

Ahora cuando diseñes un botón, recuerda, son un elemento clave.

Enlace | Adobe

13/09/2016 | , | Artículos Arquitectura y Diseño

Alvaro Make

Alvaro Make

Escribe tu
Comentario

Si quieres personalizar tu avatar, click aquí.
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Recuerda que los comentarios deben ser revisados por un administrador.

Mándanos tu consulta

Puedes llamarnos al 91 401 07 02 (Centro Maldonado) o al 91 435 58 43 (Centro Povedilla).

Si lo prefieres, déjanos tus datos y nosotros te llamamos.

*Selecciona una titulación

Te llamamos sin compromiso

Puedes llamarnos al 91 401 07 02 (Centro Maldonado) o al 91 435 58 43 (Centro Povedilla).

Si lo prefieres, déjanos tus datos y nosotros te llamamos.

Consejos para diseñar botones de interfaz
SOLICITAR UNA CLASE DE PRUEBA GRATUITA
Consejos para diseñar botones de interfaz

Horario atención al cliente

  • Lunes a viernes

    • De 9 a 14 horas
    • De 16 a 21 horas
  • Sábados

    • De 9 a 14 horas

Teléfono de contacto: 91 435 58 43

Solicita información sobre
Envíanos tu opinión sobre CICE
Nosotros te asesoramos

¿No te decides?

Nosotros te ayudamos. Utiliza nuestro buscador avanzado para encontrar el curso que quieres.