INTERFAZ DEL DISEÑO

MATERIA: Diseño Industrial II

DOCENTE: Ing. Amaya Juan Pablo

INTEGRANTES:

Ayllón Flores Carla Vanesa

Ferrufino Muñoz Naarei

Paz Camila

1
ÍNDICE

1. Introducción
2. Aspectos que abarca el diseño de interfaz de usuario

2.1 Diseño Visual

2.2 Diseño de Diseño de Interfaz

2.3 Navegación

2.4 Interacción

2.5 Accesibilidad

3. Importancia de la interfaz de diseño

3.1 Primera impresión

3.2 Facilita la navegación

3.3 Usabilidad

3.4 Accesibilidad

3.5 Consistencia

4. Tipos de interfaz de usuario

4.1 Interfaz de hardware

4.2 Interfaz de software

4.3 Interfaz software-hardware

5. Evolución de las interfaces de usuario

5.1 Interfaz de línea de comandos (CLI)

5.2 Interfaz de usuario de texto (TUI)

5.3 Interfaz gráfica de usuario (GUI)

5.4 Interfaz de usuario de voz (VUI)

5.5 Interfaz de usuario natural (NUI)

6. Objetivo de la interfaz de usuario

7. Características de la interfaz de usuario

2
8. Principios de Diseño de Interfaz

8.1. Jerarquía Visual

8.2. Comentarios del Usuario

8.3. Simplicidad

8.4. Flexibilidad

9. Los principios de interfaz del usuario

10. Herramientas y Tecnologías para el Diseño de Interfaz

11. Conclusión

12. Bibliografía

3
1. Introducción

El diseño de interfaz de usuario, es una disciplina

fundamental en el desarrollo de software y
productos digitales. Se centra en la creación de
interfaces visuales y funcionales que permiten a los
usuarios interactuar de manera efectiva y
placentera con una aplicación, sitio web o
dispositivo. El objetivo principal del diseño de
interfaz de usuario es proporcionar una experiencia
de usuario intuitiva, eficiente y atractiva.

El diseño de interfaz de usuario abarca aspectos

como la disposición de elementos en pantalla, la
elección de colores y tipografías, la organización de la información, la creación de
iconos y botones, y la navegación dentro de la aplicación. Además, debe tener en
cuenta las necesidades y preferencias del usuario, así como las tendencias actuales
de diseño y las mejores prácticas de usabilidad.

2. Aspectos que abarca el diseño de interfaz de usuario

Los aspectos que abarca el diseño de interfaz de usuario son variados y pueden
incluir:

2.1 Diseño Visual:

● Diseño de Colores: Selección de

una paleta de colores que refleja la
identidad de la marca y crea una
atmósfera adecuada para la
aplicación o sitio web.
● Tipografía: Elección de fuentes
legibles y estilizadas para textos y
títulos.
● Iconografía: Creación o selección de
iconos que representan acciones o
funciones de manera clara..

2.2 Diseño de Diseño de Interfaz:

● Espaciado y Alineación: Mantener un equilibrio adecuado entre

elementos, utilizando espacios y alineaciones para lograr una
disposición armoniosa.

4
 ● Grids y Rejillas: Uso de grids para alinear y distribuir elementos de
manera consistente.
● Adaptabilidad: Asegurarse de que la interfaz sea adaptable a diferentes
tamaños de pantalla y dispositivos.

2.3 Navegación:

● Jerarquía de Información: Organización de contenidos en niveles

jerárquicos para facilitar la navegación.
● Menús y Botones: Diseño de botones y menús de navegación intuitivos
y accesibles.
● Mapas de sitio: Creación de mapas de sitio o flujos de navegación para
planificar la estructura de la aplicación.

2.4 Interacción:

● Feedback Visual: Proporcionar retroalimentación visual cuando los

usuarios interactúan con elementos (por ejemplo, al hacer clic en un
botón).
● Transiciones y animaciones: Uso de animaciones para mejorar la
experiencia del usuario y guiar la atención.
● Microinteracciones: Detalles pequeños pero significativos que hacen
que la interfaz sea más agradable y funcional.

2.5 Accesibilidad:

● Cumplimiento de Normativas: Garantizar que la interfaz cumple con

estándares de accesibilidad para que sea utilizable por personas con
discapacidades.
● Contraste y tamaño de texto: Asegúrese de que el texto tenga suficiente
contraste y que el tamaño sea ajustable..

3.Importancia de la interfaz de diseño

3.1 Primera impresión: La interfaz es lo primero que los usuarios ven cuando
interactúan con un producto o aplicación. Una interfaz bien diseñada puede
crear una primera impresión positiva, lo que aumenta la probabilidad de que
los usuarios continúen utilizando el producto.

3.2 Facilita la navegación: Una interfaz bien estructurada y organizada facilita

la navegación de los usuarios dentro del producto. Esto significa que los
usuarios pueden encontrar fácilmente lo que están buscando, lo que mejora su
experiencia y reduce la frustración.

5
 3.3 Usabilidad: El diseño de interfaz
