SlideShare ist ein Scribd-Unternehmen logo
1 von 72
Downloaden Sie, um offline zu lesen
AVISO IMPORTANTE
Este 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.
Usabilidad y Gestión web
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
Diseño de páginas web.
Herramientas
1
Diseño de páginas web
El servidor web es la herramienta necesaria para servir
la estructura y diseño de una página web.
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
Diseño de páginas web. Lenguaje
Ejemplo:
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)
Un CMS por dentro
Un CMS por fuera
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.
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.
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.
Diseño de páginas web.
Consideraciones
2
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
El Diseño Centrado en el Usuario3
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 Salif
Philippe Starck
UCD User Centered Design
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.
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
● 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
¿Qué es la experiencia de usuario?4
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?
¿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.
¿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
¿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…
¿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.
Usabilidad5
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!
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.
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.
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?
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.
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.
Usabilidad y conversión6
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?
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.
Principios de usabilidad7
Principios de usabilidad
¿Se comunica de manera inmediata y clara el
propósito, objetivo y funciones de la página?
1
Principios de usabilidad
Fuentes de imágenes: Google y Yahoo
Principios de usabilidad
Técnicas y herramientas:
Fuente de imagen: Metheone.com
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
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
Principios de usabilidad
Fuente de imagen: Privalia
Principios de usabilidad
Fuente de imagen: Privalia
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
Principios de usabilidad
Fuente de imagen: Laboralkutxa
Principios de usabilidad
Fuente de imagen: Openbank.es
Principios de usabilidad
¿El sitio web permite al usuario interactuar con él
de manera fácil y productiva?
4
Principios de usabilidad
Fuente de imagen: Rastreator.com
Principios de usabilidad
¿Tiene el usuario control y libertad sobre la
interfaz?
¿Se han evitado las acciones intrusivas que lo
limiten?
5
Principios de usabilidad
Ejemplo:
Fuente de imagen: Amazon BuyVip
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
Principios de usabilidad
Fuente de imagen: Somosflow.com
Principios de usabilidad
¿El sitio web trata de prevenir posibles errores?7
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.
Principios de usabilidad
Fuente de imagen: Gmail.com
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
Principios de usabilidad
Fuente de imagen: Kayak
Principios de usabilidad
Fuente de imagen: NHS
Principios de usabilidad
9 ¿El sitio ofrece información y un diseño
minimalista?
¿Texto organizado, conciso, fuentes legibles?
Principios de usabilidad
Fuente de imagen: Zara
Principios de usabilidad
Fuente de imagen: Apple
Principios de usabilidad
10
¿Los mensajes de error ayudan a los usuarios a
reconocer, diagnosticar y solucionar errores?
Principios de usabilidad
Fuente de imagen: Klout
Principios de usabilidad
Fuente de imagen: IK4
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?
Principios de usabilidad
Fuente de imagen: Euskaltel
Beneficios de aplicar técnicas
de UX y usabilidad
8
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.
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.
¡Gracias!
AVISO IMPORTANTE
Este 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.

Weitere ähnliche Inhalte

Was ist angesagt?

Usabilidad 2.0: Más allá de la Interfaz (gráfica)
Usabilidad 2.0: Más allá de la Interfaz (gráfica)Usabilidad 2.0: Más allá de la Interfaz (gráfica)
Usabilidad 2.0: Más allá de la Interfaz (gráfica)yusefhassan
 
Curso de a accesibilidad web - Módulo 3: Evaluación de la Accesibilidad Web
Curso de a accesibilidad web - Módulo 3: Evaluación de la Accesibilidad WebCurso de a accesibilidad web - Módulo 3: Evaluación de la Accesibilidad Web
Curso de a accesibilidad web - Módulo 3: Evaluación de la Accesibilidad WebMario Carvajal
 
Video animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivoVideo animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivodavidstiven14
 
Responsive web design
Responsive web designResponsive web design
Responsive web designG2K Hosting
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...The Social Experience
 
