presencia web comunicación + experiencia de usuario abril 2009

+ de qué hablaremos? El papel de la comunicación en la web Presencia web: Razones para estar en la web Creando presencia web: real y efectiva Creando experiencia de usuario (UX) Arquitectura de información Usabilidad Accesibilidad Encontrabilidad Cómo evaluamos el trabajo ? Test de usuarios Evaluación heurística

El papel de la comunicación en la web

Presencia web:

Razones para estar en la web

Creando presencia web: real y efectiva

Creando experiencia de usuario (UX)

Arquitectura de información

Usabilidad

Accesibilidad

Encontrabilidad

Cómo evaluamos el trabajo ?

Test de usuarios

Evaluación heurística

El papel de la comunicación en la web

El papel de comunicación en la web La web como medio de comunicación Debemos entender que la web, no es un medio de comunicación más, sino es el medio de comunicación Es un medio de alcance masivo Es un medio de públicos segmentados Por lo tanto es o pueda llegar a ser más efectivo que cualquier otro medio

La web como medio de comunicación

Debemos entender que la web, no es un medio de comunicación más, sino es el medio de comunicación

Es un medio de alcance masivo

Es un medio de públicos segmentados

Por lo tanto es o pueda llegar a ser más efectivo que cualquier otro medio

El papel de comunicación en la web La marca en la web Presencia de marca Personalidad de marca Tono y estilo de la comunicación Línea gráfica de comunicación Posicionarse, fidelizar e influir

La marca en la web

Presencia de marca

Personalidad de marca

Tono y estilo de la comunicación

Línea gráfica de comunicación

Posicionarse, fidelizar e influir

El papel de comunicación en la web Modelo de comunicación clásico Emisor: Es quien emite el mensaje Perceptor: Es quien recibe la información Medio: Es el canal físico por el que se transmite el mensaje Código: Es la forma que toma la información que se intercambia entre el emisor y el receptor Mensaje: Es lo que se quiere transmitir Contexto: Es la situación en el que se desarrolla el acto comunicativo.

Modelo de comunicación clásico

Emisor: Es quien emite el mensaje

Perceptor: Es quien recibe la información

Medio: Es el canal físico por el que se transmite el mensaje

Código: Es la forma que toma la información que se intercambia entre el emisor y el receptor

Mensaje: Es lo que se quiere transmitir

Contexto: Es la situación en el que se desarrolla el acto comunicativo.

El papel de comunicación en la web Cambios en el modelo de comunicación Ahora el medio es el mensaje

Cambios en el modelo de comunicación

Ahora el medio es el mensaje

Presencia web

Presencia web Razones para estar en la web Visibilidad: Se debe estar presente para ser tomado en cuenta. Potenciales clientes te pueden estar buscando Alcance: Abres las puertas de tu empresa o negocio al mundo Atención al cliente: Tu empresa o negocio, abierto las 24 horas de día, los 365 días del año Competencia: Se disminuyen las diferencias entre compañías pequeñas y grandes Confianza: Cuando se menciona tu sitio Web, se presume un negocio serio. Promoción económica y potente del negocio o empresa, los costos de desarrollo, mantenimiento y actualización, son de lejos los más bajos.

Razones para estar en la web

Visibilidad: Se debe estar presente para ser tomado en cuenta. Potenciales clientes te pueden estar buscando

Alcance: Abres las puertas de tu empresa o negocio al mundo

Atención al cliente: Tu empresa o negocio, abierto las 24 horas de día, los 365 días del año

Competencia: Se disminuyen las diferencias entre compañías pequeñas y grandes

Confianza: Cuando se menciona tu sitio Web, se presume un negocio serio.

Promoción económica y potente del negocio o empresa, los costos de desarrollo, mantenimiento y actualización, son de lejos los más bajos.

Presencia web Creando presencia web: real y efectiva Qué vamos a hacer? Por qué los vamos a hacer? Cuáles serán los resultados?

Creando presencia web: real y efectiva

Qué vamos a hacer?

Por qué los vamos a hacer?

Cuáles serán los resultados?

Presencia web Creando presencia web: real y efectiva Qué debo hacer como cliente? Definir los objetivos del sitio web: Objetivos de negocio Identidad de marca Medidas de satisfacción Definir las necesidades de los usuarios: Qué es lo que buscarán los usuarios en mi sitio? Segmentación de usuarios

Creando presencia web: real y efectiva

Qué debo hacer como cliente?

Definir los objetivos del sitio web:

Objetivos de negocio

Identidad de marca

Medidas de satisfacción

Definir las necesidades de los usuarios:

Qué es lo que buscarán los usuarios en mi sitio?

Segmentación de usuarios

Presencia web Creando presencia web: real y efectiva Qué debo hacer como consultor web? Es simple: “escuchar” al cliente y al usuario Modelar y exponer la información Crear un sitio web simple y funcional Generar una agradable experiencia de usuario

Creando presencia web: real y efectiva

Qué debo hacer como consultor web?

Es simple: “escuchar” al cliente y al usuario

Modelar y exponer la información

Crear un sitio web simple y funcional

Generar una agradable experiencia de usuario

Presencia web Creando presencia web: real y efectiva Cómo lograr que los objetivos del cliente y las necesidades de los usuarios se cumplan? Creando agradables experiencias de usuario en tu web

Creando presencia web: real y efectiva

Cómo lograr que los objetivos del cliente y las necesidades de los usuarios se cumplan?

Creando agradables experiencias de usuario en tu web

Alguna vez se preguntaron: Dónde está el bóton? Qué debo hacer? Cómo funciona? Pensemos en los usuarios, no los hagamos pensar

Alguna vez se preguntaron:

Dónde está el bóton?

Qué debo hacer?

Cómo funciona?

Pensemos en los usuarios,

no los hagamos pensar

Creando experiencia de usuario (UX)

Creando experiencia de usuario Definición: La Experiencia de Usuario es la disciplina que se ocupa de analizar, diseñar y/u optimizar la relación que se establece entre los usuarios/clientes y las empresas a través de todos los canales interactivos posibles. Es lo que siente el usuario cuando ingresa a nuestro sitio web

Definición:

La Experiencia de Usuario es la disciplina que se ocupa de analizar, diseñar y/u optimizar la relación que se establece entre los usuarios/clientes y las empresas a través de todos los canales interactivos posibles.

Es lo que siente el usuario cuando ingresa a nuestro sitio web

Creando experiencia de usuario Disciplinas para crear agradables experiencias de usuario: Arquitectura de información Usabilidad Accesibilidad Encontrabilidad

Disciplinas para crear

agradables experiencias de usuario:

Arquitectura de información

Usabilidad

Accesibilidad

Encontrabilidad

Creando experiencia de usuario Arquitectura de información "Arquitectura de la Información (AI) se refiere al diseño, organización, etiquetado, navegación y sistemas de búsqueda que ayudan a los usuarios a encontrar y gestionar la información de manera efectiva“ Lou Rosenfeld y Peter Morville. Organización de los contenidos del sitio web de forma lógica desde la perspectiva del usuario.

Arquitectura de información

"Arquitectura de la Información (AI) se refiere al diseño, organización, etiquetado, navegación y sistemas de búsqueda que ayudan a los usuarios a encontrar y gestionar la información de manera efectiva“

Lou Rosenfeld y Peter Morville.

Organización de los contenidos del sitio web de forma lógica desde la perspectiva del usuario.

Creando experiencia de usuario Arquitectura de información Herramientas: Card sorting Etiquetado y categorización Diagramas de espacios funcionales Secuencia de tarea en wireframes

Arquitectura de información

Herramientas:

Card sorting

Etiquetado y categorización

Diagramas de espacios funcionales

Secuencia de tarea en wireframes

Creando experiencia de usuario Arquitectura de información Un ejemplo de su NO aplicación

Arquitectura de información

Un ejemplo de su NO aplicación

Creando experiencia de usuario Arquitectura de información Un ejemplo de su NO aplicación

Arquitectura de información

Un ejemplo de su NO aplicación

Creando experiencia de usuario Usabilidad "La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso" ISO/IEC 9126 Interfaz gráfica fácil de usar y aprender para el usuario.

Usabilidad

"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso" ISO/IEC 9126

Interfaz gráfica fácil de usar y aprender para el usuario.

Creando experiencia de usuario Usabilidad Tips que vienen al caso: Por favor :P NO flash, no intros Tres clics máximo Ofrecer información a primera vista, guiar al usuario Dejar rastros de navegación

Usabilidad

Tips que vienen al caso:

Por favor :P NO flash, no intros

Tres clics máximo

Ofrecer información a primera vista, guiar al usuario

Dejar rastros de navegación

