1. Web Design
  2. UX/UI
  3. UX Design

Una guía para principiantes para diseñar sitios web amigables con anuncios

Scroll to top

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La publicidad siempre ha sido un gran negocio y, en la actualidad, Internet juega un papel muy importante. En 2011, los ingresos publicitarios en Internet superaron a los de la televisión por cable en los Estados Unidos y, al año siguiente, las estimaciones situaban los ingresos por publicidad en Internet en 36.570 millones de dólares.

Dado que muchos de los sitios que generan beneficios dependen de los ingresos publicitarios, satisfacer a los anunciantes es un asunto importante. Sin embargo, si sobrecargas un sitio con excesivos espacios publicitarios alejarás a los visitantes, y en consecuencia frustrarás las expectativas de mantener unas relaciones fructíferas con los anunciantes y de obtener posibles beneficios. Establecer un equilibrio entre tus usuarios y tus anunciantes es la clave para diseñar un sitio que contenga publicidad y, en este artículo, echaremos un vistazo a algunas de las consideraciones a tener en cuenta y a las prácticas recomendadas a la hora de crear uno.


Comprender los anuncios

Comprender el negocio de la publicidad es probablemente uno de los mayores obstáculos en la creación de un sitio bien diseñado que esté optimizado para atraer publicidad, aunque es bastante sencillo.

Los anunciantes pueden estar interesados en comprar espacios publicitarios por distintas razones, al igual que sucede con cualquier proyecto de diseño web, los objetivos y requisitos concretos pueden diferir drásticamente entre unas campañas y otras, pero en general pretenden ganar exposición para su causa. Cuanto mayor sea el potencial de que un anuncio sea visto y/o un cierto número de usuarios, o un grupo demográfico específico interactúen con él, habrá más demanda y el sitio podrá cobrar más dinero por ofrecer a los anunciantes el privilegio de trabajar con ellos. Un "leaderboard" o superbanner en la parte delantera de The New York Times atraerá más interés publicitario y exigirá precios más altos que un cajetín de 100 x 100px en la parte inferior de la tercera página del blog de nicho de un individuo.

Banner advertising used on The New York Times website.Banner advertising used on The New York Times website.Banner advertising used on The New York Times website.
Publicidad de banner utilizada en el sitio web de The New York Times.

También es importante comprender qué métricas se utilizan para hacer el seguimiento del éxito de un anuncio, y esto no es algo a lo que podamos dar una respuesta universal. Algunos anuncios se venderán en función de cuántas personas sea probable que los vean, mientras que otros pueden tener un precio basado en cuántos usuarios hagan clic sobre ellos. Por lo tanto, es importante tomar el contenido de este artículo con una pizca de sal. Ten siempre en cuenta cómo va a vender el sitio los anuncios para diseñar en torno a ese hecho, en cualquier caso gran parte de lo que comentamos es aplicable de forma casi universal.

Considerar la publicidad durante todo el proceso de diseño es vital; pueden darse significativas repercusiones si simplemente dejas caer algún espacio publicitario en el último minuto. Cuando la mayoría de los ingresos del sitio provienen de la publicidad, los usuarios son el producto que comercializas y darles la espalda insertando publicidad molesta y sobresaturada empezará a reducir el valor de lo que estás vendiendo. Por lo tanto, tomarte un tiempo para reflexionar cómo encajar la publicidad dentro de tu diseño es crucial para que en el futuro se dé un equilibrio entre anunciantes felices y usuarios satisfechos.


Tamaño

Los anuncios vienen en muy distintos tamaños y pueden ocupar una cantidad significativa del espacio disponible en tu diseño. No hay ninguna regla que dicte que debes usar tamaños de anuncio estándar en tu diseño, pero la adopción de las dimensiones de uso común garantizará la fluidez del proceso de tal manera que los potenciales anunciantes puedan realizar una campaña dentro de tu diseño sin mayores complicaciones.

The Interactive Advertising Bureau ha establecido el conjunto de dimensiones publicitarias más habituales en la web y es muy recomendable que te ciñas al uso de estos tamaños. Estas dimensiones están compuestas por un rango de tamaños significativamente diversos, desde grandes anuncios a toda página, hasta rectángulos más pequeños, así que gracias a este amplio catálogo no deberías encontrar demasiados condicionantes para tu diseño.

IAB Ad SizesIAB Ad SizesIAB Ad Sizes

Podría decirse que, especialmente en los últimos años, existe otro tipo de dimensiones que también podrías tener en cuenta. Podrías optar por ofrecer anuncios más pequeños que se expanden sobre tu contenido cuando son accionados por un usuario. Naturalmente, dado que esto cubre otros elementos de la página, es importante tener en cuenta dónde colocar el contenido más relevante para que no se vea demasiado afectado por la expansión de los anuncios.

La experiencia del usuario que ofrecen estos anuncios es un tema delicado, así que debes ser muy consciente del nivel de intrusión que generan.

La proliferación de enormes anuncios de banner expansivos en conocidos y principales sitios web me ha hecho muy hábil en una cosa: descubrir dónde está el botón de cierre.


Ubicación

Determinar la ubicación del espacio publicitario que vas a tener disponible quizá sea incluso más importante que elegir su tamaño. Los anunciantes no valorarán el espacio más próximo a la parte inferior de la página que queda oculto, por lo que siempre será buena idea seleccionar una ubicación que requiera un desplazamiento mínimo para ser visualizado.

Del mismo modo, dado que la mayoría de los usuarios visitarán tu sitio por su contenido, posicionar el espacio publicitario más cerca o incluso dentro del contenido de la página, probablemente aumente las interacciones y el valor desde el punto de vista de los anunciantes.