SEO Social: Cómo diseñar una estrategia de Marketing Multicanal
SEO Social: Cómo diseñar una estrategia de Marketing MulticanalSEO Social: Cómo diseñar una estrategia de Marketing Multicanal
SEO Social: Cómo diseñar una estrategia de Marketing MulticanalIEBSchool
 
Ppt usabilidad
Ppt usabilidadPpt usabilidad
Ppt usabilidadymendal
 
Usabilidad Convertibilidad 1
Usabilidad Convertibilidad 1Usabilidad Convertibilidad 1
Usabilidad Convertibilidad 1Iñaki Lakarra
 
Qué es el diseño web responsivo
Qué es el diseño web responsivoQué es el diseño web responsivo
Qué es el diseño web responsivoZerozeroestudio
 
Principios básicos de usabilidad y accesibilidad
Principios básicos de usabilidad y accesibilidadPrincipios básicos de usabilidad y accesibilidad
Principios básicos de usabilidad y accesibilidadPercy Negrete
 
Curso Usabilidad Web Noviembre - Diciembre 2019
Curso Usabilidad Web Noviembre - Diciembre 2019Curso Usabilidad Web Noviembre - Diciembre 2019
Curso Usabilidad Web Noviembre - Diciembre 2019Álvaro López Herrera
 

Was ist angesagt? (16)

Usabilidad 2.0: Más allá de la Interfaz (gráfica)
Usabilidad 2.0: Más allá de la Interfaz (gráfica)Usabilidad 2.0: Más allá de la Interfaz (gráfica)
Usabilidad 2.0: Más allá de la Interfaz (gráfica)
 
Curso de a accesibilidad web - Módulo 3: Evaluación de la Accesibilidad Web
Curso de a accesibilidad web - Módulo 3: Evaluación de la Accesibilidad WebCurso de a accesibilidad web - Módulo 3: Evaluación de la Accesibilidad Web
Curso de a accesibilidad web - Módulo 3: Evaluación de la Accesibilidad Web
 
Video animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivoVideo animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivo
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Preparados, listos, Ajax!
Preparados, listos, Ajax!Preparados, listos, Ajax!
Preparados, listos, Ajax!
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
 
SEO Social: Cómo diseñar una estrategia de Marketing Multicanal
SEO Social: Cómo diseñar una estrategia de Marketing MulticanalSEO Social: Cómo diseñar una estrategia de Marketing Multicanal
SEO Social: Cómo diseñar una estrategia de Marketing Multicanal
 
Jimdo
JimdoJimdo
Jimdo
 
Jimdo
JimdoJimdo
Jimdo
 
Ppt usabilidad
Ppt usabilidadPpt usabilidad
Ppt usabilidad
 
Usabilidad Convertibilidad 1
Usabilidad Convertibilidad 1Usabilidad Convertibilidad 1
Usabilidad Convertibilidad 1
 
Qué es el diseño web responsivo
Qué es el diseño web responsivoQué es el diseño web responsivo
Qué es el diseño web responsivo
 
Ofimatica web
Ofimatica webOfimatica web
Ofimatica web
 
Principios básicos de usabilidad y accesibilidad
Principios básicos de usabilidad y accesibilidadPrincipios básicos de usabilidad y accesibilidad
Principios básicos de usabilidad y accesibilidad
 
El diseño web
El diseño webEl diseño web
El diseño web
 
Curso Usabilidad Web Noviembre - Diciembre 2019
Curso Usabilidad Web Noviembre - Diciembre 2019Curso Usabilidad Web Noviembre - Diciembre 2019
Curso Usabilidad Web Noviembre - Diciembre 2019
 

Andere mochten auch

Launch of the Week: Google Flights
Launch of the Week: Google FlightsLaunch of the Week: Google Flights
Launch of the Week: Google FlightsAriel Ferrante
 
Schneider Associates Launch of the Week: United Nations Social Media App SDGs...
Schneider Associates Launch of the Week: United Nations Social Media App SDGs...Schneider Associates Launch of the Week: United Nations Social Media App SDGs...
Schneider Associates Launch of the Week: United Nations Social Media App SDGs...Ariel Ferrante
 
