Saltar al contenido
Todo el blog

Oficio

Por qué los bloques de tu web van siempre en el mismo orden

Pages ordena los bloques de tu web por ti: primero quién eres, después tu música y al final el contacto. Por qué lo hemos decidido así y en qué nos basamos.

Por Joan Subirats, fundador de The Jazz Passport7 min de lectura

En una de las primeras webs de Pages, los enlaces a Instagram y a las plataformas aparecían justo debajo de la portada. Después venían los vídeos, la prensa, los conciertos y los discos. La biografía no llegaba hasta el séptimo bloque: alguien podía recorrer media página sin saber quién estaba al otro lado del enlace.

Como estaba

  1. 01Portada
  2. 02Enlaces
  3. 03Vídeos
  4. 04Prensa
  5. 05Conciertos
  6. 06Discos
  7. 07Biografía
  8. 08Documentos
  9. 09Contacto

Como la lee Pages

  1. 01Portada
  2. 02Biografía
  3. 03Discos
  4. 04Conciertos
  5. 05Vídeos
  6. 06Prensa
  7. 07Documentos
  8. 08Enlaces
  9. 09Contacto
Una web real de la beta, sin nombres: los mismos bloques, en el orden que tenía y en el orden de Pages.

No era una mala web. El contenido estaba ahí. El problema era el camino que tenía que hacer el visitante para encontrarlo. En las primeras webs de la beta no había dos con el mismo orden: una ponía una galería de fotos antes de cualquier cosa que se pudiera escuchar; otra escondía la biografía casi al final. Cada músico había tomado una decisión razonable con la información que tenía.

Pero no debería hacer falta saber cómo lee una página alguien que llega desde un correo de contratación. Por eso en Pages eliges qué bloques muestra cada página, pero no su orden. Cada bloque tiene un lugar: portada, biografía, discos, conciertos, vídeos, prensa, proyectos, fotos, documentos, enlaces y, al final, contacto. Si añades uno, entra donde le corresponde. Este artículo explica por qué lo hemos decidido así y en qué nos basamos. Es la segunda parte de por qué el CTA de tu web lleva al contacto.

La visita que importa

Quien te sigue ya te escucha en las plataformas y te encuentra en las redes. A tu web llega otra clase de visitante: una sala, un festival, una agencia, un periodista o una escuela que busca profesor. No viene a curiosear. Quiere saber si tu proyecto encaja y, si encaja, cómo ponerse en contacto contigo.

La decisión suele ocurrir deprisa. Jakob Nielsen, de Nielsen Norman Group, estudió cuánto tiempo pasa la gente en una página (How Long Do Users Stay on Web Pages?, 2011). Muchos visitantes se van durante los primeros 10 a 20 segundos; quien supera aproximadamente los 30 tiende a quedarse. Su consejo es sencillo: una página debe explicar qué ofrece en menos de diez segundos.

La misma consultora midió con seguimiento de la mirada dónde se concentra la atención (Scrolling and Attention, Therese Fessenden, 2018). El 57 % del tiempo se va en lo que se ve sin bajar y el 74 % en las dos primeras pantallas. Lo que aparece después tiene que trabajar más para ser visto.

En una web de músico, ese primer espacio tiene que responder a dos preguntas: quién eres y cómo suenas. Una fila de enlaces o una galería de fotos pueden esperar.

Quien programa lo explica de una forma muy práctica. Courtney Gallagher, de Club Passim, cuenta en el blog de CD Baby (Need to book or promote a gig?, Chris Robley, 2015) que, si está preparando un boletín para 25.000 personas y quiere incluir un vídeo tuyo, pasa al siguiente artista si tu web no se lo pone fácil.

Lo primero y lo último

Bennet Murdock estudió en 1962 cómo recordamos una lista (The serial position effect of free recall): solemos retener mejor lo primero y lo último, y perder antes lo que queda en medio. En psicología se llama efecto de posición serial.

Murdock no estaba estudiando webs de músicos. La aplicación a Pages es nuestra: una página también se lee en un recorrido. Por eso al principio ponemos lo que conviene recordar, quién eres y cómo suenas. Al final dejamos lo que hace falta cuando el visitante ya ha decidido, que es cómo escribirte. En medio va el material que le ayuda a decidir.

Contacto al final, siempre cerca

