Ayer publiqué una entrada sobre el Calamar Gigante; una nueva revista Cultural nacida en Guadalajara. Los creadores de esta revista han llevado a cabo la tediosa y difícil tarea de buscar publicidad para sufragar los costes de impresión de la misma. No obstante, a los costes de producción hay que sumar los costes de elaboración. Por una parte el contenido ( recopilación de entrevistas, creación de artículos de opinión etc) y por otra el diseño; en el caso del Calamar Gigante es grande ya que cada página de la revista presenta un diseño diferente.
Hay dos modelos tradicionales, a menudo mezclados, para financiar una revista:
Con suscripciones de pago. Es decir que tus lectores paguen por el contenido. Este era el modelo tradicional. Escalaba de maravillas; más suscriptores equivalía a más dinero y a un mayor margen al disminuir los costes de impresión y dividir los costes de producción (generación de contenidos y diseño) entre un mayor número de usuarios. La gran oferta de contenido gratis en Internet, aún siendo en su mayoría de menor calidad, ha hecho que los subscriptores de pago disminuyan en las revistas offline. Las versiones online de estas revistas trataron de crear modelos de pago en la red sin éxito durante un tiempo. Recuerdo cuando el País se podía acceder sólo mediante suscripción y el Mundo era totalmente abierto. Ante la ganancia de cuto de mercado online y la poca demanda de suscriptores al País no le quedo más remedio que pasar a todo gratuito. Los modelos de pago online no tuvieron una gran aceptación entre los internautas y parecía que la vaca de la publicidad tenía suficiente leche para alimentar un modelo de contenido totalmente gratis.
Mediante Publicidad. Las publicaciones imprimían anuncios en sus revistas offline. Los anunciantes pagaban por ello. Cuantos mayor era la tirada, más costaba un anuncio. La llegada de Internet, y en especial de modelos como el de Adwords, permite la publicación de anuncios para un público segmentado y predispuesto a consumir la publicidad que les mostramos. El público está más predispuesto porque la publicidad está más relacionada con el contenido que están consumiendo (el cual es a menudo más de su interés) o porque el producto publicitado resuelve su búsqueda. Es decir el tradicional modelo de publicidad en el cual el anuncio es igual para todo el mundo tiene menos efectividad que la publicidad orientada en la Web. Es decir, el mismo dinero invertido en publicidad Online es más efectivo que el mismo dinero en los medios tradicionales. Esta premisa, esta poniendo de rodillas a todas las revistas y periódicos al estar moviendo los anunciantes su dinero de los medios offline a medios online. La competencia entre medios y la creación de contenido amateur ha creado un sistema en el cual todo el contenido es gratis. No esta claro que la vaca de la publicidad pueda tener suficiente leche. De hecho hay gente como Ruppert Murdoch que quiere cobrar por sus portales de noticias el próximo verano porque considera que el modelo de todo gratis es insuficiente. Periódicos como el Wall Street Journal tiene modelos de pago online exitosos. Sin embargo, veo difícil la transición de un gratis total.
El nuevo modelo hibrido
Los creadores del Calamar Gigante quieren que su publicación sea gratuita. Cuando me lo comentaron lo primero que me vino a la cabeza es más o menos lo que he expresado en los párrafos anteriores. Es decir que creo que los anunciantes van a huir cada vez más de la prensa offline y que los costes de impresión son un lastre difícil de reducir. Consideró que su mejor salida era crear una Web gratuita sostenida por anunciantes y a la vez dar salida a la revista cobrando una pequeña cantidad a través de los nuevos lectores electrónicos (ver vídeo más abajo) que están al llegar o que ya están a la vuelta de la esquina como el mitificado iPad. Estos lectores y dispositivos permiten una experiencia más rica y funcional que las tradicionales revistas.
¿Cuáles son las claves para crear una revista Web que funcione?
Accesibilidad Hacer que la publicación sea accesible por usuarios y motores de búsqueda y así atreer al mayor número posible de lectores lo que traé consigo a anunciantes.
Distribución y Comunidad Es importante usar los vehículos de distribución de las redes sociales (Facebook, Twitter, Google Buzz) para hacer llegar el contenido de la revista a un mayor número de gente y crear una comunidad alrededor de la misma.
Apuntar un nicho La gran ventaja de Internet es que podemos escribir sobre un tópico muy concreto y llegar a una audiencia de suficiente volumen la cual podemos alcanzar gracias a la ilimitada distribución de la Web. Este fenómeno se conoce como la Larga estela (o Long Tail). Apuntar a un nicho nos va a permitir competir contra empresas o publicaciones más pequeñas. Considero que la propuesta cultural y orientada a diseñadores del Calamar Gigante puede tener en público suficientemente grande en Internet. Más aún los diseñadores son gente normalmente muy a la vanguardia de la tecnología que no debería tener problemas en consumir información a través de la Web u otro medios digitales.
¿Qué pensáis al respecto?, ¿Cómo lograríais hacer viable una revista en los tiempos de cambio en el sector de la prensa que vivimos?
Portada del Primer Número de la Revista Calamar Gigante
El 5 de Febrero se presentó El Calamar Gigante en la escuela de arte de Guadalajara. El Calamar Gigante es un magazine de Cultura, Diseño y Actualidad nacido en Guadalajara.
La revista es gratuita y su primera tirada, de más 2.000 ejemplares, se ha distribuido por Guadalajara entre espacios públicos como la escuela de arte, biblioteca y diversos locales de Guadalajara.
Salón de Actos de la escuela de arte de Guadalajara durante la presentación del Calamar Gigante
Los creadores de esta revista son los diseñadores Eva Pérez, Javier Arroyo, Jorge Diego, Gema Cormano, Eva Larbah, Francisco Javier A.P. y Luis Márquez G. La revista es un conjunto de diseños creados por cada uno de estos diseñadores. El contenido de la revista se integra alrededor de estos diseños dotando cada parte de la revista de una personalidad diferente. El índice de su primera edición da una idea sobre el contenido de la revista y espero que os abra el apetito sobre la misma:
Actualidad. El Proceso de Bolonia
Arte en el Mundo. Arte étnico: Irán
Arte y Cultura. Monográfico. Historia de la Escritura nº1
Diseño de Autor. Herakut
Poema Ilustrado. Miguel Labordeta / Ilustración: Eva Larbah
Opinión. José Enrique Canabal. Estética y Ética.
Opinión. Sacarmento Alarcón. Abellán. Gaza
Colaboración. José Luis Espinosa.
Ilustración. Eva Larbah
Arte y Cultura. Monográfico. Historia de la Fotografía nº1.
Portfolio Fusiones. Francisco Javier
Entrevista. Fernando Benito
Microrrelato ilustrado. Influjo Refeljo. Surrealismo por Gedimita.
Portfolio. Captando el espíritu. Texto y fotos: Luis Márquez
Crítica de Cine. por Jorge Diego
Nuestro Entorno. Villaescusa de Palositos
Diseño de Autor. Saul Bass. Gráfica cinematográfica.
Estoy colaborando con ellos para conseguir plasmar la revista en una Web. Hasta ahora podéis consultar en elcalamargigante.com sólo una serie de imágenes que componen el primer número de la revista. Esperamos crear una página Web mucho más accesible en las próximas semanas.
La siguiente gráfica muestra las resoluciones usadas por los visitantes del portal Web del Ayuntamiento de Brihuega durante el último mes:
Capturas del portal Web de Brihuega en diferentes resoluciones
A continuación se muestra una serie de captura de pantallas de la página de inicio del portal Web de Brihuega a las resoluciones mencionadas en la gráfica anterior.
Página de inicio de Brihuega a 1024x768
Página de inicio de Brihuega a 1280 x 1024
Página de inicio de Brihuega a 1400x900 píxeles
Página de inicio de Brihuega a 1366x768 píxeles
Página de inicio de Brihuega a 800x600 píxeles
Página de inicio de Brihuega a 1680x1050 píxeles
Página de inicio de Brihuega a 1280 x 768 píxeles
Página de inicio de Brihuega a 1360x768 píxeles
Página de inicio de Brihuega a 1920x1200 píxeles
Página de inicio de Brihuega 1152 x 864 píxeles
Página de inicio de Brihuega a 1280x800 píxeles
¿Qué es el fold de una página Web?
Hace unos años cuando comencé en el diseño Web la mayoría de la gente navegaba en 800x600 píxeles. Esto se debía a que la mayoría de esos gigantescos monitores CRT no ofrecían una resolución mayor. Se denomina fold a la parte de una página Web escondida en una primera carga y a la que accedemos haciendo scroll hacia abajo. Fold es el término anglosajón que se refiere a la parte de los periódicos doblada que no estaba a la vista al público cuando éstos se exponían en los kioskos. Es decir, el creador del periódico se devanaba los sesos para lograr posicionar su contenido en la parte que si se veía con el periódico doblado para así captar la atención de los transeúntes y lograr más ventas. La siguiente imagen muestra este concepto y muestra la página de inicio de este portal con una línea roja que marca el comienzo del fold para una resolución de 1024x768 píxeles.
La importancia del fold en el diseño Web fue, en mi opinión, durante un gran tiempo sobrevalorada. Se consideraba que todo aquello que por debajo del fold era practicamente invisible al usuario. Con el paso del tiempo, todos nosostros nos hemos familiarizados con las metáforas del interfaz Web (buscador en la esquina superior derecha, logotipo con enlace a la página de inicio ...) y con las barras de desplazamiento verticales. Creo que los usuarios hacen más scroll de lo que creemos. Y que no lo ven como un gran problema.
No obstante, es importante colocar el contenido más importante por encima del fold. En mi caso las diferentes posiblidades de seguir mi trabajo y mi actividad. Es decir, el banner de mi agencia de diseño Web, la suscripción a la lista de correo, al RSS, a mi cuenta de Twitter o mi página de Facebook están justo encima del fold. Además el título, de la entrada actual y gran parte de su contenido (de modo que el visitante se anime a continuar leyendo) están también visibles.
Optimizar para 1024x768, que es actualmente la resolución de pantalla más usada. Por supuesto, la regla general es optimizar para la resolución más común de tu audiencia; esta resolución puede cambiar en el futuro. Puede ser incluso una resolución diferente ahora, si por ejemplo, estas diseñando el intranet de tu empresa, la cual da monitores con resoluciones grandes a todos sus empleados.
No diseñes específicamente para una sola resolución por que las resoluciones varían entre usuarios. La variación en el tamaño de las ventanas es incluso más grande, porque los usuarios no tienen siempre sus navegadores maximizados (especialmente aquellos que tienen monitores grandes).
Usa un diseño líquido, que se estire para adaptarse a la resolución del usuario (esto es, evita que diseños fijos que son siempre el mismo tamaño).
Visiblidad inicial: ¿Está visible toda la información relevante por encima del fold, de modo que los usuarios puedan verla sin hacer scroll? Es decir, una solución de compromiso entre cuantos objetos se muestran respecto cuanto detalle se muestra por cada objeto.
Legibilidad: ¿Cómo de fácil se lee el texto en las diferentes columnas, dado el ancho asignado?
Estética: ¿Cómo de atractiva es la página cuando los elementos están al tamaño y localización adecuados para esta resolución de pantalla?. ¿Se alinean todos los elementos correctamente; es decir, los pies de fotos justo debajo de las fotos, ...
El diseño del portal de Brihuega es un diseño fijo. Debido al modo actual de hacer zoom en los navegadores, considero que algunas de las ventajas que tenía el diseño fluido frente al fijo han desaparecido. Esto es tema para otra entrada y no quiero profundizar más aquí. Volviendo al diseño del portal de Brihuega este siempre tiene un ancho de algo menos de 1.000 píxeles. Este ancho se escogió para adaptarse a las principales resoluciones. Sólo un 3% de usuarios navegan a 800x600 por lo que el portal opta por adaptarse más a la gran mayoría que hacer un diseño todavía más conservador para 800 píxeles. Lo ideal sería ofrecer un diseño alternativo para dichas resoluciones.
Hay que tener en consideración que las capturas de pantalla incluyen un banner amarillo justo debajo de la navegación. Este banner no aparece normalmente en la página con lo que hay que imaginarse que los elementos mostrados para la resolución 1024x768, la más común, se parecerán más a la imagen en 1280x1024 píxeles que a la mostrada en esta entrada. No obstante la serie de capturas mostradas más arriba ponen a la vista algunos problemas:
El banner superior, ocupa gran parte de la página antes del fold. A mi gusto demasiado espacio. Si el banner fuera 2/3 de su tamaño actual, la visibilidad inicial sería mejor.
Contenido importante como los tres próximos eventos en la agenda de la villa o la información meteorológica de los próximos dos días aparece oculto inicialmente para la mayoría de las resoluciones.
No obstante, los principales elementos de navegación como buscador o menú están visibles incialmente, la legibilidad de los mismos es buena y el banner superior, si bien quita visibilidad, aparta también un componente estético.
Resumiendo, optimiza tus diseños para 1024x768 pero asegurate que tu página se ve bien para todo el abanico de resoluciones.
Soy de la opinión que un portal Web de más de 20 páginas tiene que tener un índice. Hay que ofrecer varias posibilidades para que nuestros visitantes sean capaces de encontrar el contenido buscado. Estas podrían ser índice, buscador y navegación. El concepto de índice viene de la industria del libro en un intento de facilitar el salto a una información determinada dentro de un texto. La manera de consumir información se basa a menudo en el escaneado de información más que en una lectura en profundidad. Por esto el concepto de índice es aplicable dentro del diseño Web. A continuación presento varios punto a tener en cuenta cuando construimos un índice para nuestra página Web:
Utiliza las letras del abecedario para crear separadores visuales
Esto permite navegar el índice de un modo más rápido. El concepto se ilustra en la siguiente imagen, un extracto del índice de la Web de Brihuega.
Presta atención a como ordenar letras especiales
Es decir signos de exclamación, números, signos de interrogación, letras acentuadas etc. Intuitivamente los usuarios van a situar las páginas que comiencen por una Á en la categoría A. Comprueba que tu algoritmo de ordenación funciona del modo que esperan tus usuarios. Asi mismo, crea una convención para ordenar las páginas cuyo nombre comienza por un símbolo de exclamación, número o interrogación. Yo soy partidario de obviarlos para crear el orden. Es decir si queremos ordenar ¡Comienza el espectaculo!, el nombre que usaremos será Comienza el espectaculo y por lo tanto lo colocaremos sobre la letra C.
Orden Alfabético en múltiples columnas
Si alguna vez ordenas algo en orden alfabético en varias columnas ordena de arriba abajo y de izquierda derecha. Por ejemplo un índice o un listado de empresas.
Intuitivamente la manera de ordenar un abecedario es como la siguiente imagen.
Abecedario de izquierda a derecha y arriba abajo
Sin embargo, una lista de varias columnas ordenada alfabéticamente se lee mejor de arriba abajo y de izquierda a derecha. Durante un test de usabilidad, varios usuarios se sentían más cómodos con un listado ordenado como en la siguiente imagen y tenían problemas si el orden era de izquierda a derecha y de arriba abajo. De hecho el listado de empresas del portal del ayuntamiento de Brihuega se cambió para ajustarse a este descubrimiento.
Abecedario de arriba abajo e izquierda derecha
Espero que construyas un índice para tu portal Web y así facilitar el uso del mismo. Si tenéis algún comentario sobre mis ideas, no dudes en contactar conmigo.
Soy de la opinión que un portal Web de más de 20 páginas tiene que tener un índice. Hay que ofrecer varias posibilidades para que nuestros visitantes sean capaces de encontrar el contenido buscado. Estas podrían ser índice, buscador y navegación. El concepto de índice viene de la industria del libro en un intento de facilitar el salto a una información determinada dentro de un texto. La manera de consumir información se basa a menudo en el escaneado de información más que en una lectura en profundidad. Por esto el concepto de índice es aplicable dentro del diseño Web. A continuación presento varios punto a tener en cuenta cuando construimos un índice para nuestra página Web:
Utiliza las letras del abecedario para crear separadores visuales
Esto permite navegar el índice de un modo más rápido. El concepto se ilustra en la siguiente imagen, un extracto del índice de la Web de Brihuega.
Presta atención a como ordenar letras especiales
Es decir signos de exclamación, números, signos de interrogación, letras acentuadas etc. Intuitivamente los usuarios van a situar las páginas que comiencen por una Á en la categoría A. Comprueba que tu algoritmo de ordenación funciona del modo que esperan tus usuarios. Asi mismo, crea una convención para ordenar las páginas cuyo nombre comienza por un símbolo de exclamación, número o interrogación. Yo soy partidario de obviarlos para crear el orden. Es decir si queremos ordenar ¡Comienza el espectaculo!, el nombre que usaremos será Comienza el espectaculo y por lo tanto lo colocaremos sobre la letra C.
Orden Alfabético en múltiples columnas
Si alguna vez ordenas algo en orden alfabético en varias columnas ordena de arriba abajo y de izquierda derecha. Por ejemplo un índice o un listado de empresas.
Intuitivamente la manera de ordenar un abecedario es como la siguiente imagen.
Sin embargo, una lista de varias columnas ordenada alfabéticamente se lee mejor de arriba abajo y de izquierda a derecha. Durante un test de usabilidad, varios usuarios se sentían más cómodos con un listado ordenado como en la siguiente imagen y tenían problemas si el orden era de izquierda a derecha y de arriba abajo. De hecho el listado de empresas del portal del ayuntamiento de Brihuega se cambió para ajustarse a este descubrimiento.
Espero que construyas un índice para tu portal Web y así facilitar el uso del mismo. Si tenéis algún comentario sobre mis ideas, no dudes en contactar conmigo.
El periodista alcarreño Angel de Juan García, que por su labor documental sobre las rutas de Guadalajara podríamos definir como el Cela del siglo XXI, ha puesto a la venta su colección de libros de Guadalajara a través de la página Web http://caminosdeguadalajara.es
He tratado de mantener la página extremadamente sobria para facilitar la compra de los libros. El portal está compuesto en la actualidad por 16 páginas. 12 de las cuales se corresponden a páginas especificas para cada libros. La idea es que el visitante descubra el catálogo y en caso que desee comprar un ejemplar lo haga sin problemas. Más aún, cuando el usuario va a realizar un pedido, se elimina toda la navegación para que se concentré en terminar la tarea.
Asegurarse que el carro de la compra destaca
Mediante el uso de de la propiedad position: fixed de CSS el carro de la compra siempre esta posicionado en la parte superior de la página incluso cuando el usuario hace scroll (ver imagen más abajo). Intencionalmente es un poco más grande que el resto de la navegación para que resalte. Siempre muestra una descripción de su contenido con el número de libros y el importe que suman. Así mismo un botón con el texto "Realizar el pedido" insta al usuario a completar su compra.
Proporcionar ayudas visuales
Cuando el usuario pulsa el botón añadir a la cesta de compra, tanto el libro como el carro de la compra situado en la parte superior derecha se resaltan con un brillo amarillo que se desvanece a los pocos instantes. Esto proporciona una señalización visual al usuario sobre el efecto de su acción. Es decir que ha conseguido añadir un libro a su carro de compra y así mismo centra su atención en el carro de compra, que ha sido actualizado.
Cuanto más grande mejor
Cuando trabajamos con Web dedicadas al comercio electrónico la accesibilidad es todavía más importante. Ya que no sólo estamos haciendo el contenido inaccesible a un usuario sino a un potencial cliente. La Web, Caminos de Guadalajara, usa un tamaño de fuente de 16 pixeles y un alto de linea de 20 pixeles para hacer el contenido lo más legible posible. A menudo los textos escritos con tamaño de fuentes pequeñas son más atractivos visualmente. Sin embargo, en las páginas de comercio electrónico la accesibilidad debe estar a la cabeza de nuestras prioridades.
Hacer que los botones y enlaces resalten
Es decir, que nuestros usuarios sean conscientes en todo momento del funcionamiento del sistema. Es decir que no tengan que pensar sobre las acciones a llevar a cabo. Sean capaces de saber que es pulsable y que no. Y que consecuencias van a tener sus acciones. Por ejemplo, el botón Realizar Pedido cambia de color de fondo y fuente para transmitir la sensación de que puede ser pulsado.