¿Son necesarios los periodistas todavía?
¿Son necesarios los periodistas todavía?¿Son necesarios los periodistas todavía?
¿Son necesarios los periodistas todavía?Marc Vidal
 
14 búsqueda de empleo en el sector del marketing digital
14 búsqueda de empleo en el sector del marketing digital14 búsqueda de empleo en el sector del marketing digital
14 búsqueda de empleo en el sector del marketing digitalErnest Prunera Aledo
 
How To Make A Great Pbj
How To Make A Great PbjHow To Make A Great Pbj
How To Make A Great Pbjguest0f12c0
 
Analitica web presentacion
Analitica web presentacionAnalitica web presentacion
Analitica web presentacionClickDirecto
 
Sinopsis para elaborar Proyectos de Investigacion
Sinopsis para elaborar Proyectos de InvestigacionSinopsis para elaborar Proyectos de Investigacion
Sinopsis para elaborar Proyectos de Investigacionbi-Dr. Octavio Reyes, PhD
 
Logbar-Ring Zero
Logbar-Ring ZeroLogbar-Ring Zero
Logbar-Ring ZeroAndreea Nan
 
The Beyonce Principle
The Beyonce PrincipleThe Beyonce Principle
The Beyonce PrincipleMiva
 
PPT on web development & SEO
PPT on web development & SEOPPT on web development & SEO
PPT on web development & SEOPrakrati Bansal
 
Launch of the Week: Instagram Tagging Feature
Launch of the Week: Instagram Tagging FeatureLaunch of the Week: Instagram Tagging Feature
Launch of the Week: Instagram Tagging FeatureAriel Ferrante
 
Business Collaboration: Leveraging Your Digital Infrastructure to Drive Align...
Business Collaboration: Leveraging Your Digital Infrastructure to Drive Align...Business Collaboration: Leveraging Your Digital Infrastructure to Drive Align...
Business Collaboration: Leveraging Your Digital Infrastructure to Drive Align...Redbooth
 
Selling skills & Cross Selling
Selling skills & Cross SellingSelling skills & Cross Selling
Selling skills & Cross SellingHazem Diab
 

Andere mochten auch (14)

Launch of the Week: Google Flights
Launch of the Week: Google FlightsLaunch of the Week: Google Flights
Launch of the Week: Google Flights
 
Schneider Associates Launch of the Week: United Nations Social Media App SDGs...
Schneider Associates Launch of the Week: United Nations Social Media App SDGs...Schneider Associates Launch of the Week: United Nations Social Media App SDGs...
Schneider Associates Launch of the Week: United Nations Social Media App SDGs...
 
¿Son necesarios los periodistas todavía?
¿Son necesarios los periodistas todavía?¿Son necesarios los periodistas todavía?
¿Son necesarios los periodistas todavía?
 
14 búsqueda de empleo en el sector del marketing digital
14 búsqueda de empleo en el sector del marketing digital14 búsqueda de empleo en el sector del marketing digital
14 búsqueda de empleo en el sector del marketing digital
 
How To Make A Great Pbj
How To Make A Great PbjHow To Make A Great Pbj
How To Make A Great Pbj
 
Analitica web presentacion
Analitica web presentacionAnalitica web presentacion
Analitica web presentacion
 
Sinopsis para elaborar Proyectos de Investigacion
Sinopsis para elaborar Proyectos de InvestigacionSinopsis para elaborar Proyectos de Investigacion
Sinopsis para elaborar Proyectos de Investigacion
 
Logbar-Ring Zero
Logbar-Ring ZeroLogbar-Ring Zero
Logbar-Ring Zero
 
The Beyonce Principle
The Beyonce PrincipleThe Beyonce Principle
The Beyonce Principle
 
PPT on web development & SEO
PPT on web development & SEOPPT on web development & SEO
PPT on web development & SEO
 
Launch of the Week: Instagram Tagging Feature
Launch of the Week: Instagram Tagging FeatureLaunch of the Week: Instagram Tagging Feature
Launch of the Week: Instagram Tagging Feature
 
