• Author / Uploaded
• Jhon Briñez

Citation preview

BOTONES Y ZONAS SENSIBLES DEFINICIÓN: KAREN SOLER Los botones son los elementos más significativos dentro de las interfaces y que hay que tener muy en cuenta a la hora del diseño web. Casi todas las comunicaciones importantes entre el ser humano y el ordenador se inician, verifican o ejecutan a través de un botón. Para un usuario, sin embargo, ni la apariencia ni la tecnología definen un botón. Para éste, un botón es algo conciso, de forma regular, que responde a los eventos del ratón para realizar una acción concreta. Con tal que un usuario piense que aparece y funciona como un botón, es un botón. Usamos los botones cuando respondemos a los cuadros de diálogos, al mandar mensajes, y al movernos por la web. Para la mayoría de la gente, los botones son el medio primario de interacción con los ordenadores. Aunque las teorías originales que hay detrás de los botones parecen anticuadas, los diseñadores de la Web deberían comprenderlos, en el momento que la primera experiencia de los usuarios sobre un entorno de ordenador esta todavía estrictamente adherido a la teoría convencional sobre interfaces, el escritorio. En esencia un botón es un atajo. Originalmente los botones servían como atajos para iniciar scripts o para llevar a cabo una serie de funciones que de otra forma requerirían conocimientos de programación. Los diseñadores tienden a no pensar en los botones como atajos de programación. Pensamos en ellos visualmente: como rectángulos, ítems sombreados con una etiqueta centrada, quizás con un aspecto 3D, o con su línea exterior redondeada. Hacemos distinción entre iconos y botones, y vagamente conociendo la diferencia entre los botones iconizados y las etiquetas iconizadas. Podemos dibujar un botón en Photoshop y guardarlo como GIF, definirlo en HTML y representarlo de las formas disponibles en la colección del sistema, o podemos construirlos como celdas de una tabla y enlaces HTML, o con CSS. Los botones generalmente inician un script de comandos, Pulsar el botón de envío en un correo electrónico no es más que usar un atajo. La acción envía un comando pre formateado al servidor de correo. Un programa de correo no grafico realizaría las mismas instrucciones que el servidor de correo sin botones. El usuario debe escribir a mano el comando. Desde el punto de vista del servidor de correo, no hay diferencia. El botón es un atajo conveniente pero solo a los ojos del usuario.

Los botones podrían ser visualmente únicos, agentes autónomos de una tarea específica. Funcionan mejor cuando la esencia de la tarea puede ser comunicada mediante una palabra o un simple símbolo. Un enlace de texto puede incorporar muchas de las mismas características que un botón, pero el punto conflictivo será cuando queramos incorporar una frase. CALL TO ACCION 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 incita a nuestros visitantes a realizar una acción. Ésta normalmente, hablando de negocios online, será la de comprar un producto o contratar al profesional de la web, en caso de que fuera una web corporativa que preste servicios profesionales. ¿Para qué sirven exactamente los call to action? Pero los CTA's no sólo incitan a la transacción económica, como pudiéramos imaginar, sino que además:    

Pueden animar a nuestros seguidores o lectores a compartir nuestros contenidos en redes sociales. Escribirnos comentarios o sugerencias. Inscribirse en nuestra newsletter. Comprar los productos de nuestro eCommerce. Muchas personas hacen algo porque así se lo dicen o piden (comparte, comenta, inscríbete…) y este hecho parece una tontería, pero consigue incrementar enormemente la viralización y las visitas a tu página web. Conocida ya la importancia de estos elementos, debes tenerlos muy presentes a la hora de realizar:

 

El Modelo Canvas de tu negocio. Tu Plan de Marketing Digital.

CARACTERISTICAS: KAREN SOLER 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. La intención del visitante. Complejidad de la oferta.

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á vendiendo o promocionando. Intenta evitar demasiada aglomeración utilizando espacios en blanco. 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 combinaciones de colores hasta encontrar los que mejor funcionan con tus clientes. 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 en el marketing digital latino nos viene muy de ellos. Asegúrate de que, a su vez, sea sencillo y breve.

