58 CUADERNOS DE I NFORMACI N / N

0
2 2 / 2 0 0 8 - I /

I SSN 0 716 -162 x / pP. 5 8 - 6 5
Diseo web y arquitectura de informacin
para sitios 2.0
Web Design and Information Architecture for 2.0 Sites
Si en una primera fase de la web los sitios eran meras rplicas
de brochures corporativos, la tendencia actual a la produccin
y diseminacin de informacin a travs de herramientas de web
2.0 tales como blogs o redes sociales, apunta a que el contenido
se ha transformado en un protagonista privilegiado. Desde esa
perspectiva, ha surgido la necesidad de que los proyectos digitales
dispongan de un orden lgico que emane de pautas que no slo
permitan jerarquizar los textos, sino tambin los elementos grfcos
expuestos. De este modo, un diseo y arquitectura de informacin
adecuados deben no slo construirse en base a una estructuracin
racional, sino tambin tomar en cuenta factores emocionales
relativos a la experiencia de su uso. Solo la combinacin de ambos
permite que los usuarios se sientan cmodos, antes, durante y
despus de haber visitado un sitio web.
Palabras clave: diseo web, arquitectura de informacin, interfaces
digitales, internet.
In the frst stage of the web its sites were replicas of corporate brochures,
while the current trend of production and dissemination of information
through the tools of the web 2.0, such as blogs or social networking sites, sug-
gest that the content has become the privileged player. From that perspective,
there is a need of having an order based on guidelines that determine both
the hierarchy of texts and the layout of graphic elements. Therefore, effcient
design and architecture of information should be built not only from an
exclusively rational structure, but also take into account emotional elements
relative to the experience of its use, mainly through its design. Only the
combination of both enable users to feel comfortable before, during and after
having visited a website.
Keywords: web design, information architecture, digital interfaces, Internet.
R
e
s
u
m
e
n

A
b
s
t
r
a
c
t

Claudia Gutirrez, KeplerMedia S.A. Santiago, Chile (cgutierh@yahoo.com)

Re c i bi do: 4 / 5 / 2 0 0 8 / Ac ept ado: 21 / 7 / 2 0 0 8
A
r
t

