1

Metodologas para el diseo de Interfaces Grficas de Usuario

Como se ha mencionado, el principal reto de una GUI es lograr una clara y efectiva transmisin
de las ideas a los usuarios, lo cual se consigue tomando en cuenta para su desarrollo los
principios definidos por las diferentes reas de conocimiento involucradas con el diseo de la
interfaz. No obstante, el xito de una GUI no slo depende de la implementacin de dichos
factores.
Al igual que con cualquier medio de comunicacin, disear interfaces grficas requiere
de una planeacin y reflexin previas a su desarrollo, lo cual servir para generar una adecuada
interpretacin de las intenciones del ambiente virtual y, con ello, definir soluciones creativas
congruentes al diseo de la GUI.
[] resulta importante saber qu se necesita para generar un grado de usabilidad
ptimo para la interfaz, es decir, en qu basarse para plantear una navegacin

y
distribucin de contenidos adecuados. Con base en esta informacin, ser fcil extraer
de ella las conclusiones que permitan plantear las decisiones creativas apropiadas.
(Buitrn, 2005)
En ese sentido, son varios los factores a considerar en el proceso de diseo de una GUI,
lo cual le implica a los desarrolladores formularse preguntas tales como: Cul es el problema?,
Cul es la mejor solucin?, Qu se quiere decir?, Con qu objetivo?, A quin ha de
dirigirse el mensaje?, Cmo se estructurar la solucin?, por mencionar algunas, a partir de la
cuales poder iniciar la estructura de la interfaz. [Ver figura 4.4]
El tomar en cuenta estas preguntas, previo al desarrollo de la GUI, le presupone un alto
grado de precisin a la interfaz grfica en cuanto al logro de los objetivos para los cuales sea
creada.
Sin embargo, el diseo de GUI, ms all de contestar a las interrogantes anteriores,
requiere de la implementacin de ciertos planteamientos metodolgicos que rijan el proceso de
desarrollo, los cuales disminuyan su complejidad y aseguren en cierta medida el xito de la
interfaz grfica. [Ver figura 4.4]

2












Figura 4.4 Esquema de planeacin de un proyecto web (Buitrn, 2011)

Cabe mencionar que las metodologas tradicionales para el desarrollo de sistemas
computacionales generalmente no contienen una abstraccin capaz de facilitar la tarea de
especificar aplicaciones involucradas en la interaccin humano-computadora, por lo que
actualmente se han venido desarrollando planteamientos metodolgicos que rijan el desarrollo
de este tipo de proyectos.
Retomando los planteamientos del rea Ordenadores Porttiles (2011), A. Moreno
(2000), P. Lynch y S. Horton (2000) se pueden mencionar varias metodologas empleadas para
el diseo de interfaces grficas, por mencionar algunas:
I) Metodologa de diseo hipermedia orientado a objetos, que busca el desarrollo de
aplicaciones hipermedia a travs de actividades realizadas de manera incremental e
interactiva y con base en prototipos de desarrollo. Consiste en cuatro fases:
PROBLEMA CREACIN DE UN
WEBSITE

solucin al problema
TEMA

definicin del problema
DEFINICIN DE
CONTENIDOS

qu se va a
decir?
IDENTIFACIN
DEL USUARIO

a quin?
DISEO Y
CONSTRUCCIN
DE LA GUI

cmo se va a
decir?
METODOLOGA DE TRABAJO

Fases: actividades y tiempos
3

1. Fase Conceptual, en la cual se construye un esquema conceptual representado
por los objetos del dominio, las relaciones y colaboraciones existentes entre
ellos.
2. Fase Navegacional, en la cual se define la organizacin del espacio, expresada
en los esquemas de clases y contextos de navegacin (nodos, enlaces y
estructuras de acceso).
3. Fase de Interfaz abstracta, en la cual se especifica la organizacin y el
comportamiento de la interfaz mediante la definicin de la forma en la cual los
objetos deban aparecer y activar la navegacin as como el resto de la
funcionalidad de la aplicacin.
4. Fase de Implementacin, en la cual se determina la apariencia fsica de la
interfaz as como la disposicin de sus propiedades, tomando en cuenta la
plataforma de su implementacin as como el perfil del usuario y su tarea.
II) Metodologa de diseo hipermedia en panoramas orientados a objetos, que busca el
desarrollo de aplicaciones hipermedia mediante la disposicin de escenarios que
capturan las necesidades del sistema. Consiste en seis fases:
1. Fase de Anlisis, en la cual se realiza el estudio de las necesidades de
la aplicacin, del entorno y los actores, con la finalidad de conseguir los
escenarios que representen las actividades a llevarse a cabo.
2. Fase de Modelado de objetos, en la cual se diagraman las clases que
representan la estructura conceptual del sistema.
3. Fase de Diseo de vistas, en la cual se organizan las unidades de navegacin,
representando una vista general de los objetos de la aplicacin.
4. Fase de Diseo navegacional, en la cual se enriquecen las vistas de los objetos
con la definicin de los enlaces existentes.
5. Fase de Diseo de la implementacin, en la cual se disea la interfaz.
6. Fase de construccin, en la cual se realiza la construccin e implementacin de
la aplicacin.
4

