Está en la página 1de 35

ITSE- Tecnicatura Superior en Programación - Ingeniería de Software I - 2023

TAREA

Para cada aplicación en los siguientes enlaces, conteste:

PÁGINA Objetivo Usuarios Características de calidad a Características de fallas a la vista


la vista
https://www.tiendachat.net/estadiounico Visualizar los -personas Tiene precargadas las -tarda muchísimo en cargar y pasar
servicios y que visiten el opciones de búsqueda de enlace a enlace
productos estadio único -la búsqueda no es intuitiva, es
ofrecidos en el , ya sea por decir, si buscas café latte y luego
resto bar turismo o quieres buscar otro café, debes
Estadio único asistencia a borrar completamente antes de
un evento poder buscar otro café. No es
intuitiva la búsqueda.
-no me interesa el futbol y tuve que
googlear dónde queda el estadio
único. Al ver la estatua de
Maradona pensaba que se llamaba
así. Con una foto del estadio, como
las que aparecen en la del DGISE, lo
habría identificado más fácilmente
-si se utiliza la búsqueda, es
imposible volver al menú, a menos
que actualices la página
-aparentemente, no trabaja los
domingos, ya que al hacer la reserva
no te da ninguna opción. El resto de
los días, completas el formulario y
te manda a un enlace de whatsapp,
con la información cargada en el
formulario mal organizada

EGEA MUSSI MARIA JOSE 1


ITSE- Tecnicatura Superior en Programación - Ingeniería de Software I - 2023

https://www.dgipse.gob.ar/ Página oficial de Cualquier -la página inicio es -Las fotos del Inicio son
la dirección persona llamativa a la vista. Muy impactantes, pero no le encuentro
general de interesada buenas imágenes relación con la DGISE. O tal vez les
informática de en saber qué gusta mucho el futbol
Santiago del es la DGISE -mucho delay al cambiar entre los
estero menúes
-cuando se entra se sabe que estás
en la DGISE, pero no te dice más
acerca de lo que es o lo que hace o
donde está. Esta información está
en el último menú, el cual es muy
monótono y aburrido para leerlo. Ni
siquiera tiene un organigrama bien
hecho
-en el menú OPINION la información
está mal organizada, observándose
el sector izquierdo vacío (la tercera
parte), con imágenes centradas y el
texto a la derecha y en bloque.
-En general la información de los
menúes está mal organizada,
desactualizada y no es atractiva a la
vista. Lo que contrasta con el inicio,
con sus fotos
-los enlaces de los botones brindan
poca información y dos tienen el
mismo título
https://www.tarjetasol.com.ar/ Promocionar la Personas -los colores utilizados son -hay un delay al intentar acceder en
tarjeta SOL y interesadas los representativos de la los enlaces de los botones
contener el en adquirir la tarjeta
acceso a la tarjeta,
comercios

EGEA MUSSI MARIA JOSE 2


ITSE- Tecnicatura Superior en Programación - Ingeniería de Software I - 2023

cuenta online que se


de cada cliente quieran
adherir.
Clientes y
comercios
adheridos
https://www.argentina.gob.ar/miargentina Promocionar la Toda -los colores son -En los menúes del INICIO “Jefatura
aplicación persona de representativos del país de Gabinete de Ministros
MiArgentina nacionalidad -Bien organizado /Innovación Pública /Servicios y País
argentina -No lleva a confusión Digital llevan a creer que son
que posea enlaces a la página de miargentina
CUIL/CUIT cuando en realidad se está
volviendo hacia atrás en la página
madre que es argentina.gob.ar
http://www.termasderiohondo.com/web/index.php Promoción Personas que Las imágenes subidas son -en todos los menúes hay
turística de la deseen hacer atractivas publicidades genéricas (no
ciudad de Las turismo en asignadas)
Termas de Río las Termas -las imágenes de inicio me llevan a
Hondo de Río Hondo pensar que la página es del hotel
que está en el autódromo de Las
Termas de Río Hondo
-recién en el pie de página me dice
“Usted está visitando
www.TermasDeRioHondo.com.
Sitio pionero de la ciudad desde
1999” y al apretar “leer más” me
lleva al inicio, lo que no me da
mucha más información sobre la
ciudad.
-en ALOJAMIENTO la información de
los hoteles no está completada y la

EGEA MUSSI MARIA JOSE 3


ITSE- Tecnicatura Superior en Programación - Ingeniería de Software I - 2023

reserva de hoteles no está