Business Collaboration: Leveraging Your Digital Infrastructure to Drive Align...
Business Collaboration: Leveraging Your Digital Infrastructure to Drive Align...Business Collaboration: Leveraging Your Digital Infrastructure to Drive Align...
Business Collaboration: Leveraging Your Digital Infrastructure to Drive Align...
 
Funil de vendas - Como vender mais e melhor com gestão
Funil de vendas - Como vender mais e melhor com gestãoFunil de vendas - Como vender mais e melhor com gestão
Funil de vendas - Como vender mais e melhor com gestão
 
Selling skills & Cross Selling
Selling skills & Cross SellingSelling skills & Cross Selling
Selling skills & Cross Selling
 

Ähnlich wie 05 usabilidad y gestión web

5.1 Usabilidad y diseño centrado en el usuario (UCD)
5.1 Usabilidad y diseño centrado en el usuario (UCD)5.1 Usabilidad y diseño centrado en el usuario (UCD)
5.1 Usabilidad y diseño centrado en el usuario (UCD)Brox Technology
 
Usabilidad y Gestión Web
Usabilidad y Gestión WebUsabilidad y Gestión Web
Usabilidad y Gestión WebElio Laureano
 
Usabilidad y gestión web
Usabilidad y gestión webUsabilidad y gestión web
Usabilidad y gestión webBrox Technology
 
Presencia web + experiencia de usuario
Presencia web + experiencia de usuarioPresencia web + experiencia de usuario
Presencia web + experiencia de usuarioomarbeto
 
Arquitectura de la información 01
Arquitectura de la información 01Arquitectura de la información 01
Arquitectura de la información 01Worköholics
 
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?Connext Comunicación Digital
 
Usabilidad en Websites de Bancos
Usabilidad en Websites de BancosUsabilidad en Websites de Bancos
Usabilidad en Websites de BancosElsa Canto
 
Buenas prácticas y pautas de UX para un proyecto digital
Buenas prácticas y pautas de UX para un proyecto digitalBuenas prácticas y pautas de UX para un proyecto digital
Buenas prácticas y pautas de UX para un proyecto digitalSandra Vilchez
 
[UXday] Guías de UX
[UXday] Guías de UX[UXday] Guías de UX
[UXday] Guías de UXMultiplica
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Virginia Aguirre
 
Presentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º CursoPresentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º CursoThe Social Experience
 
Usabilidad en la empresa 2.0
Usabilidad en la empresa 2.0Usabilidad en la empresa 2.0
Usabilidad en la empresa 2.0Jorge Márquez
 
Conecta experiencia de usuario
Conecta experiencia de usuarioConecta experiencia de usuario
Conecta experiencia de usuarioconectarc
 
10 Errores en la comunicación de empresas de Enoturismo
10 Errores en la comunicación de empresas de Enoturismo10 Errores en la comunicación de empresas de Enoturismo
10 Errores en la comunicación de empresas de EnoturismoMontserrat Peñarroya
 

Ähnlich wie 05 usabilidad y gestión web (20)

5.1 Usabilidad y diseño centrado en el usuario (UCD)
5.1 Usabilidad y diseño centrado en el usuario (UCD)5.1 Usabilidad y diseño centrado en el usuario (UCD)
5.1 Usabilidad y diseño centrado en el usuario (UCD)
 
Usabilidad y Gestión Web
Usabilidad y Gestión WebUsabilidad y Gestión Web
Usabilidad y Gestión Web
 
Usabilidad y gestión web
Usabilidad y gestión webUsabilidad y gestión web
Usabilidad y gestión web
 
Experiencia de usuario y Usabilidad
Experiencia de usuario y UsabilidadExperiencia de usuario y Usabilidad
Experiencia de usuario y Usabilidad
 
Omar Quispe Presencia Web
Omar Quispe Presencia WebOmar Quispe Presencia Web
Omar Quispe Presencia Web
 
Presencia web + experiencia de usuario
Presencia web + experiencia de usuarioPresencia web + experiencia de usuario
Presencia web + experiencia de usuario
 
Arquitectura de la información 01
Arquitectura de la información 01Arquitectura de la información 01
Arquitectura de la información 01
 
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?
Taller Marketing Digital ¿Está mi web preparada para la expansión internacional?
 
