La Interfaz Gráfica de Usuario y El Usuario Web

Actividad 3 “La interfaz gráfica de usuario y el usuario web”.
Ortega Martinez, Jose Hermilo.
INSTITUTO DE ESTUDIOS UNIVERSITARIOS

CAMPUS ONLINE
MAESTRIA EN DIRECCION DE INGENIERIA DE SOFTW ARE
INGENIERIA DE REQUERIMIENT OS Y DE USABIL IDAD
Actividad 3 “La interfaz gráfica de usuario y el usuario

web”
ALUMNO(A): JOSE HERMILO ORTEGA MARTINEZ

FACILITADOR: MTRO. JUAN RAYMUNDO RODRIGUEZ VAN SCOLT
SAN BUENAVENTURA, COAHUILA, A lunes, 24 de julio de 2017.
IEU campus Online. Maestría en Dirección de Ingeniería de Software

Métodos formales de ingeniería de software. Julio de 2017. Pág. 1
INDICE
INTRODUCCION ............................................................................................................................. 3
DESARROLLO ................................................................................................................................. 4
TEMA 1: PROCESO FORMAL DE DISEÑO DE INTERFAZ DE USUARIO .............................. 4
1.1.- Proceso de diseño de interfaz .......................................................................................... 4
TEMA 2: EJEMPLO DE DISEÑO DE INTERFAZ ....................................................................... 5
2.1.- DISEÑO DE INTERFAZ ................................................................................................... 5
2.2.- PROPUESTAS DE PANTALLA ...................................................................................... 5
2.3.- FLUJO DE INTERFAZ DE USUARIO ........................................................................... 10
2.4.- SUGERENCIAS DE DISEÑO ....................................................................................... 12
CONCLUSION ............................................................................................................................... 13
FUENTES DE INFORMACION...................................................................................................... 14

INTRODUCCION
El diseño de interfaz de un software es una de las partes más visuales a la hora

de llegar a desarrollar un software ya que contrario a otras actividades del desarrollo de
un software, esta si llega a dar una vista gráfica y visual de los cambios y/o
modificaciones que un software tiene, a diferencia del proceso de análisis,
documentación, codificación o análisis de bases de datos, estas actividades pese a ser
actividades que es necesario mucho tiempo, muchas veces es completamente invisible
para el usuario final. Es por eso que al ser el diseño de interfaz una de las tareas más
notorias del usuario, debe de ser llevada a cabo de manera adecuada dándole al
usuario final una muestra y representación visual de como el software está tomando
forma de manera adecuada y profesional.
En el presente ensayo veremos un ejemplo del proceso de diseño de software de

actividades anteriores.

DESARROLLO
TEMA 1: PROCESO FORMAL DE DISEÑO DE INTERFAZ DE USUARIO
1.1.- Proceso de diseño de interfaz
El proceso de diseño se puede llegar a representar de muchas maneras y por

medio de diferentes modelos como lo es el espiral teniendo como 4 actividades
principales como son:
- Análisis y modelado de usuarios, tareas y entornos
- Diseño de la interfaz
- Implementación de la interfaz
- Validación de la interfaz
Se llega a tomar como ejemplo el modelo de espiral debido a que diseñar un proceso
de diseño de interfaz es un proceso en el cual se van creando una serie de prototipos
que son presentados a los clientes hasta llegar a encontrar un prototipo que llegue a
tener las características que desea el usuario final.

TEMA 2: EJEMPLO DE DISEÑO DE INTERFAZ
2.1.- DISEÑO DE INTERFAZ
Analizando la solicitud recibida por parte del usuario del diseño de un software
nuevo a medida para un consultorio médico en el cual pueda contar con las siguientes
opciones como lo son:
 Inicio de sesión  Control de pacientes
 Control de citas  Control de expedientes
