prsentacion tienes 5 segundos
DESCRIPTION
Javiera Berti, Dario Cuesta, Patricio RodriguezTRANSCRIPT
![Page 1: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/1.jpg)
Alumnos: JAVIERA BERTI – PATRICIO RODRÍGUEZ – DARIO CUESTA
Magíster en Comunicación y Educación
PUC - 2010
![Page 2: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/2.jpg)
Juan Carlos Camus:- Periodista
- Diplomado en desarrollo de multimedioseducativos.
- Coautor de guías para el desarrollo de sitiosweb del Gobierno de Chile.
- Profesor universitario.
![Page 3: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/3.jpg)
¿ Cómo resolver adecuadamente el problema de desarrollar contenidos para sitios web y
espacios digitales?
![Page 4: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/4.jpg)
Los contenidos digitales
• La impaciencia es lo que caracteriza a los usuarios decontenidos digitales o webs.
![Page 5: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/5.jpg)
Los contenidos digitales
• CARACTERÍSTICAS:
– Actualización: renovación permanente y sin límites, no hay hora decierre.
– 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 decontenidos generados por él mismo. Transforma y modifica.
![Page 6: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/6.jpg)
Los contenidos digitales
• CARACTERÍSTICAS:
– Múltiples dispositivos de acceso:
PC / móvil / TV / consolas.
![Page 7: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/7.jpg)
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
![Page 8: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/8.jpg)
Los contenidos digitales
• CARACTERÍSTICAS:
– La interacción dirige las visitas: posibilidad de los usuarios deintervenir 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 delusuario.
![Page 9: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/9.jpg)
Los contenidos digitales
• Nora Paul (2005)
– Relatar historias en Internetimplica interactividad,multimedialidad y el resultadode la experiencia de quien lasutiliza.
– Las historias deben preocuparsede: la acción que permitedesarrollar, las relaciones queestablecen con el usuario, elcontexto que se entregamediante la oferta de medios ysu potencial comunicativo.
![Page 10: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/10.jpg)
Capítulo 2: Contenidos digitales, un modelo.
![Page 11: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/11.jpg)
Los contenidos digitales, un modelo.
• Los contenidos digitales forman un ecosistema caracterizadopor un ambiente, relaciones y componentes que buscan elequilibrio:
![Page 12: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/12.jpg)
Los contenidos digitales, un modelo.
• COMUNIDAD.
• SISTEMAS Y PROCESOS.
• RELACIONES Y AUTONOMÍA.
• AMBIENTE
![Page 13: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/13.jpg)
Modelo de desarrollo y gestión de contenidos digitales.
![Page 14: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/14.jpg)
El modelo Margarita
• Elementos o áreas detrabajo del modelo:– DEFINIR: Cuáles son las
características básicasdel producto que secreará (definirobjetivos ynecesidades, contextoo plataforma).
![Page 15: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/15.jpg)
El modelo Margarita
– CREAR: Generación de contenidos y soporte.
![Page 16: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/16.jpg)
El modelo Margarita
– MEDIATIZAR: Elaborar contenidos distintos al texto en pantalla y definircaracterísticas del acceso a los mismos.
![Page 17: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/17.jpg)
El modelo Margarita
– INTERACTIVAR:Definirinteracción delproducto.
![Page 18: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/18.jpg)
El modelo Margarita
– ENVASAR: Preparar técnicamente el contenido para ser publicado.
![Page 19: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/19.jpg)
El modelo Margarita
– PUBLICAR: Poner a disposición de los usuarios todo lo preparado.
![Page 20: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/20.jpg)
El modelo Margarita
– GESTIONAR: Revisión de lo realizado a la luz de estadísticas einformación recolectada.
![Page 21: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/21.jpg)
Capítulo 3: El test de los 5 segundos.
![Page 22: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/22.jpg)
Christine Perfetti
Directora de estrategia y planificación de negocios de UIE(User Interface engineering).
![Page 23: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/23.jpg)
El test de uso de los 5 segundos.
• Mostrar una página web a un usuario durante 5 segundospara obtener sus impresiones iniciales.
• Permitió descubrir que los usuarios hacen juicios importantesen los primeros momentos en que visitan una página.
![Page 24: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/24.jpg)
El test de usabilidad de los 5 segundos.
• Mostrar una página web a un usuario durante 5 segundospara obtener sus impresiones iniciales.
• Permitió descubrir que los usuarios hacen juicios importantesen 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.
![Page 25: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/25.jpg)
El test de usabilidad de los 5 segundos.
• Estudio realizado en 2009 por Forrester Research para Akamai, sobre 1.048 consumidores on line en EEUU.
1%
2%
10%
27%
60%
Menos de 1 segundo
1 segundo
2 segundos
3 segundos
Más de 4 segundos
¿Cuánto tiempo está dispuesto a esperar por una página web, antes de abandonar el sitio web?
![Page 26: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/26.jpg)
Tres veces 5 segundos.
• Cuando un usuario visita un sitio web se pueden reconocertres periodos que duran cinco segundos cada uno:
– El usuario escribe la dirección que intenta visitar o sigue un enlace deotra página web y espera 5 segundos a que el sitio muestre algunareacción. Al menos el título del sitio y algún contenido. Si no abandonoel sitio
– En los siguientes 5 segundos, el usuario debe estar leyendo lostitulares principales o el contenido y poder seguir alguno de ellos. Sino asumo que no está funcionando bien y me voy.
– En los últimos 5 segundos el usuario toma la decisión de hacer unaacción concreta o navegar por le buscador. Si el sitio no ofreceacciones adecuadas, el usuario no verá elementos de interés y loabandonará.
![Page 27: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/27.jpg)
Tres veces 5 segundos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Acciones
Imágenes
Textos
Títulos
Diseño
<Title>
Respuesta web
Tiempo
Abandono del sitio
Uso del sitio
Línea de conversión
![Page 28: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/28.jpg)
Diseño de la experiencia
• Para enfrentar la premura del usuario es acertado usarherramientas que ofrecen disiciplinas como la arquitectura dela información y diseño de experiencias del usuario.
• Teniendo siempre como norte que el usuario puedaexperimentar con los contenidos.
• El contenido debe representar una oferta de valor para elusuario.
• ¿Cuáles son estas herramientas?
![Page 29: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/29.jpg)
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í podemosdiseñar pantallas que ofrezcan lo que busca.
– Consiste en la definición de arquetipos que representen a los potencialesusuarios 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 espacioque se desarrolla.
– Esto permite llevar a cabo pruebas tempranas de las interfaces.
![Page 30: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/30.jpg)
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 usuariorealizará 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 loserrores 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 enel desarrollo de los contenidos y aplicación de las interfaces.
– Test a 5 personas, detecta el 85 % de problemas de usabilidad.
![Page 31: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/31.jpg)
Diseño de la información
• Todas las pantallas deben ofrecer al usuario lo necesario paraentender el sitio web que visita, ofreciendo 4 zonas de datosque ayuden a las acciones de contextualizar, informar,promover e interactuar.
• Dependiendo de la pantalla, estas zonas aumentan odisminuyen su importancia.
![Page 32: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/32.jpg)
Ejemplo de wireframe
Pie de página
Marca / Slogan
Botones de acción
Menú de secciones
Zona de información
y AcciónZona de promoción
![Page 33: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/33.jpg)
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.
![Page 34: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/34.jpg)
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.
![Page 35: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/35.jpg)
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.
![Page 36: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/36.jpg)
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
![Page 37: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/37.jpg)
Capítulo 4: Cómo escribir en espacios digitales.
![Page 38: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/38.jpg)
¿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
![Page 39: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/39.jpg)
Portada: jerarquizada para comunicar
• ¿Qué objetivo sequiere lograr con elsitio web?– Siempre se quiere
lograr algo.
– Darle orden y priorizarcon orden visual.
– Los usuarios prefierenlos textos sobre lasfotos en los puntos deentrada a las páginas.
![Page 40: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/40.jpg)
Títulos: el problema del contexto.
• El contexto es la clave para que un usuario quiera indagar unsitio.
![Page 41: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/41.jpg)
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.
![Page 42: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/42.jpg)
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
ÓptimoPresidenta Bachelet inaugura hospital para niños en
San Miguel9 63
• Titular autoexplicativo que no requiere de contexto para ser entendido,que motive al usuario a hacer click para saber más y cuya extensiónpermita aparecer en los buscadores sin ser truncado.
![Page 43: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/43.jpg)
¿Se deben usar bajadas?
• SI, aprovechando su existencia para transformarlas en lainformación para los buscadores (150 a 160 caracteres).
• Se usan también como la información entregada a través desistemas de suscripción de contenidos (RSS) y para ladistribución a través de correos electrónicos.
![Page 44: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/44.jpg)
¿Cuánto escribir, largo o corto?
• El contenido debe ser distinto a cualquier medio impreso, yaque las personas actuan distinto frente a la pantalla quefrente 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.
![Page 45: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/45.jpg)
¿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.
![Page 46: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/46.jpg)
Accesibilidad: el sitio disponible para todos.
• Se entiende por “accesibilidad web” la capacidad de facilitarel 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.
![Page 47: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/47.jpg)
¿Cómo aumentar la credibilidad de mi sitio web?
• Facilitar la certificación de la exactitud de la información quese provee.
• Mostrar que hay una organización real tras el sitio web.
• Destacar la experiencia de la organización en los servicios yproductos que se ofrecen.
• Mostrar que tras el sitio hay gente honesta y confiable.
• Facilitar el contacto.
![Page 48: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/48.jpg)
¿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 queparezcan.
![Page 49: Prsentacion tienes 5 segundos](https://reader033.vdocuments.pub/reader033/viewer/2022052412/557c2ddbd8b42acc738b466b/html5/thumbnails/49.jpg)