funcionando
-en el menú TRANSPORTE, en el
formulario de contacto tiene
opciones precargadas que no están
relacionadas tal como “Deseo
asociarme”
-se observan errores al escribir
palabras con acento
-algunos botones no están
funcionales
-La información no está actualizada
https://www.minigo.store/home-1 Promocionar las Compradores Colores llamativos, con -Está mal organizada la información.
tiendas MiniGO, interesados diseños diferenciados para Tuve que recorrer más de la mitad
que son un en realizar cada menú. de la página y ver el video para
marketplace compras de El video elegido explica entender bien lo que es una tienda
físico-digital manera perfectamente el objetivo. MiniGO.
motorizado por rápida, -los menúes no siguen un orden ;
inteligencia sustentable y -Hay menúes cuya información
artificial, donde responsable. aparece en el INICIO, y hay menúes
simplemente el Y que tengan que llevan a otra pestaña
comprador una tienda -Falta el menú para Contáctenos/
entra, elige y se física en Registrate/información/vendedores,
va, sin colas, sin cercanía que aparece al pie de la página
esperas y sin -No se entiende qué es un TOKEN
escanear los MINIGO, una por estar en inglés y
productos. O otra por no proveer información
bien comprar suficiente.
desde la App
para entrega en
tu casa o para
que lo pases a

EGEA MUSSI MARIA JOSE 4


ITSE- Tecnicatura Superior en Programación - Ingeniería de Software I - 2023

retirar por tu
MinIGO más
cercano.

PÁGINA ¿Le ¿El sistema ¿Piensa que ¿Las ¿Le resulta ¿La ¿Piens ¿Las páginas
gustaría es el sistema es funciones inconsisten mayoría a que aparecen
usar este demasiado fácil? del te el de las el con
sistema complicado sistema sistema? personas sistem rapidez?
con o están pueden a es
frecuenci engorroso? bien usar seguro
a? integrada fácilmen ?
s? te este
sistema?

https://www.tiendachat.net/estadiounico No Sí No No Sí No No No, muy


lento carga
https://www.dgipse.gob.ar/ No No No No Sí No No No, hay un
sabría delay
decir
https://www.tarjetasol.com.ar/ Sï No Sí Sí No Sí Sí Entre
menúes , sí.

EGEA MUSSI MARIA JOSE 5


ITSE- Tecnicatura Superior en Programación - Ingeniería de Software I - 2023

En enlaces
de botón, no
https://www.argentina.gob.ar/miargentina Sí No Sí Sí No Sí Sí Sí
http://www.termasderiohondo.com/web/ind No Sí No No Sí No No No. En el
ex.php
menú
ALOJAMIEN
TO tarda en
cargarse
https://www.minigo.store/home-1 No Lo considero Creo que la No Sí No No Sí
engorroso, mantenimien sabría
si debe to sería muy decir
presentarse engorroso.
mucha Como
información usuario no
distinta. sabría
Uno se encontrar
pierde en fácilmente la
los información
diferentes
menúes, por
lo que la
información
parece
desorganiza
da

Primera impresión sobre apariencia: Navegabilidad Contenido

EGEA MUSSI MARIA JOSE 6


ITSE- Tecnicatura Superior en Programación - Ingeniería de Software I - 2023

PÁGINA -¿Sabe usted ¿La página principal es ¿Es fácil ¿Hay algún ¿Es suficiente,
inmediatamente agradable, lo lleva a navegar de tipo de identificable,
dónde está? navegar fácilmente a las enlace a confusión? organizado,
demás páginas de interés? enlace? confiable?
https://www.tiendachat.net/estadiounico No No No Sí No
https://www.dgipse.gob.ar/ Sï No No Sí. ¿Qué tiene No
que ver un
estadio de
futbol con la
DGISE?
https://www.tarjetasol.com.ar/ Sí Sí Sí Sí -en el menú
promociones te
lleva a sucursales
y recién ahí hay
un botón
pequeño para
promociones lo
que te confunde
hasta que
navegas
https://www.argentina.gob.ar/miargentina Sí Sí Sí Sí Sí
http://www.termasderiohondo.com/web/index.php No en la página de No, el color amarillo y el Hay un delay sí No
la ciudad sino de efecto puesto en los mínimo
un hotel o del menúes no me gustan. De
autódromo.Recién entrada no sé dónde estoy
en ATRACTIVOS
me habla de la
ciudad
https://www.minigo.store/home-1 No No No Sí No

EGEA MUSSI MARIA JOSE 7


INGENIERÍA DEL SOFTWARE I-AÑO 20203

GRUPO:
*Egea Mussi, María José;
*Gallardo, Cynthia Noemí;
*Rodríguez Egea, Noel Alejandro;
*Schiavon, Leandro Nicolás;
*Umaño, Marisa Edith.

Trabajo Práctico: Taller Modelado: Estructura

Requerimientos Funcionales
Cálculo de las asignaciones familiares
Gestión de Personal
1. Para todo personal que se le quiera dar de alta en el sistema se
introducirán los siguientes datos básicos: DNI, CUIL, apellido, nombre,
domicilio, teléfono, email, estudios, estado civil, cantidad de hijos.
2. El sistema deberá permitir la modificación de datos del personal (como
ser el domicilio, teléfono, por ejemplo).

