Nombre:

Ignacio Minaya

Matricula:
18-MISN-7-027

Materia:
Interacción Humano con el Computador

Trabajo:
Tarea #4

Profesor:
Lucas Caonabo Reyes

Fecha:
20/02/2024
Santiago, Rep. Dom.
1.Principios fundamentales para el diseño de interfaces gráficas de usuario.
El diseño UI se centra en conseguir una buena usabilidad para el cliente, es decir, que
a la hora de realizar el desarrollo de diseño, en él se puedan incluir y aplicar las
preferencias y gustos del cliente. La usabilidad es esencial, si se quiere lograr un buen
producto en la red ya que un usuario preferirá un servicio que se adapte a sus
necesidades y la utilización que hace de los mismos a diario. Por todo ello, el diseño de
interfaces de usuario es tan importante.
1. Libertad y control del usuario
El usuario no es un sujeto pasivo, por lo que si se le permite desde el sistema
poder establecer cierto control en su uso, será mucho mejor para la experiencia del
mismo. Para ello, el diseñador debe ser consciente de que el usuario puede cambiar
sus opciones y preferencias sintiendo así un control sobre el producto.
2. Visibilidad del estado del sistema
El sistema debe mantener siempre informado al usuario. Se debe establecer entre
ambos un diálogo basado en indicadores que muestren el estado actual del mismo, que
sean de fácil lectura para el usuario y que además puedan servir de feedback.
3. Correspondencia entre el sistema y el mundo real
Este punto es uno de los más importantes ya que conocer al público al que va dirigido
el sistema facilitará mucho la labor. Dicho de otro modo, si la información se muestra
de una manera lógica, con un lenguaje que resulte familiar, con un orden natural,
siguiendo convenciones homogéneas y utilizando representaciones gráficas, será
mucho más sencillo establecer una conexión.
4. Diseño estético y minimalista
Proporcionar la información justa y adecuada en cada momento es esencial. Saturar al
usuario con muchos estímulos hará que pierda la atención en el producto. Es mucho
mejor la experiencia cuando el usuario se encuentra ante un diseño estético y
funcional.
5. Coherencia y estándares
Establecer siempre un sistema que se encuentre homologado con elementos en
los colores, el lenguaje o las imágenes utilizadas sean adecuadas y se mantengan. De
esta forma se puede establecer una mejor experiencia con el sistema.
6. Prevención de errores
Aunque los errores aparecerán en el sistema, hay que intentar minimizarlos y
realizar pruebas para reducirlos al máximo. Realizar simulaciones de los algoritmos,
por ejemplo ayudará a conocer cómo reacciona el sistema.
7. Ayuda y documentación
Aunque el sistema sea intuitivo y fácil de usar, no está de más facilitar al usuario toda la
información que necesite a través de preguntas frecuentes o documentación. Realizar
una recopilación de las dudas más extendidas entre los usuarios ayudará a mejorar
mucho la experiencia.
8. Reconocimiento en vez de recordar
El interfaz debe ser sencillo para el usuario de manera que se muestren acciones,
opciones y objetos de una forma visible para él. Es decir, mostrar las opciones
que tiene y las instrucciones en todo momento para facilitar la experiencia.
9. Flexibilidad y eficiencia de uso
Flexibilizar el sistema permite que su uso sea cada vez más cómodo, sobre todo
para aquellos usuarios que tengan cierta experiencia en el tema. Aunque todos
los nuevos usuarios tienen acceso a ellas, solo algunos las aprovecharán de una
forma más productiva.
10. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores
Cuando los errores aparecen, es importante que el usuario pueda solucionarlos a
través de instrucciones. Para ello será necesario mostrarle un mensaje en el que
aparezca cuál ha sido la causa del error, con un lenguaje preciso y con unos
procedimientos claros.
2.Las reglas de oro de Mandel.
Las reglas de oro de Mandel son un conjunto de principios para el diseño de interfaces
de usuario (IU) que fueron desarrolladas por el informático Theo Mandel. Estas reglas
se basan en la idea de que una buena IU debe ser fácil de usar, eficiente y consistente.
Las tres reglas de oro de Mandel son:
1. Dar el control al usuario:
 La IU debe permitir al usuario controlar cómo interactúa con el sistema.
 El usuario debe poder elegir la forma de realizar las tareas.
 La IU no debe imponer una forma de trabajar al usuario.
