SlideShare une entreprise Scribd logo
1  sur  49
Télécharger pour lire hors ligne
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

Contenu connexe

En vedette

Extra De Tecnologia
Extra De TecnologiaExtra De Tecnologia
Extra De Tecnologia1f manda
 
Fresh top august14
Fresh top august14Fresh top august14
Fresh top august14HIPERCOM
 
Wikimania 2010 logo
Wikimania 2010 logoWikimania 2010 logo
Wikimania 2010 logoGongorawiki
 
Corporation de développement régional de l'Estrie
Corporation de développement régional de l'EstrieCorporation de développement régional de l'Estrie
Corporation de développement régional de l'EstrieÉconomie sociale Estrie
 
Global generation
Global generationGlobal generation
Global generationeliostudio
 

En vedette (6)

Extra De Tecnologia
Extra De TecnologiaExtra De Tecnologia
Extra De Tecnologia
 
Fresh top august14
Fresh top august14Fresh top august14
Fresh top august14
 
Tener & venir
Tener & venirTener & venir
Tener & venir
 
Wikimania 2010 logo
Wikimania 2010 logoWikimania 2010 logo
Wikimania 2010 logo
 
Corporation de développement régional de l'Estrie
Corporation de développement régional de l'EstrieCorporation de développement régional de l'Estrie
Corporation de développement régional de l'Estrie
 
Global generation
Global generationGlobal generation
Global generation
 

Similaire à Presentacion tienes 5 segundos

openclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxopenclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxGorkyGabrielAriasDaz
 
openclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxopenclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxGorkyGabrielAriasDaz
 
Diseño Web
Diseño WebDiseño Web
Diseño WebVladimir
 
Conecta experiencia de usuario
Conecta experiencia de usuarioConecta experiencia de usuario
Conecta experiencia de usuarioconectarc
 
Usabilidad (web)
Usabilidad (web)Usabilidad (web)
Usabilidad (web)Vladimir
 
Adobe dreamweaver cs4
Adobe dreamweaver cs4Adobe dreamweaver cs4
Adobe dreamweaver cs4Elias Vite
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadIvan Aguilar
 
Aplicando experiencia de usuario a nuestros proyectos en Drupal
Aplicando experiencia de usuario a nuestros proyectos en DrupalAplicando experiencia de usuario a nuestros proyectos en Drupal
Aplicando experiencia de usuario a nuestros proyectos en DrupalNéstor Ramírez Salas
 
Cómo añadir valor a sitios web y tiendas online
Cómo añadir valor a sitios web y tiendas onlineCómo añadir valor a sitios web y tiendas online
Cómo añadir valor a sitios web y tiendas onlineCECARM
 
Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta samantaaaaaa
 
BarCamp Costa Rica 2014 - El valor del usuario final
BarCamp Costa Rica 2014 - El valor del usuario finalBarCamp Costa Rica 2014 - El valor del usuario final
BarCamp Costa Rica 2014 - El valor del usuario finalbarcampcr
 
Ux Arquitectura de Información
Ux Arquitectura de InformaciónUx Arquitectura de Información
Ux Arquitectura de InformaciónPaula Gaviria
 

Similaire à Presentacion tienes 5 segundos (20)

Programa de lectura
Programa de lectura Programa de lectura
Programa de lectura
 
openclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxopenclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptx
 
openclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxopenclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptx
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
 
Conecta experiencia de usuario
Conecta experiencia de usuarioConecta experiencia de usuario
Conecta experiencia de usuario
 
Usabilidad (web)
Usabilidad (web)Usabilidad (web)
Usabilidad (web)
 
Patrones de diseño web
Patrones de diseño webPatrones de diseño web
Patrones de diseño web
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Adobe dreamweaver cs4
Adobe dreamweaver cs4Adobe dreamweaver cs4
Adobe dreamweaver cs4
 
Interfaces de usuario
Interfaces de usuarioInterfaces de usuario
Interfaces de usuario
 
Tienes 5 Segundos - Juan Carlos Camus
Tienes 5 Segundos - Juan Carlos CamusTienes 5 Segundos - Juan Carlos Camus
Tienes 5 Segundos - Juan Carlos Camus
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y Usabilidad
 
Aplicando experiencia de usuario a nuestros proyectos en Drupal
Aplicando experiencia de usuario a nuestros proyectos en DrupalAplicando experiencia de usuario a nuestros proyectos en Drupal
Aplicando experiencia de usuario a nuestros proyectos en Drupal
 
Cómo añadir valor a sitios web y tiendas online
Cómo añadir valor a sitios web y tiendas onlineCómo añadir valor a sitios web y tiendas online
Cómo añadir valor a sitios web y tiendas online
 
Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta
 
BarCamp Costa Rica 2014 - El valor del usuario final
BarCamp Costa Rica 2014 - El valor del usuario finalBarCamp Costa Rica 2014 - El valor del usuario final
BarCamp Costa Rica 2014 - El valor del usuario final
 
Ux Arquitectura de Información
Ux Arquitectura de InformaciónUx Arquitectura de Información
Ux Arquitectura de Información
 
3.1 evaluación web
3.1 evaluación web3.1 evaluación web
3.1 evaluación web
 
3.1 evaluación web
3.1 evaluación web3.1 evaluación web
3.1 evaluación web
 

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 resolver adecuadamente 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: Contenidos digitales, 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 desarrollo y 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: El test de los 5 segundos.
  • 22. Christine Perfetti  Directora de estrategia y planificación de negocios de UIE (User Interface engineering).
  • 23. 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.
  • 24. 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.
  • 25. 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.
  • 26. 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á.
  • 27. 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
  • 28. 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?
  • 29. 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.
  • 30. 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.
  • 31. 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.
  • 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 la informació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 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.
  • 35. 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.
  • 36. 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
  • 37. Capítulo 4: Cómo escribir en espacios digitales.
  • 38. ¿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
  • 39. 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.
  • 40. Títulos: el problema del contexto. • El contexto es la clave para que un usuario quiera indagar un sitio.
  • 41. 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.
  • 42. 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.
  • 43. ¿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.
  • 44. ¿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.
  • 45. ¿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.
  • 46. 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.
  • 47. ¿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.
  • 48. ¿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.