Se han desarrollado una serie de pantallas como propuesta de desarrollo para el
sistema. Con estas se pretende poder cumplir con los objetivos y funciones específicas
que desea el usuario final en el sistema. En todo el sistema a excepción de la pantalla
de inicio de sesión, se cuenta con un menú en la parte superior de la pantalla con la
cual se podrá acceder a las diferentes pantallas del sistema desde cualquier pantalla
abierta, dando al usuario mayor comodidad a la hora de querer ver las diferentes
opciones del sistema.
2.2.- PROPUESTAS DE PANTALLA
a) Pantalla de inicio de sesión

El objetivo principal de la pantalla es el poder brindar seguridad de acceso al
sistema por medio de un usuario y contraseña con el cual el usuario podrá
acceder al software ingresando usuario y clave correcta, de no contar con dicha
información un usuario externo o interno al persona l sin registro en la base de
datos no contara con acceso al sistema.
Características especiales:
1. Límite máximo de caracteres en las cajas de texto
2. Ocultar texto introducido en caja de texto de contraseña
3. Bloqueo de cuenta al ingresar los datos de manera errónea 3 o más
intentos

b) Pantalla de menú principal (Control de citas)

La pantalla de menú principal cuenta con una cuadricula en la cual se desglosan
las consultas de acuerdo a un rango de fechas que se seleccionen por el usuario
que accedió al sistema. En esta cuadricula se podrá visualizar datos básicos de
consultas como lo es:
1. Fecha 3. Paciente
2. Hora 4. Tratamiento
1. Carga de citas del dia automáticamente
2. Opción de rango de citas para consulta
3. Botón de registro de citas y actualización de cuadricula al registro

c) Pantalla de registro de citas

La función principal de esta pantalla es el poder por medio del llenado de una
pequeña cantidad de datos, registrar una cita para un paciente. Con esta pantalla
se podrá ir teniendo registros de todos los pacientes que deben consultar con el
doctor. Es fundamental esta pantalla para la alimentación del sistema y así poder
conocer el control de citas, pacientes y tratamientos que se lleguen a tener en un
dia de consultas. Además, se planteara la opción de graficas en sistema de la
información llenada con esta pantalla al conocer registros diarios en promedio,
horas más solicitadas, tratamientos frecuentes, etc…
1. Control de fecha y hora al no permitir registrar fechas ni horas del pasado
o ya ocupadas
2. Desglose de lista de pacientes registrados en sistema por medio de una
caja de opciones, de no encontrarse se tendrá la opción de registrar el
paciente.
3. Campos de tratamiento y observaciones con límite de máximos caracteres
4. Pregunta de seguridad al momento de querer ingresar una cita
5. Validación de campos previa al registro
6. Opción de cancelar registro y cierre de pantalla

d) Pantalla de control de pacientes

El recurso principal del sistema además del llenado de citas con las cuales se
tendrá control del trabajo diario, es el poder contar con un catálogo de pacientes
y poder por medio de una pantalla visualizar esta lista además de tener opciones
de registro de más pacientes. Al contar con un catálogo de pacientes se podrá
tener un mejor control y administración de cuantos pacientes pueden consultar
en el sistema, fechas de nacimientos, edades y sexo como datos básicos para
conocimiento general del sistema y posterior uso ya sea en graficas o
consideraciones para una u otra consulta que desee el paciente.
1. Consulta de pacientes por nombre
2. Cuadricula de desglose de pacientes registrados en la base de datos
3. Opción de registro rápido de nuevos pacientes

e) Pantalla de registro de pacientes:

La pantalla antes mencionada no podría funcionar o tener utilidad si no existiera
una opción en la cual se pueda tener un registro de los usuarios que por medio
del llenado de una serie de pequeños datos se puede llegar a obtener un registro
completo que pueda ayudar a posteriores consultas de información de pacientes.
1. Limite en caja de texto de caracteres
2. Validación en fecha de nacimiento al no permitir llenar fechas invalidad o
futuras
3. Opción desplegable de selección de sexo del paciente entre masculino y
femenino
f) Pantalla de expediente de pacientes:

El poder contar con una pantalla de expediente puede ayudar tanto al doctor
principal como a enfermeros o médicos auxiliares a conocer por medio de una
pantalla fácil y sencilla el historial medico de un paciente al poder ver que
consultas ha tenido un usuario, fechas de la consulta, tratamiento dato y opción
de ver observaciones que ayuden a conocer mayor detalle de la consulta
realizara en el historial del paciente. Esta pantalla será llenada en base a los
registros de citas que se realicen en la pantalla de registro de citas, creando una
liga entre paciente y consulta para posteriormente contar con la información
necesaria para su expediente.

1. Limite en caja de texto de caracteres en el texto de paciente
2. Cuadricula con bloqueo de modificaciones
3. Opción de organizar por fecha o tratamiento en cuadricula de la pantalla.
2.3.- FLUJO DE INTERFAZ DE USUARIO
El flujo que puede existir en el sistema en general es de fácil entendimiento como

se podrá observar en la siguiente imagen al poder contar con un inicio de sesión
obligatorio en primera instancia para posteriormente llegar a moverse cómodamente
entre las pantallas del sistema. A continuación el StoryBoard de dichos movimientos
entre pantallas del sistema:

Como se puede observar en la imagen, el flujo principal inicia con la pantalla de inicio
de sesión, en la cual el usuario debe de introducir los datos de usuario y contraseña
correctos para poder visualizar la siguiente pantalla que en este caso es la pantalla del
menú principal y visualización de citas del dia o bajo un periodo de fecha que el usuario
desee. Seguido de esto se puede llegar a tener una comunicación entre los diferentes
formularios principales como lo es el de: Citas, Pacientes y Expedientes médicos.
En la pantalla de CITA existe una segunda liga a la pantalla de registro de citas, en la

cual es una comunicación bilateral al tener una apertura y cierre ligada completamente
a la pantalla de citas, acción similar a la comunicación de pantallas entre la pantalla de
pacientes y registro de paciente que será bidireccional y será solo entre estas 2
pantallas que existirá dicha comunicación.

2.4.- SUGERENCIAS DE DISEÑO
Entre las sugerencias planteadas y realizadas al usuario final se han mencionado

una serie de pantallas que podrían ser de utilidad para el usuario final pero dependerá
del mismo usuario si desea el desarrollo de dichas pantallas o no con un cargo
adicional al del cobro principal.
Las pantallas de sugerencia son:

 Cambio de contraseña
 Reporte de citas por:
o Paciente
o Fechas
o Tratamientos
 Opción para exportar a Excel o PDF cuadricula de consulta de:
o Citas
o Pacientes
o Expediente medico
 Agregar más filtros de consultas
 Pantalla de administración de usuarios del sistema
 Privilegios de acceso a pantallas por usuario
Como bien se menciona, estas sugerencias de desarrollo serán propuestas y serán

desarrolladas solo con aprobación del usuario por el costo y tiempo que pudiera
conllevar realizar dichas pantallas.

CONCLUSION
Cuando la imagen del sistema y la percepción del sistema coinciden, el usuario

puede utilizar la aplicación de forma efectiva. Un buen diseño amigable, funcional,
cómodo, ágil, rápido intuitivo pueden ser los factores que defina n el éxito o no de un
análisis, diseño y desarrollo de interfaz de usuario, estos factores pueden así mismo
determinar no solo el si le gusta visualmente al usuario, sino el que si un usuario usa o
no un sistema. Es por eso que el dar un buen seguimiento a todo el proceso y
recolección de datos del diseño de interfaz deseado por el usuario es de suma
importancia para poder garantizar que nuestro sistema sea completamente funcional y
eficaz para el usuario.

FUENTES DE INFORMACION
1. SlideShare (2011).- https://es.slideshare.net/jpbthames/el-proceso-de-diseo-de-

