s03 Presentacion Mod1

SESIÓN
DISEÑO
03 WEB
• Arquitectura de la información.
• Diseño centrado en el usuario.
• Diseño de experiencia de usuario (UX).
• Interfaz de usuario (UI).
• Interfaz de usuario (UI) vs Diseño de experiencia de usuario
(UX).
• Usabilidad web.
DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

/ INTRODUCCIÓN
En esta sesión aprenderemos conceptos esenciales de diseño web como arquitectura de la

información, diseño centrado en el usuario, diseño de experiencia de usuario, interfaz de usuario,
usabilidad, pruebas de usabilidad, etc., de tal manera que al final de la sesión podamos ser capaces
de emprender la creación de un concepto de sitio web bien estructurado, con foco en el usuario y,
especialmente, en todo lo que éste podrá lograr al usarlo.

MATERIAL NUEVO

/ INTRODUCCIÓN MATERIAL NUEVO

/ ARQUITECTURA DE LA INFORMACIÓN

La arquitectura de la información es el arte y la ciencia de dar forma a productos y experiencias

relacionadas con la información con el fin de fomentar la facilidad de uso y la localización de los
elementos (findability).

Es más que un boceto donde se representa

visualmente, de una forma muy sencilla y
esquemática la estructura de una página web.
Define el contenido y la posición de los
diversos bloques de un sitio web como: menús
de navegación, bloques de contenido, etc.
FUENTE: http://www.nosolousabilidad.com/articulos/img/icono_uso2.gif

Algunas webs cuentan con una arquitectura de la información lógica que ayudan al usuario a
encontrar lo que buscan en ellas. Otras, sin embargo, carecen de cualquier tipo de estructura
reconocible dificultando así su navegación.
FUENTE: http://inherit.mx/includes/frontend/inherit/media/press/56/arquitectura-informacion.jpg

/ ARQUITECTURA DE LA INFORMACIÓN MATERIAL NUEVO

La facilidad de localización es un factor

fundamental para conseguir que la experiencia
del usuario (y por tanto la usabilidad del sitio
web) sea óptimo. Si los usuarios no pueden
encontrar lo que buscan mediante una
combinación de exploración, búsqueda e
interrogación, el sitio web fracasará.
FUENTE: https://balranext.files.wordpress.com/2013/08/arquitectura_informacion.jpg

/ VIDEO MATERIAL NUEVO
CASO NESTLE
“ARQUITECTURA WEB”
https://www.youtube.com/watch?v=VSXdCHSFHXM

/ VIDEO
CASO NESTLE
“ARQUITECTURA DE INFORMACION (ECSE)”
https://www.youtube.com/watch?v=Fbin7LY2AMA

/ ARQUITECTURA DE LA INFORMACIÓN - ESTRUCTURA MATERIAL NUEVO
FUENTE: https://www.publisuites.com/blog/arquitectura-de-la-informacion/

/ DISEÑO CENTRADO EN EL USUARIO

Metodología que consiste en diseñar por y para el usuario, pues éste debe ubicarse en el centro de
toda decisión de diseño. No sólo diseñamos productos, diseñamos experiencias de usuario, pues no
es posible entender el producto desvinculado de su uso, su contexto, o de las necesidades y
motivaciones del usuario.

/ VIDEO
“DISEÑO WEB. DISEÑO CENTRADO EN EL USUARIO”

https://www.youtube.com/watch?v=zLyzgxz2YEM

Se basa en entender previamente a los usuarios, las tareas y el entorno en el que los utilizan. El
proceso de diseño incluye a los usuarios utilizando los objetos y viendo si estos responden al diseño
de los productos.
FUENTE: http://www.euphorbia.es/img/diseno/UX.png

Busca responder preguntas, entre las cuales están:

• ¿Quiénes son los usuarios?
• ¿Cuáles son sus tareas y metas?
• ¿Qué nivel de experiencia tienen los usuarios?
• ¿Qué funciones se necesitan?
• ¿Qué información necesitan los usuarios y de que manera?
• ¿Cómo se espera funcione?
FUENTE: https://www.experiencedynamics.com/sites/default/files/FINAL%20user-centered-design2.jpg

/ DISEÑO DE EXPERIENCIA DE USUARIO (UX)