c
u
l
o
s
59
C. guti rrez Di seo web y ar qui t ec t ur a de i nf or maci n par a si t os 2. 0.
P
arece bastante improbable que el Catlogo de obje-
tos imposibles que el artista francs Jacques Carel-
man
1
lanz en 1969 como parodia a los productos de
venta por catlogo, tenga absoluta vigencia hoy. Su tra-
bajo, adems del valor artstico que tiene, es reconocido
porque sus piezas han permitido ejemplifcar uno de los
principios de la comunicacin en el campo de los multi-
medios interactivos: la usabilidad.
El investigador Donald Norman usa la imagen de
la clebre cafetera para masoquistas de Carelman para
ilustrar la portada de su libro El diseo de objetos cotidia-
nos donde revisa la relacin entre el uso y la interfaz de
muchas de las cosas que usamos da a da. La cafetera
constaba de todos los elementos que debera tener una
tal como la conocemos desde su diseo inicial: tapa, asa
y boca. Sin embargo, todos estos elementos se encontra-
ban alineados en un mismo sentido. De ah su nombre.
La cafetera era para masoquistas, pues se volva fsica-
mente imposible utilizarla.
Es precisamente en la usabilidad donde se establece
el vnculo entre la cafetera de Carelman y el diseo de
interfaces digitales. En relacin a esto y a su aplicacin
en pginas web, Jakob Nielsen (2003) defne a la usa-
bilidad como el atributo de calidad que mide la facili-
dad en el uso de las interfaces. Tambin est referida a
los mtodos que mejoran la experiencia de uso duran-
te el proceso de diseo o rediseo de un sitio. A esto se
suma la nocin de Donald Norman, para quien la ver-
dadera belleza en un producto va ms all de lo super-
fcial, ms all de la fachada. Para que un producto sea
verdaderamente bello, emocionante y agradable, debe
cumplir una funcin, trabajar bien, ser usable y entendi-
ble (2002, p. 36).
Si la aproximacin de Nielsen al diseo de interfaces
digitales, entre las cuales se encuentran los sitios web,
proviene ms del campo racional, el aporte de Norman
tiene que ver con proporcionar una defnicin de usabi-
lidad que estuviera estrechamente unida a la emocin de
la experiencia esttica.
Lo relevante de estos postulados es que en ambos se
grafca la tendencia que ltimamente se ha ido adoptan-
do en el diseo y rediseo de sitios web, no slo en tr-
minos de disposicin espacial (en pantalla) de elementos
textuales y grfcos, sino tambin respecto a la arquitec-
tura de su informacin. Los usuarios ya no slo leen en
la red, sino que interactan con la informacin que con-
sumen y con las herramientas que la producen, impul-
sados en gran medida por el desarrollo de la web 2.0 a
travs de blogs, foros o plataformas sociales y sus aplica-
ciones. De esta manera, tanto las caractersticas visuales,
como la secuencia de interacciones hipertextuales, son
partes integrales de la experiencia de uso
2
de un sitio.
En defnitiva, al disear o redisear una pgina web
no slo debemos preocuparnos de que la interfaz sea
usable y, por lo tanto, que est estructurada bajo un or-
den lgico, sino que dicha interfaz contenga un diseo
visual atractivo capaz de refejar grfcamente la jerar-
quizacin del contenido. Esto ltimo es de vital impor-
tancia pues, debido al desarrollo de las plataformas 2.0,
actualmente la tendencia es que el contenido aumente
vertiginosamente cada da. As, tanto usabilidad como
diseo visual redundarn en una experiencia de uso
exitosa.
1 El Catlogo de objetos
imposibles contena
ms de 400 diseos de
objetos de uso cotidiano
reinterpretados en
funcionalidades absurdas.
2 El trmino experiencia
de uso fue popularizado
luego de que Donald
Norman se autodefniera
como Arquitecto de
Experiencia de Usuario en
su paso por la empresa
de computadores Apple
en 1993. Originalmente
usado para referirse a la
interaccin entre humanos
y computadores, hoy el
trmino se utiliza para
hablar de las interacciones
humanas, desde la relacin
con un aparato electrnico
hasta la vivencia de un
proceso de compra. Para
efectos de este artculo,
entenderemos el uso
como la interaccin que
se produce entre quienes
emiten y reciben las
informaciones. Dicho rol,
tal como se desarrollar
aqu, se ha expandido
notablemente con el
advenimiento de las
plataformas de produccin
de contenidos, tales como
blogs o redes sociales.
fuente: Norman, D.A. (1990)
La cafetera para masoquistas de Carelman
60 CUADERNOS DE I NFORMACI N / N
0
2 2 / 2 0 0 8 - I /