Gestión de la Liquidación de haberes


1. El sistema debe mantener la información de las tareas que debe realizar
el personal.
2. El sistema debe permitir asignar las tareas que ha de realizar el
personal.
3. El sistema debe permitir que se pueda consultar la tarea que realiza
cada personal.
4. El sistema debe permitir cambiar el estado de la tarea.
5. El sistema debe permitir cargar los datos, sobre la carga de familia.
6. El sistema permitirá modificar los datos, sobre la carga familiar.
7. Todo personal que posee algún título o certificado de estudio, el sistema
debe permitir agregarlo.
8. Todo personal que esté en condición de planta permanente, el sistema
debe permitir descontar de su haber el seguro médico.
9. El personal que posea un crédito que se deba descontar por planilla el
sistema debe permitir dicha liquidación.
10. El sistema deberá permitir un informe (en pantalla) detallando datos
personales del cliente y el estado de la liquidación de su haber.
11. El sistema deberá permitir imprimir cada primer día hábil de cada mes la
liquidación de los haberes de cada personal, correspondiente al mes
previo.
INGENIERÍA DEL SOFTWARE I-AÑO 20203

Diagrama de Clase
INGENIERIA DEL SOFTWARE I

GRUPO:
*Egea Mussi, María José;
*Gallardo, Cynthia Noemí;
*Rodríguez Egea, Noel Alejandro;
*Schiavon, Leandro Nicolás;
*Umaño, Marisa Edith.

TAREA – ESPECIFICACIÓN DE REQUISITOS

Trabajo en grupo: todos los integrantes deben subir el trabajo y en el mismo debe
estar el nombre de todos los integrantes.

Detalle de la actividad: Esta actividad requiere la entrega de un documento con la


elaboración de los puntos indicados en el PDF "Especificación de Requisitos", los
cuales deben ser realizados en base a los problemas presentados y relevados en
clase.

Caso 1. Gestión de pedidos del restaurant MARILA.

Caso 2. Gestión de Proyectos.

DESARROLLO

Caso 1 .Gestión de pedidos del restaurant MARILA:

-Requerimientos funcionales:

USUARIO MOZO:
Acciones que puede realizar el usuario mozo:
-crear comanda
Una vez el cliente ha realizado el pedido de acuerdo a la carta del menú, el mozo
lo carga en el sistema.
- Modificar/anular comandas.
Se puede modificar o anular el contenido de una comanda desde este usuario, si,
y solo si, el pedido no tiene estado “Listo para servir”.
- Consultar comandas
Consultar los pedidos ingresados.
- Identificar mesas.
Identificar cada terminal con el número de mesa correspondiente.

Acciones que NO puede realizar el usuario mozo:


- Añadir/modificar productos en los pedidos.
El administrador es el único que tiene la posibilidad de añadir o modificar
productos.
INGENIERIA DEL SOFTWARE I

USUARIO COCINERO:
Acciones que puede realizar el usuario cocinero:
- Cambiar el estado a los productos del pedido.
Cada producto pedido en la comanda debe ser cocinado sólo una vez. Para
llevar este control, el cocinero es quien modifica el estado de un producto pedido
cuando lo ha terminado de preparar.
Estados de los productos: “COCINA” y “ LISTO PARA SERVIR”.
Estado de los pedidos: “ABIERTO” y “CERRADO”.

Acciones que NO puede realizar el usuario cocina:


- Modificar el contenido de las comandas.
El usuario cocina, sólo puede realizar el cambio de estado de las comandas que
hay en la cola para ser atendidos.

-Requerimientos no funcionales:

 El sistema debe mostrar una interfaz gráfica que muestre las tareas
adecuadas de acuerdo al tipo de usuario que inicia sesión.
 El sistema debe hacer uso de una base de datos para almacenar la
información de las órdenes que se generan cada día.
 El sistema debe funcionar adecuadamente en los navegadores: Mozilla
Firefox, Google Chrome y Microsoft Edge.
 El sistema debe ser capaz de atender de forma eficiente las peticiones
realizadas por todos los usuarios.
 Los usuarios podrán acceder al sistema desde cualquier computadora
dentro del restaurante con acceso a la red inalámbrica.

Caso de Uso Gestión de pedidos del Identificador:


restaurant MARILA Caso 1
Actores Cliente y Mozo
Tipo Primario, representa un proceso común más
importante
Referencias -si no hay mesa disponible el cliente no podrá
comer;
-si al cliente no le gusta nada del menú, no va a
pedir nada
Precondición -que haya mesa disponible;
-que haya por lo menos un pedido asignado a esa
mesa.
Postcondición -La mesa será asignada al cliente;
-el cliente pagará la cuenta.
Descripción 1-el cliente ingresa al restaurante MARILA;
2-el cliente pedirá una mesa disponible;
3-el mozo le indicará la mesa disponible (y para
cuentas personas es);
4-el cliente aceptará la mesa;
5-el mozo le entregará la carta del menú al cliente;
6-el cliente elegirá lo que quiere comer del menú;
7-el mozo tomará la carta del menú e ingresará el
pedido del cliente;
8-el mozo le llevará el pedido al cliente;
9-el cliente pedirá la cuenta;
INGENIERIA DEL SOFTWARE I

