Omar Quispe Presencia Web
-
Upload
bolivia-webprende -
Category
Education
-
view
1.251 -
download
2
Transcript of Omar Quispe Presencia Web
![Page 1: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/1.jpg)
presencia webcomunicación + experiencia de usuario
abril 2009
![Page 2: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/2.jpg)
+ 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
![Page 3: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/3.jpg)
El papel de la comunicación en la web
![Page 4: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/4.jpg)
El papel de comunicación en la webLa 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
![Page 5: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/5.jpg)
El papel de comunicación en la webLa 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
![Page 6: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/6.jpg)
El papel de comunicación en la webModelo 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.
![Page 7: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/7.jpg)
El papel de comunicación en la webCambios en el modelo de comunicación
• Ahora el medio es el mensaje
![Page 8: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/8.jpg)
Presencia web
![Page 9: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/9.jpg)
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.
![Page 10: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/10.jpg)
Presencia web
Creando presencia web: real y efectiva
• Qué vamos a hacer?
• Por qué los vamos a hacer?
• Cuáles serán los resultados?
![Page 11: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/11.jpg)
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
![Page 12: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/12.jpg)
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
![Page 13: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/13.jpg)
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
![Page 14: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/14.jpg)
Alguna vez se preguntaron:
Dónde está el bóton?Qué debo hacer?Cómo funciona?
Pensemos en los usuarios, no los hagamos pensar
![Page 15: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/15.jpg)
Creando experiencia de usuario (UX)
![Page 16: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/16.jpg)
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
![Page 17: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/17.jpg)
Creando experiencia de usuario
Disciplinas para crear agradables experiencias de usuario:
• Arquitectura de información
• Usabilidad
• Accesibilidad
• Encontrabilidad
![Page 18: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/18.jpg)
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.
![Page 19: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/19.jpg)
Creando experiencia de usuario
Arquitectura de información
Herramientas:
• Card sorting
• Etiquetado y categorización
• Diagramas de espacios funcionales
• Secuencia de tarea en wireframes
![Page 20: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/20.jpg)
Creando experiencia de usuarioArquitectura de informaciónUn ejemplo de su NO aplicación
![Page 21: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/21.jpg)
Creando experiencia de usuarioArquitectura de informaciónUn ejemplo de su NO aplicación
![Page 22: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/22.jpg)
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.
![Page 23: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/23.jpg)
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
![Page 24: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/24.jpg)
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.
![Page 25: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/25.jpg)
Creando experiencia de usuarioUsabilidadUn ejemplo de su NO aplicación
![Page 26: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/26.jpg)
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
![Page 27: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/27.jpg)
Creando experiencia de usuarioAccesibilidadUn ejemplo de su NO aplicación
InternetExplorer
![Page 28: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/28.jpg)
Creando experiencia de usuarioAccesibilidadUn ejemplo de su NO aplicación
Firefox
![Page 29: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/29.jpg)
Creando experiencia de usuarioAccesibilidadUn ejemplo de su NO aplicación
![Page 30: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/30.jpg)
Creando experiencia de usuario
Encontrabilidad
Capacidad del sitio web para ser encontrado fácilmente
![Page 31: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/31.jpg)
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
![Page 32: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/32.jpg)
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.
![Page 33: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/33.jpg)
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
![Page 34: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/34.jpg)
Cómo evaluamos el trabajo?
![Page 35: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/35.jpg)
Cómo evaluamos el trabajo?
Métodos de evaluación
• Test de usuarios + eyetracking
• Evaluación heurística
![Page 36: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/36.jpg)
Cómo evaluamos el trabajo?
Un ejemplo de todo lo explicado:Evaluación heurística
Analizando www.prodemffp.com.boSe pretende llegar a establecer los principales errores de funcionalidad y estructura del sitio web.
![Page 37: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/37.jpg)
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???
![Page 38: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/38.jpg)
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???
![Page 39: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/39.jpg)
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???
![Page 40: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/40.jpg)
Gracias!
Omar Quispe es Director de Proyectos y encargado de Experiencia de Usuario en www.logoscomunicaciones.com
![Page 41: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/41.jpg)
Bibliografía consultada
• Information ArchitecturePeter Morville & Louis Rosenfeld
• The elements of user experienceJesse James Garret
• Designing web usabilityJacob Nielsen
• Del HTML a la FidelidadRicardo Baeza-Yates - Marcelo Garrido CIW-DCC, U. de Chile
![Page 42: Omar Quispe Presencia Web](https://reader035.fdocuments.es/reader035/viewer/2022062407/55d744b1bb61eb997d8b457a/html5/thumbnails/42.jpg)
Consultas?dudas?
Preguntas?
Omar Quispe es Director de Proyectos y encargado de Experiencia de Usuario en www.logoscomunicaciones.com