Filosofía de diseño que tiene por objetivo la creación de productos que resuelvan necesidades
concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso
posible con el mínimo esfuerzo.

/ VIDEO MATERIAL NUEVO
“QUE ES EXPERIENCIA DE USUARIO”

https://www.youtube.com/watch?v=K-XD73mL9K0

Tiene como objetivo conocer a fondo a los usuarios finales, normalmente usando investigación
cualitativa o investigación cuantitativa, diseñar un producto que resuelva sus necesidades y se ajuste
a sus capacidades, expectativas y motivaciones poner a prueba lo diseñado, usando pruebas de
usabilidad.

También puede definirse como lo que el usuario percibe al utilizar o probar un producto y una forma
de ver estos productos de manera integral desde el punto de vista de un usuario.

/ VIDEO
“¿QUÉ ES UX DESIGN?”
https://www.youtube.com/watch?v=lYWOzxVCTao

/ INTERFAZ DE USUARIO (UI)

Medio a través del cual el usuario puede comunicarse con una aplicación, sitio web o aparato y
comprende todos los puntos de contacto entre el usuario y el equipo. Las más básicas, son las que
incluyen menús, ventanas, ratón y algunos otros sonidos.
FUENTE: https://artversion.com/wp-content/uploads/2013/10/ui_ux890x400.jpg

Los wireframes son más que bocetos donde se representan visualmente, de una forma muy sencilla
y esquemática la estructura de una página web. Definen el contenido y la posición de los diversos
bloques de un sitio web como: menús de navegación, bloques de contenido, etc.
FUENTE: https://artversion.com/wp-content/uploads/2013/10/ui_ux890x400.jpg

/ VIDEO
“CÓMO CREAR WIREFRAMES PARA DISEÑO WEB”

https://www.youtube.com/watch?v=STlEdjqN4dI

En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo

importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad está en
los contenidos de la web.
FUENTE: http://i2.wp.com/www.uxabilidad.com/wp-content/uploads/2010/07/wireframe.gif

/ INTERFAZ DE USUARIO (UI) MATERIAL NUEVO
https://wireframe.cc/

/ INTERFAZ DE USUARIO (UI) VS DISEÑO DE
EXPERIENCIA DE USUARIO (UX)

/ INTERFAZ DE USUARIO (UI) VS DISEÑO DE EXPERIENCIA DE USUARIO (UX)
• UX hace foco en el usuario y en la experiencia que se quiere lograr. UI hace foco en el artefacto, o,
dicho de otra manera, en lo que está dentro de la pantalla.
• “La gente tolera las cosas sin explicación pero no lo inexplicable”

/ VIDEO
“UI NO ES LO MISMO QUE UX”

https://www.youtube.com/watch?v=1E3jGwGcgg0

Diseño de interfaz de usuario (UI) no necesariamente implica diseño de experiencia de usuario (UX).
FUENTE: https://d13yacurqjgara.cloudfront.net/users/126051/screenshots/1837823/dribbble1_1x.png

FUENTE: https://intrasee.com/wp-content/uploads/2016/05/UX-vs-UI.png

FUENTE: https://cdn-images-1.medium.com/max/1000/1*cYDgrGRLkIioJxkHUjrqaA.jpeg

/ USABILIDAD WEB

/ USABILIDAD WEB
La usabilidad es la medida de la calidad de la

experiencia que tiene un usuario cuando
interactúa con un sitio web, que se mide a
través del estudio de la relación que se
produce entre el estos, para determinar la
eficiencia en el uso y la efectividad en el
cumplimiento de las tareas que se pueden
llevar a cabo.
FUENTE: Revisar carpeta Videos usados sesión 03 (Usabilidad web)

/ USABILIDAD WEB
En muchas ocasiones se asocia, también, el concepto de experiencia del usuario con usabilidad. La
experiencia de usuario (UX) es un concepto mucho más amplio que usabilidad, podemos decir que la
experiencia del usuario engloba a la usabilidad.
FUENTE: http://smrevolution.es/wp-content/uploads/2013/01/usabilidad.jpg

