Alumnos: JAVIERA BERTI – PATRICIO RODRÍGUEZ – DARIO CUESTA
           Magíster en Comunicación y Educación
                         PUC - 2010
Juan Carlos Camus:
-   Periodista
-   Diplomado en desarrollo de multimedios
    educativos.
-   Coautor de guías para el desarrollo de sitios
    web del Gobierno de Chile.
-   Profesor universitario.
¿ Cómo resolver adecuadamente el problema de
     desarrollar contenidos para sitios web y
                espacios digitales?
Los contenidos digitales

• La impaciencia es lo que caracteriza a los usuarios de
  contenidos digitales o webs.
Los contenidos digitales

• CARACTERÍSTICAS:

   – Actualización: renovación permanente y sin límites, no hay hora de
     cierre.

   – Multimedios: el computador permite la inclusión de distintos medios,
     destacando lo audiovisual.

   – No lineal: el orden de uso de los contenidos lo define el público.
     Además se linkean con otros contenidos y existen los hipertextos.

   – Personal: el usuario utiliza los contenidos y le agrega valor a través de
     contenidos generados por él mismo. Transforma y modifica.
Los contenidos digitales

• CARACTERÍSTICAS:

   – Múltiples dispositivos de acceso:
     PC / móvil / TV / consolas.
Los contenidos digitales

• CARACTERÍSTICAS:

   – Múltiples dispositivos de acceso:
     PC / móvil / TV / consolas.

   – Los usuarios distribuyen el contenido:
     no hay limitación física.

   – Los contenidos adquieren múltiples formatos:
     Ventaja y obligación al mismo tiempo
Los contenidos digitales

• CARACTERÍSTICAS:

   – La interacción dirige las visitas: posibilidad de los usuarios de
     intervenir el contenido. TRES FORMAS DE INTERACCIÓN.
       • El usuario elige sus contenidos.
       • El usuario usa aplicaciones que producen contenidos.
       • El usuario genera contenidos.


   – Conocimiento de la audiencia: se puede registrar toda la actividad del
     usuario.
Los contenidos digitales

• Nora Paul (2005)

   – Relatar historias en Internet
     implica           interactividad,
     multimedialidad y el resultado
     de la experiencia de quien las
     utiliza.
   – Las historias deben preocuparse
     de: la acción que permite
     desarrollar, las relaciones que
     establecen con el usuario, el
     contexto que se entrega
     mediante la oferta de medios y
     su potencial comunicativo.
Capítulo 2: Contenidos digitales, un modelo.
Los contenidos digitales, un modelo.

• Los contenidos digitales forman un ecosistema caracterizado
  por un ambiente, relaciones y componentes que buscan el
  equilibrio:
Los contenidos digitales, un modelo.

• COMUNIDAD.

• SISTEMAS Y PROCESOS.

• RELACIONES Y AUTONOMÍA.

• AMBIENTE
Modelo de desarrollo y gestión de contenidos digitales.
El modelo Margarita

• Elementos o áreas de
  trabajo del modelo:
   – DEFINIR: Cuáles son las
     características básicas
     del producto que se
     creará          (definir
     objetivos              y
     necesidades, contexto
     o plataforma).
El modelo Margarita

 – CREAR: Generación de contenidos y soporte.
El modelo Margarita

 – MEDIATIZAR: Elaborar contenidos distintos al texto en pantalla y definir
   características del acceso a los mismos.
El modelo Margarita

  – INTERACTIVAR:
    Definir
    interacción del
    producto.
El modelo Margarita

  – ENVASAR: Preparar técnicamente el contenido para ser publicado.
El modelo Margarita

  – PUBLICAR: Poner a disposición de los usuarios todo lo preparado.
El modelo Margarita

  – GESTIONAR: Revisión de lo realizado a la luz de estadísticas e
    información recolectada.
Capítulo 3: El test de los 5 segundos.
Christine Perfetti
 Directora de estrategia y planificación de negocios de UIE
  (User Interface engineering).
El test de uso de los 5 segundos.

• Mostrar una página web a un usuario durante 5 segundos
  para obtener sus impresiones iniciales.

• Permitió descubrir que los usuarios hacen juicios importantes
  en los primeros momentos en que visitan una página.
El test de usabilidad de los 5 segundos.

