_ Interfaz de Usuario y Experiencia de Usuario (UI y UX) 1
GUÍA DE APRENDIZAJE
INTERFAZ DE USUARIO Y
EXPERIENCIA DE USUARIO (UI Y UX)
_ Interfaz de Usuario y Experiencia de Usuario (UI y UX) 2
Presentación de la unidad
El propósito del presente documento es servir de guía para el aprendizaje sobre diseño de interfaz. En particular,
interfaz web.
El número de usuarios de internet aumenta día a día y el número de páginas web también. Internet ha cambiado no
solo la forma de trabajar de algunas personas, con una mayor flexibilidad de horarios, sino también en la manera en la
que se relacionan algunas personas. Esto es, interactuamos con interfaces para poder comunicar la información
personas o laboral que manejamos, o nuestros gustos o preferencias a familiares, amigos y conocidos través de
internet.
Por ejemplo, Facebook es un lugar de interacción donde compartimos nuestras vivencias, publicamos lo que nos
sucede, las fotos de nuestros viajes, nuestras opiniones sobre los temas que nos interesan, pretendiendo, no solo
entretenernos, sino también mantener informados a nuestros amigos.
Existen otras que representan un uso obligado en nuestro quehacer diario, como las interfaces para el pago de cuentas
o responder un correo electrónico por propósito laboral. Todas y cada una de estas páginas son diseñadas con alguna
finalidad.
Lograr nuestro objetivo dependerá, en gran medida, del diseño que hagamos. Para lograr entenderla,
debemos conocer las necesidades de los usuarios que dan origen a los distintos diseños que hoy día
conocemos, además de evaluar las características gráficas y la experiencia del usuario, que son necesarias
para la interacción.
Tema 1. Diseño de interfaz
La interfaz de usuario es todo aquel espacio gráfico y físico en donde los usuarios interactúan con el software. Dentro
de este espacio se presenta información, la cual debes entender, evaluar e interpretar para decidir qué hacer con ella.
Cada día estamos interactuando con interfaces web, ya sea con propósitos personales, laborales o de entretención.
Todas y cada una de éstas son diseñadas con alguna finalidad. Lograr el objetivo dependerá, en gran medida, del diseño
que tengan.
_Guía de aprendizaje
_ Interfaz de Usuario y Experiencia de Usuario (UI y UX) 3
Según tu opinión personal, ¿qué necesidades gráficas del usuario se identifican en la interfaz de Waze? y
¿cuáles son las características de la interfaz que te permiten experimentar una buena o una mala experiencia
de usuario?
La respuesta a las necesidades debe considerar:
Características funcionales de un navegador social que proporcione información sobre:
• Rutas en tiempo real, basadas en el tráfico e información generado por todos los usuarios.
• Alertas sobre accidentes, controles, cortes en carreteras, entre otros.
• Actualización automática y continua de ubicación y hora de llegada, no solo tuya, sino también de tus
amigos.
• Mapas que se editan continuamente
• Información sobre las gasolineras más baratas que puedes encontrar en tu ruta.
Características gráficas de organización de contenido:
• Elementos de identificación (¿quiénes somos?, contáctanos, entre otros).
• Elementos de navegación (menús).
• Elementos de contenidos.
• Elementos de interacción (botones versus funcionalidades, links versus acción, entre otros).
Características que permitan que la experiencia del usuario sea agradable antes, durante y después de su interacción
con la interfaz:
• Amigable a la vista.
• Fácil de usar.
• Fácil de aprender.
• Accesible.
• Atractivo.
Para profundizar en este tema:
Para mayor información, revisa los materiales de las referencias bibliográficas. Los tres últimos están disponibles en la
plataforma de biblioteca digital de Inacap:
• Hassan, Y. (2015). Experiencia de Usuario: Principios y Métodos. Recuperado el 26 de diciembre de 2016, de
[Link]
• Alva, O. M. E. (2009). Metodología de medición y evaluación de la usabilidad en sitios web educativos. Oviedo: Ediuno
- Universidad de Oviedo.
• Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario.
Barcelona: Editorial UOC.
• Díaz, J., & Amadeo, A. P. (2013). Guía de recomendaciones para diseño de software centrado en el usuario. La Plata: D
- Editorial de la Universidad Nacional de La Plata.
_Guía de aprendizaje
_ Interfaz de Usuario y Experiencia de Usuario (UI y UX) 4
Tema 2. Usabilidad en el diseño de interfaz
Uno de los temas que vemos constantemente dentro de las conversaciones de diseño de interfaz es aquel referido a
la usabilidad. Para esto es que revisaremos la siguiente bibliografía:
Bibliografía asociada a este tema:
Revisa el siguiente material desde la página 10 a la 16:
López, M. (2012). Métodos de evaluación de usabilidad para aplicaciones web transaccionales (Informe final del
proyecto para optar al título profesional de Ingeniero Civil en Informática). Recuperado el 7 de marzo de 2017 desde
[Link]
Tema 3. Accesibilidad y diseño centrado en el usuario
Basándonos en lo que establece Barcelona Activa, una manera de llevar a cabo el proceso de diseño, centrado en el
usuario que seguiremos en la asignatura, es a través de los siguientes pasos:
1. Identifica usuarios a través de la técnica de mapa de empatía.
2. Averigua las necesidades del usuario (métodos de investigación de usuarios y/o fuentes de
documentación).
3. Analiza las tareas y experiencias de usuario a través de la técnica de mapa de experiencia de usuario.
4. Diseña un prototipo de bajo nivel como lo es un bosquejo en papel.
5. Levanta y analiza elementos de arquitectura de la información.
6. Diseña un mapa mental asociado al diseño de la interfaz
7. Diseña un wireframe de acuerdo a la información de la arquitectura de la información 8. Diseña
storyboard para afinar y comprobar la experiencia y navegación del usuario.
9. Mejora el diseño en función de lo identificado en el storyboard.
10. Diseña la guía de estilos.
11. Diseña los mockups con los estilos aplicados.
12. Realiza pruebas de evaluación del diseño de interfaz con métodos formales.
13. Vuelve a hacer cambios y pruebas de usuario hasta que veas que los usuarios se sienten cómodos en
tu producto y lo encuentran sencillo de utilizar.
_Guía de aprendizaje