10-el mozo le entregará la cuenta;


11-el cliente abonará la cuenta (efectivo, tarjeta o
transferencia)
Resumen El cliente realiza un pedido, se lo llevan, lo consume
y lo paga

Caso de Uso Gestión de Comanda Identificador:

Caso 1
Actores mozo
Tipo primario
Referencias -Si no hay clientes sentados a las mesas, nadie
hará un pedido.

Precondición -el mozo se haya autenticado en el sistema


-que el cliente haya realizado un pedido
Postcondición -La comanda haya sido enviada al sistema, o se
haya cancelado
Descripción 1-El mozo una vez autenticado, entra en el
subsistema de gestión de comandas y pulsa sobre
el botón correspondiente para crear la comanda.
2-el sistema muestra un formulario donde el mozo
va a introducir los datos de la comanda;
3-el mozo rellena los campos solicitados;
4-Una vez completada la información, pulsa en una
de las siguientes opciones:
–ENVIAR, se almacenan los datos en el
sistema.
–CANCELAR, se sale de la pantalla sin
grabar los datos.
-BORRAR, borrar algún dato introducidos en
un campo
5- La comanda pasa al estado COCINA.
Resumen Crear una nueva comanda
INGENIERIA DEL SOFTWARE I

Caso de Uso Listar Comanda Identificador:

Caso 1
Actores cocinero
Tipo primario
Referencias -SI el cliente hace el pedido, pero el mozo no
ingresa la comanda, no va a aparecer en el listado
Precondición -que el mozo haya ingresado una comanda
-que el cocinero se haya autenticado en el sistema
Postcondición -el cocinero empieza a preparar el pedido
Descripción 1-el cocinero una vez autenticado en el subsistema
de comandas y pulsa sobre el botón LISTAR;
2-el sistema le muestra en pantalla los datos
correspondientes a la comanda;
3-comenzar a preparar el pedido;
4-una vez finalizado, ingresa nuevamente al sistema
y aprieta el botón LISTO PARA SERVIR

Resumen Muestra una Lista de las comandas ingresadas por


los mozos para cocinar
INGENIERÍA DEL SOFTWARE I-AÑO 2023

GRUPO:
*Egea Mussi, María José;
*Gallardo, Cynthia Noemí;
*Rodríguez Egea, Noel Alejandro;
*Schiavon, Leandro Nicolás;
*Umaño, Marisa Edith.

Trabajo Práctico-Taller Modelado: Comportamiento

La consigna en esta tarea es sobre el enunciado "Proyectos y Tareas":


a) Descripción escrita de requerimientos funcionales,
b) un caso de uso a elección y
c) Diagrama de Secuencia del caso de uso del punto b).
La tarea es en grupo y todos suben la misma.

DESARROLLO
a.- Requerimientos funcionales
El objetivo es desarrollar una aplicación para la administración de proyectos y
tareas, donde los actores son la profesora(stakeholder) como administrador, el
director, y los integrantes de cada equipo de trabajo.
Herramienta computacional que permite controlar el proceso de Desarrollo de
Proyectos. El sistema permite registrar las etapas y las tareas de cada etapa,
así como el tiempo invertido en cada una de éstas, y ofrece informes
actualizados en línea sobre el estado de cada proyecto.
Las consignas planteadas por el stakeholder son las siguientes:
-el administrador(responsable) irá asignando tareas en el programa para cada
equipo(responsables);
-cada integrante del equipo (alumno) podrá entrar a chequear las actividades
pendientes y poner completada una actividad determinada;
-el director(director) podrá entrar a chequear el avance de cada proyecto;
-suponer que todos los usuarios ya están asignados;
-el administrador puede ver tareas, asignar tareas, (<<include>> crear tareas,
reasignar tareas, elegir tareas, modificar tareas), etc. También podrá comentar
las tareas;

1
INGENIERÍA DEL SOFTWARE I-AÑO 2023

-del proyecto debemos saber el nombre del proyecto, fecha de inicio del
proyecto, integrantes de cada grupo; roles asignados.
Comenzamos identificando los requerimientos para:

a) Consultas/informes:
R1. Informe Proyectos y tareas detallado
R2. Informe Responsable
R3. Informe Movimientos
b) Almacenamiento:
R4. Datos por Proyecto: CodProyecto, nombre, fechaInicio,
fechaTerminacion, porcentajeAvance y responsable
R5. Datos por Etapa: CodEtapa, nombre, porcentajeAvance, pesoPorcentual
y responsable
R6. Datos por Tarea: codTarea, nombre, porcentajeAvance, responsable
R7. Datos por Responsable: CodResponsable, nombre
R8. Datos por Movimientos o acciones: codTarea, fecha, responsable, horas
y porcentajeAvance
c) Procesamiento
R9. Cálculo del Porcentaje de Avance de la Etapa:(suma(avanceTareas) /
(NroTareas*100))
R10. Calcula del porcentaje de Avance del Proyecto:
suma(porcentajeAvanceEtapa*pesoPorcentual)

Las Clases identificadas:

❖ Proyecto;
❖ Etapa;
❖ Tarea;
❖ Movimiento;
❖ Responsable;
El diagrama conceptual de clases sería:

2
INGENIERÍA DEL SOFTWARE I-AÑO 2023

El diagrama de clases es:

3
INGENIERÍA DEL SOFTWARE I-AÑO 2023

b.- Caso de uso general

Caso de uso detallado

4
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de Uso ManejoTareas Identificador: 1


Actores Responsable
Tipo primario
Referencias R8, R4, R5, R7, ManejoEtapas, ManejoProyecto
Descripción 1)el responsable puede crear y asociar tareas a las etapas
de cada proyecto;
2)puede modificar y eliminar etapas sin movimiento

Función Permitir el mantenimiento de las actividades

Caso de Uso RegistroMovimiento Identificador: 2


Actores Responsable
Tipo Primario
Referencias R4, R5, R6, R9, R10,ManejoProyecto, ManejoEtapa,
ManejoTareas, CalculoAvanceProyecto,
CalculoAvanceEtapa
Descripción 1)El responsable puede registrar el tiempo en horas
utilizado en el desarrollo de las tareas del proyecto;
2)el usuario debe registrar el porcentaje de avance de cada
tarea;
3)El sistema debe calcular el avance ponderado por cada
etapa y por el proyecto global.

Función Permitir el registro del tiempo invertido en cada tarea de


cada etapa.

Caso de Uso Responsable Identificador: 3

Actores Responsable
Tipo Primario
Referencias R8, R4, R5, R6, ManejoProyecto, ManejoEtapa,
ManejoTareas, RegistroMovimiento.
Descripción 1)Permitir el ingreso de nuevos responsables al sistema;
2)Permitir la modificación y eliminación de nombres de
responsables, solo si no tiene movimiento o quedó libre.

Función Permitir el registro y mantenimiento de los códigos de los


responsables

5
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de Uso CalculoAvanceEtapa Identificador: 4


Actores Responsable
Tipo Primario
Referencias R8, R4, RegistroMovimiento
Descripción 1)Al registrar los tiempos por actividad, el sistema aplica la
fórmula para este cálculo y actualizar este dato de la etapa
a partir de los avances de las actividades correspondientes.

Función Efectuar el cálculo del porcentaje de avance pore tapa,


basado en los tiempos

Caso de Uso Informes Responsables Identificador: 5


Actores Responsable
Tipo Primaria
Referencias R7, ManejoResponsables
Descripción 1)Generar informe de los Responsables o alumnos en los
proyectos;
2)Permite obtener un informe para consulta o impresión.

Función Generar informe de los responsables de los proyectos

Caso de Uso Informes movimientos Identificador: 6

Actores Responsable
Tipo Primario
Referencias R4, R5, R6, R7, R8, RegistroMovimientos
Descripción 1)Permite obtener un informe para cada consulta o
impresión de los movimientos de tiempo registrados a cada
una de las tareas de las etapas de los proyectos.

Función Generar informe de los movimientos reportados a cada


tarea

Caso de Uso ManejoProyectos, Identificador: 7


EliminacionProyectos
Actores Responsable
Tipo Primario
Referencias R8, R10,RegistroMovimiento
Descripción 1)El responsable puede eliminar proyectos existentes en el
sistema, que no tengan movimientos reportados. En este
caso primero deberá eliminar primero ese movimiento

Función Permitir la eliminación de proyectos existentes

6
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de Uso ManejoProyectos, Identificador: 8


IngresoProyectos
Actores Responsable
Tipo Primario
Referencias R8, R10,RegistroMovimiento
Descripción 1)El responsable puede registrar proyectos nuevos,
identificando todas sus características;
2)El sistema debe validar que el código esté disponible y
que sea válido para ser ingresado.
Función Permitir la creación de Proyectos nuevos

Caso de Uso ManejoProyectos, Identificador: 9


ModificacionProyectos
Actores Responsable
Tipo Primario
Referencias R8, R10,RegistroMovimiento
Descripción 1)El responsable puede modificar las características de los
proyectos existentes en el sistema;
2)El sistema debe validar que el código exista, que no esté
terminado, y que sólo pueda modificar datos como nombre y
duración del proyecto, pero no el tiempo reportado, porque
éste es el resultado del registro de movimientos.