CLASES O TIPOS: Jhon Briñez botón fantasma o ghost button  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. El ghost, o fantasma, es por el hecho de que son transparentes y el resto se explica por sí solo, son botones. Para ser sinceros, un ghost button no es exactamente un botón en sí porque carece de relleno. Sería mejor describirlo como un marco, pero esto sería solo semántica. Tal vez hayas notado que la mayoría de los ghost buttons son más grandes que los botones normales que puedes encontrar en otra parte de la página web, pero nunca obstruyen la parte trasera de la pantalla. ¿Quién los usa? Ya que toman un espacio significativo de la pantalla, verás que estos botones son generalmente usados en páginas web de estilo aterrizaje (landing pages) porque capturan la atención del visitante y brindan una respuesta a la llamada a la atención tan funcional que motivan que los visitantes den clic. En pocas palabras, mientras más minimalista sea el diseño en cualquier página web, más probabilidades tienes de encontrar ghost buttons en posiciones claves en páginas específicas.  Los sistemas operativos más populares de los smartphones también tienden a hacer un uso generoso de los ghost buttons en el diseño su interfaz de usuario (IU). Apple hace esto de una gran manera. Desde el punto de vista de los desarrolladores web, los ghost buttons les permiten sacar provecho del campo visual de una pantalla, así que tiene sentido usarlos. BOTONES EN FORMULARIOS Un botón nos permite realizar una acción con el formulario que lo contenga. Existen dos tipos básicos de botones: botón enviar el formulario (envío o submit) y botón poner todos los campos a sus valores iniciales (restablecimiento o reset). Normalmente un formulario contendrá, como mínimo, un botón (el botón enviar).  

 

  Además de estos dos tipos de botones existe un botón especial al que denominamos “botón de contenido”, que no posee ninguna acción predefinida. El resultado de pulsar este botón o acción a ejecutar deberá ser especificada en cada caso. Los botones pueden insertarse a través de la etiqueta (tag) HTML input (botones para enviar y reestabler y botones de imagen) o el elemento HTML button (botones de contenido).     BOTONES DE ENVÍO (SUBMIT) Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es decir, cuando se pulsa el botón el navegador nos lleva a la dirección web indicada en el campo action y al mismo tiempo envía a esa dirección los datos que contiene el formulario. Para insertar un botón usamos la etiqueta . Para indicar que se trata de un botón de envío dentro de esta etiqueta escribiremos type = "submit". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.  

    Fíjate que hemos escrito . Esta forma de escritura es una forma abreviada equivalente a:  Ambos códigos producen el mismo resultado, pero es más habitual usar la primera forma (abreviada) que la segunda en este tipo de elementos (y en otros). En el ejemplo anterior, simplemente lo que ocurrirá al pulsar sobre el botón ‘Enviar este formulario’ es que el navegador irá a la página ‘accion.php’ y recibirá los datos que pudiera llevar el formulario. Si en vez de http://aprenderaprogramar.com/accion.php escribiéramos simplemente accion.php la direccion accion.php se buscaría dentro del mismo directorio donde se encontrara el archivo html.  BOTONES DE RESTABLECIMIENTO (RESET) Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con la etiqueta (tag) HTML input con el valor "reset" en su atributo "type". Escribe este códigon un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

 

 En el ejemplo anterior, puedes probar la funcionalidad del botón cambiando los valores de los elementos y presionando el botón para restablecer los campos a sus valores iniciales.  BOTONES DE IMAGEN (IMAGE) Estos tipos de botones funcionan de la misma forma que los botones de envío salvo que los de imagen son representados visualmente con la imagen especificada en el atributo "src". Los botones de imagen envían, además de toda la información contenida en el formulario, las coordenadas donde ha ocurrido el click cuando el formulario fue enviado. Las coordenadas se determinan desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado "boton1" las coordenadas serán enviadas en la forma "boton1.x" y "boton1.y"). En ocasiones las coordenadas no serán útiles, pero no tenemos que preocuparnos por ello ya que bastará con recuperar la información útil y ya está. Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen (nota: como ruta de la imagen puedes poner la ruta que te apetezca).

  Si ahora, hiciéramos click sobre el botón de imagen, podríamos observar como se envían las coordenadas donde hicimos el click. Ejemplo de cómo se reflejaría en la ruta que muestra el navegador los datos correspondientes a valores x e y de coordenadas: http://www.aprenderaprogramar.com/?boton1.x=115&boton1.y=31 Ten en cuenta que además de las coordenadas se enviará toda la información contenida en el formulario. Por ejemplo si en el formulario tuviéramos un campo nombre donde se ha introducido “Carlos” y un campo fruta donde se ha introducido “Fresa”, la url de destino sería similar a esta: http://aprenderaprogramar.com/? nombre=Carlos&fruta=Fresa&boton1.x=46&boton1.y=65   BOTONES DE CONTENIDO (BUTTON)

Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo "type"). Su característica principal es que se puede insertar contenido HTML dentro de ellos y así dotarlos de un aspecto atractivo, imágenes o colores de fondo, etc. Los botones de contenido se insertan con el tag HTML button, usando el valor "button", "submit" o "reset"  en su atributo "type". Un valor button supondrá que el botón no hará nada en respuesta a un click, a no ser que se especifique una acción de otra manera (por ejemplo usando el lenguaje JavaScript, pero no vamos a explicar ahora cómo para centrarnos en el HTML). Un valor submit hará que el botón funcione como un botón de envío. Finalmente, un valor reset hará que el botón funcione como un botón de restablecimiento de los valores predeterminados del formulario. Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.  

  Como podemos observar, hemos introducido contenido HTML dentro del propio botón; en concreto hemos usado la etiqueta   para poner texto en negrita y la etiqueta 
 para introducir un salto de línea. Ten en cuenta que la apariencia puede variar según el navegador que utilices. A su vez hemos escrito , lo que supondrá que el botón funcione como un botón de envío. Si hubiéramos escrito  el botón funcionaría como un botón de restablecimiento de valores por defecto, y su hubiéramos escrito  el botón no daría lugar a ninguna acción. En caso de no especificarse type para el botón, normalmente el navegador considerará que es un botón tipo submit.