Usabilidad en Websites de Bancos
Usabilidad en Websites de BancosUsabilidad en Websites de Bancos
Usabilidad en Websites de Bancos
 
Buenas prácticas y pautas de UX para un proyecto digital
Buenas prácticas y pautas de UX para un proyecto digitalBuenas prácticas y pautas de UX para un proyecto digital
Buenas prácticas y pautas de UX para un proyecto digital
 
[UXday] Guías de UX
[UXday] Guías de UX[UXday] Guías de UX
[UXday] Guías de UX
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Presentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º CursoPresentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º Curso
 
Usabilidad en la empresa 2.0
Usabilidad en la empresa 2.0Usabilidad en la empresa 2.0
Usabilidad en la empresa 2.0
 
Conecta experiencia de usuario
Conecta experiencia de usuarioConecta experiencia de usuario
Conecta experiencia de usuario
 
10 Errores en la comunicación de empresas de Enoturismo
10 Errores en la comunicación de empresas de Enoturismo10 Errores en la comunicación de empresas de Enoturismo
10 Errores en la comunicación de empresas de Enoturismo
 
PF_O1EW302_S1.pdf
PF_O1EW302_S1.pdfPF_O1EW302_S1.pdf
PF_O1EW302_S1.pdf
 
PF_O1EW302_S1.pdf
PF_O1EW302_S1.pdfPF_O1EW302_S1.pdf
PF_O1EW302_S1.pdf
 
Que Es La User Experience
Que Es La User ExperienceQue Es La User Experience
Que Es La User Experience
 

Mehr von Ernest Prunera Aledo

Mehr von Ernest Prunera Aledo (20)

Guia para aprender AdWords
Guia para aprender AdWordsGuia para aprender AdWords
Guia para aprender AdWords
 
Guia del Periodisme freelance 2018
Guia del Periodisme freelance 2018Guia del Periodisme freelance 2018
Guia del Periodisme freelance 2018
 
Guia de optimizacion para motores de busqueda
Guia de optimizacion para motores de busquedaGuia de optimizacion para motores de busqueda
Guia de optimizacion para motores de busqueda
 
Geekonomia
GeekonomiaGeekonomia
Geekonomia
 
Dossier postveritat
Dossier  postveritatDossier  postveritat
Dossier postveritat
 
Comunicación local y nuevos formatos de periodismo
Comunicación local y nuevos formatos de periodismoComunicación local y nuevos formatos de periodismo
Comunicación local y nuevos formatos de periodismo
 
Ebook panda-score
Ebook panda-scoreEbook panda-score
Ebook panda-score
 
Guia de periodismo en la era digital
Guia de periodismo en la era digitalGuia de periodismo en la era digital
Guia de periodismo en la era digital
 
Periodismo 2 0
Periodismo 2 0Periodismo 2 0
Periodismo 2 0
 
Reputación online
Reputación onlineReputación online
Reputación online
 
Cómo escribir para la web
Cómo escribir para la webCómo escribir para la web
Cómo escribir para la web
 
Usos de les xarxes socials de barcelona
Usos de les xarxes socials de barcelonaUsos de les xarxes socials de barcelona
Usos de les xarxes socials de barcelona
 
Guia d'usos de les xarxes socials de la generalitat
Guia d'usos de les xarxes socials de la generalitatGuia d'usos de les xarxes socials de la generalitat
Guia d'usos de les xarxes socials de la generalitat
 
13 entrepreneurship
13 entrepreneurship13 entrepreneurship
13 entrepreneurship
 
Nuevo marketing
Nuevo marketingNuevo marketing
Nuevo marketing
 
12 introducción al e commerce
12 introducción al e commerce12 introducción al e commerce
12 introducción al e commerce
 
11 el plan de marketing
11 el plan de marketing11 el plan de marketing
11 el plan de marketing
 
10 apps
10 apps10 apps
10 apps
 
09 mobile marketing
09 mobile marketing09 mobile marketing
09 mobile marketing
 
Guia seo básico
Guia seo básicoGuia seo básico
Guia seo básico
 

Kürzlich hochgeladen

Taller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxTaller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxSANTIAGOREYES92
 