/ USABILIDAD WEB
• La accesibilidad web es la capacidad de un sitio web o aplicación que permite que personas con
algún tipo de discapacidad puedan hacer uso de ésta.
• La usabilidad es una condición necesaria pero no suficiente para ofrecer una buena accesibilidad.
El concepto de accesibilidad es más amplio. La usabilidad se restringe a la audiencia objetivo y la
accesibilidad abarca el máximo rango posible de usuarios, incluyendo a personas con
discapacidad.
FUENTE: https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAfqAAAAJGE1MGUwMTMyLWQ2ZTQtNGZjNi04M2U5LWQ0ZTQzYjMxM2NlOA.jpg

/ USABILIDAD WEB
PRINCIPIOS DE USABILIDAD WEB

La usabilidad es la medida de la calidad de la
experiencia que tiene un usuario cuando
interactúa con un sitio web, que se mide a
través del estudio de la relación que se
produce entre el estos, para determinar la
eficiencia en el uso y la efectividad en el
cumplimiento de las tareas que se pueden
llevar a cabo.

/ VIDEO
“10 PRINCIPIOS HEURÍSTICOS DE LA USABILIDAD”

https://www.youtube.com/watch?v=w3kyhOGmhmk

/ USABILIDAD WEB

Estos principios los expuso Jakob Nielsen en 1995 en su blog. Son 10 principios generales o
heurísticas que se deben tener en cuenta al momento de hacer diseño de interacción.
FUENTE: https://netdna.webdesignerdepot.com/uploads/jakob_nielsen/1.jpg

/ USABILIDAD WEB

1. Visibilidad del estado del sistema. El sistema siempre debe mantener informado al usuario
acerca de lo que está pasando.
2. Coincidencia entre el sistema y el mundo real. El sistema debe hablar el idioma de

los usuarios.
3. Control y libertad del usuario. Los usuarios a menudo eligen opciones por error y será necesario
un mensaje de salida rápida.
4. Consistencia y estándares. Los usuarios no deberían tener que preguntarse si diferentes

palabras, situaciones o acciones significan lo mismo. Deben ser predecibles.
5. Prevención de errores. Es mejor un diseño cuidadoso que evite problemas que mensajes de
error.

/ USABILIDAD WEB
6. Reconocimiento. El usuario no debería tener que recordar la información de una parte

u otra.
7. La flexibilidad y la eficiencia. Diseña un sistema que pueda ser utilizado por un rango amplio de
usuarios
8. Estética y diseño minimalista. Los diálogos no deben contener información irrelevante o poco
necesario.
9. Ayudar a los usuarios reconocer, diagnosticar y recuperarse de los errores. Los mensajes de
error deben expresarse en lenguaje sencillo.
10. Ayuda y documentación. A pesar de que es mejor si el sistema puede ser usado sin
documentación puedes facilitar documentación o ayuda

/ USABILIDAD WEB
Fuente: https://profile.es/blog/los-10-principios-de-usabilidad-web-de-jakob-nielsen/

/ USABILIDAD WEB

/ USABILIDAD WEB

/ USABILIDAD WEB

/ USABILIDAD WEB

/ USABILIDAD WEB

/ USABILIDAD WEB

/ USABILIDAD WEB

/ USABILIDAD WEB

/ USABILIDAD WEB

/ USABILIDAD WEB
PRUEBAS DE USABILIDAD WEB

Técnicas usadas en el diseño de interacciones
centrado en el usuario para evaluar un
producto mediante pruebas con los usuarios
mismos. Aportan datos tanto cuantitativos
como cualitativos sobre usuarios reales que
llevan a cabo tareas reales con dicho producto.

/ VIDEO
“CÓMO HACER PRUEBAS DE USABILIDAD”

https://www.youtube.com/watch?v=fvs0YHvWRvU

/ USABILIDAD WEB

El objetivo principal de las pruebas de
usabilidad web no es conocer la opinión de
los usuarios, sino descubrir en qué grado una
interfaz cumple con un propósito
determinado. Mientras el focus group
consiste básicamente en una discusión
moderada, la prueba de usabilidad es una
observación de cómo interactúan los
usuarios, preferentemente representativos,
con la interfaz.
FUENTE: https://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/12/blinkux.png

/ USABILIDAD WEB

Una prueba de usabilidad no es un control de calidad, que se realiza al final de un proceso para
asegurar que lo producido cumple con una serie de requisitos, es decir no se debe realizar al final del
proceso, sino durante el mismo, facilitando así la corrección de problemas antes que sea demasiado
costoso.
FUENTE: https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/02/1422942868Figure-3.jpg

