Diseo de Software

Gustavo A. Donoso M.

Diseo de Software
Gustavo A. Donoso M.
Capitulo 4: Diseo de GUIs y Metforas
Nota

Este captulo del apunte corresponde a un muy leve

introduccin extractada del captulo 2 del mismo. Se
complementa con apuntes bajados de internet y otros.

Software: Interfaces
El siguiente esquema es un Modelo de Anlisis de UML. Normalmente
los estereotipos que se utilizan corresponden a interfase o frontera,
control y entidad:
entidad

Registrode
Usuario

Errorde
Registro

Usuario
interface
Registrode
Usuario

control

Visitante

Loginde
Usuario

Errorde
Autentificacin

Autentificar
Usuario

ConsultaHuella
Dactilar
Sistemade
RegistrodeHuella
Dactilar

En la figura se puede ver a dos actores: Visitante y Sistema de

Registro de Huella Dactilar. Ambos se relacionan con el sistema que
estamos diseando mediante el uso de interfaces, con la diferencia
que el actor Visitante es un rol que asume una persona, mientras que
el otro es un sistema.
Lo que nos entrega un contexto distinto para el diseo de cada
interface. Por un lado, para las personas normalmente se requiere de
interfaces de texto o grficas, mientras que para un sistema lo normal
es que la comunicacin sea a travs de un protocolo ms o menos
normado.
Para el diseo de interfaces grficas de usuario (GUI en ingls)
existen consideraciones generales y criterios que pueden ser

Captulo 3. Orientacin a Objetos

Pgina 1 de 5

Diseo de Software

Gustavo A. Donoso M.

aplicados con xito (como los que se sealan ms adelante) y

corresponden a un rea de investigacin conocida como Interaccin
Humano Computador (HCI en ingls).
Criterios en diseo de GUIs
Si bien existen muchos aspectos que se consideran en el diseo de
una GUIs (Grafical User Interface) es conveniente reducir aquellos a
algunos criterios. Una lista no absolutamente inclusiva de los mismos
seria la siguiente:
Dar control al usuario. El diseador debe dar al usuario la posibilidad
de hacer su trabajo, en lugar de suponer qu es lo que ste desea
hacer. La interfaz debe ser suficientemente flexible para adaptarse a
las exigencias de los distintos usuarios del programa.
Reducir la carga de memoria del usuario. La interfaz debe evitar que
el usuario tenga que almacenar y recordar informacin.
Si han experimentado trabajar sobre la consola de DOS o de unix
entendern de qu se trata el tener que reducir la carga de memoria
del usuario. Si la memoria la tiene la mquina, entonces lo usual es
que sea ella quien la use.
Consistencia. Permite al usuario utilizar conocimiento adquirido en
otros programas consistentes con el nuevo programa. Ejemplo:
mostrar siempre el mismo mensaje ante un mismo tipo de situacin,
aunque se produzca en distintos lugares.
Algo sobre Iconografa
Las interfaces grficas de usuario permiten la posibilidad de
incorporar lenguaje visual, el que normalmente se iconiza.
Un cono, al igual que los smbolos del lenguaje hablado, tiene
dimensiones: semntica, sintctica y pragmtica. La dimensin
semntica estudia la relacin que existe entre el signo y su
significado. La pragmtica o dimensin funcional relaciona el signo
con el usuario. Y la sintctica o dimensin formal estudia los factores
formales de ese signo y entre los dems signos del sistema
As la semntica de un cono est dada por su capacidad para
transmitir el mensaje que se quiere transmitir. El cono del tarro de
basura es una forma de decir elimnelo aqu pero tambin el cono
de una cruz significa algo similar pero en un contexto distinto
(algunos clientes de eMail) o, en otro contexto, ste ltimo significa
cancele. A veces, para acentuar un significado se usa una frase,
en este caso la idea es que ambos tengan semnticas
correspondientes dado el contexto.
Captulo 3. Orientacin a Objetos

Pgina 2 de 5

Diseo de Software

Gustavo A. Donoso M.

La dimensin pragmtica de un cono se orienta bsicamente a las