Creando experiencia de usuario Usabilidad Importancia y ventajas Mejora la productividad. Mejora la satisfacción. Mejora la calidad de vida de los usuarios. Reducción de los costos de aprendizaje. Disminución de los costos de asistencia y ayuda al usuario. Aumento de la tasa de conversión de visitantes a clientes. Mejora la imagen y el prestigio del sitio y de la institución.

Usabilidad

Importancia y ventajas

Mejora la productividad.

Mejora la satisfacción.

Mejora la calidad de vida de los usuarios.

Reducción de los costos de aprendizaje.

Disminución de los costos de asistencia y ayuda al usuario.

Aumento de la tasa de conversión de visitantes a clientes.

Mejora la imagen y el prestigio del sitio y de la institución.

Creando experiencia de usuario Usabilidad Un ejemplo de su NO aplicación

Creando experiencia de usuario Accesibilidad Capacidad del sitio web para ser visto con efectividad por usuarios normales y con discapacidades, Además de navegadores web y/o sistemas operativos (visibilidad) Cómo lo logramos? La conseguimos siguiendo estándares de desarrollo web

Accesibilidad

Capacidad del sitio web para ser visto con efectividad por usuarios normales y con discapacidades, Además de navegadores web y/o sistemas operativos (visibilidad)

Cómo lo logramos?

La conseguimos siguiendo estándares de desarrollo web

Creando experiencia de usuario Accesibilidad Un ejemplo de su NO aplicación Internet Explorer

Creando experiencia de usuario Accesibilidad Un ejemplo de su NO aplicación Firefox

Creando experiencia de usuario Accesibilidad Un ejemplo de su NO aplicación

Creando experiencia de usuario Encontrabilidad Capacidad del sitio web para ser encontrado fácilmente

Encontrabilidad

Capacidad del sitio web para ser encontrado fácilmente

Creando experiencia de usuario Encontrabilidad Un gran porcentaje de las visitas a un sitio proviene de buscadores, entonces debemos preguntarnos: ¿Encontrará mi sitio un buscador? La respuesta es no, si no ha registrado su sitio o si no posee un enlace desde un sitio conocido ¿Pongo trabas a los buscadores? La respuesta es sí, si se usa Flash, Java Script exagerado u otros mecanismos que no permiten extraer los enlaces hacia páginas internas

Encontrabilidad

Un gran porcentaje de las visitas a un sitio proviene de buscadores, entonces debemos preguntarnos:

¿Encontrará mi sitio un buscador?

La respuesta es no, si no ha registrado su sitio o si no posee un enlace desde un sitio conocido

¿Pongo trabas a los buscadores?

La respuesta es sí, si se usa Flash, Java Script exagerado u otros mecanismos que no permiten extraer los enlaces hacia páginas internas

Creando experiencia de usuario Encontrabilidad Un gran porcentaje de las visitas a un sitio proviene de buscadores, entonces debemos preguntarnos: ¿Tengo el texto correcto en mi página principal? ¿Puedo encontrar mi sitio imaginando que palabras usarán mis clientes? ¿Queda mi sitio bien ubicado en una búsqueda? Si la respuesta es no, consiga enlaces desde otros sitios y mejore los contenidos del sitio web.

Encontrabilidad

Un gran porcentaje de las visitas a un sitio proviene de buscadores, entonces debemos preguntarnos:

¿Tengo el texto correcto en mi página principal? ¿Puedo encontrar mi sitio imaginando que palabras usarán mis clientes?

¿Queda mi sitio bien ubicado en una búsqueda?

Si la respuesta es no, consiga enlaces desde otros sitios y mejore los contenidos del sitio web.

Creando experiencia de usuario Encontrabilidad Claves para ser encontrado Querer ser encontrado Código estándar y semántico en el sitio web Herramientas para comprobarlo Hablar en el lenguaje en que te buscan (Contenido semántico) La gente busca haciéndole preguntas a los buscadores

Encontrabilidad

Claves para ser encontrado

Querer ser encontrado

Código estándar y semántico en el sitio web

Herramientas para comprobarlo

Hablar en el lenguaje en que te buscan (Contenido semántico)

La gente busca haciéndole preguntas a los buscadores

Cómo evaluamos el trabajo?

Cómo evaluamos el trabajo? Métodos de evaluación Test de usuarios + eyetracking Evaluación heurística

Métodos de evaluación

Test de usuarios + eyetracking

Evaluación heurística

Cómo evaluamos el trabajo? Un ejemplo de todo lo explicado: Evaluación heurística Analizando www.prodemffp.com.bo Se pretende llegar a establecer los principales errores de funcionalidad y estructura del sitio web.