• Mostrar una página web a un usuario durante 5 segundos
  para obtener sus impresiones iniciales.

• Permitió descubrir que los usuarios hacen juicios importantes
  en los primeros momentos en que visitan una página.

• Esta teoría ha sido ratificada por dos estudios (2006 Y 2009)
  con consultoras internacionales en EEUU.
El test de usabilidad de los 5 segundos.

           ¿Cuánto tiempo está dispuesto a esperar por una página web, antes de abandonar el sitio
                                                    web?


 Más de 4 segundos                                                                                              60%


           3 segundos                                                 27%


           2 segundos                         10%


             1 segundo             2%


Menos de 1 segundo                1%


 •    Estudio realizado en 2009 por Forrester Research para Akamai, sobre 1.048 consumidores on line en EEUU.
Tres veces 5 segundos.

• Cuando un usuario visita un sitio web se pueden reconocer
  tres periodos que duran cinco segundos cada uno:

   – El usuario escribe la dirección que intenta visitar o sigue un enlace de
     otra página web y espera 5 segundos a que el sitio muestre alguna
     reacción. Al menos el título del sitio y algún contenido. Si no abandono
     el sitio
   – En los siguientes 5 segundos, el usuario debe estar leyendo los
     titulares principales o el contenido y poder seguir alguno de ellos. Si
     no asumo que no está funcionando bien y me voy.
   – En los últimos 5 segundos el usuario toma la decisión de hacer una
     acción concreta o navegar por le buscador. Si el sitio no ofrece
     acciones adecuadas, el usuario no verá elementos de interés y lo
     abandonará.
Tres veces 5 segundos.
Respuesta web

                                                                                  Línea de conversión
  Acciones
                                Uso del sitio
  Imágenes

  Textos

  Títulos
                                                        Abandono del sitio
  Diseño

 <Title>


                                                                                             Tiempo
                1   2   3   4   5     6    7    8   9   10   11     12       13    14
Diseño de la experiencia

• Para enfrentar la premura del usuario es acertado usar
  herramientas que ofrecen disiciplinas como la arquitectura de
  la información y diseño de experiencias del usuario.
• Teniendo siempre como norte que el usuario pueda
  experimentar con los contenidos.
• El contenido debe representar una oferta de valor para el
  usuario.

• ¿Cuáles son estas herramientas?
Diseño de la experiencia

• Desarrollo de personas:
   – Es la metodología que permite enfocarse en la audiencia, estableciendo sus
     necesidades y entendiendo los objetivos de su visita al sitio, así podemos
     diseñar pantallas que ofrezcan lo que busca.
   – Consiste en la definición de arquetipos que representen a los potenciales
     usuarios con perfil demográfico y psicográfico.


• Desarrollo de wireframes
    – Es la metodología que permite hacer diseños simplificados detallando
      estructura y elementos relevantes para atender a los visitantes del espacio
      que se desarrolla.
    – Esto permite llevar a cabo pruebas tempranas de las interfaces.
Diseño de la experiencia

• Diseño de interacción:
   – Es la metodología que permite definir paso a paso las actividades que se
     realizarán dentro del sitio web o espacio digital, explicitando lo que el usuario
     realizará así como las respuestas del sistema a la interacción.
   – Se utilizan esquemas que representan flujos.
   – Es importante considerar los flujos de actividad como también atender los
     errores para que el sistema sea usable.


• Test de usabilidad:
    – La usabilidad es la disciplina que mide la calidad de la experiencia que
      tiene el usuario en el entorno digital, a través de mediciones y pruebas en
      el desarrollo de los contenidos y aplicación de las interfaces.
    – Test a 5 personas, detecta el 85 % de problemas de usabilidad.
Diseño de la información

• Todas las pantallas deben ofrecer al usuario lo necesario para
  entender el sitio web que visita, ofreciendo 4 zonas de datos
  que ayuden a las acciones de contextualizar, informar,
  promover e interactuar.
• Dependiendo de la pantalla, estas zonas aumentan o
  disminuyen su importancia.
Ejemplo de wireframe


                        Marca / Slogan

                             Botones de acción




Menú de                                            Zona de
secciones              Zona de promoción         información
                                                   y Acción




                        Pie de página
Diseño de la información