condiciones fsicas que presenta en el contexto donde se instala
(colores, fondo), las facilidades de memorizacin e identificacin
(diagramas, tamaos, colores, etc.), es universal, cual es la cantidad
de conos necesaria, etc.
La dimensin sintctica estudia la relacin del signo con su sistema y
la relacin que guardan con su propia estructura. Para estudiar esta
dimensin tenemos que tener en cuenta la configuracin formal,
coordinacin entre elementos compositivos, formato, recursos
grficos, color, proporcin, dimensin, movimiento, etc. Por ejemplo,
todos los conos de una aplicacin deberan ser diseados segn una
norma comn.
Interfaces grficas de usuario para dispositivos de pequeo
tamao.
Cada vez es ms comn la necesidad de desarrollar GUIs para
dispositivos de pequeo tamao como PDAs o celulares.
Normalmente los fabricantes de dispositivos o de lenguajes de
programacin orientados al desarrollo de aplicaciones generan
documentos o guas de estilo para el diseo sobre los mismos.
Normalmente las claves de diseo son similares a las de GUIs
tradicionales, con la diferencia que se debe considerar dos aspectos:
el tamao y la interaccin.
En este ltimo aspecto, de la interaccin, note que para el caso de los
celulares las consideraciones de diseo deberan ir hacia GUIs que
manejen nmeros ms que caracteres alfabticos por la especial
configuracin del teclado.
Las otras interfaces.
En el Modelo de Anlisis presentado al inicio de este punto se
mostraba por un lado la relacin del software con un actor humano y,
en el otro extremo, la relacin con un actor que representaba
funcionalidad de otro sistema.
El diseo de las interfaces que relacionan nuestro sistema con otros
es un tema que generalmente se define en base a protocolos de
comunicacin.
Por ejemplo, cuando diseamos un sistema que tiene un cliente
enriquecido que hace uso de la informacin de un servidor. En este
caso lo que normalmente se disea es el protocolo de comunicacin.
Es decir que ambos sistemas se comuniquen fiablemente.
Lenguajes de especificacin de diseo de GUIs
Captulo 3. Orientacin a Objetos

Pgina 3 de 5

Diseo de Software

Gustavo A. Donoso M.

Si bien no existe un lenguaje estndar de diseo de GUIs, es factible

desarrollar uno usando los elementos usuales disponibles. Por
ejemplo: el siguiente cuadro resume alguna iconografa til para
aquello.
LabeloEtiquetadetexto

Etiquetadetexto

TextBoxoCuadrodetexto
CuadrodePassword

******

ComboBoxoListadesplegable
CheckBoxoCasilladeverificacin

checkbox

OptiongroupoBotnderadio

optiongroup

CommandButtonoBotn

Botn

Linkoenlacedehipertexto

Enlacedehipertexto

ListBoxoCuadrodelista

ItemN1
ItemN2
ItemN3

TextAreaoAreadetexto

Textareaocuadrode
textoconmultiples
lineasdetexto|

Imgen

La idea del diseo, desde la perspectiva de las GUIs es poder

especificar en forma general los elementos que componen las
interfaces de una manera rpida y fiable.
Formato 4:3 vs. 16:9
La historia de la lucha del cine y la televisin tiene muchos captulos y
ste es uno que nos afectar.
Cuenta la leyenda que el cine adopt el formato 16:9 para combatir la
irrupcin de la televisin. Que dadas las limitaciones del tubo de
rayos catdicos el formato admisible es el de la pantalla cuadrada,
con lo que se evitan distorsiones. Para diferenciarse, el cine adopta el
formato 16:9 WideScreen.
Actualmente, al usarse tecnologa LCD, las limitaciones de las
pantallas de televisin al formato 4:3 desaparecen y poco a poco
vamos observando que los televisores se estn fabricando planos y
en formato 16:9.
Pero eso es muy probable que signifique que las pantallas de
computador tambin se vean afectadas. Y ya no sea el clsico
impedimento fsico del CRT el que mande y se imponga tambin

Captulo 3. Orientacin a Objetos

Pgina 4 de 5

Diseo de Software

Gustavo A. Donoso M.

pantallas con formato 16:9 para los computadores, es claro que habr
una convergencia tele-computador.
Y eso significa que tendremos otro escenario para el diseo de GUIs.
Pantallas distintas: widescreen.
Disearas GUIs para 4:3 o para 16:9?

Captulo 3. Orientacin a Objetos

Pgina 5 de 5