2. Reducir la carga de memoria del usuario:
 La IU no debe obligar al usuario a recordar demasiada información.
 La IU debe proporcionar pistas visuales y ayudas contextuales.
 La IU debe ser consistente en su diseño y comportamiento.
3. Construir una interfaz consecuente:
 La IU debe tener un diseño y comportamiento consistente en todas sus partes.
 Los elementos de la IU deben tener un significado claro y único.
 La IU debe ser fácil de aprender y usar.
Seguir estas reglas de oro puede ayudar a los diseñadores a crear interfaces de
usuario que sean más fáciles de usar, eficientes y agradables para los usuarios.
Además de las tres reglas de oro, Mandel también estableció algunos principios
adicionales para el diseño de interfaces de usuario:
 Utilizar un lenguaje claro y conciso.
 Evitar la sobrecarga de información.
 Proporcionar una retroalimentación adecuada al usuario.
 Diseñar la IU para que sea accesible a todos los usuarios.
Las reglas de oro de Mandel son un marco de trabajo útil para el diseño de interfaces
de usuario. Al seguir estas reglas, los diseñadores pueden crear interfaces que sean
más fáciles de usar, eficientes y agradables para los usuarios.

3.Diseño gráfico de interfaces.

En el entorno de interacción persona-ordenador, la interfaz (o interfaz de usuario) es lo
que permite que la interacción entre persona y ordenador ocurra. Es decir, la interfaz
permite:
1. Que la persona pueda controlar efectivamente las acciones de la máquina.
2. Que la persona reciba respuestas de la máquina que le permitan saber si la
interacción es correcta y cómo seguir actuando.
Por lo tanto, el diseñador de la interfaz se tiene que asegurar de que el proceso de
interacción se puede efectuar de manera fácil e intuitiva y que la persona (a la que
llamaremos de ahora en adelante usuario) puede acceder a la información o ejecutar
las acciones que desea, de la manera más simple posible. Así, el diseño de interfaces
implica conocimientos de disciplinas muy variadas, como por ejemplo, la psicología o el
diseño visual.
En muchas ocasiones, la palabra interfaz se refiere en realidad a un concepto mucho
más específico: la interfaz gráfica de usuario (GUI del inglés graphical user interface).
La GUI es el entorno visual en el que se desarrolla la interacción entre la persona y el
dispositivo, y puede ser el propio del sistema operativo o bien el particular de la
aplicación que se está utilizando.
La interfaz persona-ordenador (IPO) se denomina en inglés human-computer
interface (HCI). Tal como vamos a ver a lo largo de la asignatura, otros conceptos
estrechamente relacionados son arquitectura de la información, usabilidad y diseño de
interacción.
4.Modelo orientado a objetos.

Modelo Orientado a Objetos (MOO)

El Modelo Orientado a Objetos (MOO) es un paradigma de programación que organiza
el código en torno a "objetos". Un objeto es una entidad que encapsula datos y
comportamiento, similar a una entidad del mundo real.
Características clave del MOO:
 Encapsulamiento: Los datos y el comportamiento de un objeto se agrupan en
una sola unidad. Los detalles internos del objeto se ocultan a otras partes del
programa.
 Herencia: Los objetos pueden heredar características de otros objetos, lo que
permite reutilizar código y facilitar el mantenimiento del programa.
 Polimorfismo: Los objetos pueden responder a diferentes mensajes de la misma
manera, dependiendo de su tipo.
 Abstracción: Los objetos se definen en términos de sus características y
comportamiento, sin especificar cómo se implementan.
Ventajas del MOO:
 Modularidad: Los programas se dividen en módulos independientes y
reutilizables.
 Reutilización de código: Las clases y los objetos se pueden reutilizar en
diferentes programas.
 Mantenimiento: Los programas son más fáciles de mantener y actualizar.
 Extensibilidad: Los programas son más fáciles de extender con nuevas
funcionalidades.
Desventajas del MOO:
 Complejidad: El MOO puede ser más complejo de aprender y comprender que