• ZONA DE CONTEXTO:
  – Espacios de entrega de información y navegación, como logotipo,
    nombre, menú, pie de página.
Diseño de la información

• ZONA DE INFORMACIÓN:
  – Área que ofrece los contenidos de la página a través de distintos
    medios. Puede incluir enlaces para facilitar la interacción.
Diseño de la información

• ZONA DE ACCIÓN:
   – Es donde se facilita al usuario la realización de actividades, su
     contenido y alcance depende del área que esté visitando.
Diseño de la información

• ZONA DE PROMOCIÓN:
  – Área que permite destacar contenidos existentes en el sitio, así como
    publicar servicios o novedades
Capítulo 4: Cómo escribir en espacios digitales.
¿Cómo se llama el sitio web?

•   Fácil de escuchar, escribir y leer.
•   Debe tener alias si lo requiere.
•   Debe ser recordado.
•   Debe representar el contenido.
•   Debe funcionar sin las www
Portada: jerarquizada para comunicar

• ¿Qué objetivo se
  quiere lograr con el
  sitio web?
   – Siempre se quiere
     lograr algo.
   – Darle orden y priorizar
     con orden visual.
   – Los usuarios prefieren
     los textos sobre las
     fotos en los puntos de
     entrada a las páginas.
Títulos: el problema del contexto.

• El contexto es la clave para que un usuario quiera indagar un
  sitio.
Títulos: el problema del contexto.

• El título web debe cumplir con:
   –   Debe ser comprensible sin contexto.
   –   Las palabras del texto deben apoyar el clic del usuario.
   –   El título debe sostenerse en el tiempo.
   –   El título debe tener un largo adecuado.
   –   El título debe usarse según el estándar.
Títulos: el problema del contexto.

• Ejemplo:

Calidad                         Título                          Palabras Caracteres

Mínimo               Presidenta inaugura hospital                  3         29

Bueno     Presidenta Bachelet inaugura hospital en San Miguel      7         52

          Presidenta Bachelet inaugura hospital para niños en
Óptimo                                                             9         63
                              San Miguel


• Titular autoexplicativo que no requiere de contexto para ser entendido,
  que motive al usuario a hacer click para saber más y cuya extensión
  permita aparecer en los buscadores sin ser truncado.
¿Se deben usar bajadas?

• SI, aprovechando su existencia para transformarlas en la
  información para los buscadores (150 a 160 caracteres).

• Se usan también como la información entregada a través de
  sistemas de suscripción de contenidos (RSS) y para la
  distribución a través de correos electrónicos.
¿Cuánto escribir, largo o corto?

• El contenido debe ser distinto a cualquier medio impreso, ya
  que las personas actuan distinto frente a la pantalla que
  frente al papel.

• CLAVES:
   –   Ser sucinto.
   –   Escribir para comprensión.
   –   Usar verbos directos.
   –   Evitar las explicaciones negativas.
   –   Establecer jerarquías de información.
   –   Preferir los hechos a los discursos.
¿Cuánto escribir, largo o corto?

• CLAVES:
   –   Crear subtítulos destacados.
   –   Destacar palabras significativas.
   –   Crear listas.
   –   Ofrecer enlaces hacia otras páginas.
   –   Preferir los botones a los textos.
   –   Evitar las abreviaciones y la jerga técnica.
Accesibilidad: el sitio disponible para todos.

• Se entiende por “accesibilidad web” la capacidad de facilitar
  el acceso de las personas con capacidades diferentes.
• Para tener una página accesible se hace necesario tener:
   – Imágenes (ojo con el tamaño, peso, lectura y texto alterno, tanto
     fotografía como video).
   – Audio (ojo con peso, player incorporado y control del usuario).
   – Enlaces
   – Colores
   – Estructura de los contenidos.
¿Cómo aumentar la credibilidad de mi sitio
web?
• Facilitar la certificación de la exactitud de la información que
  se provee.
• Mostrar que hay una organización real tras el sitio web.
• Destacar la experiencia de la organización en los servicios y
  productos que se ofrecen.
• Mostrar que tras el sitio hay gente honesta y confiable.
• Facilitar el contacto.
¿Cómo aumentar la credibilidad de mi sitio
web?
•   El diseño del sitio debe parecer profesional.
•   Hacer que el sitio sea fácil de usar y útil.
•   Actualizar el contenido frecuentemente.
•   Restringir el contenido que promociona.
•   Evitar los errores de todo tipo, sin importar lo pequeños que
    parezcan.