Poner el formulario arriba parece directo. En realidad pide una decisión antes de que el visitante conozca tu proyecto. Si el contacto aparece como tercer bloque, todavía no sabe quién eres ni qué haces; lo normal es que siga buscando.

Pages lleva ese formulario al final del recorrido. Primero te conoce, luego te escucha y te ve en directo, después lee lo que dicen de ti y consulta el resto de tu trabajo. Cuando llega al contacto, ya tiene una razón para usarlo.

El formulario está al final, pero no queda lejos. El botón de contacto es el primero de la portada y el menú lo mantiene visible en todas las páginas, también en el móvil, como contamos en el artículo del CTA. Si alguien decide escribirte nada más llegar, puede hacerlo.

Los enlaces son una salida

Spotify, Instagram y YouTube cumplen su función: llevan al visitante fuera de tu web. Allí entra en una plataforma preparada para ofrecerle otro vídeo cuando termine el tuyo.

Por eso el bloque Enlaces va casi al final, justo antes de Contacto. En ese punto sirve a quien ya te ha escuchado y quiere seguirte. Debajo de la portada haría otra cosa: abriría una puerta de salida antes de que sonara una sola nota.

Arriba

  • Quién eres
  • Tu música
  • Tus próximas fechas
  • Tus vídeos en directo

Abajo

  • Tus fotos
  • Tus documentos
  • Tus redes y plataformas
  • Tu contacto, que cierra

El orden, bloque a bloque

  1. Portada. Tu nombre, una foto, una frase y el botón que lleva al contacto.
  2. Biografía. Dos líneas para situarte: estilo, formación y procedencia. Lo esencial primero.
  3. Discos. Cómo suenas. Quien programa decide escuchando, no leyendo.
  4. Conciertos. Tus próximas fechas, cada una con sus entradas. Es lo que caduca y lo que da motivos para volver.
  5. Vídeos. Cómo eres en directo, la prueba que necesita quien va a contratarte.
  6. Prensa. Lo que dicen de ti, después de que el visitante te haya escuchado y visto.
  7. Proyectos. El resto de tu trabajo: otras formaciones, encargos y colaboraciones.
  8. Fotos. El material de quien escribe sobre ti o anuncia tu concierto.
  9. Documentos. El dossier, el rider o la ficha técnica, para quien ya está decidido.
  10. Enlaces. Tus redes y plataformas, para quien quiere seguirte después.
  11. Contacto. El último bloque: la forma de escribirte queda al final del recorrido.

Por qué el orden es fijo

Podríamos haberlo dejado como una recomendación. Entonces tendrías que conocer todo lo anterior para construir una web que funciona, y tu trabajo es la música. Tú decides qué cuentas. Pages decide el orden.

Esto sigue siendo tuyo:

  • Qué bloques muestra cada página. Si quitas bloques, los que quedan suben. Con una portada que solo tenga portada, biografía, proyectos y contacto, tus proyectos pasan a ser el tercer bloque.
  • En qué página va cada cosa. Lo que no quieras en la portada puede ir a otra página, como una de biografía o de prensa.
  • Cómo se llama cada bloque. El título de cada sección lo puedes cambiar en Studio.

Cuando algo necesita ir antes

Casi siempre puedes hacerlo sin cambiar el orden:

  • Acabas de sacar disco. El diseño Nuevo disco de la portada coloca el disco y dónde escucharlo en lo alto.
  • Tienes conciertos cerca. El segundo botón de la portada puede llevar directamente a tus fechas.
  • Tu trabajo son tus proyectos. Deja en la portada solo lo esencial y tus proyectos subirán solos.

Qué ocurre en Pages

  • Al añadir un bloque, entra en su sitio, no al final. Contacto sigue cerrando.
  • Si tu web tenía otro orden, ahora se lee en este. El contenido, los títulos y los bloques quitados siguen ahí.
  • Todas las páginas siguen el mismo orden, también las privadas.
  • En Studio, la lista de bloques ya no se arrastra, y Dex te recuerda por qué.
La lista de bloques de la portada en Studio: el orden es el de Pages, y Dex explica por qué.

Para ver qué más mira quien programa en esos primeros segundos, sigue con qué mira un programador en tu web.

Tu web, sin el trabajo de la web. Pide tu invitación.

Pages es la web y el Studio para músicos de The Jazz Passport. Lo técnico ya está hecho; tú pones la música.

Pide una invitación