/ CONCLUSIONES
• Para tener una página web exitosa es necesario no solamente tener un

buen producto/servicio o modelo de negocio sino también cuidar de
diversos aspectos como la organización de la información, la manera cómo
nuestros usuarios interactúan con ésta y pruebas continuas de usabilidad,
siempre con el usuario en el centro de la estrategia. La combinación de
estos y varios otros factores crean en conjunto una experiencia superior y
satisfactoria para los usuarios que se traduce en el éxito del sitio web.

/ BIBLIOGRAFÍA
• https://www.youtube.com/watch?v=Fbin7LY2AMA
• http://www.nosolousabilidad.com/articulos/img/icono_uso2.gif
• http://inherit.mx/includes/frontend/inherit/media/press/56/arquitectura-informacion.jpg
• https://balranext.files.wordpress.com/2013/08/arquitectura_informacion.jpg
• https://www.youtube.com/watch?v=zLyzgxz2YEM
• http://www.euphorbia.es/img/diseno/UX.png
• https://www.experiencedynamics.com/sites/default/files/FINAL%20user-centered-design2.jpg
• https://www.youtube.com/watch?v=SRcBsoYwNgI
• https://www.youtube.com/watch?v=lYWOzxVCTao
• http://www.nosolousabilidad.com/articulos/img/icono_uso2.gif
• https://artversion.com/wp-content/uploads/2013/10/ui_ux890x400.jpg
• https://www.youtube.com/watch?v=STlEdjqN4dI
• http://i2.wp.com/www.uxabilidad.com/wp-content/uploads/2010/07/wireframe.gif
• https://www.youtube.com/watch?v=1E3jGwGcgg0
• https://d13yacurqjgara.cloudfront.net/users/126051/screenshots/1837823/dribbble1_1x.png
• https://intrasee.com/wp-content/uploads/2016/05/UX-vs-UI.png
• https://cdn-images-1.medium.com/max/1000/1*cYDgrGRLkIioJxkHUjrqaA.jpeg

/ BIBLIOGRAFÍA
• https://www.youtube.com/watch?v=zLyzgxz2YEM
• http://smrevolution.es/wp-content/uploads/2013/01/usabilidad.jpg
• https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAfqAAAAJGE1MGUwMTMyLWQ2ZTQtNGZjNi
04M2U5LWQ0ZTQzYjMxM2NlOA.jpg
• https://www.youtube.com/watch?v=w3kyhOGmhmk
• https://netdna.webdesignerdepot.com/uploads/jakob_nielsen/1.jpg
• https://www.youtube.com/watch?v=fvs0YHvWRvU
• https://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/12/blinkux.png
• https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/02/1422942868Figure-3.jpg

s03 Presentacion Mod1

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

s03 Presentacion Mod1

Cargado por

Copyright:

Formatos disponibles

SESIÓN

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

En esta sesión aprenderemos conceptos esenciales de diseño web como arquitectura de la

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

La arquitectura de la información es el arte y la ciencia de dar forma a productos y experiencias

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

Es más que un boceto donde se representa

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

La facilidad de localización es un factor

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

“DISEÑO WEB. DISEÑO CENTRADO EN EL USUARIO”

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

Busca responder preguntas, entre las cuales están:

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

“QUE ES EXPERIENCIA DE USUARIO”

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

“CÓMO CREAR WIREFRAMES PARA DISEÑO WEB”

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

“UI NO ES LO MISMO QUE UX”

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

La usabilidad es la medida de la calidad de la

FUENTE: Revisar carpeta Videos usados sesión 03 (Usabilidad web)

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

PRINCIPIOS DE USABILIDAD WEB

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

“10 PRINCIPIOS HEURÍSTICOS DE LA USABILIDAD”

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

PRINCIPIOS DE USABILIDAD WEB

DISENO DE NEGOCIOS DIGITALES  SESIÓN 03 © ISIL. Todos los derechos reservados

PRINCIPIOS DE USABILIDAD WEB

2. Coincidencia entre el sistema y el mundo real. El sistema debe hablar el idioma de

4. Consistencia y estándares. Los usuarios no deberían tener que preguntarse si diferentes