Función Permitir la modificación de los proyectos existentes

c.- Diagrama de secuencia del caso de uso


Caso de Uso: Manejo de Tareas-Crear

7
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de uso: Manejo de Tareas-Modificar

Caso de uso: Manejo de Tareas-Eliminar

8
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de uso: Alta Responsable

Caso de uso: Modificacion responsable

9
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de uso: Baja de responsable

Caso de uso: Calculo Avance de Etapa

10
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de uso: Informe de responsables

Caso de uso: Informes de movimientos

11
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de uso: Manejo proyectos- Eliminacion Proyecto

Caso de uso: Manejo Proyecto-Ingreso proyecto

12
INGENIERÍA DEL SOFTWARE I-AÑO 2023

Caso de uso: Manejo proyecto-Modificacion Proyecto

13
GRUPO:
*Egea Mussi, María José;
*Gallardo, Cynthia Noemí;
*Rodríguez Egea, Noel Alejandro;
*Schiavon, Leandro Nicolás;
*Umaño, Marisa Edith.

Trabajo Práctico-Interfaz de Usuario

a) Describir de qué trata la Norma ISO 9241 (pantallas de visualización -


colores - menús).
b) Realizar un informe de recomendaciones para diseño de pantallas.
c) Investigar y describir software de desarrollo para diseño de interfaces de
usuario.
d) Presenta una captura de pantalla de la aplicación con un buen diseño de
usuario y describe por qué?
DESARROLLO
a.-La norma ISO-9241,"Requisitos ergonómicos para trabajos de oficina con
pantallas de visualización de datos", desarrolla los principales requisitos para la
pantalla de visualización de datos. Algunos de estos requisitos (como los
relativos a la configuración de los caracteres y la luminancia de la pantalla) no
pueden ser verificados directamente por el usuario, quien, sin embargo, puede
contrastarlos con los datos de las especificaciones técnicas requeridas al
fabricante.
En lo que concierne a la configuración y definición de los caracteres
alfanuméricos, estas normas recomiendan lo siguiente: 1) Que la matriz de
representación de los caracteres debe estar constituida por un mínimo de 5 x 7
píxeles. No obstante, cuando se requiera una lectura frecuente de la pantalla, o
sea importante garantizar la legibilidad del texto, la matriz de representación de
los caracteres debe tener, al menos, 7 x 9 píxeles; 2) El tamaño requerido para
los caracteres alfanuméricos representados en pantalla depende de la distancia
de visión. Para la mayoría de las tareas se recomienda que la altura de los
caracteres subtienda al menos un ángulo de 22 minutos de arco, mientras que
la distancia de visión no debe ser inferior a 400 mm; 3) El espacio entre
caracteres debe ser, al menos, igual a la anchura del trazo; la distancia entre
palabras debe ser, como mínimo, igual a la anchura de un carácter, y, por
último, la distancia entre las líneas del texto debe ser, al menos, igual al
espacio correspondiente a un píxel.
Por otra parte, la Norma contiene métodos de ensayo para determinar la
estabilidad de la imagen en las PVD 's. En relación a ello se establece que la

1
pantalla debe ser vista libre de parpadeos por el 90 % de los usuarios como
mínimo (estabilidad temporal). Asimismo, la imagen debe tener la suficiente
estabilidad espacial. Se especifica la máxima oscilación admisible para
cualquier punto de la imagen (el movimiento debe ser menor que el 0,02% de
la distancia nominal de visión).
También se abordan aquí los aspectos concernientes a la luminancia de
pantalla y al contraste de los caracteres. La pantalla debe ser capaz de
proporcionar, al menos, una luminancia de 35 Cd/m2 (para los caracteres, en
polaridad positiva, o para el fondo de pantalla, en polaridad positiva), si bien el
nivel preferido es de 100 Cd/m2 Además, el usuario ha de poder ajustar, según
sus necesidades, el contraste de luminancias entre los caracteres y el fondo de
pantalla. Dicho ajuste debe permitir que la relación de contraste alcance como
mínimo el valor 3:1 (relación entre la luminancia de los caracteres y la del fondo
de pantalla).
Por otro lado, se hacen también algunas indicaciones en relación a la polaridad
de la imagen. Existen dos formas de representar los caracteres alfanuméricos
en las pantallas de visualización: polaridad positiva (caracteres oscuros sobre
fondo claro) y polaridad negativa. Las dos formas son admisibles.
Cada forma de polaridad presenta sus ventajas y limitaciones. Con polaridad
positiva, los reflejos son menos perceptibles y se obtiene más fácilmente el
equilibrio de luminancias entre la pantalla y otras partes de la tarea
(especialmente con respecto a los documentos), mientras con polaridad
negativa el parpadeo es menos perceptible y la legibilidad es mejor para las
personas de menor agudeza visual.
Con respecto al ajuste de la orientación de pantalla, la citada norma indica que
debe ser factible orientar la pantalla, de manera que pueda ser vista dentro del
espacio comprendido entre la línea de visión horizontal y la trazada a 60º bajo
la horizontal . Complementariamente, en la parte 5 de la norma, se especifica
que el usuario debe poder girar, inclinar y balancear la pantalla, con objeto de
evitar los reflejos, reducir el esfuerzo de acomodación visual y mantener una
postura de trabajo natural.
También se recomienda que exista la posibilidad de ajustar la altura de la
pantalla, con el fin de optimizar los ángulos de visión del operador.
En la parte 8 de la Norma ISO 9241 se abordan los requisitos que han de
cumplir las pantallas en color, en relación con la representación de textos y
gráficos simples, que no requieran gradaciones continuas de tonalidad o
apariencia fotográfica.
Entre otros aspectos, cabe destacar las recomendaciones relativas a la
combinación de los colores; se indica que los colores extremos del espectro
(rojo y azul saturados) no deben ser presentados simultáneamente en pantalla,
dado que pueden someter al usuario a esfuerzos excesivos de acomodación o
a ciertos efectos indeseables de profundidad (cromoestereopsis). Asimismo,
para optimizar la discriminación e identificación de los colores, se recomienda