III. Metodologa de diseo para sitios web, que busca la definicin de una aplicacin
web a partir de los usuarios que vaya a reconocer el sistema. Propone cuatro
etapas: (rea Ordenadores Porttiles, 2011)
1. Fase de Modelo de usuario, en la cual se identifican el perfil de los usuarios,
definindolos y clasificndolos.
2. Fase de Diseo conceptual, en la cual se realiza el modelado de los objetos y el
diseo de la navegacin.
3. Fase de Diseo de implementacin, en la cual se modela la interfaz, de acuerdo
al usuario, para comenzar con la construccin de la interfaz.
4. Fase de Realizacin de implementacin, en la cual se codifican los aspectos
anteriores mediante el uso de un lenguaje concreto que se haya seleccionado,
construyendo as la versin final de la aplicacin.
IV. Metodologa de anlisis de navegacin relacional, que define una secuencia de
pasos que se utilizarn para el desarrollo de una aplicacin web. Para ello se
definen cinco fases:
1. Fase de Anlisis del entorno, en la cual se determina y clasifica a los usuarios de
la aplicacin en grupos segn sus perfiles.
2. Fase de Definicin de elementos, en la cual se determinan y enlistan los
elementos de inters (documentos, las pantallas, la informacin, etc.) de la
aplicacin.
3. Fase de Anlisis del conocimiento, en la cual se desarrolla el esquema de
representacin de la aplicacin, con base en las identificacin de los objetos, los
procesos y las operaciones a realizar en la aplicacin as como en la relacin que
se produce entre estos elementos.
4. Fase de Anlisis de navegacin, en la cual se verifica que el esquema de
representacin sea enriquecido con las posibilidades de navegacin dentro de la
aplicacin.
5. Fase de Implementacin del anlisis, en la cual se pasa el esquema de
representacin a un lenguaje entendible por la mquina con la finalidad de
construir la interfaz.
5

V. Metodologa de diseo de aplicaciones hipermedia, la cual se basa en la descripcin
de los objetos de informacin as como en los mecanismos de navegacin,
presentando la interaccin con el sistema desde el dominio del comportamiento.
Consta de seis fases:
1. Anlisis, en la cual se analizan las necesidades, los usuarios, los datos, la
funcionalidad y las tareas.
2. Diseo conceptual del modelo de datos, en la cual se modela la semntica de la
aplicacin.
3. Diseo funcional, en la cual se define y utiliza una mtrica de diseo.
4. Diseo fsico de la interfaz, en la cual se modelan los objetos perceptibles y se
implementan las metforas elegidas y el diseo de la interfaz.
5. Prototipado, en la cual se desarrollan los aspectos determinantes de la
aplicacin.
6. Implementacin, en la cual se ejecuta la aplicacin.
VI. Proceso de desarrollo de sitios web
1
, metodologa que busca, mediante una
planificacin y organizacin detallada, el desarrollo de una aplicacin para web.
Contempla generalmente seis fases:
1. Definicin y Planificacin del sitio, en la cual se definen los objetivos y metas de
la aplicacin adems de los requerimientos para su desarrollo.
2. Arquitectura de la informacin, en la cual se detallan los contenidos y su
correspondiente organizacin.
3. Diseo, en la cual se definen y desarrollan los criterios de diseo as como los
elementos que definirn a la interfaz.
4. Construccin, en la cual se construye finalmente el grueso de la aplicacin.



1
Cabe mencionar que este trabajo emplea como metodologa al proceso de desarrollo de sitios web propuesta por
P. Lynch y S. Horton (2000), debido a la claridad y simplicidad de su planteamientos as como por su fcil
adaptacin al desarrollo de interfaces grficas de ambientes virtuales de aprendizaje.
6

Cada una de las metodologas presentadas se concentra en un eje de desarrollo
diferente, tratando de detallar en profundidad algn aspecto en particular. Sin embargo, la
mayora de estas coincide de alguna manera en que el diseo de una interfaz grfica debe
llevar a cabo ciertas actividades que permitan asegurar, en la medida de lo posible, el xito de
la GUI. Dentro de estas se pueden mencionar:
La planeacin de las necesidades del proyecto.
La definicin y estructuracin de los contenidos.
El diseo de la interaccin y de la identidad grfica de la interfaz.
La construccin de la interfaz.
Definido lo anterior, puede comenzarse a disear la GUI de un determinado ambiente
virtual, a partir de la importancia de la implementacin de una metodologa en su desarrollo as
como de la aplicacin de una serie de criterios establecidos por las diversas disciplinas
involucradas en el diseo de interfaces.

















Referencia: Buitrn, M. (2011) MODELO DIDCTICO PARA LA CREACIN DE AMBIENTES
VIRTUALES DE APRENDIZAJE. Disertacin de tesi s doctoral. No publicada. UAM-Azc: Mxico.