Poner botón de acción
Llamá la atención del usuario sobre un hipervínculo para que concrete una acción, como descargar un archivo, inscribirse en un curso, iniciar un trámite o ir a un contenido específico.
En esta página
Qué es el botón
El botón es un componente que le informa al usuario que va a lograr u obtener un resultado tras hacer clic en el recurso.
Por eso en UX se lo denomina "llamado a la acción" (call to action en inglés).
El resultado puede ser conocer una información de utilidad (ingresar a un contenido que informa sobre un beneficio, un programa o un trámite), conseguir un documento que necesita (descargarlo) o enviar datos en un formulario que completó.
Comparado con un hipervínculo, el botón tienen mayor jerarquía: si el hipervínculo referencia otro contenido o sección, el botón llama la atención del usuario y lo estimula a hacer clic.
El botón siempre funciona en contexto, nunca de forma aislada. Antes del botón debe haber información que le permita comprender al usuario qué va a obtener tras hacer clic.
Por ejemplo: un botón «Descargar» debe estar debajo de la información sobre un libro o de su título; un botón «Inscribite» debe estar debajo de la descripción de los contenidos de un curso.
Ejemplo.
La Ley 26653 de Accesibilidad Web determina que los sitios web públicos deben ser accesibles.
Usado con criterio y con los colores y tamaños correctos (que te explicamos más abajo), es un recurso útil para ayudar al usuario a que obtenga lo que quiere.
Buenas y malas prácticas
El texto del botón debe comenzar con un verbo que exprese de manera clara lo que el usuario va a lograr con el clic: «Descargá (un archivo)», «Conocé (una información)», «Completá (un formulario)».
Si el verbo (la acción) se sobreentiende, podés omitirlo; por ejemplo, «Más información» en lugar de «Ver más información».
Nunca debe decir «Hacé clic aquí» o similar, porque el usuario no quiere hacer clic (el medio), sino obtener algo a cambio (el resultado).
Uso semántico de los colores
En el caso de los botones y las alertas, debemos aplicarles un color específico de acuerdo con el valor que tiene la acción para el usuario.
Por ejemplo, no usamos un botón color azul, sino que estimulamos a descargar un archivo; no coloreamos de rojo, sino que advertimos que la acción es urgente o requiere atención.
Descargar archivos o ver más información dentro del sitio: .btn-primary
El botón azul (.btn-primary) enlaza un contenido informativo dentro de argentina.gob.ar o un archivo descargable.
Fijate el listado de noticias en la home de algún ministerio: debajo del listado de las últimas noticias hay un botón azul «Ver todas». Si el usuario quiere ver más noticias del organismo, comprende que debe hacer clic ahí.
El botón .btn-primary se ve del siguiente modo.
Hacer un procedimiento en línea o ir a un sitio fuera de argentina.gob.ar: .btn-success
El botón verde (.btn-success) enlaza un formulario en línea, una plataforma transaccional (como las del Sistema Nacional de Turnos o de la ARCA) o un sitio fuera de argentina.gob.ar al que el usuario debe dirigirse sí o sí para conseguir algo (obtener un beneficio, hacer un trámite o inscribirse a un curso o evento).
Fijate en la página del Sistema Nacional de Turnos: cada gestión tiene un botón verde que dice «Sacar turno». El usuario comprende que, tras hacer clic en uno, va a sacar turno en línea para comenzar el trámite que dice la columna anterior.
El botón .btn-success se ve del siguiente modo.
Vincular una información secundaria con menos énfasis: .btn-link
El botón gris (.btn-link) enlaza un contenido de forma menos destacada que btn-primary o btn-success.
Cuando lo usás, le ofrecés un servicio al usuario (acceder a un contenido con un clic), pero no incentivás la acción (que haga clic), por ello decimos que enlaza una acción secundaria.
Fijate cómo lo usamos en esta misma página. Al final de cada sección hay un botón que dice «Volver al índice» para que el usuario no tenga que hacer scroll hasta arriba si quiere ir al índice «En esta página» del inicio. Pero, como queremos que siga la lectura hasta el final, no que suba, pusimos un botón gris pequeño.
Utilizá también esta configuración cuando vincules un sitio institucional no transaccional (uno en el que hay información pero no se realiza ninguna gestión).
El botón .btn-link se ve del siguiente modo.
C3 - Centro Cultural de la Ciencia
Hacer algo urgente o irreversible: .btn-danger
El botón rojo (.btn-danger) enlaza una acción de emergencia, una que no se puede revertir o cancela una acción.
Fijate la landing en la que informamos teléfonos de emergencia: en un celular, el clic en cada botón rojo llama al número correspondiente.
El botón .btn-danger se ve del siguiente modo.
Tamaño del botón
El botón puede tener tres tamaños:
- normal: configuración por defecto
- chico: .btn-sm
- grande: .btn-lg
El uso más adecuado y común es el tamaño normal.
El tamaño más chico llama menos la atención del usuario.
En casos excepcionales, con prudencia, podés usar el tamaño grande para llamar mucho la atención del usuario.
Fijate arriba del subtítulo «Tamaño del botón»: hay dos botones, uno rojo de tamaño normal «Cancelá tu turno» y uno gris más pequeño «Volver al índice». El usuario comprende que el primero es más importante que el segundo tanto por su color como por su tamaño.
El botón normal se ve del siguiente modo.
El botón .btn-sm se ve así.
El botón .btn-lg, por su parte, se ve así.
Código markdown y configuración
Para poner un botón en tu contenido, copiá el siguiente código, editalo y pegalo.
[Texto del botón](url-destino){.btn.btn-acción.btn-tamaño}
Atención
El botón va siempre en párrafo aparte.
Nunca pongas un botón junto con otro texto dentro de un mismo párrafo.
Reemplazá la frase Texto del botón entre corchetes por la acción con verbo.
El texto no debe superar las 4 palabras.
En url-destino escribí entre paréntesis la dirección completa de destino (con https:// al inicio).
Si el destino es un archivo descargable o un contenido fuera de argentina.gob.ar, antes de la url escribí blank:#, como explicamos en la sección sobre hipervínculos.
En .btn-acción escribí .btn-primary, .btn-success, .btn-link o .btn-danger.
Si el botón es de tamaño normal (configuración por defecto), borrá .btn-tamaño del final. Si es pequeño, reemplazá .btn-tamaño por .btn-sm; si es grande, por .btn-lg.
Por ejemplo, el siguiente botón
se escribe así
[Conocé más](https://www.argentina.gob.ar/jefatura){.btn.btn-primary}
en tanto que este
tiene el siguiente código.
[Sacá turno](blank:#https://turnos.argentina.gob.ar/turnos/seleccionTurno/1790){.btn.btn-success.btn-sm}
Todos los códigos por acción y tamaño
- .btn-primary tamaño normal:
[Texto del botón](url-destino){.btn.btn-primary} - .btn-primary tamaño pequeño:
[Texto del botón](url-destino){.btn.btn-primary.btn-sm} - .btn-primary tamaño grande:
[Texto del botón](url-destino){.btn.btn-primary.btn-lg} - .btn-success tamaño normal:
[Texto del botón](url-destino){.btn.btn-success} - .btn-success tamaño pequeño:
[Texto del botón](url-destino){.btn.btn-success.btn-sm} - .btn-success tamaño grande:
[Texto del botón](url-destino){.btn.btn-success.btn-lg} - .btn-link tamaño normal:
[Texto del botón](url-destino){.btn.btn-link} - .btn-link tamaño pequeño:
[Texto del botón](url-destino){.btn.btn-link.btn-sm} - .btn-link tamaño grande:
[Texto del botón](url-destino){.btn.btn-link.btn-lg} - .btn-danger tamaño normal:
[Texto del botón](url-destino){.btn.btn-danger} - .btn-danger tamaño pequeño:
[Texto del botón](url-destino){.btn.btn-danger.btn-sm} - .btn-danger tamaño grande:
[Texto del botón](url-destino){.btn.btn-danger.btn-lg}