Tienes 5 Segundos: Cómo titular para la Web Juan C. Camus [email_address] www.usando.info www.tienes5segundos.cl
El ciclo virtuoso La clave es  transformar  la información en acción Características de las comunicaciones digitales
Características de las comunicaciones digitales
Características de las comunicaciones digitales
Características de las comunicaciones digitales
Características de las comunicaciones digitales
El ciclo virtuoso La clave es  transformar  la información en acción Características de las comunicaciones digitales
Las bases Características propias de la comunicación vía web Interactiva Actualizada Multimedial No lineal Personal Características de las comunicaciones digitales
Contenidos Estáticos vs Dinámicos ...dejar  que la audiencia haga algo  y sea parte de la noticia, es algo que otros medios generalmente no pueden hacer. La Internet y el web son  interactivos  por naturaleza, y para que Internet tenga éxito como medio masivo, debe aprovechar sus  fortalezas sobre los otros medios ”. – Steve Outing Las bases Características de las comunicaciones digitales Steve Outing
Las bases Jean-François Fogel “ El texto al pasar del papel a la pantalla, no gana nada".  El libro al pertenecer a una biblioteca digital hacia la cual hay múltiples referencias desde sus páginas, debido a las anotaciones que han hecho otras personas o las menciones que hace el propio texto, ofrece mucho más que el libro de papel. El iPod sólo fue un éxito cuando apareció iTunes Presentando:  Lectura  vertical Lectura  horizontal Características de las comunicaciones digitales
Las bases Eyetracking : qué  miran  cuando nos visitan? El área cubierta por la mirada (que tiene la forma de un triángulo) es lo que existe para el usuario y lo demás, simplemente no se ve. Características de las comunicaciones digitales
Las bases Test Interactivo de  Eyetracking Características de las comunicaciones digitales
Características de la redacción para el Web Cómo leemos Cómo presentamos Cómo interactuamos Características de la Redacción Web
Características de la redacción para el Web Primero: Cómo leemos… Se lee mediante  saltos entre los temas más importantes , no palabra a palabra (Morkes, 1979) El  79% va saltando entre párrafos  y que sólo el 6% lee palabra a palabra (Nielsen 1997) Se lee siguiendo el “ aroma ” de la información que permite predecir la calidad de lo que se encontrará (Pirolli  2002) La  credibilidad  de un sitio se construye con medidas concretas relacionadas con la forma de presentar la información (Stanford 2002) Características de la Redacción Web
Cómo presentamos… Portada Títulos Bajadas Redacción en general Textos Cortos Textos Largos Fotografías Interacción Tipografía Características de la Redacción Web
Cómo presentamos:  Portada Gracias a  G o o g l e , la página de inicio ya no tiene validez como la única zona de acceso al sitio web. Por lo tanto hay que preparar en cada página: Contexto institucional  (logotipo, dirección física, contacto) Navegación  (sección, breadcrumbs, menú) Ofertas de otros contenidos  (Vea además) Compartir  (comentarios, envíos por mails, redes sociales) Cómo presentamos… Características de la Redacción Web
Cómo presentamos:  Portada Funciona su dominio sin las www? Ha comprado los nombres parecidos Google Gooogle Gogle Un problema de marketing y DNS Cómo presentamos… Características de la Redacción Web
Cómo presentamos: Títulos Características de la Redacción Web
Cómo presentamos: Títulos El título debe ser comprensible “para” el web:  debe entenderse fuera de contexto Sujeto + Predicado Títulos fomes para Internet Títulos con estándar web (<h1>) Las palabras del título deben apoyar el “click” del usuario Verbos activos Invitaciones a la acción El título debe sostenerse en el tiempo Hoy, Ayer, Mañana Pasado, Presente y Futuro El título no debe medir más de  64 caracteres  de largo Google, Yahoo, Bing permiten máximo 70 caracteres Características de la Redacción Web
Cómo presentamos: Títulos 1 2 Dos títulos y dos soportes para el mismo contenido Cuatro versiones:  ¿cuál es mejor? Características de la Redacción Web
Cómo presentamos: Títulos Características de la Redacción Web
Cómo presentamos: Títulos El largo de los títulos es de... Inauguran museo de Carabineros en honor a general Bernales  (59) Presidenta Bachelet inauguró el centro cultural en honor al ...  (60) Bachelet inaugura Centro Cultural de Carabineros &quot;General ...  (58) Carabineros inaugura centro cultural en memoria de general José ...  (64) Presidenta inaugura centro cultural General Bernales  (53) Inauguran Centro Cultural General Bernales  (43) Características de la Redacción Web
Cómo presentamos: Bajadas Son un resumen del texto Apoyan el contenido del título ¿Son necesarias? Para apoyar la lectura rápida (negritas, destacados) Para apoyar la Encontrabilidad (más términos, sinónimos) Para generar datos de meta información (<h2>, meta description) Para ayudar en desarrollo de gadgets: Contenido para RSS Contenido para newsletters Contenido para widgets Características de la Redacción Web
Cómo presentamos: Bajadas La bajada como apoyo a la lectura Características de la Redacción Web
Cómo presentamos: Redacción Si no nos leen, para qué insistimos en escribir… tanto? Por ello es necesario: Destacar  palabras  significativas Subtítulos  destacados Listas  (no más de siete elementos) Una idea por párrafo Pirámide invertida : lo importante primero Escribir con la mitad de las palabras Características de la Redacción Web
Cómo presentamos: Textos Cortos Es necesario que la redacción sea corta, que enfatice en las ideas centrales y que  guíe la lectura  utilizando elementos claves (negritas, enlaces, etc). Características de la Redacción Web
Cómo presentamos: Textos Cortos Estilos: Bitácora versus Visión Editorial Características de la Redacción Web
Cómo presentamos: Textos Largos Preferentemente, evitarlos. Si deben ser incluidos, evitar las “ sábanas ”. Preferir: Subtítulos Listas Imágenes Cuadros o Tablas Ofrecer alternativas: PDF Impresión amistosa Texto dividido en varios títulos Características de la Redacción Web
Cómo presentamos: Fotografías La imagen  siempre  tiene lectura. Punto. Características de la Redacción Web
Cómo presentamos: Tipografía Tipografía para la pantalla Elegir la que se ha diseñado para ese efecto:  Verdana ¿Se pueden usar otras? La importancia del CSS Cambiar tipografía dependiendo del medio utilizado: pantalla, impresora, televisión, celular Características de la Redacción Web
Contenidos Asociados (Ayer…) Ayudan a crear  usuarios leales Wallpapers (Fondos) Screensavers (Salva Pantallas) Postales Enviar a un amigo Acciones Contextuales Características de la Redacción Web Ofertas para generar lealtad
Contenidos Asociados (Hoy…) Participar en redes sociales Comentar Participar Acciones Contextuales + Comunidad Características de la Redacción Web
Contenidos Asociados (Hoy…) Bloggers Acciones Contextuales + Comunidad Características de la Redacción Web
Contenidos Asociados (Hoy…) Herramientas de interacción Acciones Contextuales + Comunidad Características de la Redacción Web
“ Click trigger” La habilidad que tiene un sitio web para  ofrecer enlaces  en cada página al visitante, a partir de los cuales pueda participar de manera más concreta en los contenidos del sitio web. Acciones Contextuales Características de la Redacción Web
Ejemplos de “Click trigger” Preocuparse de crear contenidos que  generen más clicks  (Ejemplo: Lo + … en NYT) Evitar la  navegación de rebote  y tener siempre una oferta asociada   (Ejemplo: acciones a realizar El Mundo) Acciones Contextuales Características de la Redacción Web
¿Quién me lee? ¿Desde dónde me lee? Características de la Redacción Web
Cómo presentamos: Móviles Para presentar en  dispositivos móviles  hay que preocuparse de: Contexto de presentación Desde qué aparato nos miran Para qué nos miran Quiénes nos miran No es lo mismo: Miniaturizar Mantener lo actual pero mostrarlo en una pantalla de menor tamaño Movilizar Dejarlo disponible para el contexto en que nos visitan Características de la Redacción Web
Herramientas El browser a usar FireFox: http://www.mozilla.org/products/firefox/central.html Opera: http://www.opera.com/download/ Herramientas de apoyo: IE http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en FF  http://www.chrispederick.com/work/firefox/webdeveloper/  Links e Imágenes no existentes Xenu http://home.snafu.de/tilman/xenulink.html  Link Checker de W3C http://validator.w3.org/checklink Peso de las páginas Page Size http://www.numion.com/Stopwatch/index.html Web Site Optimization http://www.websiteoptimization.com/services/analyze/  Herramientas
Herramientas Links al sitio Google, Yahoo! Site Explorer y Altavista link:url-sitioweb Validaciones de Estándares de w3c.org HTML http://validator.w3.org/ CSS http://jigsaw.w3.org/css-validator/ Visibilidad en browsers Tamaño de ventanas http://www.w3schools.com/browsers/browsers_stats.asp  Visión en Sólo texto (Lynx) http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php Visión en celulares http://ready.mobi/launch.jsp?locale=en_EN Herramientas
Tienes 5 Segundos: Cómo titular para la Web Juan C. Camus [email_address] www.usando.info www.tienes5segundos.cl

