Diseo de Software Gustavo A. Donoso M.

Diseo de SoftwareGustavo 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:

LogindeUsuario

AutentificarUsuario

Usuario

ErrordeAutentificacin

RegistrodeUsuario

RegistrodeUsuario

ErrordeRegistro

Visitante

entidad

control

interface

ConsultaHuellaDactilar

SistemadeRegistrodeHuellaDactilar

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

TextBoxoCuadrodetexto

Etiquetadetexto

ComboBoxoListadesplegable

CuadrodePassword ******

CheckBoxoCasilladeverificacin

OptiongroupoBotnderadio

checkbox

optiongroup

CommandButtonoBotn Botn

TextAreaoAreadetexto

ItemN1ItemN2ItemN3

Textareaocuadrodetextoconmultipleslineasdetexto|

ListBoxoCuadrodelista

Linkoenlacedehipertexto Enlacedehipertexto

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