Un ejemplo de todo lo explicado:

Evaluación heurística

Analizando www.prodemffp.com.bo

Se pretende llegar a establecer los principales errores de funcionalidad y estructura del sitio web.

Cómo evaluamos el trabajo? Evaluación heurística El logotipo no se encuentra como elemento imprescindible del diseño. ¿Dónde queda la marca? No existe actualización de campañas y/o lanzamientos de nuevos productos. ¿Dónde busco información de la última campaña? Menú en flash. Qué hacemos si no tenemos el plugin? No navegamos Muchos contenidos sin ninguna jerarquía de la información. Scroll en contenidos (no usable) No existe contenido rico e intuible. ¿Requisitos para abrir mi cuenta de ahorro? Navegabilidad. Uso de flechas???

Evaluación heurística

El logotipo no se encuentra como elemento imprescindible del diseño. ¿Dónde queda la marca?

No existe actualización de campañas y/o lanzamientos de nuevos productos. ¿Dónde busco información de la última campaña?

Menú en flash. Qué hacemos si no tenemos el plugin? No navegamos

Muchos contenidos sin ninguna jerarquía de la información.

Scroll en contenidos (no usable)

No existe contenido rico e intuible. ¿Requisitos para abrir mi cuenta de ahorro?

Navegabilidad. Uso de flechas???

Cómo evaluamos el trabajo? Evaluación heurística El logotipo no se encuentra como elemento imprescindible del diseño. ¿Dónde queda la marca? No existe actualización de campañas y/o lanzamientos de nuevos productos. ¿Dónde busco información de la última campaña? Menú en flash. Qué hacemos si no tenemos el plugin? No navegamos Muchos contenidos sin ninguna jerarquía de la información. Scroll en contenidos (no usable) No existe contenido rico e intuible. ¿Requisitos para abrir mi cuenta de ahorro? Navegabilidad. Uso de flechas???

Evaluación heurística

El logotipo no se encuentra como elemento imprescindible del diseño. ¿Dónde queda la marca?

No existe actualización de campañas y/o lanzamientos de nuevos productos. ¿Dónde busco información de la última campaña?

Menú en flash. Qué hacemos si no tenemos el plugin? No navegamos

Muchos contenidos sin ninguna jerarquía de la información.

Scroll en contenidos (no usable)

No existe contenido rico e intuible. ¿Requisitos para abrir mi cuenta de ahorro?

Navegabilidad. Uso de flechas???

Cómo evaluamos el trabajo? Evaluación heurística El logotipo no se encuentra como elemento imprescindible del diseño. ¿Dónde queda la marca? No existe actualización de campañas y/o lanzamientos de nuevos productos. ¿Dónde busco información de la última campaña? Menú en flash. Qué hacemos si no tenemos el plugin? No navegamos Muchos contenidos sin ninguna jerarquía de la información. Scroll en contenidos (no usable) No existe contenido rico e intuible. ¿Requisitos para abrir mi cuenta de ahorro? Navegabilidad. Uso de flechas???

Evaluación heurística

El logotipo no se encuentra como elemento imprescindible del diseño. ¿Dónde queda la marca?

No existe actualización de campañas y/o lanzamientos de nuevos productos. ¿Dónde busco información de la última campaña?

Menú en flash. Qué hacemos si no tenemos el plugin? No navegamos

Muchos contenidos sin ninguna jerarquía de la información.

Scroll en contenidos (no usable)

No existe contenido rico e intuible. ¿Requisitos para abrir mi cuenta de ahorro?

Navegabilidad. Uso de flechas???

Gracias! Omar Quispe es Director de Proyectos y encargado de Experiencia de Usuario en www.logoscomunicaciones.com

Bibliografía consultada Information Architecture Peter Morville & Louis Rosenfeld The elements of user experience Jesse James Garret Designing web usability Jacob Nielsen Del HTML a la Fidelidad Ricardo Baeza-Yates - Marcelo Garrido CIW-DCC, U. de Chile

Information Architecture

Peter Morville & Louis Rosenfeld

The elements of user experience

Jesse James Garret

Designing web usability

Jacob Nielsen

Del HTML a la Fidelidad

Ricardo Baeza-Yates - Marcelo Garrido

CIW-DCC, U. de Chile

Consultas? dudas? Preguntas? Omar Quispe es Director de Proyectos y encargado de Experiencia de Usuario en www.logoscomunicaciones.com