BOTO

NES

•Karen Soler
•Jhon Briñez
•Harold Garzón
Definición:
En interfaces
gráficas de usuario, los
botones son tipos de
widget que permiten al
usuario comenzar un
evento, como buscar,
aceptar una tarea,
interactuar con un
¿Qué es un Call to Action (CTA)
o llamada a la acción?

Un Call to action, también

denominado por sus siglas "CTA" o

llamada a la acción, en castellano,

es un elemento gráfico,

complementado con texto, que

tiene por objetivo incitar a

nuestros visitantes a realizar una

Características
 1
La posición
Según el especialista en este sector, James Gurd, el botón de llamada a la
acción debe estar colocado próximo a donde se lleve a cabo la acción.
La posición del CTA (call to action, llamada a la acción) puede ser
complicada de distribuir, ya que depende de muchos factores incluyendo:
El objetivo de la página.
 2

Tamaño y forma
Tus potenciales clientes deberían reconocer bien y a las primeras de
cambio cuál es el CTA, dado que estos deben ser fáciles de descubrir.
Pero, a su vez, no tan grandes que distraigan la atención de lo que está
 3
Color
Los colores deberían sobresalir de la página y
captar la vista.
Una buena práctica en esto de la
psicología del color es probar distintas
 4
Mensaje que quieres transmitirles
El botón de llamada a la acción perfecto debería ser claro y
reflejar una sensación de urgencia.
Este tipo de sensación lo trabajan muy bien los
norteamericanos y, de hecho, el que hoy en día están de moda
 “
Tipos De Botones
◎ Botones
Fantasma:
Seguro has visto los
cuadros o rectángulos
transparentes en las
páginas web y das clic en
ellos para hacer algo
específico. Aquellas figuras
son llamadas botones
fantasma.
◎Botones de control
Mediante este control podremos realizar
tanto la entrada como la salida de datos en
nuestras aplicaciones.
Los botones más comunes, especialmente en los
cuadros de diálogos y formularios son:

* Aceptar (OK), Enviar (Send), Si (Yes)

* Cancelar (Cancel), Cerrar (Close), No
* En los sistemas de ventanas, los pequeños
botones de minimizar, maximizar, cerrar y restaurar
en las ventanas. Generalmente estos botones son
representados con pequeños íconos.

* Otros botones: Guardar (Save), Restablecer,

Limpiar formulario, Borrar, etc.
Tres tipos básicos de botones
de interacción:

*Raised Button: El rectangular

con esquinas redondeadas.
*Floating Action Button:
Circular
*Flat Button: Solo textual.
◎FEEDBACK:
Este requerimiento no tiene que ver con cómo se ve el botón
inicialmente para el usuario, es sobre la interacción y
experiencia con los elementos de la interfaz. Usualmente, un
botón no es un elemento estático. Tiene varios estados, y
provee un feedback visual al usuario para indicar el estado de
la tarea.
Usos correctos e
incorrectos
Ejemplos
● BOTONES
HERRAMIENTAS
● BOTONES CLÁSICOS
● BOTÓN AÑADIR AL
CARRITO
● BOTÓN OFERTA
● PÁGINA HOME DE
UN SITIO WEB
● PÁGINAS DE
CONTENIDOS
Recomendaciones
● HAZ LOS BOTONES
COMO SI FUERAN
BOTONES
● ASEGÚRATE DE
MANTENER LA
CONSISTENCIA EN
TODA LA INTERFAZ
● SOMBRAS Y LUCES
● BOTONES O
ETIQUETAS CLARAS
● TAMAÑO Y EL
FEEDBACK
BOTO
NES
 Thanks!

¿Any questions?