2
adoptar uno de los dos siguientes sistemas de representación: a) Figuras en
color sobre fondo acromático; b) Figuras acromáticas sobre fondo en color.
Los fondos acromáticos, como el negro o el gris medio u oscuro, maximizan la
visibilidad de las representaciones en color. Como ya se ha dicho, estas
recomendaciones sólo se aplican a la representación de textos y gráficos
simples en la pantalla.
Se definen siete principios generales aplicables a cualquiera de las técnicas
específicas de diálogo, entre ellas la de menúes:
1. Capacidad de adecuación a la tarea: Un diálogo es susceptible de adecuarse
a la tarea en la medida en que asiste al usuario para lograr un acabado de la
misma con eficiencia y eficacia.
2. Autodescriptividad: Un diálogo es autodescriptivo en la medida en que cada
una de sus etapas es directamente comprensible a través de una
retroalimentación con el sistema o es explicada al usuario con arreglo a su
necesidad de información.
3. Controlabilidad: Un diálogo es controlable en la medida en que permite al
usuario conducir la totalidad del curso de la interacción hasta lograr el objetivo.
4. Conformidad con las expectativas del usuario: Un diálogo es conforme con
las expectativas del usuario en la medida en que se corresponde con el
conocimiento que éste tiene de la tarea, así como con su formación,
experiencia y las convenciones comúnmente aceptadas.
5. Tolerancia de errores: Un diálogo es tolerante a los errores en la medida en
que, a pesar de los errores que se cometan en la entrada, se puede lograr el
resultado que se pretende sin realizar correcciones o cuando éstas son
mínimas.
6. Adaptabilidad individual: Un diálogo es susceptible de adaptarse al individuo
en la medida en que el sistema de diálogo puede modificarse de acuerdo a las
habilidades y necesidades de cada usuario en particular, en relación con una
tarea determinada.
7. Fácil de aprender: Un sistema de diálogo facilita su aprendizaje en la medida
en que proporciona medios, guías y estímulos al usuario durante la etapa de
aprendizaje.

b.- con respecto a recomendaciones para diseño de pantallas, entre ellas


podemos nombrar:
1. Claridad y Simplicidad
● Prioridad en la Información: Coloque la información más relevante en un
lugar destacado y reduzca al mínimo la información no esencial.
● Diseño Minimalista: Utilice un diseño limpio y minimalista para evitar
abrumar al usuario con elementos innecesarios.

3
2. Consistencia Visual
● Mantener una paleta de colores coherente en todo el sistema.
● Utilizar una tipografía legible y consistente.
● Establecer pautas claras para la disposición de elementos en pantalla
(alineación, espaciado, etc.).
3. Navegación Intuitiva
● Diseñar una barra de navegación que permita a los usuarios moverse
fácilmente entre las secciones principales de la aplicación.
● Jerarquía de Información: Organice la información de manera jerárquica,
utilizando encabezados y subsecciones para facilitar la navegación.
● Botones de Acción Claramente Identificables: Los botones de acción
deben ser fácilmente reconocibles y estar ubicados en lugares lógicos.
4. Feedback y Confirmaciones
● Proporcionar retroalimentación inmediata en respuesta a las acciones
del usuario (ejemplo: animaciones, mensajes de confirmación).
● Utilizar confirmaciones de acción cuando sea necesario para evitar
errores costosos.
5. Diseño Responsivo
● Asegurarse de que la interfaz sea completamente funcional en diferentes
tamaños de pantalla y dispositivos.
● Adaptar el diseño para dispositivos móviles y tabletas.
6. Jerarquía de Información
● Organizar la información de manera jerárquica, destacando lo más
importante y utilizando tamaños y estilos de texto apropiados.
7. Pruebas de Usabilidad Continuas
● Realizar pruebas de usabilidad periódicas con usuarios reales para
recopilar retroalimentación y realizar mejoras iterativas en el diseño.
8. Accesibilidad
● Cumplir con las pautas de accesibilidad web (por ejemplo, WCAG) para
garantizar que el sistema sea utilizable por personas con discapacidades.
9. Documentación de Diseño
● Crear una documentación clara y detallada de diseño de pantallas que
sirva como referencia para desarrolladores y diseñadores.

