310 PAR T E DOS MO D E LADO
Jamie: Genial… Eso es justo lo que necesito para resolver el pro- con ciertos aspectos de seguridad. Pienso que es porque se crea un
blema. ¿Dónde lo encuentro? canal de control separado y de ese modo se evaden los mecanismos
Vinod: Está disponible en un repositorio en línea. Ésta es la URL. normales de seguridad de web.
Jamie: Iré a revisarlo. Jamie: Buena observación. Es probable que no se me hubiera
ocurrido… Gracias.
Vinod: Sí, pero recuerda revisar el campo de consecuencias para
el patrón. Creo recordar que había algo acerca de tener cuidado
12. 5 PATRONES DE DISEÑO DE LA INTER FAZ DE USUARIO
En los últimos años, se han propuesto cientos de patrones de interfaz de usuario (IU). La mayo-
ría se ubican en una de las siguientes 10 categorías (se estudian con un ejemplo representativo)8
según los describen Tidwell [Tid02] y VanWelie[Wel01]:
Whole UI. Proporciona una guía para diseñar la estructura y navegación de alto nivel a tra-
vés de toda la interfaz.
Patrón: NavegacióndeAltoNivel (TopLevelNavigation)
Descripción breve: Se usa cuando un sitio o aplicación implementa cierto número de
funciones importantes. Da un menú de alto nivel, acoplado con frecuencia con un logotipo
o gráfico identificador que permite la navegación directa hacia cualquiera de las funciones
principales del sistema.
Detalles: Las funciones importantes (por lo general limitadas a tener de cuatro a siete
nombres de función) se enlistan en la parte superior de la pantalla (también es posible te-
ner formatos en columnas verticales) en un renglón de texto horizontal. Cada nombre da
un vínculo hacia la función o fuente de información apropiada. Es frecuente usarla con el
patrón MigajasdePan (BreadCrumbs) que se estudia más adelante.
Elementos de navegación: Cada nombre de función o contenido representa un vínculo
hacia la función o contenido apropiados.
Distribución de la página. Se aboca a la organización general de páginas (para sitios web)
o de distintas pantallas (para aplicaciones interactivas).
Patrón: ApilarTarjetas (CardStack)
Descripción breve: Se utiliza cuando deben seleccionarse aleatoriamente cierto número
de subfunciones o categorías de contenido específicas relacionadas con una característica
o función. Tiene la apariencia de una pila de tarjetas con “pestaña”, cada una seleccionable
con un clic del ratón, que representan subfunciones o categorías de contenido específicas.
Detalles: Las tarjetas con pestañas son una metáfora bien entendida y son fáciles de ma-
nipular por parte del usuario. Cada tarjeta con su pestaña (divisor) tiene un formato ligera-
mente diferente. Algunas requieren de entradas y tienen botones u otros mecanismos de
navegación; otras más son informativas. Pueden combinarse con otros patrones, tales
como ListaDesplegable y LlenarLosEspacios, entre otros.
Elementos de navegación: Un clic en una pestaña hace que aparezca la tarjeta apro-
piada. También están presentes características de navegación dentro de la tarjeta, pero en
general éstas deben iniciar una función relacionada con los datos de la tarjeta, no estable-
cer un vínculo real hacia otra pantalla.
8 Aquí se utiliza un formato del patrón abreviado. En [Tid02] y [Wel01] se encuentran descripciones del patrón
completo (así como decenas de otros patrones).
12Pressman(295-316).indd 310 14/1/10 [Link]
C AP Í T UL O 12 DISEÑO BASADO EN PAT RONES 311
Formatos y entrada. Considera varias técnicas de diseño para llenar las entradas en el ni-
vel de formato.
Patrón: Llenar los espacios
Descripción breve: Permite introducir datos alfanuméricos en un “cuadro de texto”.
Detalles: Los datos entran en un cuadro de texto. En general, se validan y procesan des-
pués de pulsar algún indicador de texto o gráfico (como un botón que diga “ir”, “enviar”,
“siguiente”, etc.). En muchos casos, este patrón se combina con una lista desplegable u
otros patrones (por ejemplo, BUSCAR <lista desplegable> PARA <llenar los espacios del cua-
dro de texto>).
Elementos de navegación: Indicador de texto o gráfico que inicia la validación y el pro-
cesamiento.
Tablas. Dan una guía para el diseño a fin de crear y manipular datos tabulares de todo tipo.
Patrón: OrdenarTabla (SortableTable)
Descripción breve: Despliega una lista larga de registros que pueden ordenarse por me-
dio de un mecanismo de cambio para cualquier etiqueta de columna.
Detalles: Cada renglón de la tabla representa un registro completo. Cada columna repre-
senta un campo del registro. Cada encabezado de columna en realidad es un botón selec-
cionable que se pulsa para iniciar un ordenamiento ascendente o descendente en el campo
asociado con la columna para todos los registros desplegados. Por lo general, la tabla es
ajustable y tiene algún mecanismo de desplazamiento para el caso de que el número de re-
gistros sea más grande que el espacio disponible en la ventana.
Elementos de navegación: Cada encabezado de columna inicia el ordenamiento de to-
dos los registros. No se da otro elemento de navegación, aunque en ciertos casos cada re-
gistro contiene vínculos de navegación hacia otro contenido o funciones.
Manipulación directa de los datos. Se aboca a la edición, modificación y transformación
de los datos.
Patrón: MigajasdePan (BreadCrumbs)
Descripción breve: Brinda una ruta completa de navegación cuando el usuario trabaja
con una jerarquía compleja de páginas o pantallas.
Detalles: Se da a cada página o pantalla un identificador único. La ruta de navegación ha-
cia la ubicación actual se especifica en una ubicación predefinida para cada pantalla. La
ruta tiene la forma siguiente: página inicial>página del tema principal>página del
subtema>página específica>página actual.
Elementos de navegación: Cualquiera de las entradas en la pantalla de las migajas de
pan puede usarse como un apuntador hacia el vínculo de regreso hacia un nivel más alto
de la jerarquía.
Navegación. Ayuda al usuario a navegar a través de menús jerárquicos, páginas web y pan-
tallas interactivas.
Patrón: Editar (EditInPlace)
Descripción breve: Brinda capacidades de edición de texto sencillo para ciertos tipos de
contenido en la ubicación que se muestra en la pantalla. No es necesario que el usuario in-
troduzca explícitamente alguna función de edición de texto o algún modo.
Detalles: El usuario observa en la pantalla el contenido que debe modificarse. Con un doble
clic en el contenido, se indica al sistema que se desea editar. El contenido se resalta para in-
dicar que el modo de edición está activado para que el usuario haga los cambios apropiados.
Elementos de navegación: Ninguno.
12Pressman(295-316).indd 311 14/1/10 [Link]
312 PAR T E DOS MO D E LADO
Búsqueda. Permite hacer búsquedas de contenido específico a través de información con-
servada en un sitio web o que está contenida en almacenamientos persistentes de datos acce-
sibles a través de una aplicación interactiva.
Patrón: BúsquedaSimple (SimpleSearch)
Descripción breve: Da la capacidad de buscar un sitio web o fuente persistente de datos
para un concepto simple de datos descritos por una cadena alfanumérica.
Detalles: Brinda la capacidad de hacer una búsqueda local (una página o un archivo) o
global (todo el sitio o la base de datos completa) para la cadena de búsqueda. Genera una
lista de “aciertos” ordenados según su probabilidad de satisfacer las necesidades del usua-
rio. No hace búsquedas de conceptos múltiples o con operaciones booleanas especiales
(véase patrón de búsqueda avanzada).
Elementos de navegación: Cada entrada de la lista representa un vínculo de navegación
hacia los datos a los que se hace referencia con la entrada.
Elementos de página. Implanta elementos específicos de una página web o de una panta-
lla del monitor.
Patrón: Mago (Wizard)
Descripción breve: Lleva al usuario paso a paso a través de una tarea compleja y lo guía
para que la termine por medio de ventanas sencillas en la pantalla.
Detalles: El ejemplo clásico es un proceso de registro de cuatro etapas. El patrón mago
genera una ventana en cada una de ellas, en las que solicita información del usuario paso a
paso.
Elementos de navegación: La navegación hacia delante y atrás permite que el usuario
vuelva a cada etapa en el proceso mago.
Comercio electrónico. Específicos para sitios web, estos patrones implementan elementos
recurrentes de las aplicaciones de comercio electrónico.
Patrón: CarritodeCompras (ShoppingCart)
Descripción breve: Da una lista de artículos seleccionados para compra.
Detalles: Enlista artículos, cantidad, código del producto, disponibilidad (en inventario,
fuera de inventario), precio, información para la entrega, costos de envío y otra informa-
ción relevante para la compra. También da la facilidad de editar (por ejemplo, retirar, cam-
biar la cantidad, etcétera).
Elementos de navegación: Contiene la capacidad de continuar la compra o salir.
Varios. Son patrones que no se ajustan fácilmente a ninguna de las categorías anteriores.
En ciertos casos, dependen del dominio u ocurren sólo para clases específicas de usuarios.
Patrón: IndicadordeAvance (ProgressIndicator)
Descripción breve: Proporciona una indicación del avance cuando una operación dura
más de n segundos.
Detalles: Se representa con un icono animado o cuadro de mensaje que contiene alguna
indicación visual (por ejemplo, una “barra de peluquero”, barra de avance con indicador de
porcentaje, etc.) de que el procesamiento está en curso. También contiene una indicación
de texto acerca del estado del procesamiento.
Elementos de navegación: Es frecuente que contenga un botón que permita al usuario
hacer una pausa o cancelar el procesamiento.
Cada uno de los ejemplos de patrones anteriores (y todos los de cada categoría) también pueden
tener un diseño completo en el nivel de componentes, incluso clases de diseño, atributos, ope-
raciones e interfaces.
12Pressman(295-316).indd 312 14/1/10 [Link]
C AP Í T UL O 12 DISEÑO BASADO EN PAT RONES 313
El estudio exhaustivo de los patrones de interfaz de usuario se encuentra más allá del alcance
de este libro. Si el lector está interesado, se le recomienda consultar a [Duy02], [Bor01], [Tid02]
y [Wel01].
12. 6 PATRONES DE DISEÑO DE WEBAPP
En este capítulo aprendimos que hay cuatro tipos diferentes de patrones y muchas formas de
clasificarlos. Cuando se consideran los problemas de diseño que deben resolverse para construir
una webapp, es bueno considerar categorías de patrones en dos dimensiones: centrarse en el
diseño del patrón y en el nivel de granularidad. Centrarse en el diseño identifica cuál aspecto del
modelo del diseño es relevante (por ejemplo, arquitectura de la información, navegación e in-
teracción). La granularidad determina el nivel de abstracción que se considera (¿el patrón se
aplica a toda la webapp, a una sola página web, a un subsistema o a un componente individual
de la webapp?)
12.6.1 Centrarse en el diseño
PU En los capítulos anteriores se hizo énfasis en un avance del diseño que comienza por tomar en
NT
O cuenta la arquitectura, aspectos en el nivel del componente y representaciones de la interfaz de
CLAVE usuario. En cada paso se consideran los problemas y soluciones propuestos para comenzar en
La atención se hace “más fina” a un nivel alto de abstracción a fin de pasar poco a poco a otro más detallado y específico. En otras
medida que se avanza en el diseño.
palabras, el diseño se “angosta” a medida que avanza. Los problemas (y soluciones) que se
encontrarán cuando se diseñe una arquitectura de información para una webapp serán diferen-
tes de aquellos que aparecen cuando se diseña una interfaz. Por tanto, no debe sorprender que
los patrones para el diseño de webapps se desarrollen para distintos niveles de atención, de
modo que se aborden los problemas (y sus soluciones) únicos que se encuentren en cada nivel.
Los patrones de webapps se clasifican con el empleo de los siguientes niveles de atención en el
diseño:
• Patrones de arquitectura de la información: se relacionan con la estructura general
del espacio de información y con las formas en las que los usuarios interactúan con
ésta.
• Patrones de navegación: definen estructuras de los vínculos de navegación, tales
como jerarquías, anillos, recorridos, etcétera.
• Patrones de interacción: contribuyen al diseño de la interfaz de usuario. Los patrones
en esta categoría se enfrentan al modo en el que la interfaz informa al usuario de las
consecuencias de una acción específica, cómo expande el usuario el contenido con base
en el empleo del contexto y sus deseos, la mejor manera de describir el destino implícito
por un vínculo, la manera de informar al usuario acerca del estado de una interacción en
curso y aspectos relacionados con la interfaz.
• Patrones de presentación: ayudan a presentar el contenido al usuario a través de la
interfaz. Los patrones en esta categoría se abocan al modo de organizar las funciones de
control de la interfaz de usuario para mejorar su uso, a mostrar la relación entre una
acción de la interfaz y los objetos de contenido a los que afecta y a la forma de esta-
blecer jerarquías eficaces del contenido.
• Patrones funcionales: definen los flujos de trabajo, comportamientos, procesamiento,
comunicación y otros elementos algorítmicos dentro de una webapp.
En la mayoría de casos, sería inútil explorar la colección de patrones de arquitectura de la infor-
mación cuando se encuentra un problema en el diseño de la interacción. Se estudiarían los
12Pressman(295-316).indd 313 14/1/10 [Link]
