CONSTRUIR EL PROTOTIPO DEL SISTEMA

MEDIANTE LAS INTERFACES DE CAPTURA,

PROCESO Y SALIDA DE DATOS.

Introduccin

1.

Principios de diseo de las Interfaces de usuario

2.

Tipos de Interfaz de Usuario

2.1.

Interfaces de Lenguaje natural

2.2.

Interfaces de pregunta y respuesta

2.3.

Interfaces con Mens

2.4.

Interfaces con formularios

2.5.

Interfaces de lenguaje de comandos

2.6.

Interfaces graficas de usuarios (GUI)

3.

El proceso de Diseo de la Interfaz de usuario

3.1.

Anlisis del usuario

3.2.

Prototipo de la Interfaz de Usuario

3.3.

Evaluacin de la Interfaz de Usuario

4.

Herramientas Software para Diseo de Interfaces

5.

Ejemplos Diseo Interfaces Casos de Uso

10

RECURSOS BIBLIOGRFICOS

15

GLOSARIO

16

FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Mapa conceptual
Construir el prototipo del sistema mediante las interfaces
de captura, proceso y salida de datos.

Diseo Interfaces

CONSTRUIR EL PROTOTIPO DEL SISTEMA MEDIANTE

LAS INTERFACES DE CAPTURA,
PROCESO Y SALIDA DE DATOS.
INTRODUCCIN
En el proceso general del diseo y desarrollo de software hay un elemento
muy importante que es el diseo de la interfaz de usuario. Las grandes
empresas contratan personas expertas para ello, pero en la mayora a los
desarrolladores les toca asumir la responsabilidad de disear la interfaz de
usuario, as como del diseo del software que implementa la interfaz.
Un diseo cuidadoso de la interfaz de usuario es parte fundamental del
proceso de diseo general del software. Si un sistema software debe
alcanzar su potencial mximo, es fundamental que su interfaz de usuario
sea diseada para ajustarse a las habilidades, experiencia y expectativas
de sus usuarios previstos.
Antes de iniciar el proceso de diseo de la interfaz de usuario, es bueno
hacernos las siguientes preguntas:
1
2

Cmo debe interactuar el usuario con el sistema informtico?

Cmo se debe presentar la informacin del sistema informtico al
usuario?

Una muy buena interfaz de usuario debe integra los dos elementos relacionados en las preguntas, la interaccin del usuario y la presentacin de la
informacin.

3
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

1. Principios de diseo de las Interfaces de Usuario.

Principio

Descripcin

Familiaridad
del usuario

La interfaz debe utilizar trminos y conceptos obtenidos de la

experiencia de las personas que ms utilizan el sistema.

Uniformidad

Siempre que sea posible, la interfaz debe ser uniforme en el

sentido de que las operaciones comparables se activen de la
misma forma.

Mnima
Sorpresa

El comportamiento del sistema no debe provocar sorpresa

a los usuarios

Recuperabilidad

La interfaz debe incluir mecanismos para permitir a los

usuarios recuperarse de los errores.

Gua de
Usuario

Cuando ocurran errores, la interfaz debe proporcionar

retroalimentacin significativa y caractersticas de ayuda
sensible al contexto.

Diversidad de
Usuarios

La interfaz debe proporcionar caractersticas de interaccin

apropiadas para los diferentes tipos de usuarios del sistema.

2. Tipos de Interfaz de usuario.

2.1. Interfaces de lenguaje natural.
Estas interfaces son las ideales y utpicas a la vez, ya que en teora
debe permitir la interaccin del usuario en su lenguaje natural, como
el espaol o ingls, sin requerir de ninguna otra habilidad especial. El
problema es que el lenguaje natural es ambiguo y las interfaces son
limitadas.
2.2. Interfaces de pregunta y respuesta.
En esta interfaz se le presenta una pregunta al usuario, da su
respuesta y puede continuar con la siguiente pregunta, normalmente
dependiendo de la respuesta anterior.
2.3 Interfaces con Mens.
En esta interfaz se le presentan una serie de opciones al usuario y
dependiendo de su eleccin se ejecuta una accin. Los mens pueden
estar anidados y llevar de una opcin a un nuevo men.
El usuario necesita saber qu tarea debe ser realizada. En este tipo de
interfaz es importante ser consistente, respecto al lugar en que se
colocan los mens, teclas de rpido acceso, nombres comunes para
ciertas tareas, etc.

4
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

2.4 Interfaces con formularios (entrada/salida).