I SSN 0 716 -162 x / P. 52- 59
lA evidenciA de lo rAcionAl
Pensemos en un aeropuerto. El pasajero que viaja tiene
poco tiempo para ejecutar sus movimientos. Debe rea-
lizarlos con certeza y a paso frme. Un sistema de infor-
macin aeroportuaria mal diseado puede fcilmente
llevarlo a perder un vuelo o salir por el lugar equivoca-
do. Si el lenguaje de signos falla, el viajero requerir un
esfuerzo mental y fsico mucho mayor que el inicial, y
podr desorientarse fcilmente en su carrera por llegar
a destino.
La usabilidad en sitios web funciona de manera si-
milar a la sealtica de un aeropuerto. Es decir, se tra-
ta de un sistema de signos orientativos que lleva a los
usuarios a moverse entre pgina y pgina, a buscar y en-
contrar informacin, a orientarse en su propia interac-
cin con el sitio a travs de links, etiquetas o cualquier
elemento que llame a una accin. En defnitiva, habla-
mos de usabilidad cuando hablamos de la navegacin
de un sitio. Y hablamos de navegacin cuando estamos
en presencia de hipertextualidad, o sea, de la facultad
de poder disponer de contenidos e informaciones que
no se agotan en el mero texto escrito.
Segn Nielsen (2003), la usabilidad es una condi-
cin necesaria para la supervivencia en la red. Si un
sitio es difcil de usar, los usuarios se van. Si la pgi-
na de inicio no informa claramente sobre lo oferta de
una compaa y lo que se puede hacer en dicho sitio, los
usuarios se van. Si los usuarios se pierden en un sitio, se
van. Si la informacin es difcil de leer o no responde a
lo que los usuarios necesitan saber, stos se van.
Steve Krug, en su libro No me hagas pensar, compar-
te la posicin de Nielsen pero la lleva ms all: para l,
el usuario que visita un sitio no debe ni quiere pensar.
Mientras sea humanamente posible, una pgina debe
ser evidente al mirarla. Debe ser obvia. Explicarse por s
sola, (2000, p.11). Segn Krug, el pensar nos requerir
ms esfuerzo, y mientras ms esfuerzo utilicemos para
encontrar el contenido, estaremos menos dispuestos a
leerlo e internalizarlo. De este modo, un sitio usable re-
querir menos esfuerzo mental para recorrerlo tanto
una primera vez como en ocasiones sucesivas, lo que
implica que podr ser navegado ms rpidamente y dis-
pondr de una menor tasa de error y abandono.
Para Krug toda pgina debe contestar las cinco pre-
guntas bsicas que se hara un usuario al visitar un si-
tio web:
1) Dnde estoy?
2) Por dnde empiezo?
3) Dnde est tal informacin?
4) Qu es lo ms importante de este sitio?
5) Por qu lo llaman as?
Para explicar este concepto usaremos como ejem-
plo el cuento de Hansel y Gretel de los Hermanos Gri-
mm. En esta clsica historia la idea era sealar el camino
con migas de pan para ir siguiendo su rastro al volver a
la casa de dulce cuando oscureciera. En el momento en
que los pjaros se comen las migas de pan, ya no quedan
rastros del camino. Los personajes se desorientan y no
saben cmo volver. En el camino de Hansel y Gretel, lo
que ocurri fue que fall la navegacin.
De acuerdo a James Kalbach en el libro Designing
Web Navigation, (2007, seccin 1.2), la navegacin cum-
ple diferentes funciones:
1) Permite acceder a la informacin: Al existir diferen-
tes maneras, debemos ver el modelo ms adecuado de
acuerdo al contenido del sitio. Por ejemplo, es distinto
acceder a la informacin por medio de una caja de bs-
queda que desde la portada.
2) Informa del lugar de ubicacin dentro del sitio
3
: La
navegacin orienta a los usuarios, hacindoles saber
dnde estn, a dnde van y qu hay en esa pgina.
3) Informa de qu se trata el sitio: La navegacin debe
ofrecer una visin semntica de qu se trata el sitio.
Debe revelar lo que hay y lo que no hay, y si va por el ca-
mino correcto.
4) Identifca a la marca: Ms all de su logo, colores
o tipografa, el sitio debe refejar la marca del producto
tambin en su navegacin. La orientacin de botones,
etiquetas y textos debe refejar la promesa de producto y
servicio de la propia marca.
5) Refeja la credibilidad del sitio: Una buena navega-
cin podr disuadir y convencer a los usuarios de seguir
un determinado camino. Mientras ms creble sea, ms
se podr llegar a los usuarios.
6) Impacta en los costos: Una navegacin correcta per-
mitir que los usuarios encuentren lo que buscan y eso tie
3 Kalbach identifca tres
categoras primarias
de navegacin:
Por estructura: Conecta
pginas en base a una
jerarqua defnida.
Por asociaciones: Conecta
pginas con contenido
y temas similares,
independiente de su
ubicacin dentro del sitio.
Por utilidad: Conecta
pginas y funcionalidades
que permiten usar de mejor
manera el sitio.
61
A
r
t