Cómo titular para Web

  • 1.
    Tienes 5 Segundos:Cómo titular para la Web Juan C. Camus [email_address] www.usando.info www.tienes5segundos.cl
  • 2.
    El ciclo virtuosoLa clave es transformar la información en acción Características de las comunicaciones digitales
  • 3.
    Características de lascomunicaciones digitales
  • 4.
    Características de lascomunicaciones digitales
  • 5.
    Características de lascomunicaciones digitales
  • 6.
    Características de lascomunicaciones digitales
  • 7.
    El ciclo virtuosoLa clave es transformar la información en acción Características de las comunicaciones digitales
  • 8.
    Las bases Característicaspropias de la comunicación vía web Interactiva Actualizada Multimedial No lineal Personal Características de las comunicaciones digitales
  • 9.
    Contenidos Estáticos vsDinámicos ...dejar que la audiencia haga algo y sea parte de la noticia, es algo que otros medios generalmente no pueden hacer. La Internet y el web son interactivos por naturaleza, y para que Internet tenga éxito como medio masivo, debe aprovechar sus fortalezas sobre los otros medios ”. – Steve Outing Las bases Características de las comunicaciones digitales Steve Outing
  • 10.
    Las bases Jean-FrançoisFogel “ El texto al pasar del papel a la pantalla, no gana nada&quot;. El libro al pertenecer a una biblioteca digital hacia la cual hay múltiples referencias desde sus páginas, debido a las anotaciones que han hecho otras personas o las menciones que hace el propio texto, ofrece mucho más que el libro de papel. El iPod sólo fue un éxito cuando apareció iTunes Presentando: Lectura vertical Lectura horizontal Características de las comunicaciones digitales
  • 11.
    Las bases Eyetracking: qué miran cuando nos visitan? El área cubierta por la mirada (que tiene la forma de un triángulo) es lo que existe para el usuario y lo demás, simplemente no se ve. Características de las comunicaciones digitales
  • 12.
    Las bases TestInteractivo de Eyetracking Características de las comunicaciones digitales
  • 13.
    Características de laredacción para el Web Cómo leemos Cómo presentamos Cómo interactuamos Características de la Redacción Web
  • 14.
    Características de laredacción para el Web Primero: Cómo leemos… Se lee mediante saltos entre los temas más importantes , no palabra a palabra (Morkes, 1979) El 79% va saltando entre párrafos y que sólo el 6% lee palabra a palabra (Nielsen 1997) Se lee siguiendo el “ aroma ” de la información que permite predecir la calidad de lo que se encontrará (Pirolli 2002) La credibilidad de un sitio se construye con medidas concretas relacionadas con la forma de presentar la información (Stanford 2002) Características de la Redacción Web
  • 15.
    Cómo presentamos… PortadaTítulos Bajadas Redacción en general Textos Cortos Textos Largos Fotografías Interacción Tipografía Características de la Redacción Web
  • 16.
    Cómo presentamos: Portada Gracias a G o o g l e , la página de inicio ya no tiene validez como la única zona de acceso al sitio web. Por lo tanto hay que preparar en cada página: Contexto institucional (logotipo, dirección física, contacto) Navegación (sección, breadcrumbs, menú) Ofertas de otros contenidos (Vea además) Compartir (comentarios, envíos por mails, redes sociales) Cómo presentamos… Características de la Redacción Web
  • 17.
    Cómo presentamos: Portada Funciona su dominio sin las www? Ha comprado los nombres parecidos Google Gooogle Gogle Un problema de marketing y DNS Cómo presentamos… Características de la Redacción Web
  • 18.
    Cómo presentamos: TítulosCaracterísticas de la Redacción Web
  • 19.
    Cómo presentamos: TítulosEl título debe ser comprensible “para” el web: debe entenderse fuera de contexto Sujeto + Predicado Títulos fomes para Internet Títulos con estándar web (<h1>) Las palabras del título deben apoyar el “click” del usuario Verbos activos Invitaciones a la acción El título debe sostenerse en el tiempo Hoy, Ayer, Mañana Pasado, Presente y Futuro El título no debe medir más de 64 caracteres de largo Google, Yahoo, Bing permiten máximo 70 caracteres Características de la Redacción Web
  • 20.
    Cómo presentamos: Títulos1 2 Dos títulos y dos soportes para el mismo contenido Cuatro versiones: ¿cuál es mejor? Características de la Redacción Web
  • 21.
    Cómo presentamos: TítulosCaracterísticas de la Redacción Web
  • 22.
    Cómo presentamos: TítulosEl largo de los títulos es de... Inauguran museo de Carabineros en honor a general Bernales (59) Presidenta Bachelet inauguró el centro cultural en honor al ... (60) Bachelet inaugura Centro Cultural de Carabineros &quot;General ... (58) Carabineros inaugura centro cultural en memoria de general José ... (64) Presidenta inaugura centro cultural General Bernales (53) Inauguran Centro Cultural General Bernales (43) Características de la Redacción Web
  • 23.
    Cómo presentamos: BajadasSon un resumen del texto Apoyan el contenido del título ¿Son necesarias? Para apoyar la lectura rápida (negritas, destacados) Para apoyar la Encontrabilidad (más términos, sinónimos) Para generar datos de meta información (<h2>, meta description) Para ayudar en desarrollo de gadgets: Contenido para RSS Contenido para newsletters Contenido para widgets Características de la Redacción Web
  • 24.
    Cómo presentamos: BajadasLa bajada como apoyo a la lectura Características de la Redacción Web
  • 25.
    Cómo presentamos: RedacciónSi no nos leen, para qué insistimos en escribir… tanto? Por ello es necesario: Destacar palabras significativas Subtítulos destacados Listas (no más de siete elementos) Una idea por párrafo Pirámide invertida : lo importante primero Escribir con la mitad de las palabras Características de la Redacción Web
  • 26.
    Cómo presentamos: TextosCortos Es necesario que la redacción sea corta, que enfatice en las ideas centrales y que guíe la lectura utilizando elementos claves (negritas, enlaces, etc). Características de la Redacción Web
  • 27.
    Cómo presentamos: TextosCortos Estilos: Bitácora versus Visión Editorial Características de la Redacción Web
  • 28.
    Cómo presentamos: TextosLargos Preferentemente, evitarlos. Si deben ser incluidos, evitar las “ sábanas ”. Preferir: Subtítulos Listas Imágenes Cuadros o Tablas Ofrecer alternativas: PDF Impresión amistosa Texto dividido en varios títulos Características de la Redacción Web
  • 29.
    Cómo presentamos: FotografíasLa imagen siempre tiene lectura. Punto. Características de la Redacción Web
  • 30.
    Cómo presentamos: TipografíaTipografía para la pantalla Elegir la que se ha diseñado para ese efecto: Verdana ¿Se pueden usar otras? La importancia del CSS Cambiar tipografía dependiendo del medio utilizado: pantalla, impresora, televisión, celular Características de la Redacción Web
  • 31.
    Contenidos Asociados (Ayer…)Ayudan a crear usuarios leales Wallpapers (Fondos) Screensavers (Salva Pantallas) Postales Enviar a un amigo Acciones Contextuales Características de la Redacción Web Ofertas para generar lealtad
  • 32.
    Contenidos Asociados (Hoy…)Participar en redes sociales Comentar Participar Acciones Contextuales + Comunidad Características de la Redacción Web
  • 33.
    Contenidos Asociados (Hoy…)Bloggers Acciones Contextuales + Comunidad Características de la Redacción Web
  • 34.
    Contenidos Asociados (Hoy…)Herramientas de interacción Acciones Contextuales + Comunidad Características de la Redacción Web
  • 35.
    “ Click trigger”La habilidad que tiene un sitio web para ofrecer enlaces en cada página al visitante, a partir de los cuales pueda participar de manera más concreta en los contenidos del sitio web. Acciones Contextuales Características de la Redacción Web
  • 36.
    Ejemplos de “Clicktrigger” Preocuparse de crear contenidos que generen más clicks (Ejemplo: Lo + … en NYT) Evitar la navegación de rebote y tener siempre una oferta asociada (Ejemplo: acciones a realizar El Mundo) Acciones Contextuales Características de la Redacción Web
  • 37.
    ¿Quién me lee?¿Desde dónde me lee? Características de la Redacción Web
  • 38.
    Cómo presentamos: MóvilesPara presentar en dispositivos móviles hay que preocuparse de: Contexto de presentación Desde qué aparato nos miran Para qué nos miran Quiénes nos miran No es lo mismo: Miniaturizar Mantener lo actual pero mostrarlo en una pantalla de menor tamaño Movilizar Dejarlo disponible para el contexto en que nos visitan Características de la Redacción Web
  • 39.
    Herramientas El browsera usar FireFox: http://www.mozilla.org/products/firefox/central.html Opera: http://www.opera.com/download/ Herramientas de apoyo: IE http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en FF http://www.chrispederick.com/work/firefox/webdeveloper/ Links e Imágenes no existentes Xenu http://home.snafu.de/tilman/xenulink.html Link Checker de W3C http://validator.w3.org/checklink Peso de las páginas Page Size http://www.numion.com/Stopwatch/index.html Web Site Optimization http://www.websiteoptimization.com/services/analyze/ Herramientas
  • 40.
    Herramientas Links alsitio Google, Yahoo! Site Explorer y Altavista link:url-sitioweb Validaciones de Estándares de w3c.org HTML http://validator.w3.org/ CSS http://jigsaw.w3.org/css-validator/ Visibilidad en browsers Tamaño de ventanas http://www.w3schools.com/browsers/browsers_stats.asp Visión en Sólo texto (Lynx) http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php Visión en celulares http://ready.mobi/launch.jsp?locale=en_EN Herramientas
  • 41.
    Tienes 5 Segundos:Cómo titular para la Web Juan C. Camus [email_address] www.usando.info www.tienes5segundos.cl