Perspectivas en ciberseguridad para el año 2024
Perspectivas en ciberseguridad para el año 2024Perspectivas en ciberseguridad para el año 2024
Perspectivas en ciberseguridad para el año 2024Educática
 
La electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwLa electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwDanielaEspaa3
 
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.SARA BUENDIA RIOJA
 
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfCuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfRosaAmeliaLlacsahuan
 
Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]QuantiKa14
 
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Mariano Cabrera Lanfranconi
 

Kürzlich hochgeladen (7)

Taller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxTaller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docx
 
Perspectivas en ciberseguridad para el año 2024
Perspectivas en ciberseguridad para el año 2024Perspectivas en ciberseguridad para el año 2024
Perspectivas en ciberseguridad para el año 2024
 
La electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwLa electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluw
 
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
 
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfCuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
 
Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]
 
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
 

05 usabilidad y gestión web

  • 1. AVISO IMPORTANTE Este 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.
  • 3. 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
  • 4. Diseño de páginas web. Herramientas 1
  • 5. Diseño de páginas web El servidor web es la herramienta necesaria para servir la estructura y diseño de una página web.
  • 6. 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
  • 7. Diseño de páginas web. Lenguaje Ejemplo:
  • 8. 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)
  • 9. Un CMS por dentro
  • 10. Un CMS por fuera
  • 11. 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.
  • 12. 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.
  • 13. 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.
  • 14. Diseño de páginas web. Consideraciones 2
  • 15. 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
  • 16. El Diseño Centrado en el Usuario3
  • 17. 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 Salif Philippe Starck UCD User Centered Design
  • 18. 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.
  • 19. 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
  • 20. ● 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
  • 21. ¿Qué es la experiencia de usuario?4
  • 22. 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?
  • 23. ¿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.
  • 24. ¿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
  • 25. ¿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…
  • 26. ¿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.
  • 28. 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!
  • 29. 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.
  • 30. 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.
  • 31. 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?
  • 32. 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.
  • 33. 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.
  • 35. 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?
  • 36. 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.
  • 38. Principios de usabilidad ¿Se comunica de manera inmediata y clara el propósito, objetivo y funciones de la página? 1
  • 39. Principios de usabilidad Fuentes de imágenes: Google y Yahoo
  • 40. Principios de usabilidad Técnicas y herramientas: Fuente de imagen: Metheone.com
  • 41. 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
  • 42. 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
  • 43. Principios de usabilidad Fuente de imagen: Privalia
  • 44. Principios de usabilidad Fuente de imagen: Privalia
  • 45. 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
  • 46. Principios de usabilidad Fuente de imagen: Laboralkutxa
  • 47. Principios de usabilidad Fuente de imagen: Openbank.es
  • 48. Principios de usabilidad ¿El sitio web permite al usuario interactuar con él de manera fácil y productiva? 4
  • 49. Principios de usabilidad Fuente de imagen: Rastreator.com
  • 50. Principios de usabilidad ¿Tiene el usuario control y libertad sobre la interfaz? ¿Se han evitado las acciones intrusivas que lo limiten? 5
  • 51. Principios de usabilidad Ejemplo: Fuente de imagen: Amazon BuyVip
  • 52. 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
  • 53. Principios de usabilidad Fuente de imagen: Somosflow.com
  • 54. Principios de usabilidad ¿El sitio web trata de prevenir posibles errores?7
  • 55. 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.
  • 56. Principios de usabilidad Fuente de imagen: Gmail.com
  • 57. 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
  • 60. Principios de usabilidad 9 ¿El sitio ofrece información y un diseño minimalista? ¿Texto organizado, conciso, fuentes legibles?
  • 63. Principios de usabilidad 10 ¿Los mensajes de error ayudan a los usuarios a reconocer, diagnosticar y solucionar errores?
  • 66. 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?
  • 67. Principios de usabilidad Fuente de imagen: Euskaltel
  • 68. Beneficios de aplicar técnicas de UX y usabilidad 8
  • 69. 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.
  • 70. 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.
  • 72. AVISO IMPORTANTE Este 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.