Dicho esto, es vital tener especial cuidado al trabajar con anuncios dentro de tu contenido principal de forma que ambos sean perfectamente distinguibles del resto de tu contenido, por diversas razones y, en algunos casos, por requisito legal, y además para no molestar al usuario, no deben aparecer con excesiva frecuencia.

La integración de Tweets Promocionados de Twitter es un excelente ejemplo de publicidad ubicada dentro del contenido bien diseñada y que al mismo tiempo proporciona una mínima interrupción. No todo el mundo está contento con su presencia, este es el perpetuo dilema al que se enfrentan los anunciantes y diseñadores.

Promoted TweetsPromoted TweetsPromoted Tweets

Del mismo modo, Google muestra sus anuncios en las páginas de resultados de búsqueda junto a los listados principales no patrocinados y con estilos similares, lo que permite que el flujo de la página sea ininterrumpido aunque muestre publicidad en varias ubicaciones.

Google adsGoogle adsGoogle ads

La elección de la ubicación de los anuncios también puede verse influida por las teorías de diseño establecidas, como las maquetaciones en F y las maquetaciones en Z. Estas han sido definidas tras hacerse evidente cómo leen e interactúan con una página los usuarios, estas teorías de diseño pueden ayudar a guiar la ubicación de los espacios publicitarios de manera que coincidan con áreas de visibilidad óptima. Por supuesto, esto debe ir acompañado de una obstrucción mínima de manera que el contenido principal se visualice lo más cómodamente posible, no obstante, es algo a tener en cuenta.

Many sites opt to feature an ad at the top of a sidebar, in the second "line" of the Z, between user's scanning a title and getting to the actual content.Many sites opt to feature an ad at the top of a sidebar, in the second "line" of the Z, between user's scanning a title and getting to the actual content.Many sites opt to feature an ad at the top of a sidebar, in the second "line" of the Z, between user's scanning a title and getting to the actual content.

Muchos sitios optan por incluir un anuncio en la parte superior de una columna lateral, en la segunda "línea" de la Z, entre el escaneo de un título y el acceso al contenido real por parte del usuario. Por otro lado, sitios como The Washington Post utilizan la teoría de la maquetación en F para mostrar un anuncio más pequeño en la parte más visible de la página, y anuncios más grandes en las áreas a las que los usuarios se sienten menos inmediatamente atraídos.

F-Layout adsF-Layout adsF-Layout ads

Al acomodar varios anuncios en una sola página, el espaciado es otra área a estudiar. Algunos diseños optan por agrupar anuncios más pequeños en una única parte de la página, mientras que otros utilizan anuncios más grandes situados en diferentes ubicaciones. La agrupación de anuncios puede mantener los anuncios a una distancia apropiada del contenido de una manera que resulta satisfactoria para los usuarios, pero esto puede tener efectos adversos en la forma en que los anunciantes consideran tu sitio y, una vez más, encontrar el equilibrio adecuado es algo que se debe valorar de forma individual en cada proyecto.

Es muy importante, en esta etapa, comprender desde dónde se entregan tus anuncios. Si estás entregando anuncios desde una red como Google AdSense, en ocasiones existen directrices estrictas en cuanto a las ubicaciones que podrían limitar tu libertad a este respecto. Es imperativo que seas plenamente consciente de todas estas pautas para evitar cualquier problema más adelante.


Frecuencia

Uno podría pensar que más espacio publicitario equivale a más dinero, pero saturar en exceso tu diseño con demasiados anuncios puede tener el efecto contrario. Si un usuario está siendo bombardeado con publicidad, probablemente se sentirá molesto y potencialmente abandone el sitio sin intención de volver.

Como regla general, cuando los usuarios estén buscando algo, deberías mantener el número de anuncios al mínimo para que permanezcan en tu sitio durante más tiempo, en lugar de alentarles a abandonarlo.

En páginas como la página de inicio y las que listan resultados de búsqueda, considera la posibilidad de minimizar el uso de anuncios y en su lugar, céntrate en llevar a los usuarios al contenido que desean. Cuando lleven un tiempo en el sitio y ya tengan el contenido que desean, será el momento de empezar a mostrarles un poco más de publicidad.

TIME homepageTIME homepageTIME homepage

Si bien los anuncios de tu página principal pueden obtener más impresiones, ocultar lo que los usuarios han venido a ver principalmente entre un mar de anuncios no favorecerá que se sientan cómodos y proclives a la interacción.

Por ejemplo, el sitio web de TIME solo incluye un anuncio en la página principal, dedicando el resto a la navegación. Sin embargo, al abrir un artículo individual, esta cifra aumenta y aparecen nuevos anuncios por encima del contenido. Del mismo modo, YouTube utiliza anuncios intersticiales y en la columna lateral en las páginas de vídeos individuales, pero su página de inicio solo tiene un banner claramente distinguible.

Intersticiales... presentar de inmediato ricas experiencias HTML5 o "aplicaciones web" en puntos de transición naturales de una aplicación como durante su apertura, con vídeos "pre-roll" (antes del contenido) o durante la carga de un juego.

YouTubeYouTubeYouTube

Reflexiones finales

Crear un diseño eficaz y amigable con los anuncios consiste en crear un equilibrio perfecto entre la visibilidad y el reconocimiento de tus anuncios para y por parte de los usuarios, y la no invasión del contenido que vinieron a ver en tu sitio. Al tomar decisiones cuidadosas en lo relativo al tamaño, la ubicación y la frecuencia de los anuncios, esto puede convertirse en un proceso simple y traducirse en una importante mejora en lo que al éxito financiero de un diseño se refiere.