Diseño centrado en el usuario, UX y UI

DISEÑO DE NEGOCIOS DIGITALES  SESIÓN 03 © 2019 ISIL. Todos los derechos reservados
SESIÓN
03 DISEÑO 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.

• 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.
/ INTRODUCCIÓN

/ 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).

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

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

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

/ 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.

DISEÑO WEB. DISEÑO CENTRADO EN EL USUARIO
https://www.youtube.com/watch?v=zLyzgxz2YEM
/ VIDEO

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.

QUE ES EXPERIENCIA DE USUARIO
https://www.youtube.com/watch?v=SRcBsoYwNgI
/ VIDEO

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.
FUENTE: http://www.nosolousabilidad.com/articulos/img/icono_uso2.gif

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.

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

/ 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.

CÓMO CREAR WIREFRAMES PARA DISEÑO WEB
https://www.youtube.com/watch?v=STlEdjqN4dI
/ VIDEO

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) 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”

UI NO ES LO MISMO QUE UX
https://www.youtube.com/watch?v=1E3jGwGcgg0
/ VIDEO

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

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

usuario (UX).
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.

10 PRINCIPIOS HEURÍSTICOS DE LA USABILIDAD
https://www.youtube.com/watch?v=w3kyhOGmhmk
/ VIDEO

/ 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
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.

CÓMO HACER PRUEBAS DE USABILIDAD
https://www.youtube.com/watch?v=fvs0YHvWRvU
/ VIDEO

/ 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

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.
/ CONCLUSIONES

• 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
/ BIBLIOGRAFÍA

Diseño centrado en el usuario, UX y UI

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (6)

Similar a Diseño centrado en el usuario, UX y UI

Similar a Diseño centrado en el usuario, UX y UI (20)

Más de Shirley Carreño Rojas

Más de Shirley Carreño Rojas (20)

Último

Último (20)

Diseño centrado en el usuario, UX y UI

Notas del editor