Estados Del Botón Proporciona un feedback visual 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. Este ejemplo de diseño material, aclara la conveniencia de colocar distintas variantes a los botones:  

USOS CORRECTOS E INCORRECTOS: Jhon Briñez Proximidad Si el sitio tiene una gran cantidad de elementos interactivos muy cercanos entre ellos esto puede generar una dificultad en los usuarios con discapacidades motrices. Es ideal que estos elementos tengan una separación para evitar que el usuario cliquee el incorrecto. Uniformidad El usuario va a determinar la característica y forma de un botón en una pagina web y su cerebro la va a asociar con el concepto de (Boton), es incorrecto llenar visualmente una página web con botones de diferentes colores o formas que van a hacer que el usuario pase por alto algunas funciones o botones de la pantalla.

EJEMPLOS: Harold Garzón Ejemplos de CTA's o botones de llamada a la acción en algunos eCommerce Pregúntate a ti mismo dónde deberías utilizar los botones de llamada a la acción, según estos consejos que te acabo de ofrecer. De esta manera y ayudándote de estos ejemplos que a continuación te presento, te muestro 3 tiendas PrestaShop con diferentes botones, para propiciar que los clientes den el siguiente paso. » Añadir un artículo al carrito La web de El estante de Murcia, cuyo caso de éxito ya te traimos hace algunos meses en este blog, presenta un sitio predominantemente blanco y limpio. Con lo cual, sus botones de call to action para comprar sus productos, en este caso, están claros, ¿verdad? El verde en este caso, te dará la pista de por dónde continuar, si quieres agregar a tu carrito de compra ese producto.

» Mostrar a un cliente las ofertas En el caso de la tienda de bebés "Noumesos", que también abordamos en el blog hace algún tiempo, se muestra en su página home cómo puedes entrar directamente a las ofertas y zona outlet. Como puedes apreciar en la siguiente imagen, en algunos casos ya te adelantan hasta el porcentaje de descuento que tienen sus productos sobre el precio original.  

¿En qué lugares de mi eCommerce puedo emplear el Call to action? Muchos son los recursos, ebooks y demás material que nos aconsejan siempre a colocar estos elementos de una manera u otra. Sin embargo, los más habitual, y por qué no, efectivos, son los siguientes: » La página home del sitio web En el momento en que, por primera vez (o no) un usuario llega a tu tienda, es muy posible que tenga algún interés en los productos que vendes. Entonces, ¿por qué razón no le proponemos que realice una acción de manera inmediata? La página inicial debe, por tanto, estar alineada con los objetivos del negocio, pues si este nuevo usuario, nada más entrar, va a la landing page donde le incitas y finalmente compra, sería un éxito rotundo para ti.

