Un vocabulario visual

para describir arquitectura de informacin y diseo de

interaccin
versin 1.1b (6 de marzo 2002)
esse ames !arrett
(contact)
Versin original en ingls
Traduccin al castellano por Javier Velasco
"abla de #ontenidos
1. Resumen
2. Historia de versiones
3. Consideraciones iniciales
4. Trasfondo conceptual
. !lementos simples" paginas# documentos $ pilas de stos
%. Creando relaciones" conectores $ flec&as
'. Todo de una ve(" con)untos concurrentes
*. +epar,ndolo" puntos de continuacin
-. !lementos comunes" ,reas $ ,reas iterativas
1.. Componentes re/utili(a0les" ,reas de flu)o $ referencias
11. Conceptos 0,sicos para elementos condicionales
12. Haciendo elecciones" puntos de decisin
13. 1uscando camino" conectores $ flec&as condicionales
14. !leccin m2ltiple" ramas condicionales
1. !lige uno o m,s" selectores condicionales
1%. 3na decisin# muc&os caminos" racimos
1'. 4lgunas restricciones pueden aplicar" ,reas condicionales
1*. Conclusin
1-. 5i0rer6as descarg0les de formas
$esumen
5os diagramas son una &erramienta esencial para comunicar ar7uitectura de informacin $ dise8o de
interaccin en e7uipos de desarrollo 9e0. !ste documento trata las consideraciones en el desarrollo de
tales diagramas# delinea una sim0olog6a 0,sica para diagramar conceptos de ar7uitectura de informacin
$ dise8o de interaccin# $ entrega gu6as para el uso de estos elementos.
%istoria de versiones
1.1b :% ;ar 2..2<
=nformacin so0re soporte incorporado en >mni?raffle 2..
@ueva li0rer6a de formas para i?rafA BloCc&arter
1.1a :1' +ep 2..1<
@ueva li0rer6as de formas para ;acromedia BreeHand
1
Du0licada &o)a de trucos $ template de formas DEB
1.1 :31 !ne 2..1<
4gregado el elemento pila de arc&ivos
4gregado el elemento selector condicional
;odificado el elemento flec&a para permitir m2ltiples puntas de flec&a
;odificado el comportamiento del elemento racimo de tal forma 7ue a&ora slo aparece flu)o
a0a)o desde un selector o rama condicional
;odificado el comportamiento del elemento rama condicional para permitir un resultado nulo
@umerosas me)oras a las li0rer6as de formas
@ueva li0rer6a de formas para 4do0e =nEesign
1.0 :1' >ct 2...<
Du0licacin inicial
#onsideraciones iniciales
3n voca0ulario visual es un con)unto de s6m0olos usado para descri0ir algo :usualmente un sistema#
estructura o proceso<. !l voca0ulario descrito a7u6 puede ser usado por un ar7uitecto de informacin o
dise8ador de interaccin para descri0ir# en un nivel alto# la estructura $Fo flu)o de la eAperiencia de
usuario de un sitio 9e0.
!stas descripciones# o diagramas son usados por cinco audiencias primarias"
&nversionistas y 'erentes de proyecto# los utili(an para o0tener un sentido general del alcance $
forma del pro$ecto.
(roductores de #ontenido# los usan para derivar los re7uerimientos de contenido.
)ise*adores visuales y de interfaces# los utili(an para derivar una cuenta de cu,ntos dise8os de
pagina 2nicos de0en ser producidos $ o0tener un sentido inicial de los re7uerimientos de
navegacin e interfa( para estos dise8os.
"ecnol'os# los utili(an para derivar re7uerimientos funcionales.
+rquitectos de informacin y dise*adores de interfaz los usan para desarrollar re7uerimientos
detallados de navegacin e interfa( para cada p,gina.
Cada una de estas audiencias :eAceptuando los inversionistas< necesita gran cantidad de detalle para
&acer su tra0a)o. !l pro0lema es 7ue el detalle 7ue cada audiencia re7uiere var6a en gran manera del
detalle re7uerido por los otros# $ la ma$or6a de este detalle es irrelevante para las necesidades de otras
audiencias.
!l enfo7ue sensi0le es limitar el detalle en el diagrama a lo 7ue puede ser 2tilmente aplicado por todas
las audiencias. !l diagrama por lo tanto sirve como un documento &ito para el desarrollo de documentos
m,s detallados# espec6ficos a las necesidades de cada audiencia.
>tros re7uerimientos clave de un voca0ulario visual para ar7uitectura de informacin $ dise8o de
interaccin inclu$en"
#ompatible con pizarra blanca, !l voca0ulario de0er6a ser tan simple 7ue los diagramas
puedan ser di0u)ados r,pidamente a mano. 5os elementos del voca0ulario de0ieran ser
suficientemente distintos entre s6 para 7ue un di0u)o medianamente malo no comprometa la
claridad del diagrama.
&ndependiente de -erramienta, !l voca0ulario de0iera estar dise8ado de forma 7ue no re7uiera
de softCare especiali(ado para construir diagramas. !l voca0ulario no de0iera favorecer el uso de
una &erramienta particular de softCare# sino permitir a los ar7uitectos utili(ar las &erramientas
m,s cmodas a ellos.
2
(eque*o y auto.contenido, Dor7ue estos diagramas son usados por una amplia gama de
audiencias con diferentes niveles de conocimiento :o incluso inters< en sistemas de diagramas
usados en otras ,reas de desarrollo tcnico# el voca0ulario no de0iera re7uerir tal conocimiento o
inters. !l total de los elementos de0e ser mantenido al m6nimo posi0le# manteniendo una estricta
relacin uno/a/uno entre conceptos $ s6m0olos# para 7ue el voca0ulario pueda ser aprendido $
aplicado en forma r,pida. 5os conceptos eApresados por el diagrama pueden ser ar0itrariamente
comple)osG el medio de su eApresin no de0e serlo.
"rasfondo conceptual
4r7uitectura de informacin $ dise8o de interaccin son dos caras de la misma moneda. :Ver H5os
!lementos de la !Aperiencia de 3suarioH para definiciones de los trminos como son usados a7u6.< 5os
diagramas de sitios contempor,neos inevita0lemente involucran am0as caras. Dero para cada una# los
o0)etivos del diagrama son levemente diferentes.
!n am0os casos# el diagrama se enfoca en lo 7ue llamamos la macro.estructura# entregando slo
detalle suficiente para permitir a los miem0ros del e7uipo ver la Hgran fotoH. 5a tarea del ar7uitecto es
determinar el nivel apropiado de detalle para lograr este o0)etivo. !l detalle espec6fico a nivel de p,gina
o micro.estructura# es detallado en otros documentos de los cuales el ar7uitecto puede no ser
directamente responsa0le de desarrollar.
Cuando descri0imos ar7uitectura de informacin# el diagrama de0iera enfati(ar la estructura conceptual
$ organi(acin del contenido. @tese 7ue la estructura conceptual no es lo mismo 7ue la organi(acin de
navegacin. !l o0)etivo del diagrama de ar7uitectura de informacin no es entregar una especificacin
de navegacin completaG este detalle es me)or puesto en otros documentos# donde cauce menos riesgo de
confundir $ distraer.
Cuando descri0imos dise8o de interaccin# el diagrama de0iera enfati(ar cmo el usuario flu$e a travs
de tareas definidas# $ lo 7ue son los pasos discretos en estas tareas. Tal como con la navegacin# los
detalles de interfa( no de0ieran aparecer en el diagrama / si te encuentras di0u)ando 0otones $ campos#
pro0a0lemente est,s cargando el diagrama con un eAceso de detalle.
!ste voca0ulario est, 0asado en un modelo conceptual simple a0arcando tanto ar7uitectura de
informacin como dise8o de interaccin"
4l sistema presenta al usuario caminos.
!l usuario se mueve a travs de estos caminos mediante acciones.
!stas acciones entonces causan al sistema a generar resultados.
/lementos simples, pa'inas0 documentos y pilas de 1stos
5a unidad 0,sica de la eAperiencia de usuario en la 9e0 es por supuesto# la pa'ina# la cual
representamos con un simple rect,ngulo. @tese 7ue la pagina es una unidad de presentacin# no
:necesariamente< una unidad de implementacin // una pagina en tu diagrama puede representar
m2ltiples arc&ivos HT;5 :como en una interfa( con frames< o unidades m2ltiples de cdigo :como en
includes en el servidor // ++= // o una implementacin mane)ada por 0ases de datos<.
4dem,s de paginas# tam0in &a$ arc-ivos# parcelas de datos sin propiedades de navegacin. !stos
arc&ivos son entregados al usuario para su uso fuera de un am0iente de navegador 9e0# 0roCser :tales
como arc&ivos de video# arc&ivos independientes como DEBs e)ecuta0les<. Dara estos# usamos nuestro
vie)o amigo el icono con ore)a de perro.
3
2i'ura 1a, [izquierda] 5a pagina $ el documento
2i'ura 1b, [derecha] 5a pila de paginas $ la pila de documentos
3sa una pila de pa'inas para indicar un grupo de paginas funcionalmente idnticas cu$as propiedades
de navegacin son inmateriales a la macro/estructura del sitio. +imilarmente# una pila de documentos
representa un grupo de documentos 7ue reci0en tratamiento de navegacin idntico $ pueden ser
clasificadas como una entidad 2nica :tal como una coleccin de )uegos descarga0les o una li0rer6a de
manuales de instrucciones en DEB<.
3samos etiquetas en paginas $ arc&ivos para identificarlos. Istas no tienen la necesidad de ser una
correlacin con designaciones como el elemento JT=T5!K HT;5 o nom0res de documentos# pero
de0en ser 2nicos para cada p,gina o documento en el diagrama. =dentificadores numricos 2nicos $
designaciones de tipo tam0in entregan una 0uena forma de llevar el rastro todas las paginas $
documentos en tu diagrama.
#reando relaciones, conectores y flec-as
5as relaciones entre los elementos son ilustradas mediante l6neas simples o conectores. !stas relaciones
conceptuales se traducir,n inevita0lemente en relaciones de navegacin // pero no todas las relaciones
de navegacin aparecer,n en el diagrama.
!n el caso de la ar7uitectura de informacin# stas relaciones est,n com2nmente refle)adas a travs de la
organi(acin )er,r7uica de paginas en ,r0oles. +in em0argo# esto de ninguna manera es o0ligatorio ni :en
algunos casos< recomenda0le.
2i'ura 2a, [izquierda] 3na estructura simple de ,r0ol
2i'ura 2b, [derecha] 5a misma estructura diagramada de forma diferente
Cuando diagramamos dise8o de interaccin# nuestras l6neas tam0in de0en indicar direccin para
indicar cmo el usuario se mover, a travs del sistema por una tarea particular. Transformando nuestros
conectores en flec-as &ar, el truco de forma limpia. 3samos los trminos corriente aba3o $ corriente
arriba para referirnos a la posicin de los elementos relativa a este movimiento &acia adelante.
@tese 7ue estas flec&as no son como las flec&as 7ue indican una calle de un solo sentido# m,s 0ien son
como las flec&as 7ue indican el camino &acia el patio de comida en el centro comercial. !l usuario no
est, impedido de moverse en direccin opuestaG la flec&a indica solamente la direccin en la cual el
usuario pro0a0lemente 7uerr, ir.
4
2i'ura 4a, [arriba izquierda] Blec&a indica movimiento corriente a0a)o &acia el fin de la tarea
2i'ura 4b, [abajo izquierda] 1arra cru(ada indica 7ue el movimiento corriente arri0a no est, permitido
2i'ura 4c, [derecha] Blec&as m2ltiples clarifican la direccin
+i por alguna ra(n 7ueremos pro&i0ir el movimiento corriente arri0a :como en los casos donde alguna
accin irreversi0le como eliminar un registro &a tomado lugar<# usamos una barra cruzada :slo una
corta l6nea perpendicular< en el eAtremo opuesto a la punta de la flec&a para indicar esto.
!n algunos casos# puede ser necesario agregar una punta de flec&a adicional cerca de la p,gina corriente
arri0a para clarificar la direccin del flu)o en una ar7uitectura m,s comple)a. :3na nota pr,ctica" muc&as
aplicaciones de diagramacin no permiten al usuario encadenar dos flec&as de esta manera. Dara
solucionar esto# las li0rer6as de formas inclu$en un elemento Hpunto de gomaH# un elemento invisi0le
7ue consiste en un punto 2nico de coneAin. 3sa este elemento para unir dos flec&as.<
5os conectores $ flec&as tam0in pueden ser eti7uetados# pero el uso de stas de0e ser limitado a casos
en los cuales la accin tomada por el usuario necesita ser clarificada. +i las eti7uetas se tornan largas#
son muc&as $ comien(an a so0recargar el diagrama# apunta al lector &acia una nota al pie o una
referencia en un aneAo.
!n los e)emplos dados en este documento# referencias al pie de pa'ina y en ane5os aparecer,n como
una com0inacin de n2mero $ letra entre parntesis. 5os n2meros se refieren a la pagina de diagrama en
la cual la referencia apareceG las letras se refieren a la nota espec6fica. Dor e)emplo# la primera nota en la
p,gina 3 de un diagrama de0er6a ser referida como :3a<# la segunda :30< $ as6 en adelante.
2i'ura 6a, [izquierda] 3na eti7ueta superflua
2i'ura 6b, [centro] 3na eti7ueta 2til
2i'ura 6c, [derecha] 3na referencia al pie o aneAo
"odo de una vez, con3untos concurrentes
3n con3unto concurrente :representado por el semi/c6rculo< es usado en casos cuando una accin del
usuario genera resultados m2ltiples simult,neos :tal como a0rir una ventana pop/up mientras una p,gina
se carga en la ventana principal# o mostrar una pagina mientras un documento es descargado<.