c
u
l
o
s
C. guti rrez Di seo web y ar qui t ec t ur a de i nf or maci n par a si t os 2. 0.
ne una directa ventaja econmica, pues un usuario que
no encuentra lo que busca es siempre prdida de dinero.
En sntesis, un sitio que carece de usabilidad no po-
dr ser navegado correctamente. Al no poder moverse
fcilmente, no se puede encontrar lo que se busca. Esto
se traduce en una mala experiencia de uso por parte del
usuario, quien, probablemente, no querr volver a visi-
tar el sitio.
Cmo sabemos cuando un sitio es o no usable?
Jakob Nielsen (2003) seala que las pruebas de usabili-
dad responden a cinco objetivos bsicos:
- Aprendizaje: Pueden los usuarios realizar tareas
bsicas en su primer encuentro con el sitio?
- Efciencia: Cun rpido pueden los usuarios llevar
a cabo esas tareas?
- Memoria: Cun fcil podemos reestablecer la pro-
ductividad del sitio, una vez que los usuarios vuelven a
visitarlo?
- Errores: Cuntos errores cometen los usuarios?
Cun severos son? Cun rpido se recuperan de esos
errores?
- Satisfaccin: Cun agradable es el diseo?
- Utilidad: El diseo es funcional? Cumple lo que
los usuarios necesitan?
La medicin de los parmetros de usabilidad del
diseo o rediseo vara considerablemente. Desde se-
siones de feedback informal de expertos a partir de zo-
nifcaciones y diagramas de contenido hasta pruebas
de usabilidad ms formales, tales como entrevistas con
usuarios u observacin participante.
De acuerdo al investigador Alan Cooper (2007, p.50)
las tcnicas de anlisis cuantitativo usadas en la medi-
cin de estos parmetros responden a seis categoras:
1) Entrevistas con los responsables de la compaa,
con el fn de poder entender los objetivos que se desean
obtener tras el proceso de diseo o rediseo desde el
punto de vista del negocio.
2) Entrevistas con expertos de la compaa, que ma-
nejen reas sensibles en las que operar el producto que
se desarrolle en el diseo o rediseo del sitio web.
3) Entrevistas con usuarios o clientes, entendiendo
sus objetivos, frustraciones, procesos de toma de deci-
siones y dominio del mbito y materia del producto.
4) Observacin participante del uso que los usua-
rios o clientes dan al sitio web.
5) Revisin de literatura relacionada con el mbito del
producto, tanto planes de marketing, estrategia, encuestas
de usuarios, investigacin de mercado, especifcaciones
tcnicas, estadsticas y todo artculo que est relacionado
con el uso competitivo, tanto de los productos como del
contenido que se desarrollar en el sitio web.
6) Estudio de prototipos o versiones existentes del
actual producto o sitio web. Para este punto se recurre
a evaluaciones heursticas (informes de expertos) de las
interfaces disponibles (en caso de un proceso de redise-
o) o del prototipo visual del producto (si se trata de un
primer diseo).
lA emocionAlidAd de lo visuAl
La mentada web 2.0
4
no slo trajo consigo el surgimien-
to de las plataformas de produccin de contenidos, tales
como blogs o redes sociales
5
, sino que cre una nueva
necesidad: el ordenamiento del volumen descontrolado
de contenidos producido tanto por quienes ya estaban
involucrados en la diseminacin de informacin como
por estos nuevos usuarios empoderados para poder ad-
ministrar y emitir sus propios contenidos a travs de es-
tas nuevas plataformas. As, el orden lgico emanado de
las pautas de usabilidad descritas en una primera fase
de la web, no se aplica. Haba que lograr que la interfaz
estructurada lgicamente llamara grfcamente la aten-
cin de los usuarios. En otras palabras, que la interfaz
no slo fuera racionalidad, sino que tambin fuera ca-
paz de emocionar (y agradar) a travs del diseo. Esto
porque, a travs de esta emocin, los usuarios se logra-
ran sentir atrados y podran interpretar correctamente
el orden racional de este nuevo volumen de contenidos.
Pensemos en los monitores del computador. En un
principio eran en blanco y negro. Dichos monitores ser-
van perfectamente para las funciones que haban sido
creados: eran usables. Sin embargo, los fabricantes in-
sistieron con aadirle color a las pantallas. Podran no
haber tenido ninguna razn aparente, ya que tanto los
en blanco y negro como los de color cumpliran exacta-
mente las mismas funciones. Sin embargo, s haba un
fundamento: el color apelaba a la reaccin emocional de
los clientes, pues era ms atractivo un monitor en colo-
res que uno en blanco y negro.
4 De acuerdo al investigador
Tim OReilly (2007) la web
2.0 se ha defnido como una
revolucin en la industria
tecnolgica causada por el
auge que ha tenido Internet
como una plataforma y
el intento por entender el
xito de dicha plataforma.
Segn OReilly, la regla
principal dentro de esta
frmula del xito de la
web es la construccin de
aplicaciones que permiten
que la gente haga mejor uso
del Internet.
5 Instrumentos tales como
Blogger, Facebook, You Tube
o Flickr se califcan como
parte de las plataformas de
produccin de contenidos de
la web 2.0.
62 CUADERNOS DE I NFORMACI N / N
0
2 2 / 2 0 0 8 - I /