tiene un impacto directo en la
usabilidad de un producto. Una
interfaz intuitiva y fácil de usar
permite a los usuarios completar
tareas de manera eficiente y sin
problemas, lo que aumenta la
satisfacción del usuario.

3.4 Accesibilidad: Un diseño de

interfaz inclusivo tiene en cuenta las
necesidades de todos los usuarios,
incluidos aquellos con discapacidades. Esto garantiza que el producto sea
utilizable para un público más amplio y cumpla con los estándares de
accesibilidad.

3.5 Consistencia: La coherencia en el diseño de la interfaz es esencial para

que los usuarios se sientan cómodos y confiados al interactuar con un
producto. Una interfaz coherente utiliza patrones de diseño y elementos
visuales consistentes en todo el producto.

4.Tipos de interfaz de usuario

Existen 3 tipos de interfaz de usuario

según su diseño y propósito:

● software,
● hardware,
● y software -hardware

4.1 Interfaz de hardware:Engloba todos

aquellos elementos que permiten
ingresar, procesar y entregar datos,
como los famosos teclados y “ratones”,
así como las pantallas.

4.2 Interfaz de software:Es aquella que brinda información sobre los procesos y
herramientas de control, la cual puede ser observada fácilmente por el usuario en la
pantalla de su dispositivo.

6
4.3 Interfaz software-hardware:Dentro de la interfaz del usuario, esta es la que sirve
de puente entre la máquina y las personas.Genera un círculo virtuoso en el cual el
dispositivo comprende las instrucciones del individuo y, a su vez, este entiende la
información del aparato, a través de la traducción del código binario a elementos
simples.

Además, la interfaz del usuario puede clasificarse de acuerdo a la forma en que

interactúa con el hombre.Bajo este esquema, podemos afirmar que existen interfaces
de línea de comandos, gráficas de usuario y natural de usuario.

La interfaz de línea de comandos es alfanumérica, es decir, solo presenta texto,

mientras que las interfaces gráficas del usuario representan visualmente los
elementos de control y medida para optimizar la comunicación con el usuario y, en
general, la experiencia de este.

En cuanto a la interfaz natural de usuario, son aquellas que conectan de manera

directa al hombre y la máquina.

5. Evolución de interfaz del usuario

● 5.1 Interfaz de línea de comandos (CLI)

La interfaz de usuario de comandos es una de las más obsoletas, puesto que el

usuario debe introducir directamente comandos específicos. A veces es muy técnico
y requiere conocimientos adicionales. Cuando el ordenador procesa lo introducido,
aparece otra línea sugiriendo instrucciones para introducir nuevos comandos con
estas interfaces de usuario.

7
 ● 5.2 Interfaz de usuario de texto (TUI)

Su objetivo es que se puedan introducir textos para ejecutar las órdenes y transmitir
u obtener información. Es muy usado en la instalación de sistemas operativos y en
sus terminales para acceder a diferentes programas.

● 5.3 Interfaz gráfica de usuario (GUI)

La interfaz de usuario gráfica es de las más utilizadas hoy en día por su facilidad y
sencillez general. En este caso, el usuario interactúa con el teclado y el ratón, y en
muchas ocasiones está basada en simples gráficos que describen las acciones a
través de botones, menús y toda variedad de componentes.

● 5.4 Interfaz de usuario de voz (VUI)

En esta interfaz el usuario tiene una mayor facilidad y más disponibilidad para
desplazarse, sin estar obligado a permanecer en un punto, mirar a una pantalla o
interactuar de forma «física» como tendría que hacerlo en los casos anteriores.

● 5.5 Interfaz de usuario natural (NUI)

La interfaz de usuario está basada en la interacción con gestos, toques o acciones

manuales y tiene como objetivo que el usuario se comporte de la manera más
natural posible sin necesidad de aprender a usarla: pantallas táctiles, opciones de
reconocimiento de movimientos corporales, etc.

6. Objetivos de la interfaz de
usuario
El objetivo de esta interacción es
permitir el funcionamiento y control
más efectivo de la máquina desde la
interacción con el humano.

El objetivo de la Interfaz de Usuario

es mantener la interacción con ellos
de una forma más atractiva,
centrando el diseño en ellos. Es por
ello que ramas como el Diseño
Gráfico y Diseño Industrial basan sus conocimientos a que aprendan lo más rápido
posible el funcionamiento de los desarrollos. Las herramientas principales que
utilizan son recursos como la gráfica, los pictogramas, los estereotipos y la
simbología, sin afectar el funcionamiento técnico eficiente.

8
7. Características de la interfaz de usuario

● Atractivo visual

La apariencia debe ser una prioridad de los

equipos de desarrollo de interfaz del usuario, ya
que permite que el usuario se sienta identificado y
cómodo con el programa.

● Claridad

Es la manera de transmitir la información al usuario

debe ser clara y concisa para evitar errores o
confusiones al momento de interactuar el software.

● Coherencia

Todos los elementos de una aplicación deben mantener unidad en su diseño y

propósito. Al conseguirlo, los usuarios pueden crear patrones de uso de forma
intuitiva, sin la necesidad de aprender procesos muy complejos que podrían
desinhibir su uso de tecnología.}

● Concisión