2i'ura 7, 3n con)unto concurrente

Como las flec&as# los con)untos concurrentes tienen direccin. !lementos corriente arri0a se conectan al
lado curvoG elementos corriente a0a)o se conectan al lado plano.
8epar9ndolo, puntos de continuacin
5os ar7uitectos de informacin se encuentran a menudo deseando &o)as de papel m,s grandes para
diagramar su tra0a)o. Dero aun si dispositivos de salida de gran formato como plotters fueran
ampliamente disponi0les# algunas ar7uitecturas son simplemente mu$ comple)as para ser capturadas en
un diagrama 2nico 7ue lo inclu$a todo.
Dara permitirnos separar nuestros diagramas en secciones f,ciles de digerir# usamos puntos de
continuacin :parntesis cuadrado< para unir los vac6os entre las p,ginas.
2i'ura 6a, [izquierda] 3n punto Hcontin2a &aciaH referencia al lector &acia otro diagrama
2i'ura 6b, [derecha] 3n punto Hcontin2a desdeH# retomando desde donde salimos de %a
3n punto de continuacin 2nico puede listar una o m,s fuentes o destinos seg2n se necesite. 5a
orientacin de los corc&etes :&ori(ontal $ vertical< no tiene significado particularG la eleccin de
orientacin es pro0lema del )uicio esttico del ar7uitecto.
/lementos comunes, 9reas y 9reas iterativas
!l elemento 9rea :un rect,ngulo de es7uinas redondeadas< es usado para identificar un grupo de paginas
7ue comparten uno o m,s atri0utos comunes :tales como aparecer en una ventana pop/up# o tener un
tratamiento 2nico de dise8o<. 3sa eti7uetas para identificar estos atri0utos o :como con los conectores<#
&a( referencias a notas fuera del documento si tienes muc&o 7ue decir.
%
2i'ura :, 3n e)emplo de uso de un ,rea para representar una ventana pop/up
;uc&as ar7uitecturas inclu$en repetir la misma estructura 0,sica tal como es aplicada a un n2mero de
elementos de informacin funcionalmente idnticos. Dor e)emplo# puedes tener un cat,logo de productos
en el cual cada producto tiene varias p,ginas asociadas a l. Dodr6as di0u)ar una instancia de esta
estructura para cada producto# pero# Lpor 7u perder el tiempoM +implemente usa un 9rea iterativa //
una pila de rect,ngulos con es7uinas redondeadas // en ve(.
2i'ura ;, 3n e)emplo de uso de un ,rea iterativa para representar una estructura repetida en un cat,logo de productos
@tese 7ue conectores $ flec&as no apuntan a las ,reas mismas. 5os elementos de ,rea slo sirven para
encerrar las paginas. 5as ,reas de0en ser aplicadas con cuidado# es mu$ f,cil pillarse capturando toda
clase de detalles con elementos de ,rea 7ue no se manifiestan en la eAperiencia de usuario :tal como 7u
p,ginas son alo)adas en cu,les servidores< o de otra manera interfieren con el o0)etivo general del
diagrama de comunicar la macro/estructura.
#omponentes re.utilizables, 9reas de flu3o y referencias
4lgunos dise8os de interaccin re7uieren 7ue una secuencia de pasos :como por e)emplo# un
procedimiento de login< apare(ca repetidamente en diferentes conteAtos a travs del dise8o. 4 menudo
estas secuencias son meramente un componente de una o m,s tareas 7ue el usuario est, tratando de
lograr. :!sto es an,logo al concepto de su0/rutina en programacin de ordenadores<.
Tal ,rea re/utili(a0le es llamada un flu3o# $ es representada en el diagrama mediante dos elementos" el
9rea de flu3o# 7ue encierra el flu)o mismoG $ la referencia de flu3o# 7ue sirve como marcador para el
flu)o en cada conteAto en el cual se repite. 4m0os elementos tienen la misma forma 0,sica# un
rect,ngulo con las es7uinas cortadas :o# si prefieres# un oct,gono desfigurado<.
'
2i'ura <a, [izquierda] 3na referencia de flu)o sirve tanto como punto Hcontin2a &astaH# como punto Hcontin2a desdeH
2i'ura <b, [derecha] !l ,rea de flu)o referida en -a
5as ,reas de flu)o tam0in re7uieren el uso de dos tipos de puntos de continuacin especiales" puntos de
entrada $ puntos de salida. Istos son u0icados fuera del ,rea de flu)o# mientras los puntos de
continuacin# dentro del ,rea de flu)o# indican 7ue el flu)o a0arca m2ltiples diagramas.
5as referencias de flu)o en s6 mismas funcionan de manera mu$ similar a los puntos de continuacin. !l
o0)etivo de am0os tipos de elementos es el mismo" permitir al ar7uitecto cortar el diagrama en p,ginas.
5a diferencia es 7ue una referencia de flu)o puede ser usada en am0as modalidadesG Hcontinua desdeH $
Hcontinua &astaH# mientras 7ue un punto de continuacin puede slo ser uno 2 otro. +i no necesitas un
elemento 7ue tenga am0os roles# pro0a0lemente no necesitas usar un flu)o.
#onceptos b9sicos para elementos condicionales
Con cada ve( ma$or frecuencia# las ar7uitecturas de informacin $ dise8os de interaccin son
reformados de manera din,mica por el sistema mientras el usuario se mueve a travs del sitio. !sta
reformacin es lograda mediante l'ica condicional# $ los elementos restantes de este voca0ulario son
espec6ficos a estructuras de lgica condicional. He a7u6 un modelo conceptual 0,sico para la aplicacin
de elementos condicionales"
!l sistema sigue la pista a uno o m,s atributos# estos atri0utos pueden ser particulares a"

o el usuario :tal como el tipo de usuario<

o la sesin :tal como el estado del login<
o el contenido siendo accedido :tal como materia tem,tica<
o o pueden eAistir Hen el mundoH :tal como la &ora $ fec&a<.
5os atri0utos tienen valores :H3 p.m.H es un valor posi0le para H&ora del d6aH<.
5a asociacin de un atri0uto con un valor particular es llamada una condicin.
5as condiciones son evaluadas por el sistema para determinar si son verdaderas.
!n una ar7uitectura est,tica# cada camino es presentado a todos los usuarios 0a)o toda circunstancia# $
cada camino conduce al mismo resultado. !n una estructura din,mica# el sistema decide cu,les caminos
o resultados son presentados al usuario 0asado en la evaluacin de una o m,s condiciones.
Dara minimi(ar la so0recarga en nuestros diagramas# estas condiciones son t6picamente descritas en una
nota al pie o aneAo 7ue acompa8a al diagrama.
*
%aciendo elecciones, puntos de decisin
Cuando una accin de un usuario puede generar uno de un numero de resultados# el sistema de0e tomar
una decisin acerca de cu,l resultado de0e presentar. :Dro0a0lemente el e)emplo m,s com2n de esto es
mane)o de errores en el envi de formularios.< 5lamamos a esto un punto de decisin# $ como en
diagramas de flu)o tradicionales# es representado por un diamante.
2i'ura 10, 3n e)emplo de uso de un punto de decisin en una secuencia de login
@tese 7ue las fec&as deben ser usadas en con)unto con los puntos de decisin# para clarificar si los
elementos asociados se encuentra corriente arri0a o corriente a0a)o desde el punto de decisin.
=uscando camino, conectores y flec-as condicionales
3n conector condicional :representado por una l6nea cortada< es usado cuando un camino puede ser o
no ser presentado al usuario dependiendo de si una o m,s condiciones son cumplidas.
2i'ura 11a, [izquierda] 3n conector condicional
2i'ura 11b, [derecha] 3na flec&a condicional
Dor e)emplo# puede &a0er una p,gina 7ue contenga informacin sensi0le 7ue slo puede ser vista por
empleados de la compa86a. 5a condicin en este caso ser6a el tipo de usuario :empleado<G si la condicin
se cumple# el camino se &ace disponi0le. +i no# no eAiste camino.
/leccin m>ltiple, ramas condicionales
Cuando un sistema de0e seleccionar un camino entre un numero de opciones mutuamente eAclusivas a
ser presentadas al usuario# usamos una rama condicional :tri,ngulo<. 5os elementos corriente arri0a se
conectan a un punto del tri,nguloG los elementos corriente a0a)o se conectan al lado opuesto.
2i'ura 12, 3na rama condicional
-
!l e)emplo mostrado en la figura 12 se ve mu$ parecido al e)emplo del punto de decisin arri0a en la
figura 1.# pero el comportamiento descrito a7u6 es 0astante diferente. !n el e)emplo del punto de
decisin# slo un camino :o elemento de navegacin< era presentado al usuarioG dnde conduc6a al
usuario ese elemento depend6a de ciertas condiciones.
!n la figura 12# el sistema est, tomando una decisin similar# pero sucede antes 7ue la accin del
usuario. 5a rama condicional indica 7ue el sistema est, decidiendo cu,l camino ser, presentado al
usuario. 5os caminos desde la pagina 4 &acia las p,ginas 1# C $ E son mutuamente eAclusivosG por
e)emplo si eAiste un camino &acia 1# los caminos &acia C $ E no eAisten.
Tal como con los conectores $ flec&as condicionales# una rama condicional puede entregar al usuario
ning2n camino :un resultado nulo<. 5a diferencia a7u6 es 7ue con una rama condicional un resultado
nulo est, pro&i0idoG $ de estar permitido# es uno de tres o m,s resultados posi0les. =ndica si una rama
permite un resultado nulo en una nota al pie de p,gina o indicacin en un aneAo.
/li'e uno o m9s, selectores condicionales
!l elemento selector condicional :representado por un trape(oide< funciona de manera mu$ similar a la
rama condicional# con una diferencia importante" con el selector# los varios caminos corriente a0a)o no
son mutuamente eAclusivos# cual7uier n2mero de caminos 7ue satisfagan las condiciones pueden ser
presentados al usuario.
2i'ura 14, 3n selector condicional
5a aplicacin m,s com2n del selector condicional es en resultados generados por un motor de 02s7ueda.
!n este caso# la pagina de resultados de 02s7ueda aparecer6a corriente a0a)o desde el selectorG la
condicin es el criterio de 02s7ueda ingresado por el usuarioG los caminos corriente a0a)o llevar6an a las
paginas de contenido indeAadas por el motor de 02s7ueda. Tal como con una rama condicional# el
selector condicional puede generar un resultado nulo // de &ec&o# es muc&o m,s com2n con un selector
7ue con una rama.
Una decisin0 muc-os caminos, racimos
4lgunas estructuras condicionales re7uieren 7ue el sistema presente m,s de un camino 0asado en ciertas
condiciones. 4sociamos estos caminos en la estructura con un racimo :representado por un circulo<. !l
racimo puede aparecer corriente a0a)o desde una rama condicional o un selector condicional.
1.
2i'ura 16, 3n racimo corriente a0a)o desde una rama
5a estructura di0u)ada en la Bigura 14 funciona de forma mu$ similar a una rama condicional# pero por
una condicin estamos presentando m,s de un camino al usuario. !ntonces# si el atri0uto siendo
evaluado tiene valor x# el usuario ve un camino &acia la pagina 1G pero si el atri0uto tiene valor y# el
usuario ve caminos &acia am0as paginas C y E.
+l'unas restricciones pueden aplicar, 9reas condicionales
Cuando una o m,s condiciones aplican a un grupo de p,ginas# esas p,ginas son encerradas en un 9rea
condicional // un rect,ngulo de es7uinas redondeadas# pero con un tratamiento de l6nea cortada como el
conector condicional.
2i'ura 17, 3n e)emplo de uso de un ,rea condicional donde se re7uiere una coneAin segura
5as ,reas condicionales se usan com2nmente en situaciones 7ue involucran permisos de acceso# como
cuando se re7uiere un login o coneAin encriptada :++5<. 4 diferencia de otros tipos de ,reas# las ,reas
condicionales son asociadas con un resultado# el cual se genera en caso de 7ue la:s< condicin:es< no son
satisfec&as.
#onclusin
+i deseas ver cmo se arma el sistema completo# a7u6 &a$ un diagrama de muestra de la ar7uitectura de
informacin $ dise8o de interaccin de ;etaBilter. :@o estuve involucrado en el desarrollo de este sitioG
este diagrama fue desarrollado a partir del sitio.<
+cott 5arson cre esta pr,ctica &o)a de trucos para una referencia r,pida a los varios elementos
condicionales. N para a7uellos interesados en crear sus propias li0rer6as de formas para usar en una
11
aplicacin diferente a las 7ue aparecen a0a)o# a7u6 &a$ un DEB de todas las formas :gracias a Ross >lson
por la sugerencia<.
!l voca0ulario necesariamente representa slo un primer paso. 4 medida 7ue la ar7uitectura de
informacin $ dise8o de interaccin contin2an su evolucin# aparecer,n situaciones 7ue este voca0ulario
no a0arca. Tu retroalimentacin $ recomendaciones para la prAima versin de este voca0ulario son
0ienvenidas.
?ibrer@as descar'bles de formas
Amni!raffle 2.0 es la primera aplicacin en despac&arse con soporte incorporado para el voca0ulario
visual. >mni?raffle viene actualmente pre/instalado en todos los 4pple DoCer ;ac $ DoCer1ooO.
Tam0ien puede ser dascargado desde el sitio >mni.
>tras li0rer6as de formas disponi0les"
4rc&ivo de patrn para Visio 2...
4rc&ivo de patrn para Visio
4rc&ivo de patrn para Visio 4
4rc&ivo DoCerDoint
4rc&ivo de li0rer6a para 4do0e =nEesign
4rc&ivo de li0rer6a para BreeHand 1. :gracias 4ndreC CroC<
4rc&ivo de li0rer6a para BreeHand - :gracias 4ndreC CroC<
4rc&ivo !D+ =llustrator
4rc&ivo de li0rer6a para i?rafA BloCc&arter 2... :gracias 4ndreC Ro0inson<
Coleccin de arc&ivos +V? :1.- ;1<
Coleccin de arc&ivos !D+ 7ue contienen un elemento por arc&ivo# 2til para ser importado en
otras aplicaciones :1.1 ;1<
P 2.../2..2 Jesse James ?arrett
12