En este caso, si un usuario entra a la web de Webescuela y, sin realizar ninguna otra acción previa, hace clic sobre "¿Quieres más información?" y rellena un formulario para interesarse por un curso, esto ya sería algo positivo. Significaría, por ende, que el call to action ha funcionado. » Páginas de contenidos De la misma forma, las páginas del sitio pueden venir acompañadas de un CTA de lo más común, como “inscríbete en nuestra newsletter“.

Asimismo, puedes decantarte por ponerlos únicamente en los posts del blog de tu eCommerce, por ejemplo.

En este caso, sin ir más lejos, si un usuario está leyendo este mismo blog y, en particular, algún artículo que le resulte interesante para su negocio, puede querer recibir en su correo contenidos como éste. Así, en el lateral del blog de PrestaShop, se da la opción de suscribirte, a la vez que sigues leyendo el artículo en cuestión. » En las cuentas de las redes sociales de mi tienda Pese a que en este caso, el call to action no estará literalmente en la web de tu negocio, sabes que conseguir la interacción de tu público en las redes sociales más utilizadas por tu público objetivo podría ser una oportunidad de que éstos hagan clic en tus contenidos. De esta manera, estaríamos trayendo tráfico web a las páginas de producto o a las URL's que más te interesen. En definitiva, estos canales digitales, como tu página de Facebook, son piezas esenciales en el Inbound Marketing de tu eCommerce. De ahí que, se aconseja la utilización de llamadas a la acción, con el objetivo de llevar al consumidor a la próxima etapa en el embudo de ventas.

En este ejemplo, se muestra cómo se comparte un contenido del blog de nuestra escuela de formación, con una pregunta bastante sugerente, a la vez que buscada recurrentemente por los usuarios que usan Instagram: "¿Por qué debería saber quién no me sigue en Instagram?" RECOMENDACIÓNES: Harold Garzón Haz los botones como si fueran botones ¿Cómo los usuarios entienden que un elemento es un botón? La respuesta es simple. Las señales visuales ayudan a las personas a saber si es “para hacer click” o no. Es importante usar significados visuales apropiados en elementos cliqueables para hacer que se vean como botones. Una forma segura es hacer a los botones rectangulares o rectangulares con esquinas redondeadas. Los rectangulares fueron introducidos al mundo digital hace mucho tiempo atrás, y los usuarios están familiarizados con ellos. Puedes, por supuesto, ser más creativo y usar otras formas (círculos, triángulos e incluso formas extrañas), pero ten en mente que las ideas únicas pueden ser riesgosas. Necesitas asegurarte de que las personas pueden identificar fácilmente cada variación de forma como un botón.   No importa qué forma escojas, asegúrate de mantener la consistencia en toda tu interfaz, así el usuario podrá identificar y reconocer todos los elementos que sean botones como botones. ¿Por qué la consistencia es tan importante? Bueno, porque los usuarios recuerdan los detalles, conscientemente o no. Por ejemplo, los usuarios van a asociar los elementos

particulares como “el botón”. Entonces, ser consistente no sólo contribuirá a un buen diseño, sino que también proveerá una experiencia más familiar para los usuarios. La siguiente imagen ilustra este punto perfectamente. Usar distintas formas para tus botones, puede resultar confuso, es una práctica incorrecta de diseño.

  Sombras y luces Las sombras son pistas valiosas que le dicen al usuario qué elemento de la interfaz está viendo. Las sombras por debajo hace sobresalir al elemento del fondo y lo hace identificable fácilmente como un objeto en el que “hacer click”, pues parece ser algo que puede ser presionado hacia abajo. Incluso los botones planos tienen espacio para esta sutil pista.

  Botones y etiquetas claros Los usuarios omiten los elementos de la interfaz sin un significado claro. Para ellos, cada botón debe tener una etiqueta apropiada o ícono. Es una buena idea basar tu selección en estos criterios. Si un botón necesario tiene una etiqueta o ícono que impresione demasiado al usuario, tal vez es necesario cambiar la etiqueta o el ícono. Las etiquetas accionables en las interfaces, como los botones, deben siempre llevar a una acción predecible por el usuario. Ellos se sentirán más cómodos cuando entienden qué acción realiza el botón. Etiquetas vagas como “enviar” o abstractas, no proporcionan suficiente información sobre la acción.

  El botón de acción debe afirmar qué tarea se realiza, para que el usuario sepa exactamente qué pasará cuando le dé clic a ese botón. Es importante que los botones usen verbos de acción. Por ejemplo, si un usuario va a crear una nueva cuenta, un botón que diga “Crear una cuenta” le indica qué es lo siguiente luego de presionar ese botón. Es claro y específico para la tarea. Las etiquetas específicas sirven como una ayuda justo a tiempo, dándole al usuario al confianza de seleccionar la acción correcta.