I SSN 0 716 -162 x / P. 52- 59
Con este ejemplo, Donald Norman, en su libro Dise-
o emocional ha introducido uno de los anlisis ms in-
teresantes en la conexin entre visualidad y emocin, y
que es extensible a las plataformas digitales. Segn el
autor, los seres humanos imprimimos signifcados a los
objetos a los que nos enfrentamos en nuestra vida coti-
diana. Tales signifcados muchas veces estn asociados
a un valor, incluso a un precio. Sin embargo, estos ob-
jetos cargados de signifcacin no los usamos para jac-
tarnos con ellos, sino porque nos evocan sentimientos
positivos, recuerdos agradables o, muchas veces, por-
que son un refejo de nosotros mismos, una seal de
identidad.
Si pensamos en la cognicin como fra, humana y
lgica, la emocin sera el componente clido, animal e
irracional. Lo que histricamente ha sido una primaca
del pensamiento lgico sobre el emocional, hoy es una
mezcla inseparable. Las emociones son una parte nece-
saria de la cognicin. Todo lo que hacemos, todo lo que
pensamos est teido de emocin, mucha de la cual es
subconsciente, seala Norman (2004, p. 7).
El investigador ha conducido estudios que lo han
llevado a establecer que hay tres dimensiones en que el
ser humano se aproxima a un objeto a nivel emocional:
la visceral, la del comportamiento y la refexiva
6
(2004,
p.31). A partir de esta aproximacin al objeto, el autor
ha sido capaz de aseverar que un diseo atractivo hace
que la gente se sienta bien, y una persona que se siente
bien piensa ms creativamente. En consecuencia, un di-
seo seductor le permitir a los usuarios encontrar las
soluciones a sus desafos mucho ms fcilmente y, por
lo tanto, incrementar la usabilidad de un producto o,
en este caso, de un sitio web.
Volvamos al ejemplo del aeropuerto. Para un pasa-
jero que va apurado un pictograma que retrate la sali-
da, otro el sector de las maletas y quizs uno que refeje
el smbolo de aduana, permitir que aunque el viajero
no entienda el idioma en que estn los textos que acom-
paan a dichos pictogramas, comprenda cmo llegar
a destino. La visualidad de stos ayuda a disminuir la
probabilidad de que el pasajero se pierda a la hora de
tomar un vuelo, pues apela a la memoria colectiva del
usuario, quien ya sabe qu signifca cada uno de esos
smbolos.
En el complejo sistema de navegacin de la web, los
componentes grfcos permitirn aadirle el componen-
te emocional de la experiencia a la racionalidad del uso.
La visualidad permite as que el sitio hable no slo en
lenguaje de texto, sino tambin en el visual. Y, por eso,
tal como se ordenan los contenidos textuales, se deber
estructurar correctamente el contenido visual.
lo primero es lo ms importAnte
Jennifer Tidwel en Designing Interfaces argumenta que el
concepto de jerarqua visual juega un rol en todas las
formas de diseo grfco. Ponindolo simplemente, el
contenido ms importante debe ser el ms destacado,
mientras que el menos importante, debe destacarse me-
nos. Los ttulos deben verse como ttulos y el contenido
secundario debe verse como tal, en defnitiva, un lector
debe ser capaz de deducir la estructura de informacin
de una pgina desde su diseo, (Tidwell, 2006, p 58).
Es por eso que las decisiones de diseo que fnalmen-
te repercutirn en la jerarqua visual del sitio, no deben
ser hechas al azar.
La primera tarea del diseo web, en consecuencia,
ser crear una jerarqua visual fuerte y consistente, don-
de los elementos importantes sean enfatizados y el con-
tenido est ordenado lgica y asertivamente, tanto en
sus cdigos textuales como no textuales. Siguiendo la
defnicin de estos cdigos que nos da Javier Royo en
el libro Diseo digital (2004, p. 173-174), los cdigos lin-
gsticos grfcos con los que generamos (escribimos,
programamos, diseamos), leemos (escuchamos, ve-
mos) y participamos (interactuamos) en el ciberespacio
se pueden dividir en dos:
1) Los cdigos visuales: la escritura alfabtica (alfabe-
to: tipografa), la escritura no alfabtica (conos, esque-
mas) y la imagen fja (ilustracin, fotografa);
2) Los cdigos secuenciales: la imagen en movimiento
y la hipertextualidad.
Ahora bien, si el sistema visual me lo explica clara-
mente, es mucho ms fcil saber dnde nos encontra-
mos en el sitio, a qu pgina vamos, a dnde me lleva
este link, cunta informacin existe sobre este tema o
cmo termino esa transaccin. Y para esto, tal como se-
6 Los estudios de la emocin
de Norman, conducidos
en el departamento de
Psicologa de la Universidad
de Northwesten en Estados
Unidos se encuentran
descritos en el captulo 3
del libro Emotional design:
why we love (or hate)
everyday things. All el autor
desarrollo como cada nivel
de aproximacin al objeto
requiere un estilo de diseo
diferente.
63
A
r
t