Se trata de darle al usuario solo la información que necesita y pide.

● Flexibilidad

Este concepto es cada vez más importante para los usuarios: una herramienta que
puede adaptarse a las necesidades del usuario favorecerá su éxito en el futuro.

● Interactiva

Una buena interfaz tiene que ser rápida y además ofrecer información al usuario
sobre las tareas que se están realizando en tiempo real.

● Eficiente

Una interfaz en la que el usuario sea capaz de lograr lo que desea al momento, sin
molestarlo con opciones adicionales sobre lo que desea hacer, que demoran el
proceso y dañan la experiencia del usuario.

9
8. Principios de Diseño de Interfaz

● 8.1. Jerarquía Visual.

La jerarquía visual es el principio de diseño que

consiste en dotar de un orden a los elementos de
una interfaz según su importancia, para facilitar la
interacción a la persona usuaria, permitiendo
facilitar la comprensión de la información y guiar la
interacción hacia las acciones que se buscan
incentivar.

● 8.2. Comentarios del Usuario

Se refiere a qué queremos comunicar y transmitir

como prioritario desde el producto, las necesidades
de los usuarios y su mapa mental, para saber qué
caminos trazar en la organización jerárquica de la
información y qué elementos se han de destacar
sobre el resto.

● 8.3. Simplicidad

Para los usuarios debe ser fácil hacer su

trabajo; esta facilidad debe manifestarse
en la Plataforma o arquitectura de
hardware y software, en la aplicación o
programa informático y en la red de
trabajo o el trabajo colaborativo, se debe
tener todo en la aplicación, la
información y acciones relevantes para
el usuario deben estar presente o ser
accesible con facilidad, pero no debe
haber exceso de contenidos, se intenta
prescindir de elementos poco
significativos y reducir la complejidad a un nivel comprensible, asumible y
controlable por el usuario, todo debe estar bien organizado y presentarse
oportunamente.

10
 ● 8.4. Flexibilidad

Se logra enfocándose en adaptar la interfaz a

las acciones más frecuentes, en donde los
novatos encuentran lo necesario para
completar sus metas y los expertos pueden
hacer uso de herramientas más avanzadas,
como el uso de atajos, que aceleren su
interacción, para crear una interfaz flexible es
importante tomar en cuenta algunas
estrategias, como el establecer mensajes
tanto para usuarios novatos y expertos.

9. Los principios de interfaz del usuario

Familiaridad del usuario: Proporciona una respuesta clara y visual cuando los
usuarios interactúan con la interfaz para que los usuarios sepan que su acción ha
sido reconocida.

Consistencia: Utiliza los elementos de diseño coherentes en toda la interfaz para

que de esta manera los usuarios se sientan familiarizados y sepan que esperar.

Mínima sorpresa: Se refiere a evitar sorprender o confundir a los usuarios con

cambios inesperados en el diseño o funcionalidad.

Recuperabilidad: Se refiere a la capacidad de los usuarios para recuperarse de

errores o acciones no deseadas, importante para brindar una experiencia de usuario
más fluida.

Guía al usuario: Las instrucciones claras y visuales para ayudar a los usuarios a
navegar y utilizar la interfaz de manera efectiva.

Diversidad de usuario: La consideración de las diferentes necesidades,

habilidades y preferencias de los usuarios.

10. Herramientas y Tecnologías para el

Diseño de Interfaz

Existen diversas herramientas y tecnologías para

el diseño de interfaz, como Adobe XD, Sketch,
Figma e InVision, estas herramientas nos permiten crear
prototipos interactivos, diseñar interfaces de usuario y
colaborar en equipo.

También tenemos tecnologías como HTML, CSS y JavaScript para

desarrollar interfaces web interactivas.

11
Conclusión:

La interfaz de diseño de usuario es un elemento fundamental en la creación

de experiencias digitales exitosas, a través de herramientas y tecnologías
especializadas, los diseñadores podemos crear interfaces que lleguen a
satisfacer a las necesidades y expectativas de los usuarios, que no solo sean
visualmente atractivas si no que sean fáciles y accesibles para todos los
usuarios, creando una buena experiencia digital.

13. Bibliografía

https://es.wikipedia.org/wiki/Interfaz_de_usuario

https://keepcoding.io/blog/que-es-una-interfaz-de-usuario/

https://rockcontent.com/es/blog/interfaz-de-usuario/

https://blog.hubspot.es/website/interfaz-usuario#recomendaciones

https://www.gammaux.com/blog/la-importancia-de-la-jerarquia-en-el-diseno-de-
interfaces/#:~:text=La%20jerarqu%C3%ADa%20visual%20es%20el,interacci%C3%
B3n%20a%20la%20persona%20usuaria.

https://www.uxdesigninstitute.com/

https://www.tokioschool.com/noticias/caracteristicas-ideales-que-deben-tener-
interfaces-usuario/

https://www.smashingmagazine.com

https://es.linkedin.com/learning/diseno-de-interfaz-ui-esencial/flexibilidad-en-el-tipo-
de-usuario-y-eficiencia-de-uso

https://www.crehana.com/blog/transformacion-digital/software-diseno-de-interfaces/

12