Coloca los botones donde los usuarios puedan encontrarlos No hagas a los usuarios buscar los botones: colócalos donde fácilmente puedan encontrarlos o donde esperen verlos. Lugar y orden Si estás diseñando una aplicación nativa, debes seguir los lineamientos de estilo que dicta la guía de la interfaz, para escoger un lugar indicado para los botones. ¿Por qué? Porque aplicar la consistencia diseñando respecto a las expectativas de los usuarios les ahorra tiempo.

Haz fácil la interacción para los usuarios El tamaño y el feedback visual de los botones, juegan papeles vitales respecto a la interacción. Tamaño y espacio Debes considerar qué tan grande será el botón en relación con los otros elementos en la página. Al mismo tiempo, necesitas asegurarte de que los botones que has diseñado son lo suficientemente grandes para interactuar con ellos.

  Debes considerar el tamaño de los botones, como también el espaciado o borde entre los elementos clickables, cómo el borde ayuda a separar los controles y le da a tu interfaz de usuario suficiente espacio para respirar.

Proporciona un feedback visual 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. Este ejemplo de diseño material, aclara la conveniencia de colocar distintas variantes a los botones:  

 

  Contrasta visualmente los botones más importantes

Asegúrate de que el diseño pone énfasis en las acciones primarias o prominentes. Usa un color contrastante para mantener al usuario enfocado en su atención en él, y colócalo en un lugar prominente. Call-To-Action-Button Los botones importantes, (como los CTAS), le sugieren al usuario directamente tomar la acción que quieres que tomen. Para crear un botón de CTA efectivo, y lograr que el usuario le de click, debes usar colores de alto contraste en relación con el fondo y colocarlos estratégicamente. Distinción visual para botones primarios y secundarios Cuando escoges entre acciones primarias y secundarias, las distinciones visuales son métodos útiles para ayudar a las personas a tomar una decisión sólida:  La primera acción positiva asociada con un botón necesita tener una gran fuerza y 

tamaño. Debe dominar visualmente. Las acciones secundarias (Cancelar o Atrás) deben tener un tamaño más pequeño, para dejarle todo el protagonismo a los botones más importantes.

El checklist del diseño de botones Mientras que, como sabemos, cada diseño es único, también es cierto que tienen varias cosas en común. Por eso colocamos el siguiente checklist de un buen diseño. Para asegurarte de que tus botones funcionan para tus usuarios, debes responder las siguientes preguntas:  ¿Tus usuarios identifican el elemento como un botón? Piensa en cómo el diseño 

comunica asequibilidad. Haz que se vea como un botón. ¿La etiqueta proporciona un mensaje claro sobre lo que pasará luego de darle click? Es mejor colocar un mensaje claro sobre cuál es la acción en vez de un vago como “Ok”.



¿Puede tu usuario conseguir rápidamente el botón? El lugar de la página donde



coloques el botón es tan importante como su forma, color y la etiqueta en él. Considera el patrón que sigue el usuario en la página y coloca los botones donde usualmente él espera encontrarlos. Si tienes uno o más botones en tu vista, ¿Los botones primarios tienen suficiente importancia? Haz la distinción clara entre las dos opciones, usando diferentes tamaño y diseño para cada uno.

Los botones son elementos visuales para crear una buena experiencia de usuario, por eso, es mejor prestar atención a las mejores prácticas esenciales para ellos. Rápida recapitulación:  Haz los botones más botones  Etiquetas de botones que describan su uso.  Colócalos donde se espera que estén  Haz fácil para el usuario interactuar con ellos  Haz el botón más importante fácilmente identificable Cuando diseñas tus propios botones, comienza con los que más importan, y ten en mente que el diseño de botones siempre es sobre reconocimiento y claridad.