Estas interfaces tratan de asimilar las formas impresas que normalmente
utiliza el usuario, ayudndole mostrando dnde colocar qu informacin.
Algunas formas facilitan el trabajo llenando valores por omisin.
En estas interfaces habr que considerar si el usuario es
experimentado, en cuyo caso esperar que las interfaces sean ms
eficientes que las formas impresas tradicionales.
2.5 Interfaces de lenguaje de comandos.
En esta interfaz se permite al usuario controlar la aplicacin por
medio de comandos, conjuntos de teclas, frases, o combinacin de las
anteriores. Por lo anterior, el usuario tiene mayor control y poder de
decisin sobre la aplicacin, pero requieren capacitacin para que el
usuario memorice los comandos y reglas de utilizacin.
2.6 Interfaces grficas del usuario (GUI).
Estas son las interfaces ms sofisticadas y complicadas, que ofrecen
mayor funcionalidad y flexibilidad al usuario.
3. El proceso de diseo de la Interfaz de usuario.

Analizar y
comprender
las actividades
del usuario

Realizar el diseo
del prototipo en
papel

Evaluar el diseo
con los usuarios
finales

Diseo del
prototipo

Realizar el diseo
dinmico del
prototipo

Evaluar el diseo
de los usuarios
prototipo

Prototipo ejecutable

Implementar la
interfaz de usuario
definitiva

El diseo de interfaces es un proceso iterativo, que en general, se puede

resumir en las siguientes fases:

5
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

3.1 Anlisis del Usuario

Se realiza un anlisis cuidadoso para conocer y clasificar al usuario,
su tarea y el ambiente.
Sino se entiende lo que los usuarios quieren hacer con el sistema, no
se podr llevar a cabo un diseo real y eficaz de la interfaz de usuario.
Para desarrollar esta comprensin, se pueden utilizar tcnicas como el
anlisis de tareas, estudios etnogrficos, entrevistas de usuarios y
observaciones.
3.2 Diseo de la interfaz
En esta fase se elaboran formatos de pantalla donde se incluyan
mens, ubicacin de iconos, texto descriptivo, nombres de ventanas,
etc. Pueden generarse prototipos de preferencia con herramientas
constructoras de GUIs (graphical user interfaces). Tambin en esta
fase se realiza la implementacin.
Para el diseo de la interfaz se recomienda realizar prototipos
evolutivos o exploratorios con la implicacin de los usuarios finales.
Implicar al usuario en el proceso de diseo y desarrollo es un aspecto
fundamental del diseo centrado en el usuario (Nrmal y Draper ,
1986), un criterio de diseo para sistemas operativos.
El propsito de realizar prototipos es permitir a los usuarios adquirir
una experiencia directa con la interfaz.
Cuando se estn construyendo los prototipos se debe realizar en dos
etapas as:
Iniciar con prototipos en papel, maquetas de los diseos de las
pantallas y mostrarlos a los usuarios finales.
Despus se perfecciona el diseo y se desarrollan los prototipos
automatizados y se ponen a disposicin de los usuarios para realizar
pruebas y simulacin de actividades.
3.3 Evaluacin de la Interfaz
Se realizan pruebas y validaciones de las interfaces previas a la liberacin.
La evaluacin de la interfaz es el proceso de evaluar la forma en que
se utiliza una interfaz y verificar que cumple los requerimientos del
usuario. La evaluacin se debe llevar a cabo contra una especificacin
de la usabilidad basada en atributos de la usabilidad.

6
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

Cabe resaltar que el usuario debe estar involucrado en el proceso de

diseo para facilitar que acepte el producto final.

Atributo

Descripcin

Facilidad de
Aprendizaje

Rapidez con que un usuario aprende a utilizar un sistema

con el que no ha tenido contacto anteriormente.

Eficiencia

Que el usuario pueda alcanzar un alto nivel de productividad

al usar el sistema.

Retencin en
el tiempo

Que el usuario pueda recordar fcilmente como se utiliza un

sistema cuando ha dejado de utilizarlo por un tiempo.

Tasa de error

Se refiere a la cantidad y gravedad de errores que comete

el usuario. Al cometer un fallo el sistema debe informar
a los usuario y ayudar a solucionarlos.

Satisfaccin

Hace referencia, si los usuarios se sienten cmodos y

satisfechos al utilizar el sistema.

Control

Los usuarios deben tener el control sobre el sistema,

y no a la inversa.

Habilidades

El sistema debe respetar al usuario, es decir, el usuario debe

sentir que su experiencia se ve potenciada y complementada
por el sistema.

Privacidad

