INSTITUTO TECNOLÓGICO DE TEPIC
DEPARTAMENTO DE SISTEMAS Y COMPUTACIÓN
INGENIERÍA EN SISTEMAS COMPUTACIONALES
INGENIERÍA DE SOFTWARE
PRÁCTICA P24ISW
Nombre del Docente: LIC. ROCÍO GABRIELA BARRIENTOS LUJÁN Fecha: marzo 19,
2025.
Clave de la práctica: P24ISW
Nombre: DISEÑO DE INTERFAZ DE USUARIO
Ámbito de desarrollo: Laboratorio
Competencia de la práctica:
Diseña las interfaces del usuario del proyecto propuesto.
1. Introducción
En esta práctica el estudiante se dedica a diseñar las interfaces que utilizara el usuario del
sistema propuesto, es decir, el diseño que permite el primer contacto del usuario con el
sistema, teniendo la oportunidad de crear una excelente interfaz de usuario.
¿Qué es la interfaz de usuario?
La interfaz de usuario (user interface o UI) es el punto de contacto entre humanos y
computadoras. Cualquier tecnología con la que interactúes como usuario es parte de la
interfaz de usuario. Por ejemplo, las pantallas, los sonidos, el estilo general y la capacidad
de respuesta son elementos de UI.
Una interfaz de usuario implica los cuatro componentes siguientes:
1. Elementos de navegación. Los elementos de navegación ayudan a los usuarios a
navegar por una interfaz. Algunos ejemplos de elementos de navegación en la interfaz de
usuario son barras deslizantes, campos de búsqueda y flechas de retroceso.
2. Controles de entrada. Los elementos en la página que permiten a los usuarios ingresar
información son controles de entrada. Botones, casillas de verificación y campos de texto
son ejemplos de controles de entrada.
3. Componentes informativos. Los componentes informativos se utilizan para comunicar
información al usuario. Una barra de progreso debajo de un video o tutorial es un ejemplo
de un componente informativo.
4. Contenedores. Los contenedores organizan el contenido en secciones fáciles de
digerir. En lugar de listar cada subtítulo debajo de una pestaña, se puede utilizar un
elemento contenedor como un menú de acordeón para ocultar o mostrar contenido.
UI vs. UX
En tu investigación sobre el diseño de la interfaz de usuario, puedes encontrarte con un
término relacionado: el diseño de la experiencia del usuario (UX). Si bien UI y UX
comparten algunas similitudes, hay algunas distinciones importantes, como describimos a
continuación:
Diseño UI
Se centra en el diseño de interacción, los elementos visuales de un sitio web o aplicación,
y garantizar que una ruta de navegación sea visualmente atractiva y fácil de usar.
Diseño UX
Se centra en satisfacer la intención del usuario y proporcionar una ruta de navegación
clara para acceder a la información de un sitio o aplicación.
¿Qué es el diseño de interfaz de usuario?
El diseño de interfaz de usuario es probablemente lo primero que encuentras cuando usas
una aplicación o visitas un sitio web. Es responsable de la apariencia, la interactividad, la
usabilidad, el comportamiento y la sensación general de un producto. El diseño de UI
puede determinar si un usuario tiene una experiencia positiva con un producto, por lo que
es esencial que las empresas y los creadores se familiaricen con las mejores prácticas de
diseño UI.
3 tipos de diseño de interfaz de usuario
Existen muchos tipos diferentes de diseño de interfaz de usuario. La siguiente tabla
recopila algunos de los más populares y conocidos.
3 principales tipos de diseño de interfazDefinición
de usuario
Interfaz gráfica de usuario (GUI, por sus Interfaz gráfica de usuario (GUI, por sus
siglas en inglés) siglas en inglés) Una interfaz gráfica de
usuario permite a los usuarios interactuar
con un dispositivo a través de iconos
gráficos. Por lo general, las interacciones se
facilitan mediante un mouse, un trackpad u
otra herramienta de clic. El escritorio o
pantalla de inicio de tu computadora portátil
es un ejemplo de una GUI.
Interfaz de usuario de voz (VUI, por sus Las palabras y la sintaxis desempeñan el
siglas en inglés) papel más crucial en las interfaces de
usuario de voz. Las VUI utilizan el
reconocimiento de voz para comprender
comandos de voz. Ejemplos destacados de
VUI incluyen Siri en el iPhone, la función
"Hey Google" de Google Home y Alexa de
Amazon.
Interfaz basada en menús Las interfaces basadas en menús
proporcionan a los usuarios opciones de
comandos a través de una lista o un menú.
Estos comandos pueden presentarse en
pantalla completa, como una ventana
emergente o desplegable. Ejemplos
comunes de interfaces basadas en menús
incluyen cajeros automáticos y parquímetros
digitales.
Otros tipos de diseño de UI incluyen la interfaz de usuario táctil y la interfaz de usuario
basada en formularios. Las interfaces de usuario táctiles son interfaces gráficas que
utilizan tecnología táctil en lugar de un mouse o un lápiz óptico. Las interfaces de usuario
basadas en formularios utilizan casillas de texto, casillas de verificación y otros
componentes informativos. Es decir, que permiten a los usuarios completar formularios
electrónicos.
Consejos para un excelente diseño de interfaz de usuario
Una gran interfaz de usuario pasa desapercibida porque los usuarios pueden navegar por
un sitio o aplicación y encontrar lo que están buscando. La simplicidad, la familiaridad y la
coherencia son algunos de los principios más importantes que un diseñador de interfaz de
usuario debe tener en cuenta. Ten en cuenta los siguientes consejos de diseño de interfaz
de usuario de expertos de la industria como Apple y Google.
Formatea el contenido para que se ajuste a la pantalla del dispositivo previsto. Los
usuarios no deben necesitar hacer zoom o desplazarse horizontalmente para ver todo el
contenido de una página.
Asegúrate de que haya un contraste adecuado entre el fondo y los elementos de la
página, como el texto, para aumentar la legibilidad.
La alineación no solo se aplica al texto. Los botones y las imágenes también deben
estar alineados para demostrar relevancia y relatividad a los usuarios.
La alta resolución de imagen es esencial para todos los activos de imagen.
Asegúrate de que el diseño de la interfaz de usuario responda. Ya sea que los usuarios
vean la interfaz de usuario en una pantalla grande, pequeña, en modo vertical o en modo
horizontal, deberían poder leerla y maniobrarla con facilidad.
Lee más: [Link]
Principios clave del diseño de la interfaz de usuario
Una forma sencilla de recordar los principios fundamentales del diseño de interfaz de
usuario es aprender las cuatro C:
Control. Los usuarios deben tener el control de la interfaz.
Consistencia. Utiliza elementos comunes para hacer que tu interfaz sea predecible y
fácil de navegar, incluso para usuarios inexpertos.
Comodidad. La interacción con un producto debe ser una experiencia sin esfuerzo y
cómoda.
Carga cognitiva. Es fundamental ser consciente de no abrumar a los usuarios con
contenido. Sé lo más claro y conciso posible.
Accesibilidad de la UI
La accesibilidad es otro aspecto crucial del diseño de la interfaz de usuario. Para lograr
las cuatro C, cada una debe ser cierta para todos los usuarios. Las personas con
problemas de visión u otras discapacidades deberían poder navegar por una interfaz de
usuario sin dificultad. Por ejemplo, muchas personas usan lectores de pantalla y otras
herramientas de accesibilidad para navegar por la web o usar aplicaciones.
Asegúrate de que las características de adaptabilidad se presenten al usuario de
inmediato. Los ajustes correspondientes a estas funciones también deberían ser fáciles
de encontrar. Para un enfoque integral, considera recopilar comentarios de una amplia
gama de usuarios con respecto a tu UI. Esta práctica puede ayudarte a examinar la
accesibilidad de una interfaz de usuario desde varias perspectivas.
Consultado en: [Link] el 29 de marzo, 2025.
3. Recomendaciones
Para evitar contratiempos en el desarrollo de la práctica P24ISW atiende estas
recomendaciones:
Lee con detenimiento la información teórica incluida en esta práctica
4. Descripción del desarrollo de la práctica
La secuencia de actividades que se presenta a continuación te guía con detalle en la
ejecución de la practica:
I. Revisa la practica P24ISW y el reporte de la practica
II. Aclara las dudas que pudieran haber surgido respecto a la practica y al reporte en
la clase con el docente
III. Para completar la presente practica, sigue los siguientes pasos:
a. Retoma las interfaces presentadas en la clase correspondientes al
subtema 2.4 Diseño de interfaz de usuario y agrégalas al reporte
RP24ISW, identificando de que interfaz se trata, la funcionalidad que
aporta, el o los usuarios del sistema que la utilizarán y el nombre del autor
que programo la interfaz.
b. En equipo presenta las interfaces en el apartado RESULTADOS
OBTENIDOS.
IV. ENTREGA UN SOLO REPORTE POR EQUIPO.
Nombre del documento:
GX_P23ISW_NOMBRE_DEL_PROYECTO
Fecha y hora limite de entrega: lunes 31 de marzo, 23:00 horas
INSTITUTO TECNOLÓGICO DE TEPIC
DEPARTAMENTO DE SISTEMAS Y COMPUTACIÓN
INGENIERÍA EN SISTEMAS COMPUTACIONALES
INGENIERÍA DE SOFTWARE
REPORTE DE PRÁCTICA P24ISW
Clave del reporte: RP24ISW
Nombre de la practica: DISEÑO DE INTERFAZ DE USUARIO.
Nombre de los estudiantes participantes:
Nombre del Proyecto:
I. Resultados obtenidos.
a. Incluye en este apartado las interfaces presentadas en la clase
correspondientes al subtema 2.4 Diseño de interfaz de usuario y
agrégalas al reporte RP24ISW, identificando de que interfaz se trata, la
funcionalidad que aporta, el o los usuarios del sistema que la utilizarán y el
nombre del autor que programo la interfaz.
INSTITUTO TECNOLÓGICO DE TEPIC
DEPARTAMENTO DE SISTEMAS Y COMPUTACIÓN
INGENIERÍA EN SISTEMAS COMPUTACIONALES
INGENIERÍA DE SOFTWARE
EVALUACIÓN DEL REPORTE DE PRÁCTICA RP23ISW
Evaluación del reporte de practica: RP24ISW
Nombre de la practica: DISEÑO DE LA INTERFAZ DE USUARIO
Nombre de los participantes en esta practica:
Nombre del proyecto:
Aspectos Criterios Valor Puntos Obt.
Evaluación de los
resultados obtenidos:
Presenta el reporte correspondiente a la 5
practica y en el apartado Resultados
obtenidos lo siguiente:
Incluye cada una de las interfaces
presentadas en la evaluación
correspondientes al subtema 2.4 Diseño de
interfaz de usuario y las agrega al reporte
RP24ISW, identificando y documentando de
que interfaz se trata, la funcionalidad que
aporta, el o los usuarios del sistema que la
utilizarán y el nombre del autor que
programo la interfaz.
Subtotal Puntos obtenidos
Total de puntos