c
u
l
o
s
C. guti rrez Di seo web y ar qui t ec t ur a de i nf or maci n par a si t os 2. 0.
ala Krug (2000) una de las mejores maneras de lograr
captar a los esquivos usuarios es asegurar que los ele-
mentos de una pgina retraten clara y exactamente las
relaciones entre ellos (p.31).
De esta manera, la organizacin visual se logra re-
conociendo similitudes y diferencias entre los objetos
grfcos. Por ejemplo, si en un mapa de Chile todas las
ciudades estuvieran descritas en un mismo tamao de
texto, sera muy difcil saber cules son las capitales re-
gionales o las con mayor poblacin. Si le asignamos a
Santiago la tipografa de mayor tamao, inmediatamen-
te podremos deducir que se trata de la capital o al me-
nos una ciudad con mayor relevancia a las dems. Como
las relaciones visuales entre los objetos nos permitirn
interpretar lo que vemos, establecer estas relaciones nos
permitir, adems, ir contando una historia acerca de lo
que estamos viendo visualmente.
Ahora bien, a la hora de jerarquizar, existen cinco
pautas que regulan la construccin de una historia vi-
sual en la mente del usuario:
1. la proximidad un elemento que se aleja del gru-
po, es percibido como un elemento nuevo.
2. la similitud elementos de un mismo tamao, for-
ma, color, posicin o textura son percibidos como par-
tes de un mismo grupo.
3. la continuidad de elementos similares, aunque
distintos en forma y tamao.
4. la cercana la percepcin tiende a agrupar ele-
mentos que se encuentran muy cercanos entre s.
4. y la asimilacin tendemos a asimilar ms fcil-
mente aquellos objetos que ya conocemos.
Cuando miramos un diseo, en particular el web,
tendemos a notar las relaciones entre los objetos ex-
puestos. Dichas relaciones nacen de las diferencias,
por ejemplo, si un titular es rojo y un texto es azul, sa-
bremos que se trata de dos objetos diferentes. As, po-
dremos agruparlos en funcin del color, la textura, la
forma, la posicin o el tamao.
De acuerdo a estos postulados, resulta an ms re-
levante saber que la posicin, color, estilo o tamao son
elementos que, junto al contenido textual, defnen la ef-
ciencia comunicativa del sitio. El lenguaje visual es tan
importante como el lenguaje de texto y, como tal, de-
bemos prestarle atencin con una clara jerarquizacin
de los elementos que lo componen. sta debe crear un
foco de inters que atraiga la atencin del usuario, dar
un sentido de orden y equilibrio, y establecer un patrn
de movimiento que gue al usuario a travs de la com-
posicin (Wroblewski, 2002, p.77). En defnitiva, ne-
cesitamos contar una historia a travs de los elementos
grfcos.
Bruce Tognazzini en su artculo Principios de dise-
o de interaccin (2003) ha resumido las normas que
regulan el diseo e implementacin de interfaces grf-
cas efectivas, aplicndolo al campo del diseo web. En
trminos generales, seala que:
Las interfaces efectivas son visualmente comprensi-
bles y permiten errores por parte del usuario, dndole
una sensacin de control. Los usuarios ven rpida-
mente el alcance de las opciones y comprenden como
alcanzar sus metas y realizar su trabajo. Las interfa-
ces efectivas ocultan al usuario el funcionamiento in-
terno del sistema. El trabajo se guarda continuamente
y con la opcin de deshacer en todo momento cual-
quier paso que se haya dado. Las aplicaciones y servi-
cios efectivos realizan el mximo trabajo requiriendo
la mnima informacin del usuario.
unin entre rAzn y emocin
Pensar en una experiencia de uso exitosa hoy es hablar
de una combinacin entre la racionalizacin de la usa-
bilidad y la emocionalidad de lo visual. El usuario se
ha ido empoderado para interactuar y crear sus propios
contenidos, generando un incremento considerable en
el volumen de stos. Por esta razn, debemos procurar
que la experiencia de visitar un sitio sea una unin en-
tre la razn y la emocin, entre la lgica y la visualidad.
El autor Jesse James Garrett en el libro The Elements
of User Experience propone un modelo donde los ele-
mentos que componen la experiencia de uso de un si-
tio se encuentran desagregados en etapas. Cumplir cada
una de estas etapas, segn l, asegurar una correcta ex-
periencia de uso.
El modelo de Garrett desagrega dicha experiencia
en 5 planos:
64 CUADERNOS DE I NFORMACI N / N
0
2 2 / 2 0 0 8 - I /