Presentacion tienes 5 segundos

Presentacion tienes 5 segundos

  • 1.
    Alumnos: JAVIERA BERTI– PATRICIO RODRÍGUEZ – DARIO CUESTA Magíster en Comunicación y Educación PUC - 2010
  • 2.
    Juan Carlos Camus: - Periodista - Diplomado en desarrollo de multimedios educativos. - Coautor de guías para el desarrollo de sitios web del Gobierno de Chile. - Profesor universitario.
  • 3.
    ¿ Cómo resolveradecuadamente el problema de desarrollar contenidos para sitios web y espacios digitales?
  • 4.
    Los contenidos digitales •La impaciencia es lo que caracteriza a los usuarios de contenidos digitales o webs.
  • 5.
    Los contenidos digitales •CARACTERÍSTICAS: – Actualización: renovación permanente y sin límites, no hay hora de cierre. – Multimedios: el computador permite la inclusión de distintos medios, destacando lo audiovisual. – No lineal: el orden de uso de los contenidos lo define el público. Además se linkean con otros contenidos y existen los hipertextos. – Personal: el usuario utiliza los contenidos y le agrega valor a través de contenidos generados por él mismo. Transforma y modifica.
  • 6.
    Los contenidos digitales •CARACTERÍSTICAS: – Múltiples dispositivos de acceso: PC / móvil / TV / consolas.
  • 7.
    Los contenidos digitales •CARACTERÍSTICAS: – Múltiples dispositivos de acceso: PC / móvil / TV / consolas. – Los usuarios distribuyen el contenido: no hay limitación física. – Los contenidos adquieren múltiples formatos: Ventaja y obligación al mismo tiempo
  • 8.
    Los contenidos digitales •CARACTERÍSTICAS: – La interacción dirige las visitas: posibilidad de los usuarios de intervenir el contenido. TRES FORMAS DE INTERACCIÓN. • El usuario elige sus contenidos. • El usuario usa aplicaciones que producen contenidos. • El usuario genera contenidos. – Conocimiento de la audiencia: se puede registrar toda la actividad del usuario.
  • 9.
    Los contenidos digitales •Nora Paul (2005) – Relatar historias en Internet implica interactividad, multimedialidad y el resultado de la experiencia de quien las utiliza. – Las historias deben preocuparse de: la acción que permite desarrollar, las relaciones que establecen con el usuario, el contexto que se entrega mediante la oferta de medios y su potencial comunicativo.
  • 10.
    Capítulo 2: Contenidosdigitales, un modelo.
  • 11.
    Los contenidos digitales,un modelo. • Los contenidos digitales forman un ecosistema caracterizado por un ambiente, relaciones y componentes que buscan el equilibrio:
  • 12.
    Los contenidos digitales,un modelo. • COMUNIDAD. • SISTEMAS Y PROCESOS. • RELACIONES Y AUTONOMÍA. • AMBIENTE
  • 13.
    Modelo de desarrolloy gestión de contenidos digitales.
  • 14.
    El modelo Margarita •Elementos o áreas de trabajo del modelo: – DEFINIR: Cuáles son las características básicas del producto que se creará (definir objetivos y necesidades, contexto o plataforma).
  • 15.
    El modelo Margarita – CREAR: Generación de contenidos y soporte.
  • 16.
    El modelo Margarita – MEDIATIZAR: Elaborar contenidos distintos al texto en pantalla y definir características del acceso a los mismos.
  • 17.
    El modelo Margarita – INTERACTIVAR: Definir interacción del producto.
  • 18.
    El modelo Margarita – ENVASAR: Preparar técnicamente el contenido para ser publicado.
  • 19.
    El modelo Margarita – PUBLICAR: Poner a disposición de los usuarios todo lo preparado.
  • 20.
    El modelo Margarita – GESTIONAR: Revisión de lo realizado a la luz de estadísticas e información recolectada.
  • 21.
    Capítulo 3: Eltest de los 5 segundos.
  • 22.
    Christine Perfetti  Directorade estrategia y planificación de negocios de UIE (User Interface engineering).
  • 23.
    El test deuso de los 5 segundos. • Mostrar una página web a un usuario durante 5 segundos para obtener sus impresiones iniciales. • Permitió descubrir que los usuarios hacen juicios importantes en los primeros momentos en que visitan una página.
  • 24.
    El test deusabilidad de los 5 segundos. • Mostrar una página web a un usuario durante 5 segundos para obtener sus impresiones iniciales. • Permitió descubrir que los usuarios hacen juicios importantes en los primeros momentos en que visitan una página. • Esta teoría ha sido ratificada por dos estudios (2006 Y 2009) con consultoras internacionales en EEUU.
  • 25.
    El test deusabilidad de los 5 segundos. ¿Cuánto tiempo está dispuesto a esperar por una página web, antes de abandonar el sitio web? Más de 4 segundos 60% 3 segundos 27% 2 segundos 10% 1 segundo 2% Menos de 1 segundo 1% • Estudio realizado en 2009 por Forrester Research para Akamai, sobre 1.048 consumidores on line en EEUU.
  • 26.
    Tres veces 5segundos. • Cuando un usuario visita un sitio web se pueden reconocer tres periodos que duran cinco segundos cada uno: – El usuario escribe la dirección que intenta visitar o sigue un enlace de otra página web y espera 5 segundos a que el sitio muestre alguna reacción. Al menos el título del sitio y algún contenido. Si no abandono el sitio – En los siguientes 5 segundos, el usuario debe estar leyendo los titulares principales o el contenido y poder seguir alguno de ellos. Si no asumo que no está funcionando bien y me voy. – En los últimos 5 segundos el usuario toma la decisión de hacer una acción concreta o navegar por le buscador. Si el sitio no ofrece acciones adecuadas, el usuario no verá elementos de interés y lo abandonará.
  • 27.
    Tres veces 5segundos. Respuesta web Línea de conversión Acciones Uso del sitio Imágenes Textos Títulos Abandono del sitio Diseño <Title> Tiempo 1 2 3 4 5 6 7 8 9 10 11 12 13 14
  • 28.
    Diseño de laexperiencia • Para enfrentar la premura del usuario es acertado usar herramientas que ofrecen disiciplinas como la arquitectura de la información y diseño de experiencias del usuario. • Teniendo siempre como norte que el usuario pueda experimentar con los contenidos. • El contenido debe representar una oferta de valor para el usuario. • ¿Cuáles son estas herramientas?
  • 29.
    Diseño de laexperiencia • Desarrollo de personas: – Es la metodología que permite enfocarse en la audiencia, estableciendo sus necesidades y entendiendo los objetivos de su visita al sitio, así podemos diseñar pantallas que ofrezcan lo que busca. – Consiste en la definición de arquetipos que representen a los potenciales usuarios con perfil demográfico y psicográfico. • Desarrollo de wireframes – Es la metodología que permite hacer diseños simplificados detallando estructura y elementos relevantes para atender a los visitantes del espacio que se desarrolla. – Esto permite llevar a cabo pruebas tempranas de las interfaces.
  • 30.
    Diseño de laexperiencia • Diseño de interacción: – Es la metodología que permite definir paso a paso las actividades que se realizarán dentro del sitio web o espacio digital, explicitando lo que el usuario realizará así como las respuestas del sistema a la interacción. – Se utilizan esquemas que representan flujos. – Es importante considerar los flujos de actividad como también atender los errores para que el sistema sea usable. • Test de usabilidad: – La usabilidad es la disciplina que mide la calidad de la experiencia que tiene el usuario en el entorno digital, a través de mediciones y pruebas en el desarrollo de los contenidos y aplicación de las interfaces. – Test a 5 personas, detecta el 85 % de problemas de usabilidad.
  • 31.
    Diseño de lainformación • Todas las pantallas deben ofrecer al usuario lo necesario para entender el sitio web que visita, ofreciendo 4 zonas de datos que ayuden a las acciones de contextualizar, informar, promover e interactuar. • Dependiendo de la pantalla, estas zonas aumentan o disminuyen su importancia.
  • 32.
    Ejemplo de wireframe Marca / Slogan Botones de acción Menú de Zona de secciones Zona de promoción información y Acción Pie de página
  • 33.
    Diseño de lainformación • ZONA DE CONTEXTO: – Espacios de entrega de información y navegación, como logotipo, nombre, menú, pie de página.
  • 34.
    Diseño de lainformación • ZONA DE INFORMACIÓN: – Área que ofrece los contenidos de la página a través de distintos medios. Puede incluir enlaces para facilitar la interacción.
  • 35.
    Diseño de lainformación • ZONA DE ACCIÓN: – Es donde se facilita al usuario la realización de actividades, su contenido y alcance depende del área que esté visitando.
  • 36.
    Diseño de lainformación • ZONA DE PROMOCIÓN: – Área que permite destacar contenidos existentes en el sitio, así como publicar servicios o novedades
  • 37.
    Capítulo 4: Cómoescribir en espacios digitales.
  • 38.
    ¿Cómo se llamael sitio web? • Fácil de escuchar, escribir y leer. • Debe tener alias si lo requiere. • Debe ser recordado. • Debe representar el contenido. • Debe funcionar sin las www
  • 39.
    Portada: jerarquizada paracomunicar • ¿Qué objetivo se quiere lograr con el sitio web? – Siempre se quiere lograr algo. – Darle orden y priorizar con orden visual. – Los usuarios prefieren los textos sobre las fotos en los puntos de entrada a las páginas.
  • 40.
    Títulos: el problemadel contexto. • El contexto es la clave para que un usuario quiera indagar un sitio.
  • 41.
    Títulos: el problemadel contexto. • El título web debe cumplir con: – Debe ser comprensible sin contexto. – Las palabras del texto deben apoyar el clic del usuario. – El título debe sostenerse en el tiempo. – El título debe tener un largo adecuado. – El título debe usarse según el estándar.
  • 42.
    Títulos: el problemadel contexto. • Ejemplo: Calidad Título Palabras Caracteres Mínimo Presidenta inaugura hospital 3 29 Bueno Presidenta Bachelet inaugura hospital en San Miguel 7 52 Presidenta Bachelet inaugura hospital para niños en Óptimo 9 63 San Miguel • Titular autoexplicativo que no requiere de contexto para ser entendido, que motive al usuario a hacer click para saber más y cuya extensión permita aparecer en los buscadores sin ser truncado.
  • 43.
    ¿Se deben usarbajadas? • SI, aprovechando su existencia para transformarlas en la información para los buscadores (150 a 160 caracteres). • Se usan también como la información entregada a través de sistemas de suscripción de contenidos (RSS) y para la distribución a través de correos electrónicos.
  • 44.
    ¿Cuánto escribir, largoo corto? • El contenido debe ser distinto a cualquier medio impreso, ya que las personas actuan distinto frente a la pantalla que frente al papel. • CLAVES: – Ser sucinto. – Escribir para comprensión. – Usar verbos directos. – Evitar las explicaciones negativas. – Establecer jerarquías de información. – Preferir los hechos a los discursos.
  • 45.
    ¿Cuánto escribir, largoo corto? • CLAVES: – Crear subtítulos destacados. – Destacar palabras significativas. – Crear listas. – Ofrecer enlaces hacia otras páginas. – Preferir los botones a los textos. – Evitar las abreviaciones y la jerga técnica.
  • 46.
    Accesibilidad: el sitiodisponible para todos. • Se entiende por “accesibilidad web” la capacidad de facilitar el acceso de las personas con capacidades diferentes. • Para tener una página accesible se hace necesario tener: – Imágenes (ojo con el tamaño, peso, lectura y texto alterno, tanto fotografía como video). – Audio (ojo con peso, player incorporado y control del usuario). – Enlaces – Colores – Estructura de los contenidos.
  • 47.
    ¿Cómo aumentar lacredibilidad de mi sitio web? • Facilitar la certificación de la exactitud de la información que se provee. • Mostrar que hay una organización real tras el sitio web. • Destacar la experiencia de la organización en los servicios y productos que se ofrecen. • Mostrar que tras el sitio hay gente honesta y confiable. • Facilitar el contacto.
  • 48.
    ¿Cómo aumentar lacredibilidad de mi sitio web? • El diseño del sitio debe parecer profesional. • Hacer que el sitio sea fácil de usar y útil. • Actualizar el contenido frecuentemente. • Restringir el contenido que promociona. • Evitar los errores de todo tipo, sin importar lo pequeños que parezcan.