El sistema debe ayudar a los usuarios a proteger su

informacin.

Flexibilidad

Posibilidades de intercambio de informacin entre los

usuarios y el sistema.

Robustez

Nivel de apoyo del Sistema al Usuario.

Velocidad de
Utilizacin:

Tiempo que tarda un usuario en realizar una actividad,

una vez ya conoce el sistema.

Existen algunas tcnicas sencillas para la evaluacin de interfaces que

pueden identificar deficiencias especficas en el diseo tales como:
Cuestionarios que recopilan informacin de lo que opinan los
usuarios de la interfaz.
La observacin de los usuarios cuando trabajan con el sistema y
piensan en voz alta, de como tratan de utilizar el sistema para llevar
a cabo alguna tarea.
Instantneas de vdeos del uso tpico del sistema.
La inclusin de cdigo en el software que recopila informacin de los
recursos ms utilizados y de los errores ms comunes.

7
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

Cabe resaltar que el usuario debe estar involucrado en el proceso de

diseo para facilitar que acepte el producto final.
4. Herramientas Software para el Diseo de Interfaces
En la actualidad existen muchas herramientas software para el Diseo de
Interfaces. Dentro de ellas encontramos herramientas web y herramientas
de aplicaciones Windows.
Las herramientas de desarrollo de software como visual studio y netbeans,
incluyen elementos propios para el diseo de interfaces.
A continuacin se relacionan tres (3) herramientas posibles a utilizar:
Adobe Dreamweaver: Esta herramienta es licenciada y viene
incluida en la suite de adobe para el diseo de sitios web.
Interfaz de la Herramienta:

Balsamiq Mockups: Es una herramienta web que se puede

descargar desde internet por un periodo de prueba.
Sitio de descarga: http://www.balsamiq.com
Interfaz de la Herramienta:

8
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

La herramienta permite descargar las interfaces a diferentes

formatos como PNG o PDF.
Wirefreams on the fly mockingbird: Herramienta web para el
diseo de interfaces, se pueden crear las interfaces directamente
desde el navegador.
Se debe ingresar a la siguiente direccin:
https://gomockingbird.com/
Interfaz de la Herramienta:

9
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

5. Ejemplos Diseo Interfaces Casos de Uso

Se tiene como referencia un Sistema de un Centro Odontolgico.
Para iniciar vamos a realizar la interfaz de usuario para el siguiente caso
de uso:
Caso de Uso: Autenticar Usuario.
Sistema: Gestin Odontolgica.

Caso de Uso

Autenticar usuario

Descripcin

El comportamiento del Sistema debe validar

el usuario que ingresa al sistema.

Precondicin

El personal debe estar registrado en el sistema

para que al ingresar sus datos de login y password
puedan ser validados.
Paso

Secuencia
Normal

Pos condicin
Excepciones

Accin

El personal mdico al ingresar al sistema

debe ingresar con un login y password
asignados por el administrador.

El sistema valida el login y password.

Si los datos son validos, el sistema

muestra las opciones correspondientes,
dependiendo del tipo de usuario.

El empleado ingresa al sistema.

Paso
Accin
3

Si los datos de login y password no son

validos, el sistema informa al personal
mdico para que se revise y actualice
la informacin.

Si el login y password no son validos

el sistema no permite ingresar.

10
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

Pasos para realizar la interfaz mediante prototipos:

1. Creamos un prototipo en una hoja de papel.

2. Ahora procedemos a realizarlo utilizando una herramienta

software. Para ello vamos a utilizar Balsamiq Mockups.
En el documento de apoyo llamado Crear Interfaces Balsamiq se
muestra el paso a paso de la creacin de la siguiente Interfaz.

11
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

Caso de Uso: Registrar Paciente.

Sistema: Gestin Odontolgica.

Caso de Uso

Autenticar usuario

Descripcin

El comportamiento del sistema deber describir

el paso a paso del caso de uso cuando el personal
encargado de gestionar datos del paciente inicie
el ingreso de estos.

Precondicin

El paciente no se encuentra registrado en el

sistema y tiene la documentacin necesaria
para poder ser ingresado al sistema.
Paso

Secuencia
Normal

Pos condicin
Excepciones