Notas del editor

  • #2 Presentación realizada en el Laboratorio de Medios de la Escuela de Periodismo de la Universidad Diego Portales de Santiago de Chile 10 de diciembre de 2009
  • #4 Pantallas de ejemplo de información orientada a la acción del sitio Amazon.com
  • #5 Pantallas de ejemplo de información orientada a la acción del sitio Facebook.com
  • #6 Pantallas de ejemplo de información orientada a la acción del sitio Google.com
  • #7 Pantallas de ejemplo de información orientada a la acción del sitio Whitehouse.gov
  • #9 Las características: Interactiva – permite que la persona que visita el contenido lo utilice de la manera que quiera, quedándose o pertiendo de él de acuerdo a su necesidad. Podrá o no estar leyendo; espera que haya “cosas para hacer” en la página que visita. Actualizada - el web no tiene la lógica de la hora de cierre o del documento terminado de los textos en papel. Puede ser corregido en todo momento, por lo que su contenido es de mutación permanente. Multimedial – por el hecho de residir en un computador, tiene la facilidad de permitir la inclusión de medios múltiples, destacando particularmente los audiovisuales. No lineal – por el hecho de estar en una red, cualquier enlace puede traer a alguien al contenido; por lo tanto, éste puede ser visto en cualquier orden; ante esto, es un requisito indispensable el uso de una sólida arquitectura de la información. Personal – el usuario le agrega valor al contenido, ya que lo agrupa con otros elementos y de esa manera lo transforma y mejora; por lo tanto, el valor tiene que ver con algo personal del usuario y ya no tanto con lo que el contenido es per-se.
  • #10 Más del autor en http://steveouting.com/
  • #11 Más de su visita a Chile en: http://www.usando.info/blog/2008/06/fogel-el-papel-la-pantalla-y-la.html Su blog: http://www.elboomeran.com/blog/5/jean-francois-fogel/ Interesante: Lectura vertical – de izquierda a derecha, de arriba abajo; es la forma habitual de lectura del material impreso. Lectura horizontal – es la lectura saltada que pasa entre documentos gracias a los hipervínculos. También: La música cuando se hizo digital cambió la experiencia de escucharla, ya que pasó de ser grupal a individual. Lo mismo pasó con el cine que de verse en salas, ahora se ve en las casas en una experiencia familiar.
  • #12 http://www.usando.info/blog/2007/05/descubriendo-el-tringulo-dorado-de.html Imagen: http://www.useit.com/alertbox/reading_pattern.html
  • #13 Prueba interactiva del Eyetrack III que muestra cómo las palabras y no las imágenes son las que guían la acción de los ojos.
  • #16 La decisión sobre el tipo de contenidos del sitio, tiene mucho que ver con su misión como medio de comunicación. La opinión de Steve Outing en http://www.poynter.org/centerpiece/immerse/immersive.htm
  • #19 Imágenes gentileza de Manuel Contreras
  • #20 Más información en: http://www.usando.info/main_file.php/us_uw/8495/
  • #21 Imagen 1: Ejemplo de título de fantasía para la portada y título informativo para el texto que va con la noticia. Imagen 2: Ejemplo de cuatro titulares de diferentes medios, para una misma noticia; el de arriba a la derecha, viene del impreso y se nota, porque no funciona bien fuera de contexto; los demás nacieron desde el web.
  • #22 Imagen 1: Ejemplo de título de fantasía para la portada y título informativo para el texto que va con la noticia. Imagen 2: Ejemplo de cuatro titulares de diferentes medios, para una misma noticia; el de arriba a la derecha, viene del impreso y se nota, porque no funciona bien fuera de contexto; los demás nacieron desde el web.
  • #25 Ejemplo del uso de las bajadas para mostrar más información y apoyar el click del usuario.
  • #27 Ejemplo del uso de negritas para destacar elementos informativos.
  • #28 Ejemplo de las dos formas de destacar información en una portada.
  • #31 Comparación de vista de pantalla y vista de impresión, empleando el sitio Usando.info
  • #32 Los Contenidos Asociados son aquellos que permiten generar elementos que los usuarios pueden descargar a su computador, o enviar desde el sitio a otras personas. Ayudan en las tareas de marketing viral y en los programas de lealtad de clientes o usuarios.
  • #33 Los Contenidos Asociados son aquellos que permiten generar elementos que los usuarios pueden descargar a su computador, o enviar desde el sitio a otras personas. Ayudan en las tareas de marketing viral y en los programas de lealtad de clientes o usuarios.
  • #34 Los Contenidos Asociados son aquellos que permiten generar elementos que los usuarios pueden descargar a su computador, o enviar desde el sitio a otras personas. Ayudan en las tareas de marketing viral y en los programas de lealtad de clientes o usuarios.
  • #35 Más de este tema en: http://www.usando.info/blog/2007/07/sitios-web-hora-de-decir-accin.html
  • #36 Más sobre el tema en http://www.usando.info/main_file.php/us_uw/8469/
  • #37 Los Contenidos Asociados son aquellos que permiten generar eleentos que los usuarios pueden descargar a su computador, o enviar desde el sitio a otras personas. Ayudan en las tareas de marketing viral y en los programas de lealtad de clientes o usuarios.
  • #38 Habitualmente asumimos que quien nos lee lo hace desde una pantalla. Pero qué pasa con los demás dispositivos. Qué tenemos para ellos? Qué ofrecemos? Cómo los atendemos?
  • #39 Más información sobre la Guía en: http://www.webcredibility.org/guidelines/