otros paradigmas de programación.
 Eficiencia: El MOO puede ser menos eficiente que otros paradigmas de
programación en algunos casos.
Ejemplos de lenguajes de programación orientados a objetos:
  Java
 Python
 C++
 C#
 JavaScript
Aplicaciones del MOO:
 Desarrollo de aplicaciones web
 Desarrollo de aplicaciones móviles
 Desarrollo de videojuegos
 Diseño gráfico
 Simulación

5.Modelo orientado a Eventos.

El Modelo Orientado a Eventos (MOE) es un paradigma de programación en el que el
flujo del programa está determinado por los eventos que ocurren. Un evento es
cualquier acción o cambio que ocurre en el sistema, como un clic del mouse, una
pulsación de tecla o la llegada de un mensaje de red.
Características clave del MOE:
 Eventos: Los eventos son la unidad básica de interacción en un programa
orientado a eventos.
 Escuchadores de eventos: Los escuchas de eventos son piezas de código que
se ejecutan cuando se produce un evento.
 Publicación de eventos: Los objetos pueden publicar eventos para notificar a
otros objetos que ha ocurrido algo.
 Suscripción a eventos: Los objetos pueden suscribirse a eventos para recibir
notificaciones cuando se producen.
Ventajas del MOE:
 Sensibilidad: Los programas orientados a eventos son más sensibles a los
cambios en el entorno.
 Modularidad: Los programas orientados a eventos son más fáciles de dividir en
módulos independientes.
  Reutilización de código: Los escuchas de eventos se pueden reutilizar en
diferentes programas.
 Escalabilidad: Los programas orientados a eventos son más fáciles de escalar
para manejar grandes cantidades de eventos.
Desventajas del MOE:
 Complejidad: El MOE puede ser más complejo de aprender y comprender que
otros paradigmas de programación.
 Eficiencia: El MOE puede ser menos eficiente que otros paradigmas de
programación en algunos casos.
Ejemplos de lenguajes de programación orientados a eventos:
 JavaScript
 Python
 C#
 Java
 Ruby
Aplicaciones del MOE:
 Desarrollo de interfaces de usuario
 Desarrollo de aplicaciones web
 Desarrollo de aplicaciones móviles
 Juegos
 Sistemas distribuidos

6.Lenguaje Modelado Unificado.

El Lenguaje de Modelado Unificado (UML) es un lenguaje gráfico para visualizar,
especificar, construir y documentar un sistema. Es un lenguaje estándar, ampliamente
utilizado en el desarrollo de software, que permite a los desarrolladores comunicar de
manera efectiva su diseño a otros miembros del equipo.
Características clave del UML:
 Diagramas: UML proporciona una amplia variedad de diagramas para
representar diferentes aspectos de un sistema, como casos de
uso, clases, secuencia, actividad, estado y despliegue.
  Elementos: Los diagramas de UML están compuestos por elementos gráficos
que representan entidades del mundo real, como clases, objetos, relaciones y
acciones.
 Semántica: UML tiene una semántica bien definida que describe el significado
de los elementos y diagramas.
 Herramientas: Existe una amplia variedad de herramientas CASE (Computer
Aided Software Engineering) que soportan el uso de UML.
Ventajas del UML:
 Mejora la comunicación: UML facilita la comunicación entre los desarrolladores y
otros stakeholders del proyecto.
 Facilita el diseño: UML ayuda a los desarrolladores a pensar de manera
abstracta y a visualizar el diseño del sistema.
 Mejora la calidad del software: UML puede ayudar a detectar y corregir errores
en el diseño del sistema.
 Facilita el mantenimiento: UML puede ayudar a los desarrolladores a
comprender y mantener el código del sistema.
Desventajas del UML:
 Complejidad: UML puede ser un lenguaje complejo de aprender y usar.
 Falta de precisión: Los diagramas de UML no siempre son precisos y pueden ser
difíciles de interpretar.

7.Diseño de software web.