c.- De acuerdo a lo investigado acerca de softwares de desarrollo para diseño


de interfaces de usuario.

Adobe XD:

- Descripción: Adobe XD es una aplicación de diseño y prototipado de


interfaces de usuario que forma parte de la suite Creative Cloud de Adobe.
Permite a los diseñadores crear prototipos interactivos, diseños de aplicaciones
móviles y sitios web, y colaborar con otros miembros del equipo.

4
Características clave: Diseño de alta fidelidad, prototipado interactivo,
colaboración en tiempo real, integración con otras herramientas de Adobe.

Sketch

-Descripción: Sketch es una herramienta de diseño de interfaz de usuario


exclusiva para macOS. Está diseñada específicamente para crear diseños de
aplicaciones móviles y sitios web.

-Características clave: Diseño vectorial, bibliotecas de componentes


reutilizables, colaboración en tiempo real a través de complementos,
exportación optimizada para desarrollo.

Figma

-Descripción: Figma es una aplicación basada en la nube que permite a los


equipos de diseño colaborar en tiempo real en proyectos de diseño de UI. Es
especialmente popular en equipos de diseño remoto.

-Características clave: Diseño de alta fidelidad, prototipado interactivo,


colaboración en tiempo real, inspección para desarrollo.

InVision

-Descripción: InVision es una plataforma de diseño y prototipado que ayuda a


los equipos a crear y compartir prototipos de alta fidelidad. Se utiliza
ampliamente para crear experiencias de usuario interactivas.

-Características clave: Prototipado interactivo, colaboración en tiempo real,


inspección para desarrollo, integración con herramientas de diseño.

Axure RP

-Descripción: Axure RP es una herramienta de diseño de prototipos de alta


fidelidad que permite a los diseñadores crear experiencias de usuario
complejas y personalizadas.

-Características clave: Creación de prototipos avanzados, generación de


documentación de diseño, capacidad de lógica y condicional, colaboración en
equipo.

Balsamiq

5
-Descripción: Balsamiq es una herramienta de diseño de UI que se centra en la
creación de prototipos rápidos y esquemáticos. Es ideal para la fase inicial de
diseño y para capturar ideas rápidamente.

-clave: Creación rápida de bocetos, interfaz de usuario sencilla, enfoque en la


idea y concepto.

Justinmind

-Descripción: Justinmind es una herramienta de prototipado y diseño de UI que


permite crear prototipos interactivos y simular experiencias de usuario realistas.

-Características clave: Prototipado interactivo, simulación de interacciones,


colaboración en equipo, integración con herramientas de diseño.

d. A continuación se presentan capturas de pantalla de la aplicación con un


buen diseño de usuario, con su correspondiente justificación de porqué se las
considera así:

1) https://www.oneplus.com/es

Cumple con la mayoría de las recomendaciones, arriba mencionadas,


1. Claridad y Simplicidad
2. Consistencia Visual
3. Navegación Intuitiva
4. Feedback y Confirmaciones
5. Diseño Responsivo
6. Jerarquía de Información
8. Accesibilidad

6
2) https://www.amoblamientosreno.com/
Cumple con la mayoria de las recomendaciones, arriba mencionadas,
1. Claridad y Simplicidad
2. Consistencia Visual
3. Navegación Intuitiva
4. Feedback y Confirmaciones
5. Diseño Responsivo
6. Jerarquía de Información
8. Accesibilidad

3)https://www.educ.ar/
1. Claridad y Simplicidad
2. Consistencia Visual

7
3. Navegación Intuitiva
4. Feedback y Confirmaciones
6. Jerarquía de Información
8. Accesibilidad

4) https://www.diarco.com.ar/

1. Claridad y Simplicidad
2. Consistencia Visual
3. Navegación Intuitiva
4. Feedback y Confirmaciones
5. Diseño Responsivo
6. Jerarquía de Información
8. Accesibilidad

5) www.tesla.com/

8
1. Claridad y Simplicidad
2. Consistencia Visual
3. Navegación Intuitiva
4. Feedback y Confirmaciones
5. Diseño Responsivo
6. Jerarquía de Información
7. Pruebas de usabilidad continuas
8. Accesibilidad

También podría gustarte