I SSN 0 716 -162 x / P. 52- 59
1) El Plano de la Estrategia: Aqu se determina y def-
ne al sitio en funcin de los objetivos de los creadores y
de lo que los usuarios quieren obtener de la pgina.
2) El mbito del Proyecto: Aqu se defne las caracte-
rsticas y las funcionalidades del sitio.
3) El Plano Estructural: En este se defne de dnde
vienen los usuarios y a dnde van, es decir, se preocupa
de profundizar en las caractersticas y funcionalidades
en las que se inserta el sitio, vistas en el punto anterior.
4) El Plano del Esqueleto: Esto se refere a la ubicacin
de los botones, las etiquetas, las fotografas y los bloques
de texto. En el esqueleto se ubican estos elementos para
sacar el mximo provecho y efectividad de ellos.
5) El Plano Superfcial: Es la capa ms externa y se re-
fere al contenido textual y grfco del sitio. Desde las
imgenes hasta los textos, el plano superfcial habla del
diseo visual en s mismo.
A partir de estos cinco planos, que van de lo ms
abstracto a lo ms concreto, Garrett seala que se pue-
de defnir un marco conceptual que permita delinear
problemas y soluciones acerca de la experiencia de uso.
Cada uno de estos planos descritos depende del siguien-
te: la superfcie depender del esqueleto, ste de la es-
tructura, la estructura del mbito del proyecto, y ste no
se podr defnir sin una estrategia. Por consiguiente, las
decisiones deben hacerse en el orden ya descrito, pues-
to que, por ejemplo, un cambio en la estrategia afectar
todo el proyecto.
conclusiones
En conclusin, es verdad que el orden y la estructura de
un proyecto ser lo que guiar su proceso. Pero un dise-
o o rediseo que no considere desde el comienzo una
coexistencia de factores racionales (usabilidad) con los
emocionales (visualidad) no podr asegurar una expe-
riencia de uso exitosa. El objetivo es simple. Tal como
seala Thomas Baekdal en La batalla entre usabilidad y
experiencia de uso (2006), visitar un sitio es crear feli-
cidad. En otras palabras, la idea es que los usuarios se
sientan felices, antes, durante y despus de haber usa-
do el producto. Slo as tendremos experiencias de uso
exitosas y un usuario contento que seguramente volve-
r una y otra vez, asegurando la sobrevivencia, o mejor
an, el crecimiento, del sitio en la web.
Modelo de experiencia de usuario de J.J. Garrett
fuente: garrett, J.J. (2003).
65
A
r
t