El diseño de software web es el proceso de crear la estructura y la arquitectura de un
sitio web o aplicación web. Este proceso abarca la planificación, la organización y la
implementación de los diferentes elementos que componen el software, como la
interfaz de usuario, la experiencia de usuario, la arquitectura de la información, la base
de datos y la lógica de la aplicación.
Etapas del diseño de software web:
1. Planificación: En esta etapa se definen los objetivos del sitio web o aplicación
web, el público objetivo, las funcionalidades que se ofrecerán y la tecnología que
se utilizará.
2. Diseño: En esta etapa se crea la interfaz de usuario y se define la experiencia de
usuario. Se seleccionan los colores, las tipografías, las imágenes y los demás
elementos visuales del sitio web o aplicación web.
 3. Implementación: En esta etapa se codifica el software web, se crea la base de
datos y se configura el servidor.
4. Pruebas: En esta etapa se prueba el software web para asegurar que funciona
correctamente y que cumple con los requisitos establecidos.
5. Mantenimiento: En esta etapa se realizan las correcciones de errores y las
actualizaciones necesarias para mantener el software web funcionando
correctamente.
Metodologías de diseño de software web:
 Cascada: Es una metodología tradicional en la que cada etapa del proceso se
completa antes de pasar a la siguiente.
 Ágil: Es una metodología más flexible en la que las etapas del proceso se
superponen y se realizan de forma iterativa.
Herramientas de diseño de software web:
 Herramientas de diseño gráfico: Adobe Photoshop, Sketch, Figma
 Herramientas de prototipado: Adobe XD, InVision
 Herramientas de desarrollo web: HTML, CSS, JavaScript, PHP, Python, Java
Factores a considerar en el diseño de software web:
 Usabilidad: El sitio web o aplicación web debe ser fácil de usar y navegar.
 Accesibilidad: El sitio web o aplicación web debe ser accesible para personas
con discapacidades.
 Rendimiento: El sitio web o aplicación web debe cargarse rápidamente y
funcionar correctamente en diferentes dispositivos.
 Seguridad: El sitio web o aplicación web debe ser seguro para los usuarios.

8.Principales elementos de una interfaz gráfica

Los principales elementos de una interfaz gráfica (GUI) son:
1. Ventanas: Son áreas rectangulares que contienen elementos de la interfaz como
menús, barras de herramientas, botones, etc.
2. Menús: Son listas desplegables que contienen opciones para realizar acciones en el
programa.
3. Barras de herramientas: Contienen botones que permiten acceder a las funciones
más comunes del programa.
4. Botones: Son elementos que al ser presionados activan una acción.
5. Campos de texto: Son áreas donde el usuario puede escribir texto.
6. Etiquetas: Son textos que identifican a los diferentes elementos de la interfaz.
7. Iconos: Son imágenes pequeñas que representan objetos o acciones.
8. Barras de desplazamiento: Permiten al usuario desplazarse por el contenido de una
ventana.
9. Cursores: Es un indicador que muestra la posición actual del mouse en la pantalla.
10. Ayudas visuales: Son elementos como imágenes, animaciones o videos que
ayudan al usuario a comprender el funcionamiento del programa.
Otros elementos importantes:
 Casillas de verificación: Permiten al usuario seleccionar una o más opciones.
 Botones de radio: Permiten al usuario seleccionar solo una opción de un grupo.
 Listas desplegables: Permiten al usuario seleccionar una opción de una lista.
 Cuadros de diálogo: Son ventanas emergentes que muestran información o
solicitan al usuario que introduzca datos.
Diseño de una interfaz gráfica:
 Usabilidad: La interfaz debe ser fácil de usar y comprender para el usuario.
 Consistencia: Los elementos de la interfaz deben tener un diseño y
comportamiento consistente.
 Estética: La interfaz debe ser atractiva visualmente.
 Eficiencia: La interfaz debe permitir al usuario realizar sus tareas de forma rápida
y eficiente.
Herramientas para el diseño de interfaces gráficas:
 Adobe Photoshop: Es un programa de edición de imágenes que se puede usar
para crear elementos gráficos para interfaces.
 Sketch: Es una herramienta de diseño de interfaces que permite crear prototipos
de alta fidelidad.
 Figma: Es una herramienta de diseño colaborativo que permite a varios usuarios
trabajar en la misma interfaz al mismo tiempo.