Accin
El sistema muestra al personal medico una
interfaz para que se ingresen los datos del
nuevo paciente(identificacin, nombres,
apellidos, direccin, telfono, correo,
genero, tipo de sangre, nombre acudiente.

El personal mdico ingresa los datos

del paciente.

El sistema valida inicialmente si el

documento de identidad del nuevo
paciente no existe en el sistema,
si no existe registra el nuevo paciente.

El sistema informa al personal mdico que

el paciente ya ha sido ingresado al sistema.

El paciente queda registrado en el sistema.

Paso
Accin
3

Si el sistema detecta que ya existe un

paciente registrado con ese documento de
identidad, procede a informar al personal
mdico, estos deben modificar y/o
actualizar si es necesario.

Si ya existe la persona en el sistema se

procede a cancelar el registro del paciente
y se termina el caso de uso.

12
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

1. Creamos un prototipo en una hoja de papel.

13
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

2. Ahora vamos a crear la interfaz utilizando una herramienta

software desde gomockingbird.com. En el Documento de apoyo
llamado Crear Interfaces Gomockingbird se muestra el paso a paso
de la creacin de la siguiente Interfaz.

14
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

RECURSOS BIBLIOGRFICOS
Kendall, Kenneth y Julie. Anlisis y Diseo de Sistemas. Pearson
Educacin. 6 edicin. Mxico 2005.
Gmez, L. S. (s.f.). Diseo de Interfaces de usuario principios,
prototipos y heursticas para Evaluacin. Recuperado el 8 de Julio de
2013, de http://sebastiangomez.sytes.net/papers/DIU.pdf
Kendall, K. E., & Kendall, J. E. (2005). Anlisis y Diseo de Sistemas
(Sexta ed.). Mxico: Pearson Educacin.
Mercovich, E. (s.f.). Diseo Iterativo de Interfaces. Recuperado el 8 de
Julio de 2013, de GAIASUR:
http://www.gaiasur.com.ar/infoteca/siggraph99/diseno-iterativo-y-proto
tipado-rapido.html
Servicio Nacional de Aprendizaje - SENA. (Mayo de 2009). Diseo
Interfaz de usuario. Obtenido de Curso virtual Metodologas de anlisis y
diseo de Sistemas.
Sommerville, I. (2005). Ingeniera del Software (Septima ed.). Madrid:
Pearson Educacin.

15
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

GLOSARIO
Interfaz de usuario: La interfaz de usuario es el medio con que el
usuario puede comunicarse con una mquina, un equipo o una
computadora, y comprende todos los puntos de contacto entre el
usuario y el equipo. Normalmente suelen ser fciles de entender y
fciles de accionar.
GUI: La interfaz grfica de usuario, conocida tambin como GUI (del
ingls graphical user interface) es un programa informtico que acta de
interfaz de usuario, utilizando un conjunto de imgenes y objetos
grficos para representar la informacin y acciones disponibles en la
interfaz. Su principal uso, consiste en proporcionar un entorno visual
sencillo para permitir la comunicacin con el sistema operativo de una
mquina o computador.
Prototipos: Un prototipo en software es un modelo del comportamiento
del sistema que puede ser usado para entenderlo completamente o
ciertos aspectos de l y as clarificar los requerimientos... Un prototipo
es una representacin de un sistema, aunque no es un sistema
completo, posee las caractersticas del sistema final o parte de ellas.
Usabilidad: se refiere a la facilidad con que las personas pueden utilizar
una herramienta particular o cualquier otro objeto fabricado por
humanos con el fin de alcanzar un objetivo concreto. La usabilidad
tambin puede referirse al estudio de los principios que hay tras la
eficacia percibida de un objeto.
Mens: Es una serie de opciones que el usuario puede elegir para
realizar determinada tarea.
Formularios: Un formulario es un documento, diseado con el
propsito de que el usuario introduzca datos estructurados en las zonas
del documento destinadas a ese propsito para ser almacenadas y
procesadas posteriormente.

16
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo Interfaces

OBJETO DE
APRENDIZAJE

Construir el prototipo del sistema

mediante las interfaces de captura,
proceso y salida de datos.

Desarrollador de contenido
Experto temtico

Csar Marino Cullar Chacn

Asesor Pedaggico

Rafael Neftal Lizcano Reyes

Claudia Milena Hernndez

Productor Multimedia

Jos Jaime Luis Tang Pinzn

Victor Hugo Tabares Carreo

Programadores

Daniel Eduardo Martnez Daz

Lder expertos temticos

Ana Yaqueline Chavarro Parra

Lder lnea de produccin

Santiago Lozada Garcs

Atribucin, no comercial, compartir igual

Este material puede ser distribuido, copiado
y exhibido por terceros si se muestra en los
crditos. No se puede obtener ningn beneficio comercial y las obras derivadas tienen
que estar bajo los mismos trminos de
licencia que el trabajo original.

17
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje