05 usabilidad y gestión web
TRANSCRIPT
![Page 1: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/1.jpg)
AVISO IMPORTANTEEste documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España 2016” y expresamente, si es posible, mediante un enlace activo a http://google.es/activate. Revisado, febrero 2016.
![Page 2: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/2.jpg)
Usabilidad y Gestión web
![Page 3: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/3.jpg)
Diseño de páginas web. Herramientas
Diseño de páginas web. Consideraciones
El Diseño Centrado en el Usuario (UCD)
¿Qué es la experiencia del usuario?
Usabilidad
Usabilidad y conversión
Principios de usabilidad
Beneficios de aplicar técnicas de UX y usabilidad
Índice
1
2
3
4
5
7
8
9
![Page 4: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/4.jpg)
Diseño de páginas web. Herramientas1
![Page 5: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/5.jpg)
Diseño de páginas web
El servidor web es la herramienta necesaria para servirla estructura y diseño de una página web.
![Page 6: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/6.jpg)
Hyper Text Markup Language: HTML
Es el lenguaje estándar de las páginas web, que entienden nuestros navegadores y que sirve, entre otras cosas, para mostrar, referenciar y enlazar contenidos web.
Diseño de páginas web. Lenguaje
![Page 7: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/7.jpg)
Diseño de páginas web. Lenguaje
Ejemplo:
![Page 8: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/8.jpg)
Un CMS o gestor de contenidos es un sistema que permite crear y gestionar sitios web sin necesidad de escribir código de
programación.
Diseño de páginas web.
Content Management System (CMS)
![Page 9: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/9.jpg)
Un CMS por dentro
![Page 10: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/10.jpg)
Un CMS por fuera
![Page 11: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/11.jpg)
Pasos para crear una web
● Comprar un dominio.
● Seleccionar un alojamiento web compartido con todos los
servicios (servidor web, email y auto-instalador del CMS
seleccionado).
● Seleccionar la plantilla que mejor se adapte a tus necesidades.
Existen gratuitas y de pago.
● Ordenar el contenido y ponerte a escribir.
![Page 12: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/12.jpg)
Opción rápida para pymes
Existen multitud de plataformas automáticas que ofrecen la creación, alojamiento y mantenimiento de
páginas web.
Son una opción para pymes y autónomos.
![Page 13: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/13.jpg)
Dominios
● .com: es el más comercial y recomendado.
● .es: en España. Recomendado.
● .eu: en Europa. Poco usado.
● .net, .org, etc.: sólo si se ajustan a tu actividad.
● .es.com: de segundo nivel. No recomendados.
![Page 14: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/14.jpg)
Diseño de páginas web. Consideraciones2
![Page 15: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/15.jpg)
Diseño de páginas web.
A la hora de diseñar una página web es importante tener en cuenta:
● El posicionamiento en buscadores.
● La usabilidad y la experiencia de usuario.
Consideraciones
![Page 16: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/16.jpg)
El Diseño Centrado en el Usuario3
![Page 17: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/17.jpg)
El Diseño Centrado en el Usuario
Es una filosofía de diseño que pretende crear:
● Experiencias que van más allá de los productos o
servicios.
● Entornos que conecten a nivel emocional con el
usuario.
Juicy SalifPhilippe Starck
UCD User Centered Design
![Page 18: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/18.jpg)
Diseño Centrado en el Usuario
Pone el énfasis en la facilidad de uso y comprensión del producto por parte del usuario, basándose en sus necesidades e intereses y analizando aspectos como:
Fuente de imagen: Orangeaura.com
● Habilidades y necesidades del usuario.
● Contexto de uso.
● Tareas que va a realizar.
![Page 19: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/19.jpg)
El objetivo es diseñar un sitio web que los usuarios puedan utilizar con un mínimo de estrés y un máximo de eficiencia.
Diseño Centrado en el Usuario
![Page 20: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/20.jpg)
● Los usuarios internos y externos.
● Las tareas que han de realizar.
Se basa en la OBSERVACIÓN y ANÁLISIS de:
Diseño Centrado en el Usuario
![Page 21: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/21.jpg)
¿Qué es la experiencia de usuario?4
![Page 22: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/22.jpg)
La sensación, emoción y satisfacción del usuario…
…respecto a un producto…
…resultado de interactuar con el producto y su proveedor: la marca.
¿Qué es la experiencia de usuario?
![Page 23: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/23.jpg)
¿Qué es la experiencia de usuario?
Conjunto de percepciones y sensaciones que desarrolla un
usuario durante su relación e interacción con una interfaz
de cualquier tipo. En el caso que nos ocupa, con los
elementos de tu sitio web y tu presencia e identidad digital.
![Page 24: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/24.jpg)
¿Qué es la experiencia de usuario?
Objetivos del diseño web:
● Homogeneización de las iniciativas online.
● Proyección de marca única y homogénea.
● Una experiencia de usuario global satisfactoria.
BRAND
![Page 25: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/25.jpg)
¿Qué es la experiencia de usuario?
…¡¡¡El reflejo de nuestra marca en Internet,
nuestro principal escaparate,
nuestras oficinas centrales en Internet!!!
Nuestro sitio web es…
![Page 26: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/26.jpg)
¿Qué es la experiencia de usuario?
Concepto global que depende de numerosos factores:
● Utilidad y valor del producto/servicio.
● Respuesta a las necesidades y expectativas del usuario.
● Contenidos y servicios ofrecidos.
● Transmisión de valores de marca.
● Creatividad y diseño visual.
● Facilidad de aprendizaje y recuerdo.
● Usabilidad, navegación eficiente. Atributo cuantitativo de web.
![Page 27: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/27.jpg)
Usabilidad5
![Page 28: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/28.jpg)
Usabilidad
La usabilidad hace referencia a la facilidad con que las personas pueden utilizar una interfaz particular con el fin de alcanzar un objetivo concreto. Es un
atributo cualitativo y una de las facetas fundamentales de la UX
(User eXperiencie o Experiencia de Usuario)
¡Pero no lo es todo!
![Page 29: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/29.jpg)
Usabilidad
Válido
Deseable
Accesible
Creíble
Fácil de encontrar
Usable
Aporta valor
Fuente adaptada de: Uxrave.com. User experience honeycomb
La usabilidad es un atributo de la experiencia de usuario.
![Page 30: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/30.jpg)
Usabilidad
La clave de un sitio usable es que quien navega por él consiga:
● Entender su estructura.
● Realizar con satisfacción aquello que pretendía realizar.
“La usabilidad se basa en no molestar ni hacer pensar en exceso al navegante y en hacerle fácil y grata la experiencia en el sitio web”.
Steve Krug.
![Page 31: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/31.jpg)
Eficacia + Eficiencia
=SATISFACCIÓN
Usabilidad
● ¿Me ha parecido difícil?● ¿Me he quedado con buena sensación?● ¿Repetiré y recomendaré esta web?
● ¿Cuánto tardo en realizar la compra?
● ¿Consigo realizar la compra correctamente?
● ¿Cometo algún error o todo sale bien a la primera?
![Page 32: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/32.jpg)
Usabilidad
Eficacia:Relacionado con el número de errores que comete el usuario en la consecución de una tarea.
Eficiencia:Relacionado con el tiempo empleado por el usuario para la consecución de la tarea.
![Page 33: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/33.jpg)
Usabilidad
Satisfacción de uso:
● Percepción del usuario respecto a la dificultad de acometer la
tarea.
● Relacionado con que el sitio web sea subjetivamente
agradable.
● Por satisfacción se entiende la ausencia de incomodidad y la
actitud positiva en el uso del producto.
![Page 34: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/34.jpg)
Usabilidad y conversión6
![Page 35: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/35.jpg)
Usabilidad y conversión
¡Mejorar nuestros ratios de conversión!
En los procesos de nuestro sitio web: registros, compras, descargas, etc.
Si un usuario no encuentra un producto es imposible que lo compre.
¿Y qué conseguimos si creamos un sitio web usable?
![Page 36: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/36.jpg)
Usabilidad y conversión
La tasa de conversión es el porcentaje de visitantes que ejecuta
una acción: rellenan un formulario, se suscriben (newsletter, feeds,
canales 2.0...), descargan una demo, etc.
Sitio web usable:
● Alcanzar la máxima conversión de los
visitantes que llegan a mi sitio web.
● Convertirlos en el objetivo para el que fue
diseñado el sitio.
![Page 37: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/37.jpg)
Principios de usabilidad7
![Page 38: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/38.jpg)
Principios de usabilidad
¿Se comunica de manera inmediata y clara el propósito, objetivo y funciones de la página?1
![Page 40: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/40.jpg)
Principios de usabilidad
Técnicas y herramientas:
Fuente de imagen: Metheone.com
![Page 41: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/41.jpg)
Principios de usabilidad
¿Se ofrecen al usuario mecanismos y referencias claras que le permitan orientarse fácilmente (dónde están y qué están haciendo)?
¿Se mantiene informados a los usuarios acerca de lo que está ocurriendo?
2
![Page 42: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/42.jpg)
Principios de usabilidad
● Al pulsar el botón se sustituye por una barra de progreso.
● Mensajes de feedback al finalizar una tarea.
● La fortaleza de la contraseña se muestra en tiempo real.
Fuente de imagen: Flipboard y Google
![Page 45: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/45.jpg)
Principios de usabilidad
¿La página se adecúa a los objetos mentales del usuario, su lógica de la información, su terminología y lenguaje?
¿La información se muestra en un orden lógico y natural?
3
![Page 46: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/46.jpg)
Principios de usabilidad
Fuente de imagen: Laboralkutxa
![Page 48: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/48.jpg)
Principios de usabilidad
¿El sitio web permite al usuario interactuar con él de manera fácil y productiva?
4
![Page 50: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/50.jpg)
Principios de usabilidad
¿Tiene el usuario control y libertad sobre la interfaz?
¿Se han evitado las acciones intrusivas que lo limiten?
5
![Page 52: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/52.jpg)
Principios de usabilidad
¿Se mantiene la consistencia en las diferentes páginas/secciones, etc. del sitio?
¿Se siguen los estándares "de facto“: la estructuración páginas, buscador, logo, etc.?
6
![Page 54: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/54.jpg)
Principios de usabilidad
¿El sitio web trata de prevenir posibles errores?7
![Page 55: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/55.jpg)
Principios de usabilidad
Hacer más relevante la acción primaria para evitar que la gente se equivoque.
Otros ejemplos pueden ser:
Poner el foco automáticamente en el cajetín de búsqueda o los auto-recomendadores, que evitan también errores tipográficos en las búsquedas.
![Page 56: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/56.jpg)
Principios de usabilidad
Fuente de imagen: Gmail.com
![Page 57: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/57.jpg)
Principios de usabilidad
¿La interfaz facilita y optimiza el acceso y la interacción de los usuarios con el sistema?
Flexibilidad y eficiencia de uso.
8
![Page 60: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/60.jpg)
Principios de usabilidad
9 ¿El sitio ofrece información y un diseño minimalista?
¿Texto organizado, conciso, fuentes legibles?
![Page 63: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/63.jpg)
Principios de usabilidad
10 ¿Los mensajes de error ayudan a los usuarios a reconocer, diagnosticar y solucionar errores?
![Page 66: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/66.jpg)
Principios de usabilidad
11 ¿En caso de que sea necesario, se ofrece una sección de ayuda y documentación orientada a la resolución de problemas del usuario?
![Page 68: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/68.jpg)
Beneficios de aplicar técnicas de UX y usabilidad
8
![Page 69: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/69.jpg)
Principios de usabilidad
● Refuerzo de la imagen de marca: mejoras en la percepción del
usuario (producto y proveedor).
● Incremento de las ventas en sitios de comercio electrónico:
reducción de la tasa de abandonos en carritos de la compra.
● Fidelización de clientes: aumento de la tasa de conversión de
visitantes a clientes.
● Reducción de costes de desarrollo: detección de los posibles
problemas en fases tempranas.
![Page 70: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/70.jpg)
Principios de usabilidad
● Reducción de costes en servicios de soporte/atención al cliente:
- problemas → - consultas.
● Aumento de las tasas de conversión (procesos finalizados):
registros, formularios, compras online, etc.
● Reducción de los costes de aprendizaje y formación: curvas de
aprendizaje + controladas.
● Optimización de procesos laborales en intranets: reducción de
tiempos de ejecución de tareas → aumento de la productividad.
![Page 71: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/71.jpg)
¡Gracias!
![Page 72: 05 usabilidad y gestión web](https://reader031.vdocuments.net/reader031/viewer/2022030304/587671ca1a28abd0018b6403/html5/thumbnails/72.jpg)
AVISO IMPORTANTEEste documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España 2016” y expresamente, si es posible, mediante un enlace activo a http://google.es/activate. Revisado, febrero 2016.