ESCUELA SUPERIOR POLITÉCNICA DE

CHIMBORAZO

FACULTAD DE INFORMÁTICA Y ELECTRÓNICA

CARRERA TECNOLOGÍAS DE LA INFORMACIÓN

TECNOLOGÍA WEB - QUINTO “A”

INFORME INVESTIGACIÓN FORMATIVA No. 1

Periodo Académico
Abril 2023 – Agosto 2023

1. DATOS GENERALES:

TEMA: Diseño UX & Diseño UI

DOCENTE: Mg. MIGUEL ANGEL DUQUE VACA

NOMBRE: (estudiante(s) CODIGO(S): (de estudiante(s)

CARDENAS LUIS 53

LIMA ALEJANDRO 110

GRUPO No.: 1

FECHA DE ENTREGA: 04-05-2023

2.1OBJETIVO GENERAL:
 Indagar informació n de fuentes confiables acerca de los diseñ os UX & UI

2.1.1OBJETIVOS ESPECIFICOS:

 Conceptualizar terminología bá sica de los diseñ os UX & UI.

 Depurar características específicas de los diseñ os UX & UI.

 Explicar las ventajas y desventajas de los diseñ os UX & UI.

DESARROLLO DEL INFORME:

3.1 Introducción

Ambos diseñ os los de la experiencia del usuario y los de la interfaz del usuario tienen la
tendencia hacia el desarrollo de productos digitales que brinden una experiencia
satisfactoria a sus clientes por un lado el diseñ o de experiencia del usuario se centra en
comprender netamente necesidades o expectativas de sus usuarios de igual manera se
centra en la optimizació n de la usabilidad o la accesibilidad de un producto no obstante el
diseñ o de interfaz de usuario se enfoca en la apariencia visual o la interacció n de un
producto creando interfaces atractivas y funcionales propias de un entorno favorable para
sus usuarios se justifica a un buen diseñ o basado en la experiencia del usuario siempre y
cuando este busque facilitar la interacció n entre el usuario y el producto anticipando
siempre acciones o proporcionando navegaciones intuitivas implicando realizar
investigaciones sobre los usuarios mediante creaciones de prototipos realizar pruebas de
usabilidad y reajustar constantemente el diseñ o de la funcionalidades de las métricas
recopiladas y de los comentarios o sugerencias que se presenten acerca de dicho producto
por consiguiente el diseñ o orientado a la interfaz del usuario se encarga de traducir la
visió n y la identidad de la marca en elementos visuales tangibles incluyendo entre ellos la
elecció n de colores las tipografías o iconos u otros elementos grá ficos que conforman la
interfaz de un producto siendo su objetivo principal crear experiencias de estéticas e
idó neas que refuercen la identidad de la marca o ayuden a sus usuarios a comprender y
utilizar el producto de una manera elocuente la combinació n de ambos diseñ os es esencial
para la creació n de productos digitales que aspiran al éxito ya que un buen diseñ o
orientado en la experiencia del usuario garantizará que los usuarios puedan realizar tareas
de manera eficiente mientras que el diseñ o orientado a la interfaz del usuario deberá ser
atractivo y guardar cierto grado de coherencia con cada uno de sus elementos creando
impresiones positivas y reforzando la confianza que se tiene en el producto o recurso
digital que se está desarrollando, considerando el hecho puntual de que la comodidad y
preferencias del usuario deberá n estar cubiertas por completo al momento de presentar la
versió n final del producto, servicio o herramienta digital que se este, desarrollando
considerando la adaptabilidad de dicho recurso para cualquier usuario con cualquier
impedimento sea este visual, físico , motriz, mental o incluso econó mico, por otra parte no
debemos dejar de lado el hecho de que dicha interfaz deberá ser adaptable al tiempo
considerando el hecho de mejorar o simplificar las acciones que esta implemente para
solventar las problemá ticas que presenten los escenarios que plantee el usuario.
3.2 Descripción de la metodología
Realizamos una investigació n formativa sobre los diseñ os UX y UI analizando conceptos
bá sicos y terminología relacionada con diseñ os para identificar sus características ventajas,
desventajas, elementos y otros aspectos para dicho trabajo hemos empleado informació n
presente en artículos científicos y pá ginas web, así como referencias de la biblioteca
institucional de la ESPOCH, posteriormente hemos depurado solo la informació n ú til para
el presente documento.

3.3. Detalle de la información consultada

¿Qué es la Interfaz de Usuario?

Es el conjunto de elementos hardware y software de una computadora, la cual permite
mostrar la informació n requerida por el usuario, ademá s que permite la interacció n con la
informació n y la computadora. (Gó mez, 2000)

¿Qué es el Diseño UX?

Este diseñ o hace referencia a la disciplina encaminada en mejorar la interacció n entre los
usuarios y un recurso digital, enfocá ndose en comprender sus necesidades o expectativas,
optimizando la usabilidad y accesibilidad para brindar una experiencia satisfactoria para
los usuarios y sus problemá ticas. (Ferrer,2015)
Parámetros de Entrada & Salida UX
Entrada UX:
1. Investigación de usuarios: entender las necesidades, motivaciones y
comportamientos de los usuarios a través de entrevistas, encuestas, aná lisis de
datos, entre otros métodos de investigació n.
2. Análisis de la competencia: evaluar có mo otros productos o servicios en el mismo
espacio abordan las necesidades de los usuarios.
3. Objetivos del negocio: comprender las metas y objetivos de la organizació n o
empresa que impulsa el diseñ o del producto o servicio.
4. Restricciones técnicas: toman en cuenta las limitaciones tecnoló gicas o recursos
disponibles para el desarrollo del producto.
Salida UX:
1. Prototipos interactivos: crear representaciones visuales y funcionales del
producto que permitan a los usuarios interactuar y brindar retroalimentació n.
2. Mapas de experiencia del usuario: visualizar y comunicar el flujo de interacció n y
las emociones del usuario durante su experiencia con el producto.
3. Wireframes & flujos de navegación: definir la estructura y la disposició n de los
elementos de la interfaz para facilitar la interacció n del usuario.
4. Métricas & evaluaciones: establecer indicadores clave de rendimiento y realizar
pruebas de usabilidad para medir el éxito de la experiencia del usuario y realizar
mejoras.

Particularidades del Diseño UX:

 Se enfoca en comprender las necesidades y expectativas de los usuarios.
 Busca optimizar la usabilidad y la accesibilidad del recurso.
 Realiza investigaciones y pruebas para identificar problemas de interacció n y
mejorar la experiencia del usuario.
 Se basa en la empatía y la comprensió n de las motivaciones o comportamientos de
los usuarios.
  Busca anticiparse a las acciones y necesidades de los usuarios, ofreciendo
soluciones intuitivas y eficientes.
 Se centra en la experiencia global del usuario, incluyendo aspectos emocionales y
cognitivos.

¿Qué es el Diseño UI?

Es la apariencia de la interfaz de usuario de una aplicació n, donde involucra combinaciones
de colores, botones, ancho de líneas, fuentes de texto y mucho má s. Busca que la interfaz de
la aplicació n sea atractiva, donde presente estimulaciones y un estilo correcto que tenga
sentido con el propó sito y la personalidad de la aplicació n. (Gallegos,2022)

Parámetros de Entrada & Salida UI

Entrada: Cuando una persona comunica lo que necesita a la computadora mediante
hardware. Algunos componentes de entrada comunes son el teclado, rató n, pantallas
tá ctiles y la voz de uno mismo.
Salida: Es la forma en como la computadora transmite el resultado que el usuario había
solicitado. Los componentes de salida mas comunes y conocidos en la actualidad son el
monitor o la pantalla de un mó vil. Existen otros mecanismos que aprovechan las
capacidades auditivas de una persona.

Particularidades del Diseño UI:

 Se encarga de la apariencia visual y la interacció n de un producto.
 Crea una estética atractiva y coherente, que refuerza la identidad de la marca. Se
basa en principios de diseñ o visual, como el uso de colores, tipografías, iconos y
otros elementos grá ficos.
 Busca proporcionar una interfaz clara y comprensible, que guíe al usuario en la
interacció n con el producto.
 Destaca elementos clave y llamadas a la acció n para facilitar la navegació n y el uso
del producto.
 Considera aspectos técnicos y de implementació n para asegurar la viabilidad del
diseñ o.
Modelos de UI
Modelo del usuario: Este modelo explica que el usuario tiene su propia visió n personal del
sistema y busca que este se comporte de una forma adecuada. Este modelo puede
conocerse mediante test de usabilidad, entrevistas o una realimentació n.
Modelo del diseñador: En este modelo el diseñ ador mezcla las necesidades, ideas, deseo
del usuario. Ademá s de los materiales que dispone el programado para diseñ ar el software,
siendo este un intermediario entre ambos.

Este modelo consta de tres partes:

1. La Presentació n, que es lo que captara la atenció n del usuario, siendo que después
de llamar la atenció n de este pasara a segundo plano.
2. La segunda que son las técnicas de interacció n del usuario, a través de diversos
dispositivos.
3. La tercera, siendo la má s importante, donde el diseñ ador determina una metá fora
que encaje adecuadamente con el modelo mental del usuario.
Modelo del programador: El modelo má s fá cil de visualizar debido a que se puede
especificar formalmente. Consta por objetos que puede manipular el programador, los
cuales son diferentes a los que tiene el usuario, los cuales deben ser ocultos y que el
usuario no pueda verlos, en este modelo se debe tener conocimiento sobre la plataforma de
desarrollo, el SO, las herramientas de desarrollo y especificaciones, aun así, no puede
proporcionar modelos o metá foras adecuadas para el usuario.

Heurísticas de Usabilidad en Diseño de UI de Nielsen:

Elementos importantes de una UI según Nielsen:

 Propósito del sitio: Se tiene que dejar claro quién es el dueñ o de la web y que
funciones permite realizar en esta.
 Ayuda al usuario: La forma de navegació n tiene que estar a la vista y debe incluir
un sistema de bú squeda adicional.
 Mostrar el contenido: Debe de explicar de forma adecuada y apoyada con
elementos de texto que ayuden a la lectura.
 Diseño gráfico funcional: Los elementos grá ficos deben dirigirse en ayudar al
usuario a que encuentre lo que necesita de la web y que no sea solo una decoració n
Similitudes del Diseño UX y UI.
 Enfoque en la experiencia del usuario: Estos diseñ os tienen el objetivo de
mejorar la experiencia del usuario al interactuar con el sistema.
 Colaboración: Ambos diseñ os trabajan juntos en el proceso de diseñ o donde
buscan garantizar que lo que se le presente al usuario sea coherente y satisfaga de
forma visual e interactivo.
 Centrados en el Usuario: Se basan en la comprensió n profunda de las necesidades,
expectativas y comportamientos de los usuarios.
 Investigación y Pruebas: Ambos roles involucran la realizació n de investigaciones
de usuarios, pruebas de usabilidad y retroalimentació n para informar y mejorar el
diseñ o.
Diferencias del Diseño UX y UI.
 Enfoque y alcance: UX se enfoca en la experiencia global del usuario. Mientras que
el UI se centra en el diseñ o visual y la disposició n de elementos de la interfaz.
 Objetivos y resultados: El diseñ o UX busca satisfacer al usuario, la eficiencia y
facilidad de uso. Mientras que el diseñ o UI esta enfocado en la estética visual,
legibilidad y claridad de la interfaz.
  Competencias y habilidades: Los profesionales en el á rea de UX tienen
conocimientos en investigació n de usuarios, diseñ o de interacció n y diseñ o de
informació n. En cambio, los profesionales en el á rea de UI tienen habilidades
visuales como el diseñ o grá fico, tipografía y el uso de colores.
 Implementación: El diseñ o UX se aborda por etapas iniciales en el proceso de
diseñ ó , donde busca definir los requisitos y estable una estructura y flujo de la
experiencia del usuario. El diseñ o UI se realiza después de haber implementado el
diseñ o UX, para así definir la apariencia visual y los detalles de los elementos de la
interfaz.
Ventajas y Desventajas del Diseño UX
Ventajas del Diseño UX
 Transforma el contenido para un disfrute optimo.
 Ayuda a interceptar las necesidades de los usuarios.
 Facilita la recuperació n de los medios digitales.
 Permite prá cticas de visualizació n de datos, redacció n persuasiva y diseñ o de
llamadas a la acció n.
Ventajas del Diseño UI
Ventajas
 Arquitectura de informació n bien construida.
 Busca aumentar la satisfacció n del usuario.
 Interacció n segura entre empresa y usuario final.
 Diseñ o atractivo y bien construido para una mejor experiencia del usuario.
Desventajas del Diseño UX/UI
 Subjetividad en la evaluació n de la experiencia del usuario.
 Costos y recursos adicionales para realizarlos.
 Cambios constantes en las preferencias y tecnologías.
Casos de Éxito.
1. UX – Spotify
Spotify se destaca en un diseñ o UX y se le considera innovador en la industria de la
mú sica en streaming, enfocada en la recomendació n de contenido personalizado,
facilidad de bú squeda y la creació n de listas de reproducció n colaborativas. Lo que le
han hecho que la plataforma sea muy utilizada y apreciada por millones de usuarios en
todo el mundo.
2. UI – Google
Su diseñ o UI es simple y funcional en sus productos, donde se puede reconocer el motor
de bú squeda, Gmail y Google Maps. El enfoque que tienen ellos es dar la informació n
má s clara y correcta, como también la jerarquía visual y la facilidad de navegar por sus
herramientas. Esto permitió que los usuarios puedan acceder y utilizar sus servicios de
forma eficiente y efectiva.

4.-RESULTADOS

(Completar)
5. CONCLUSION
 En concreto los diseñ os u ex y se entienden como disciplinas interrelacionadas que
se complementan entre sí para crear experiencias digitales elocuentes con enfoque
centrados en el usuario y las estéticas visuales atractivas que son complementos
fundamentales para el éxito de cualquier producto recurso o servicio digital dentro
de nuestro entorno cada día má s inmiscuido en la tecnología y la interacció n digital.
6. RECOMENDACIONES
 Emplear recursos distintos para la elaboració n de este tipo de trabajos.
 Considerar la cromá tica al momento de diseñ ar una interfaz.
 No discriminar usuarios al momento de crear recursos o herramientas digitales.

7. BIBLIOGRAFÍA
CITAS E-LIBRO:

 Drisgill, R. Ross, J. & Stubbs, P. (2013). SharePoint 2013 Branding and User
Interface Design.. Wiley. [Link]
 Ferrer Martínez, J. (2015). Desarrollo de interfaces.. RA-MA Editorial.
[Link]
 Wood, D. (2015). Diseñ o de interfaces. 1. Parramó n Paidotribo S.L.
[Link]
 Esté, M. E. & Herrera León, B. (Dir.). (2010). Comunicación para la ciencia y la tecnología:
diseñando interfaces.. D - Universidad Central de Venezuela.
[Link]

CITAS EXTERNAS:

 Gó mez, L. S. M. (2000). Diseñ o de interfaces de usuario principios, prototipos y

heurísticas para evaluació n.
 Arrieta, G. (2021). Diseñ o UI y UX: ¡descubre cuá l es la diferencia entre ambos! Rock
Content - ES. [Link]
 BeeDIGITAL. (2021). Diferencias y similitudes entre diseñ o UX y UI. BeeDIGITAL.
[Link]
ux-y-ui/#:~:text=UX%20y%20UI%2C%20un%20t%C3%A1ndem%20inseparable,-
Ambos%20tipos%20de&text=En%20definitiva%2C%20podemos%20decir
%20que,%2C%20adem%C3%A1s%2C%20atractivo%20y%20agradable.
 ITfluence. (2021, 11 abril). Experiencia de Usuario – Diseño UX y UI - ITfluence.
ITfluence - Digital Transformation. [Link]
usuario-ux-ui/
 More, M. (2022, 15 julio). ¿Qué es la UX y la UI? Thinking for Innovation.
[Link]
 Qué es: UX y UI [Ventajas y desventajas] Raned. (2018, 19 diciembre). Raned.
[Link]