c
u
l
o
s
C. guti rrez Di seo web y ar qui t ec t ur a de i nf or maci n par a si t os 2. 0.
referenciAs
Baekdal, T. (2006). The Battle Between Usability and User
Experience. Recuperado el 19 de junio de 2006 desde
http://www.baekdal.com/
Beaird, J. (2007). The Principles of Beautiful Web Design.
Australia: SitePoint.
Cooper, A.; Reimann, R. y Cronin, D. (2007). About Face
3: The Essentials of interaction Design. Estados Unidos:
Wiley Publisihing.
Garrett, J. J. (2003). The Elements of User Experience. Es-
tados Unidos: New Riders Publishing.
Kalbach, J. (2007). Designing Web Navigation. Estados
Unidos: OReilly Media
Krug, S. (2000). Dont Make me Think. Estados Unidos:
New Riders Publishing.
Lynch, P. y Horton, S. (2002). Web Style Guide: Basic De-
sign Principles for Creating Web Sites. Estados Unidos:
Yale University Press.
Mijksenaar, P. (2001). Diseo de la Informacin. Mxico:
Ediciones Gustavo Gili.
Nielsen, J. (2000). Designing Web Usability. Estados Uni-
dos: New Riders Publishing.
Nielsen, J. (2003, 25 de agosto). Usability 101: Introduc-
tion to Usability. Recuperado el 25 de agosto de 2003
desde http://www.useit.com/alertbox/20030825.html
Norman, D.A. (1990). Design of Everyday Things. Estados
Unidos: First Doubleday.
Norman, D. A. (2002). Emotion and design: Atractive
things work better. Interactions Magazine, ix (4), 36-
42.
Norman, D. A. (2004). Emotional Design: Why We Love (or
Hate) Everyday Things. Estados Unidos: Basic Books.
OReilly, T. (2007). Web 2.0 Compact Defnition: Try-
ing Again. Recuperado el 6 de enero de 2008 desde
http://radar.oreilly.com/2006/12/web-20-compact-
defnition-tryi.html
Royo, J. (2004). Diseo Digital. Espaa: Ediciones Paid-
s Ibrica.
Tidwell, J. (2006). Designing Interfaces. Estados Unidos:
OReilly Media.
Tognazzini, Bruce (2003). First Principles of Interaction
Design. Recuperado 2 de junio de 2008 desde http://
www.asktog.com/basics/frstPrinciples.html
Wrobleski, L. (2002). Site-seeing: A visual Approach to
Web Usability. Estados Unidos: Hungry Minds.