interfaz-del-usuario-pressman
2. SlideShare (2011).- https://es.slideshare.net/jpbthames/el-proceso-de-diseo-de-
interfaz-del-usuario-por-ian-sommerville
3. Web Usable (2017).- http://www.webusable.com/useProcess.htm
4. Prezi (2012).- https://prezi.com/gflawnaaffv4/el-proceso-de-diseno-de-la-interfaz-
del-usuario/
5. Pegasus .-
http://pegasus.javeriana.edu.co/~fwj2ee/descargas/metodologia(v0.1).pdf
6. Wikipedia (2016).-
https://es.wikipedia.org/wiki/Dise%C3%B1o_de_interfaz_de_usuario
7. Code Jobs (2013).- https://www.codejobs.biz/es/blog/2013/07/20/diseno-de-la-
interfaz-de-usuario
8. Wikipedia (2017).-
https://es.wikipedia.org/wiki/Metodolog%C3%ADa_de_desarrollo_de_software
9. Researchgate (2002).-
https://www.researchgate.net/figure/220071667_fig2_Figura-1-Proceso-de-
Desarrollo-de-Interfaces-de-Usuario-Propuesto


La Interfaz Gráfica de Usuario y El Usuario Web

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

La Interfaz Gráfica de Usuario y El Usuario Web

Enviado por

Direitos autorais:

Formatos disponíveis

Actividad 3 “La interfaz gráfica de usuario y el usuario web”.

Ortega Martinez, Jose Hermilo.

INSTITUTO DE ESTUDIOS UNIVERSITARIOS

INGENIERIA DE REQUERIMIENT OS Y DE USABIL IDAD

Actividad 3 “La interfaz gráfica de usuario y el usuario

ALUMNO(A): JOSE HERMILO ORTEGA MARTINEZ

IEU campus Online. Maestría en Dirección de Ingeniería de Software

IEU campus Online. Maestría en Dirección de Ingeniería de Software

El diseño de interfaz de un software es una de las partes más visuales a la hora

En el presente ensayo veremos un ejemplo del proceso de diseño de software de

IEU campus Online. Maestría en Dirección de Ingeniería de Software

TEMA 1: PROCESO FORMAL DE DISEÑO DE INTERFAZ DE USUARIO

1.1.- Proceso de diseño de interfaz

El proceso de diseño se puede llegar a representar de muchas maneras y por

IEU campus Online. Maestría en Dirección de Ingeniería de Software

TEMA 2: EJEMPLO DE DISEÑO DE INTERFAZ

2.1.- DISEÑO DE INTERFAZ

2.2.- PROPUESTAS DE PANTALLA

a) Pantalla de inicio de sesión

IEU campus Online. Maestría en Dirección de Ingeniería de Software

b) Pantalla de menú principal (Control de citas)

IEU campus Online. Maestría en Dirección de Ingeniería de Software

c) Pantalla de registro de citas

IEU campus Online. Maestría en Dirección de Ingeniería de Software

d) Pantalla de control de pacientes

IEU campus Online. Maestría en Dirección de Ingeniería de Software

e) Pantalla de registro de pacientes:

f) Pantalla de expediente de pacientes:

IEU campus Online. Maestría en Dirección de Ingeniería de Software

2.3.- FLUJO DE INTERFAZ DE USUARIO

El flujo que puede existir en el sistema en general es de fácil entendimiento como

IEU campus Online. Maestría en Dirección de Ingeniería de Software

En la pantalla de CITA existe una segunda liga a la pantalla de registro de citas, en la

IEU campus Online. Maestría en Dirección de Ingeniería de Software

2.4.- SUGERENCIAS DE DISEÑO

Entre las sugerencias planteadas y realizadas al usuario final se han mencionado

Las pantallas de sugerencia son:

Como bien se menciona, estas sugerencias de desarrollo serán propuestas y serán

IEU campus Online. Maestría en Dirección de Ingeniería de Software

Cuando la imagen del sistema y la percepción del sistema coinciden, el usuario

IEU campus Online. Maestría en Dirección de Ingeniería de Software

1. SlideShare (2011).- https://es.slideshare.net/jpbthames/el-proceso-de-diseo-de-

IEU campus Online. Maestría en Dirección de Ingeniería de Software

Você também pode gostar