Introduccin

Los criterios para la construccin de sitios webs centrada en el usuario se basan en ofrecer una experiencia positiva para todos los clientes, ya sea para encontrar informacin, para ser parte de una comunidad, para comprar artculos o como entretenimiento. El diseo centrado en el usuario aumenta el valor de los sitios webs a travs de un mejor diseo y evaluacin, permitiendo que el sitio esa usable, no slo otor ando la funcionalidad para el cual fue creado sino que tambin proveyendo una experiencia satisfactoria para el cliente. !ebido a la ran disponibilidad de sitios a la que el usuario puede acceder en la web para cumplir con sus objetivos, la usabilidad es una condicin necesaria para la supervivencia de un sitio" se debe atraer la atencin del usuario para que ste no abandone el sitio y adem#s vuelva a visitarlo en un futuro. Esto involucra distintos aspectos a tener en cuenta en la etapa del diseo como por ejemplo" que sea f#cil de usar, de aprender y de recordar cmo $acerlo, debe ser eficiente y efectivo, proveer una buena utilidad y debe ser se uro de usar. En este informe se representar# un an#lisis del diseo de la p# ina del diario ecuatoriano El Universo ($ttp"%%www.eluniverso.com) en base a los distintos patrones de diseo web que un portal de noticias debera aplicar se &n lo especificado en el libro The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer Centered !eb E"perience# 'ara cada uno de ellos se $ar# una breve resea explicando cu#l es el objetivo del patrn y la solucin que ste aporta. Lue o se sealar# las buenas y malas pr#cticas utili(adas en el caso de estudio, ilustrando con im# enes del sitio para su mayor apreciacin. )abe aclarar que aquellos patrones no aplicables a un portal de noticias o los patrones que no fueron aplicados en el sitio de estudio y que no son considerados importantes no se describen en este informe y se deja al lector para que investi ue en la biblio rafa citada.

Patrones de Diseo Web

Los patrones anali(ados son los descriptos en The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer Centered !eb E"perience y los cuales se centran en los usuarios y sus necesidades. La lista completa de los rupos de patrones es la si uiente" * + ,ite -enres . + )reatin a /avi ation 0ramewor1 ) + )reatin a 'owerful 2omepa e ! + 3ritin and 4ana in )ontent E + .uildin 5rust and )redibility 0 + .asic E6)ommerce - + *dvanced E6)ommerce 2 + 2elpin )ustomers )omplete 5as1s 7 + !esi nin Effective 'a e Layouts 8 + 4a1in ,ite ,earc$ 0ast and 9elevant : + 4a1in /avi ation Easy L + ,peedin ;p <our ,ite ,in embar o, en este informe slo se $ar# mencin a aquellos patrones que son o deberan ser aplicados en el caso de estudio.

A. Site Genres
Este rupo trata sobre la construccin de sitios. Explica el aspecto sin ular de cada nero y ayuda a ele ir los patrones m#s detallados. A2 News Mosaics Este modelo constituye el n&cleo que $ace que los sitios de noticias sean &tiles. 5odo sitio de noticias tiene que tener esta capacidad b#sica de mosaicos de noticias. Este tipo de sitios deben transmitir las noticias que los lectores esperan, con la suficiente cobertura y profundidad en los artculos publicados. *dem#s se debe $acer un re istro $istrico de todas las noticias permitiendo que estn disponibles para los usuarios en cualquier momento.
Solucin

)onstruir un mosaico de noticias proveyendo la amplitud y la profundidad de la cobertura a travs de una diversidad de cate oras y un refinamiento m#s especfico a travs de subcate oras. !entro de cada cate ora, remarcar el artculo m#s importante y el texto principal, ofreciendo tambin una variedad de artculos

que de otra manera se podran perder. !entro de cada noticia, mostrar primero un resumen de alto nivel para las personas que buscan una lectura r#pida, pero tambin proporcionar informacin m#s detallada en el resto de la noticia. Enla(ar publicaciones relacionadas, ya sean artculos, video clips, etc. *rc$ivar esta informacin en el mismo lu ar dentro de los servidores de referencia $istrica.
Caso de Estudio

,i bien el diario El Universo cumple en lneas enerales lo descripto por ste patrn, al investi ar m#s en detalle podemos observar que el sitio carece de ciertos requisitos. 'or un lado podemos ver una serie de cate oras y subcate oras. ,in embar o aparece adem#s, dentro de la cate ora $oticias, un sub rupo con = temas.

Figura 1. Categoras y Subcategoras.

Este sub rupo es bastante confuso para el usuario, ya que desaparece al seleccionar al uno de los artculos que contiene la p# ina y la noticia aparece adem#s bajo al una de las subcate oras de $oticias# ;n ejemplo concreto ocurre cuando se eli e al una noticia del 5ema !i%ilea%s# ;na ve( seleccionada la nota, el sub rupo Temas desaparece y la noticia aparece bajo la subcate ora &nternacional# 'ara que el sub rupo vuelva a aparecer en pantalla, es necesario clic1ear nuevamente sobre la cate ora $oticias#

Figura 2. Confusin con las subcategoras de Noticias y el grupo Temas

>tro problema que se debe mencionar es que si bien las noticias aparentan estar a rupadas por cate oras, en la pantalla inicial no slo aparecen demasiados artculos sino que adem#s pareciera que los artculos se me(clan. 'or ejemplo, en este caso, se pueden ver noticias relacionadas con deportes, estando seleccionada la cate ora $oticias# *dem#s se puede ver una barra de despla(amiento en un panel que contiene la mayora de los artculos. Esto suele ser confuso para el usuario puesto que debe manejar dos barras para ver toda la p# ina" la barra de despla(amiento del browser y esta nueva barra dentro de la p# ina misma.

Figura 3. Ejemplo de artculo perteneciente a ms de un grupo.

*$ora anali(aremos el formato de los artculos. En la si uiente nota se puede ver que existen noticias relacionadas que pueden accederse con solo clic1ear sobre el ttulo de la misma. *dem#s, se muestra la fec$a en la que el artculo fue publicado ?ya sea del artculo que se est# mostrando como as tambin de las noticias relacionadas@. Esto permite al usuario tener un conocimiento r#pido de la anti Aedad de la nota y saber as si si ue siendo interesante leer los artculos relacionados. 'or otro lado, las notas proporcionan im# enes relacionadas con la noticia, como as tambin de videos en los casos de ser necesarios. Esto suele ser interesante por parte del lector ya que no siempre resulta f#cil explicar en palabras ciertos

acontecimientos o no resulta lo suficientemente detallado ?como discursos o los oles de un partido@. ,in embar o el artculo no cuenta con un texto principal resaltado que proporcione un resumen del mismo. Esto resulta bastante tedioso para el lector que desea slo obtener una idea eneral de la noticia y en cambio necesita leer todo el artculo para ase urarse de que $a obtenido el verdadero conocimiento de la nota.

Figura . Formato del artculo

B. Creatin

a Na!i ation "ra#ewor$

;no de los desafos de disear sitios webs es que los usuarios a menudo acceden al sitio de distintas maneras. ;na de las claves para satisfacer la experiencia del usuario es que el sitio soporte multiples formas de nave acin, b&squeda y acceso. Este rupo est# compuesto por los si uientes patrones" .B + 4ultiple 3ays to /avi ate .C + .rowsable )ontent .D + 2ierarc$ical >r ani(ation .E + 5as16 .ased >r ani(ation .= + *lp$abetical >r ani(ation .F + )$ronolo ical >r ani(ation .G + 'opularity6 .ased >r ani(ation .H + )ate ory 'a es .I + ,ite *ccessibility

B% Multi&le Wa's to Na!i ate Los usuarios nave an los sitios webs de distintas maneras. ,i las $erramientas de nave acin son difciles de encontrar o no existen, los usuarios podran encontrar al sitio tedioso de usar. Es por ello que los sitios deben ofrecer m&ltiples formas de nave arlo. 'ero adem#s se debe tener en cuenta que la ubicacin consistente de las $erramientas de nave acin es una de las formas m#s importantes de $acer a la nave acin f#cil de usar.
Solucin

'ara ase urarse que los visitantes completen sus objetivos, se debe poner las $erramientas de b&squeda y nave acin en la parte superior y al inicio de la p# ina. La nave acin a la prxima p# ina debe colocarse en la parte superior derec$a de la p# ina como as tambin en la parte inferior. ,iempre se debe incluir $erramientas de nave acin a p# inas relacionadas o que el usuario podra estar interesado, puesto que de otra forma se podran perder% omitir. Estas $erramientas deben mostrarse en la parte inferior de la p# ina.
Caso de Estudio

En el sitio El Universo se pueden ver distintas maneras de nave ar por los artculos publicados en el diario" por un lado existe una barra con cate oras y subcate oras ?y tambin vale considerar el sub rupo Temas@. En la parte inferior de la p# ina inicial se pueden encontrar paneles con distintas cate oras con la enumeracin de al unos artculos publicados en ella ?Jer 0i ura F@. 'or otro lado, existen nave adores en la parte superior e inferior derec$a de cada noticia que permiten al usuario nave ar por los distintos artculos que pertenecen a la misma subcate ora. Existe tambin un panel i(quierdo con noticias de 'ltimo (omento o las noticias que est#n actualmente en la portada. Estas publicaciones pueden lle ar a ser interesantes para el usuario puesto que no siempre el lector se diri e nuevamente a la p# ina de inicio para c$equear nuevamente las &ltimas noticias, considerando que un diario online renueva constantemente su contenido. 'or &ltimo, podemos encontrar una $erramienta de .&squeda en la parte superior derec$a de la p# ina que permite encontrar tanto artculos $istricos como noticias del da actual. ,in embar o, al utili(ar la $erramienta provista, resulta bastante embara(oso e in&til encontrar al &n artculo. En la fi ura G se puede observar que la b&squeda de noticias se reali(a a travs del buscador )oogle, lo cual no permite identificar la cate ora de las noticias o la fec$a de publicacin, como as tampoco permite $acer un filtrado de las b&squedas. )abe aclarar que el diario cuenta con un lin1 de Ediciones *nteriores en la parte superior derec$a de la p# ina, que permite seleccionar una fec$a y ver todos los titulares de ese da en particular. Esta metodolo a de b&squeda es muy efectiva si se recuerda exactamente cu#ndo se public la noticia. ,in embar o, la ubicacin

del lin1 no es la apropiada por lo que es posible que varios lectores no percaten la existencia de esta $erramienta.

Figura !. "istintas maneras de na#egacin

Figura $. "istintas maneras de na#egacin

Figura %. &'s(ueda de )rtculos

B2 Browsable Content ,i la informacin de un sitio no est# or ani(ada, o si no $ay seales claras y co$erentes de nave acin para encontrar dic$a informacin, puede resultar bastante difcil nave ar por el contenido del sitio y volver a ella m#s tarde.
Solucin

>r ani(ar el contenido de varias maneras, en cate oras que ten an sentido para el usuario. -enerar $erramientas de nave acin y seales que permitan a los usuarios saber dnde est#n, dnde pueden ir y cmo volver. )onstruir cada p# ina con su propia jerarqua de lectura para que los usuarios puedan explorarla r#pidamente.
Caso de Estudio

)omo ya se $a mencionado anteriormente, el sitio cuenta con cate oras y subcate oras en donde se clasifican las noticias para un acceso m#s f#cil a las mismas. Es posible observar adem#s que no slo la cate ora est# sealada sino que tambin la subcate ora a la que pertenece la noticia aparece en ne rita y subrayada, lo cual permite al usuario saber en dnde se encuentra.

Figura *. Subcategora seleccionada

B( )ierarc*ical +r ani,ation >r ani(ar la informacin en una jerarqua de cate oras puede ayudar a los usuarios a encontrar lo que est# buscando. 'ero construir una jerarqua efectiva no es tarea sencilla.
Solucin

;tili(ar nombres descriptivos para las cate oras para que sean distin uibles unas de otras. Es posible repetir los elementos en m&ltiples cate oras donde ten a sentido. 4antener el n&mero m#ximo de subcate oras por cate ora de entre CK y =K, y evitar los trminos enricos como miscel#neos%varios.
Caso de Estudio

)omo ya se $a explicado en apartados anteriores, el sitio cuenta con cate oras y subcate oras para nave ar los contenidos del diario. 'ero en al unos casos, los nombres de las cate oras o su clasificacin no es la adecuada y el usuario tiende a confundirse, o lo que es peor, no verificar el contenido de dic$as cate oras por tener una visin errnea de lo que contiene. ;n claro ejemplo es la cate ora +ida, con subcate oras como (otores ?con artculos relacionados con autos@ o Tecnolog,a# Es f#cil notar que el sustantivo ele ido para esta cate ora es demasiado eneral, y por lo que puede ser bastante probable que el usuario no entienda qu en loba dic$a cate ora.

Figura +. ,ombre incorrecto de Categora

'or otro lado, tambin resulta bastante raro cmo se clasifican ciertos artculos. .asta con leer las noticias que contiene la subcate ora -amilia para darse cuenta que no siempre la clasificacin utili(ada es la m#s apropiada.

Figura 1-. Clasificacin incorrecta de los artculos de la Subcategora Familia

B- C*ronolo ical +r ani,ation >r ani(ar el contenido de un sitio de manera cronol ica ayuda a los usuarios a entender el orden del contenido en el tiempo. 'ero listas muy lar as de eventos son difciles de leer y usar. La estructura cronol ica tiene sentido para cosas que tienen una fuerte nocin del tiempo, como eventos $istricos, reportes tcnicos, tic1ets de aviones, y cambios en la p# ina web. 'ero si la lista es muy extensa toma demasiado tiempo en leerse y en despla(arse por el contenido, convirtindose as en al o menos &til.
Solucin

4ostrar una lista cronol ica en forma vertical, $ori(ontal o en formato calendario, manteniendo el total de tems en cada lista en un n&mero menor a =K, dividiendo la lista en partes m#s pequeas de tiempo.

Caso de Estudio

La p# ina inicial contiene un panel de .o 'ltimo, con la lista de noticias publicadas ordenadas por la $ora de publicacin, ubicando en las primeras posiciones a las &ltimas noticias. Esto permite al lector tener una vista r#pida de las &ltimas noticias, sin necesidad de scrollear.

Figura 11. .rgani/acin Cronolgica

B. Po&ularit'/Based +r ani,ation *l unos usuarios quieren ver el contenido o los productos m#s populares. 'ero las listas de popularidad son in&tiles sin etiquetas claras de cmo se $a clasificado el contenido y en qu perodo. !e la informacin que se $a recopilado, construir una clasificacin que cambie con la frecuencia suficiente como para que los visitantes que vuelven a ver la p# ina vean el movimiento. ,i el usuario vuelve diariamente entonces se debe tener suficiente informacin para mostrar lo mejor del da. ,i los usuarios entran a la p# ina mensualmente, entonces mostrar los resultados mensuales o trimestrales podra ser m#s apropiado.
Solucin

)onstruir la lista de contenido popular a partir de las visitas de los usuarios, el ratin s que stos le otor an, o adquirida de una lista de afuera. Etiquetar cada lista con un ttulo descriptivo que indique cmo se $a votado y sobre qu perodo.

Caso de Estudio

El sitio El Universo posee un panel llamado /an%ing con las noticias m#s ledas del da, como as tambin un listado de noticias recomendadas desde 0aceboo1.

Figura 12. .rgani/acin por 0opularidad

B0 Cate or' Pa es )uando los usuarios nave an a travs del sitio, si las distintas secciones de las cate oras no mantienen un layout consistente, entonces cada seccin podra parecer un sitio nuevo. )on una estructura consistente, los usuarios no slo pueden reconocer su ubicacin sino tambin los elementos principales de la seccin.
Solucin

;sar una layout para las secciones de las cate oras consistentes a travs de todo el sitio, con los mismos elementos de nave acin, d#ndole la sensacin al usuario que $a Llle adoM a una nueva seccin y una clara idea de cmo volver.
Caso de Estudio

)omo ya se sabe, el diario posee una barra de cate oras y subcate oras. ,in embar o, nave ando por el sitio se pueden encontrar varios problemas relacionados con la misma. ;no de ellos es que cuando se clic1ea en la subcate ora &ntebarrial de -0tbol, la cate ora deja de estar seleccionada y desaparecen todas las subcate oras. En este caso, el usuario puede confundirse y no saber en dnde se encuentra dentro del sitio.

Figura 13. 0roblema con las categoras1subcategoras luego de seleccionar Interbarrial de Ftbol

>tro de los problemas que se puede apreciar es que en ciertos casos, las subcate oras cambian y esto puede lle ar a confundir al usuario. 'or ejemplo, al seleccionar la cate ora Deportes, aparecen = subcate oras" -0tbol, 1tros Deportes, Columnistas Deportes, &nterbarrial de -0tbol, Campeonato ecuatoriano 2343.

Figura 1 . Subcategoras al seleccionar Deportes.

Lue o de seleccionar la subcate ora &nterbarrial de -0tbol, la lista de subcate oras cambia" son F subcate oras, en donde Campeonato ecuatoriano 2343 $a desaparecido y a$ora aparecen dos nuevas clasificaciones" -5rmula Uno CKKI y Eliminatorias Sud6frica 2343# *dem#s se puede apreciar que el lin1 de &nterbarrial de -0tbol no aparece seleccionado.

Figura 1!. Subcategoras de la seccin Deportes

Figura 1$. Subcategoras al seleccionar Interbarrial de Ftbol.

,i a$ora seleccionamos la subcate ora -5rmula Uno 2337, podemos ver que el contenido de la p# ina se actuali(a, pero no as los lin1s de las subcate oras.

Figura 1%. Subcategoras al seleccionar Frmula Uno 2009.

'ero el tema se vuelve muc$o m#s confuso aun cuando se quiere volver a seleccionar la subcate ora -5rmula Uno 2337" no slo que la subcate ora no queda seleccionada sino que adem#s aparece como seleccionada Eliminatorias Sud6frica 2343 ?actuali(#ndose la p# ina con dic$a clasificacin@. ,e puede observar adem#s que $a desaparecido la subcate ora &nterbarrial de -0tbol#

Figura 1*. Subcategoras al seleccionar Frmula Uno 2009 nuevamente.

Esta situacin es realmente confusa para el usuario, no slo porque no sabe en donde se encuentra ubicado sino que los lin1s no se comportan como corresponde. 'eor a&n es el cambio de subcate oras, puesto que el usuario puede lle ar a pensar que se est# perdiendo de leer al unos artculos al notar que no aparecen todas las subcate oras. 'ero no slo las subcate oras son las que a veces cambian. En el caso en que se selecciona los lin1s de &ngresar o /egistrarse, las cate oras tambin son distintas"

'odemos ver que la cate ora )ua8a9uil desapareci y que aparecieron dos nuevas cate oras llamadas Ciudades y Ciencia.

Figura 1+. Cambio de las categoras cuando se selecciona Ingresar o Registrarse.

C. Creatin

a Power1ul )o#e&a e

La $omepa e es una de las p# inas m#s visitadas de cualquier sitio web, por lo que su diseo merece de seria atencin para que pueda adaptarse a la diversidad de usuarios y sus necesidades. Este rupo de patrones describe cmo disear una $omepa e lo suficientemente atractiva y poderosa para satisfacer las necesidades de los usuarios. Los patrones son" )B 2>4E'*-E '>95*L )C ;'609>/5 J*L;E '9>'>,757>/

C% )o#e&a e Portal Las p# inas de inicio son el portal a travs del cual la mayora de los visitantes pasan. !eben seducir a los visitantes y al mismo tiempo deben equilibrar muc$os factores, como la marca, la nave acin, el contenido y la posibilidad de descar ar la p# ina r#pidamente. La p# ina principal es por lo eneral lo primero que los usuarios ven del sitio. Esta p# ina es fundamental porque no slo es vista de BK a B,KKK veces m#s que cualquier otra p# ina, sino que adem#s debe proporcionar una experiencia excepcional al usuario para seducirlo a continuar en el sitio. ,in embar o, el espacio en la p# ina, especialmente la parte superior que se muestra en la pantalla sin scrollear, es limitada. 2ay que dividirla entre los si uientes objetivos" crear un adecuado loo1 and feel, construir la identidad y la marca del sitio, proveer contenido valioso, $acer que la nave acin sea f#cil de usar, establecer un layout co$erente, y ofrecer un performance alto.
Solucin

En la p# ina principal, establecer y refor(ar el valor del sitio con una promesa firme y clara que se cumpla en todas las p# inas del sitio. !edicar el I= por ciento del #rea y lin1s sobre el doble( a los rupos de visitantes que representan el I= por ciento de la poblacin total de visitantes. 4antener el resto del #rea y lin1s para los

rupos de usuarios que conforman el restante = por ciento. ;tili(ar enlaces adicionales en el pie de la p# ina principal. )rear un diseo de p# ina web que proporcione una nave acin clara y que la descar a sea r#pida.
Caso de Estudio

En el caso de estudio, la p# ina principal cuenta con demasiadas publicidades que desconciertan al usuario cuando ste accede por primera ve( a la p# ina del diario. ,e puede observar en la si uiente ima en que el $ec$o de que ran parte de la p# ina est ocupada por banners $ace que slo sea posible leer uno o dos titulares. )onsiderando que la finalidad del sitio es informar a los visitantes de las noticias actuales, tanto locales, nacionales e internacionales, entonces podemos concluir que no cumple con el objetivo del patrn que se est# anali(ando. En al unos casos, como se pueden observar en las im# enes, es necesario scrollear para poder leer al &n titular. Esto es realmente tedioso para el usuario que quiere informarse. /o obstante, la p# ina muestra claramente una barra de nave acin y el lo o del diario.

Figura 2-. 0gina principal

Figura 21. Ejemplos de distintas pginas en donde es necesario despla/arse 2acia abajo para leer los titulares.

D. Writin

and Mana in

Content

En el diseo web, dos de los randes problemas a resolver son cmo administrar ran cantidad de contenido y cmo $acerlo accesible a todos los usuarios. Este rupo de patrones presenta un resumen que ayuda a crear y manejar el contenido de forma eficiente. Los patrones son" !B '*-E 5E4'L*5E, !C )>/5E/5 4>!;LE, !D 2E*!L7/E, */! .L;9., !E 'E9,>/*L7NE! )>/5E/5 != 4E,,*-E .>*9!, !F 39757/- 0>9 ,E*9)2 E/-7/E, !G 7/JE9,E6'<9*47! 39757/- ,5<LE !H '97/5*.LE '*-E, !I !7,57/)57JE 254L 575LE, !BK 7/5E9/*57>/*L7NE! */! L>)*L7NE! )>/5E/5

D% Pa e 2e#&lates ;n sitio que no es consistente entre sus p# inas dificulta la nave acin para el usuario y el mantenimiento del sitio por parte de los administradores. ,in embar o, es un desafo disear p# inas web que sean consistentes ya que no todas las p# inas son i uales, y al unas de ellas deber#n actuali(arse de al una manera en un futuro.
Solucin

;sar un diseo de rilla para ayudar a definir un template que incluya los elementos b#sicos de nave acin, las mayores #reas de contenido, y cualquier #rea relacionada con contenidos. 'ara cada tipo de p# ina, definir un template individual que especifique los lmites del contenido usado para im# enes y texto. )ada template individual debe utili(ar el template lobal como parte de su estructura.

Caso de Estudio

En la fi ura podemos observar la p# ina principal del diario, en donde se $a resaltado con color amarillo los paneles que permanecen i uales a lo lar o de todo el sitio. En naranja podemos ver el lo o del diario y la barra de nave acin la cual, salvo los casos mencionados en este informe, aparecen en todas las p# inas del sitio. ,e puede apreciar que la p# ina es sumamente extensa, en donde es necesario scrollear muc$o para leer la p# ina entera ?La lnea $ori(ontal naranja marca el fin de la pantalla@. La p# ina principal y las p# inas de las cate oras tienen un diseo de rilla" D columnas y varias filas. ,in embar o no siempre el diseo es correcto" en la p# ina principal se observa que una de las celdas de esa rilla contiene un panel con una barra de despla(amiento con todas las noticias, y otras celdas aparecen sin contenido al uno, ocupando un lu ar que parece ser para publicidades inexistentes. El template para las p# inas de las subcate oras mantiene la estructura del template lobal ?se puede ver la publicidad en la parte superior de la pantalla, como as tambin el lo o y la barra de nave acin@. ,in embar o en este template, la rilla tiene C columnas" en la primera se muestra la lista de noticias, una debajo de la otra, en un panel con no m#s de H noticias, y con un panel de nave acin en la parte inferior en el caso que la subcate ora ten a m#s artculos para mostrar. La se unda columna muestra lo que est# actualmente en portada, debajo el panel de 'ltimas $oticias y por &ltimo una publicidad. 'or &ltimo anali(aremos el template de la noticia en s. Este template es similar al template de las subcate oras. 'odemos ver en la ima en D artculos que pertenecen a distintas cate oras, pero que todas ellas mantienen la misma estructura. En amarillo se pueden apreciar las publicidades. En naranja se encuentra el lo o del diario y la barra de nave acin. En la se unda columna, en lila, aparece un pequeo panel con un artculo de la misma cate ora a la que pertenece la noticia seleccionada. !ebajo de ella, en celeste, se muestra ?como en el caso del template de subcate oras@ lo que est# actualmente en portada y debajo de ella el panel de 'ltimas $oticias# En la primera columna, en rosa, se tiene el texto del artculo seleccionado, si uiendo ste un formato en particular" la fec$a de publicacin, el titular, el texto ?acompaado de una ima en en al unos casos, pero siempre ubicada en el mismo lu ar@, una $erramienta de nave acin en la parte superior e inferior derec$a que permite nave ar por el resto de los artculos de la subcate ora.

Figura 22. 3emplate de la pgina principal

Figura 23. 3emplate de la pgina de una categora

Figura 2 . 3emplate de las noticias 43res noticias de distintas secciones pero (ue mantienen la co2erencia en sus templates5

D2 Content Modules La ausencia de un buen sistema de administracin y publicacin de randes vol&menes de informacin produce procesos que consumen tiempo y son propensos a errores.
Solucin

!efinir las ubicaciones de los contenidos en las p# inas templates. >r ani(ar todo el contenido en el sistema de arc$ivos o en una base de datos de contenidos. *dministrar el contenido a travs de una p# ina de administracin.
Caso de Estudio

'ara el caso de un portal de diario, en donde las noticias cambian muy r#pidamente, es esencial contar con una $erramienta de administracin de contenido. D( )eadlines and Blurbs Las p# inas de contenidos necesitan titulares cortos pero descriptivos, y una breve resea para atraer a los usuarios a clic1ear para continuar leyendo en el sitio. Estas reseas deben publicarse en otro lu ar del sitio para que los visitantes puedan leerlos.

En la mayora de los sitios, el contenido visible es slo la punta del iceber . El contenido de un sitio no puede ser revelado en su totalidad en una sola p# ina.
Solucin

Escribir un en anc$e en forma de ttulo y resea que anuncie por qu el contenido es importante y &nico para los usuarios. *lmacenar esos titulares y reseas en una base de datos de contenidos, junto con el texto m#s lar o, para que puedan ser destinados a mdulos de contenido en diferentes p# inas.
Caso de Estudio

,i bien la estructura de un diario ya tiene incorporada este patrn para atraer la atencin de los lectores, en al unos casos parece no aplicarse. 'or ejemplo, si se observan las im# enes, se puede ver que la resea que aparece en la p# ina principal no est# completa. 'ero adem#s si sta fuese la oracin m#s importante que resume todo el artculo, debera aparecer como primera frase en la noticia. ,in embar o, la oracin se encuentra en el medio del texto.

Figura 2!. 0re #isuali/acin de un artculo en la pgina de alguna seccin

Figura 2$. )rtculo

)abe aclarar que ste es slo un caso puntual, pero como ya se mencion anteriormente, la estructura de un diario trae in$erente la idea de un ttulo descriptivo, corto y que llame la atencin del lector, como as tambin un primer p#rrafo dedicado a resumir la idea principal de todo el artculo. D- Writin 1or Searc* En ines

Es difcil encontrar un sitio en una lista de resultados de un motor de b&squeda si ste se encuentra en una posicin bastante alejada del inicio. 2acer que un sitio apare(ca en los primero lu ares en cualquier b&squeda requiere escribir el contenido del sitio en una forma personali(ada.
Solucin

)omen(ar escribiendo ttulos 254L distintivos para cada p# ina, ya que se utili(an como el ttulo de la p# ina en los resultados de la b&squeda y a veces los motores de b&squeda ran1ean mejor las p# inas si los trminos de la b&squeda est#n contenidos en los ttulos. ;sar palabras claves, las que se utili(an con m#s frecuencia para describir el propsito del sitio, en la parte superior de cada p# ina y en el cuerpo del texto. 7ncluir 4E5* ta s descriptivos que represente el contenido incluido en cada p# ina. 2acer que el sitio sea accesible a personas con dificultades de visin ya que al $acerlo tambin ayuda a los motores de b&squeda. Evitar el fraude con el sistema de palabras claves o textos falsos + un enfoque que es a menudo contraproducente.
Caso de Estudio

)omo se puede ver en la ima en, el diario cuenta con los si uientes 4E5* ta s en sus p# inas. Las palabras claves y el autor permanecen i uales a travs de todo el sitio" Ometa contentPQdiario, nuevo, exclusivamente, disenado, dailyQ namePQ1eywordsQR Ometa namePQaut$orQ contentPQeluniverso.com.QR La descripcin vara se &n la p# ina. ,i nos encontramos en un artculo en particular, entonces la descripcin contiene el ttulo de la noticia, y la breve resea que aparece en el listado de noticias como introduccin, la fec$a y $ora de publicacin, la cate ora, la subcate ora y por &ltimo el nombre del diario. Ometa contentPQ/ace el primer ran diario diseado exclusivamente para un ordenador plano 6 ,e &n se pudo comprobar en la presentacin, el nuevo diario di ital no tiene un formato tradicional y prima extraordinariamente la ima en. 6 0E.. KD, CKBB 6 BF"BD 6 5ecnolo a 6 Jida 6 EL ;/7JE9,>Q namePQdescriptionQR En cambio para las p# inas que contiene varias noticias, como cuando se selecciona una cate ora o subcate ora, la descripcin es siempre la misma" eluniverso#com: $oticias del Ecuador 8 del mundo#

Ometa namePQdescriptionQ contentPQeluniverso.com" /oticias del Ecuador y del mundoQR

Figura 2%. 6nformacin de 7eta tags para una noticia en particular

D. In!erse/P'ra#id Writin

St'le

La ente se mueve muy r#pido en la web, examinando li eramente la informacin o las palabras claves. ,i la escritura de un sitio no es r#pida y f#cil de entender, eneralmente no es leda.
Solucin

)omen(ar con un ttulo conciso pero descriptivo, y continuar con los puntos m#s importantes. ;sar menos texto del que se usara en una impresin, con un estilo de escritura simple, usando vietas y listas numeradas para mostrar la informacin. )olocar lin1s embebidos en el texto para ayudar a los visitantes a encontrar m#s informacin sobre temas relacionados.
Caso de Estudio

Las noticias publicadas en el sitio El Universo suelen no resumir las ideas principales en su primer p#rrafo y en ocasiones es necesario leer todo el artculo para ase urarse de que no se $a perdido de nada. *dem#s, el $ec$o de que el texto principal no est remarcado no permite tener una visin r#pida de cu#l es la idea eneral de la nota.

D0 Printable Pa es *l unas veces los usuarios quieren imprimir lo que est#n viendo en pantalla. 'ero los usuarios se frustran si el contenido de p# ina web impreso se corta, est# llena de datos irrelevantes, o no ofrecen una versin de impresin.
Solucin

)rear un template para imprimir eliminando marcos, columnas adicionales, barras de nave acin, y barras laterales. Etiquetar la p# ina con el ttulo de la p# ina, el autor y ;9L. 'or &ltimo, ase urarse de que el contenido principal no se sit&a dentro de una tabla ya que esto puede causar serios problemas de impresin.
Caso de Estudio

)omo se puede ver en las im# enes, la versin impresa es correcta" se eliminan todas las publicidades, barras de nave acin y paneles que contienen informacin sobre otras noticias. La versin impresa contiene el lo o del diario con la fec$a de publicacin y la misma informacin que se muestra en el artculo. *dem#s es importante mencionar que mantiene los estilos de la versin web" misma tipo rafa y colores.

Figura 2*. 8ersin imprimible de una noticia.

D3 Distincti!e )2M4 2itles Los ttulos de las p# inas 254L se usan como nombre de marcadores o favoritos de los browsers y como accesos directos. 5ambin los utili(an los motores de b&squeda cuando muestran la lista de resultados. * menudo, sin embar o, los ttulos de las p# inas no proporcionan recordatorios &tiles del contenido de la p# ina.
Solucin

)rear nombres distintivos para cada p# ina, incluso si las p# inas se eneran a partir de templates. )onsiderar usar la jerarqua or ani(acional del sitio como base para describir los ttulos de cada p# ina.
Caso de Estudio

El sitio cuenta con ttulos correctos para todas sus p# inas. '# ina 'rincipal EL ;/7JE9,> 6 /oticias del Ecuador y del mundo )ate ora EL ;/7JE9,> + )ate ora ,ubcate ora EL ;/7JE9,> + ,ubcate ora + )ate ora *rtculo 5tulo del artculo + 0ec$a 'ublicacin 6 ,ubcate ora + )ate ora 6 EL ;/7JE9,>

D%5 Internationali,ed and 4ocali,ed Content La 3eb es un medio lobal, pero muc$os sitios no $acen nada para el p&blico internacional y no nativos. La ente de todo el mundo puede visitar un sitio, pero puede ser frustrante si las cuestiones lin Asticas, culturales y econmicas no se manejan bien.
Solucin

*lmacenar los mensajes que necesitan traduccin en un lu ar separado del cdi o, para que stos puedan ser lue o traducidos a los distintos idiomas. )omprender que al unos trminos y conceptos locales pueden no ser muy conocidos, y que las fiestas, las costumbres y la comunicacin no verbal en otras culturas pueden afectar el diseo de un sitio. 5ransformar la manera en que representan cierta informacin, como fec$as y monedas.

Caso de Estudio

El sitio no cuenta con internacionali(acin del contenido. ,in embar o, teniendo en cuenta las caractersticas del mismo, se entiende que el diario El Universo se focali(a en la poblacin re ional y nacional. 'or ende, no es un requerimiento necesario para este sitio.

E. Buildin

2rust and Credibilit'

La confian(a y la credibilidad son esenciales para establecer una relacin con los usuarios. ,in ellos, la ente no tiene ra(ones para creer ?o comprar@ cualquier cosa en el sitio 3eb. Este rupo modelo ofrece una visin eneral de los problemas relacionados con la confian(a y credibilidad. Los patrones son" EB ,75E .9*/!7/EC E64*7L ,;.,)97'57>/, ED 0*79 7/0>94*57>/ '9*)57)E, EE '97J*)< '>L7)< E= *.>;5 ;, EF ,E);9E )>//E)57>/, E% Site Brandin La marca es al o m#s que un lo otipo y un lema. Los clientes necesitan saber dnde est#n y si pueden confiar en ese lu ar para ofrecer al o importante y &nico.
Solucin

)onstruir una marca del sitio fuerte que se diferencie de otras compaas. 9efor(ar la ima en de marca a travs de las p# inas 3eb ?B@ utili(ando un estilo co$erente, ?C@ con un lo otipo de tamao moderado, ?D@ colocando el lo o en la esquina superior i(quierda, y ?E@, incluyendo im# enes reutili(ables optimi(ada para la velocidad.
Caso de Estudio

El lo o del diario se encuentra bien posicionado, mostr#ndose siempre en el mismo lu ar en todas las p# inas del sitio, como as tambin en la versin de impresin. Los colores de la p# ina tambin est#n acordes a la marca ya que todo el estilo se mantiene en los tonos de los a(ules.

E2 E/Mail Subscri&tions Las empresas necesitan una manera de mantener el contacto con los clientes que est#n interesados en lo que su sitio web tiene para ofrecer. Las suscripciones de correo electrnico son una manera barata de mantener una conexin con los usuarios, y son especialmente eficaces si los clientes est#n interesados en lo que un sitio web puede ofrecer. 'roporcionarles informacin fresca, oportuna y pertinente es una ran manera de darles una ra(n m#s para visitar el sitio 3eb de nuevo.
Solucin

2acer f#cil la subscripcin por correo electrnico para las personas que estn interesados en ello. Escribir boletines informativos, anuncios y alertas en el estilo de pir#mide invertida. ;tili(ar formato texto a menos que sepa que los destinatarios pueden leer 254L. 7ncluir informacin acerca de cmo suscribirse y darse de baja en cada mensaje de correo electrnico. ;tili(ar las direcciones de correo electrnico de los usuarios slo para lo que se le especifica al usuario.
Caso de Estudio

El diario permite subscribirse a distintos newsletters. *dem#s, permite seleccionar en qu formato recibir los mensajes" texto o 254L. La p# ina no especifica si es posible desuscribirse para dejar de recibir las newsletters, ni en el momento de la suscripcin ni en las Preguntas -recuentes# 5ampoco lo especifica en el mail de confirmacin. *dem#s, es importante mencionar que aunque uno se suscriba al diario, y confirme su suscripcin, nunca se recibe nin una newsletter enviada por el diario, por lo menos para el caso en que el usuario desea recibir slo aquellas noticias relacionadas con eluniverso#com E( "air In1or#ation Practices La privacidad es un problema rave para muc$as personas que utili(an la 3eb. ,in embar o, no siempre est# claro cu#les son las polticas y procedimientos que un sitio 3eb debe tener para recopilar y manejar la informacin personal de manera justa y se ura.

Solucin

!isponer de una poltica de privacidad clara y visible en las principales p# inas web. 'roporcionar $erramientas de estin de cuenta para que los usuarios revisen y corrijan su informacin. 'rote er la informacin personal de los usuarios.
Caso de Estudio

*ntes de subscribirse a las newsletters que el diario ofrece, es obli atorio aceptar las 'olticas de 'rivacidad del diario. En dic$a p# ina explica claramente cu#l es la finalidad de la informacin y afirma que dic$os datos no ser#n difundidos por el diario. Estas polticas de 'rivacidad tambin pueden accederse desde la p# ina para in resar a la cuenta. E6 Pri!ac' Polic' 4uc$os usuarios est#n preocupados por su privacidad en lnea. Los sitios 3eb necesitan una manera de decirles a sus usuarios el tipo de informacin que est#n recolectando y cmo se utili(a esa informacin, as como las condiciones en que se divul a dic$os datos a otras personas.
Solucin

2acer disponible la poltica de privacidad en cada p# ina 3eb. 5ener en cuenta las polticas de privacidad especiales para nios.
Caso de Estudio

)omo se explic en el patrn anterior, el diario explica cu#les son las polticas de privacidad y qu datos recolectar# del usuario. ,in embar o, dic$a polticas no est#n visibles en todas las p# inas web, solamente aparecen en la p# ina de re istracin y la del in reso. E7 About 8s 4uc$os sitios 3eb tienen una ran cantidad de informacin &til que es distinta a la del enfoque principal del sitio 3eb, como informacin de contacto y relaciones p&blicas. Es necesario encontrar una forma de or ani(ar toda esta informacin.

Solucin

9ecopilar toda la informacin sobre el sitio%empresa en una p# ina de :ui;nes somos. Estas p# inas deberan ayudar a la ente a aprender m#s sobre quin sos, qu $aces y por qu puede confiar en la empresa. 7ncluyen cosas como un perfil de la or ani(acin, informacin de contacto, avisos e informacin le al, clientes y socios, las oportunidades de empleo, relaciones p&blicas, relaciones con los inversionistas, relaciones con la comunidad, los crditos de sitio, y las pre untas m#s frecuentes.
Caso de Estudio

*l pie de p# ina se puede ver tanto informacin del diario como as tambin informacin sobre la compaa encar ada del diseo del sitio. En el lin1 Cont6ctenos se puede obtener informacin sobre distintas direcciones y telfonos de las sucursales del diario. 5ambin enumera los mails para contactarse se &n la seccin y cmo comunicarse para publicitar en el sitio. >tro lin1 es el de Preguntas -recuentes, con inquietudes que eneralmente tiene la ente.

Figura 2+. 0ie de 0gina

A. )el&in

Custo#ers Co#&lete 2as$s

*l unas veces los usuarios necesitan ayuda para llevar a cabo y completar una tarea en un sitio. Este rupo de patrones describe maneras de estructurar el sitio que permiten minimi(ar los problemas y mejorar la tasa de finali(acin de tareas. Los patrones son" 2B '9>)E,, 0;//EL 2C ,7-/67/%/E3 *))>;/5 2D -;E,5 *))>;/5 2E *))>;/5 4*/*-E4E/5 2= 'E9,7,5E/5 );,5>4E9 ,E,,7>/, 2F '>'6;' 37/!>3, 2G 09ES;E/5L< *,:E! S;E,57>/, 2H )>/5ET56,E/,757JE 2EL'

)2 Si n/In9New Account ;n proceso tiene que manejar tanto a los usuarios que re resan, que se re istran y se identifican con el contenido personali(ado, y nuevos usuarios, que necesitan crear una cuenta antes de se uir adelante en el sitio.
Solucin

9ecolectar la mnima cantidad de informacin necesaria para crear nuevas cuentas. !ejar en claro qu campos son obli atorios y cu#les son opcionales. 'revenir errores cuando sea posible. 'roporcionar informacin de privacidad del sitio web. 5ener un proceso para el manejo de contraseas olvidadas. /o obli ar a los usuarios nuevos a lo uearse muy pronto.
Caso de Estudio

En el sitio no es necesario que un usuario se re istre para empe(ar a o(ar de los beneficios que ste ofrece. En el proceso de re istracin se puede iniciar en cualquier momento, ya que existe un lin1 en todas las p# inas por encima del lo o del diario y slo se necesita in resar unos pocos campos de informacin para acceder a los varios servicios de eluniverso#com# La pantalla de re istracin comien(a con un mensaje en que se aclara que el re istro es ratuito y muestra un lin1 a las pol,ticas de privacidad, ya que el &ltimo campo a llenar es un c$ec1 box en el que se aceptan dic$as condiciones. Los campos obli atorios se encuentran debidamente sealados con un asterisco. *dem#s, en al unos casos existe un pequea aclaracin sobre cmo debera ser el dato a in resar. 'or ejemplo, <.a contrase=a debe tener m,nimo > caracteres? . Esto advierte de un posible error que podra cometer el usuario.

Figura 3-. Formulario de Subscripcin

,in embar o la p# ina no funciona correctamente. ,i el usuario in resa solamente los datos requeridos, es decir los marcados con un asterisco, entonces obtenemos el si uiente error"

Figura 31. 7ensaje de Error incorrecto.

*$ora bien, si se completan m#s datos, como la fec$a de nacimiento y nivel de estudios, obtenemos el si uiente mensaje de re istracin exitosa"

Figura 32. 7ensaje de Confirmacin de 9egistro

,e puede decir entonces que la p# ina de re istracin no identifica todos los campos obli atorios y peor a&n, no tiene en cuenta todos los posibles errores de la p# ina. El usuario posiblemente repita varias veces el proceso de re istracin y al ver el mensaje de error que recibe ?el cual no es el apropiado@, dejar de intentar re istrarse. /o existe nin &n indicio de que el problema est# relacionado con el in reso de datos. 'ara el manejo de contraseas olvidada, el sitio solamente solicita el email del usuario que in res para su re istracin y lue o enva un mail confirmando la contrasea. )6 Account Mana e#ent Los usuarios necesitan ver y administrar la informacin que el sitio mantiene sobre ellos.
Solucin

'roporcionar una sola p# ina que recolecte toda la informacin referente a la cuenta del usuario. ;tili(ar un esquema de or ani(acin basado en tareas para que la ente vea y modifique sus datos en el contexto de tareas especficas.
Caso de Estudio

)omo especifica en sus polticas de privacidad, la informacin requerida por el sitio puede incluir el nombre, apellido, direccin, correo electrnico, nero, edad, nivel educacional, ciudad, provincia y cdi o postal. El usuario puede modificar o actuali(ar esta informacin en cualquier momento. 'ara modificar los datos del usuario, se accede a la misma p# ina de re istracin, por lo que los datos se encuentran en una sola p# ina. La desventaja de utili(ar la misma p# ina es que el usuario debe nuevamente aceptar las polticas de se uridad, como as tambin in resar nuevamente la clave y su confirmacin. Este proceso resulta bastante ambi uo, ya que el usuario no puede saber si es necesario in resar la misma clave o si puede cambiarla. )7 Persistent Custo#er Sessions 'ara proveer servicios personali(ados, los sitios necesitan identificar y rastrear a sus usuarios mientras est#n en el sitio.

Solucin

;tili(ar las sesiones del usuario para prestar los servicios personali(ados. ;tili(ar sesiones temporales para los datos temporales de corta duracin o cuando se refiere a la privacidad, y sesiones persistentes para datos de lar a duracin, o cuando debe conocerse la identidad del usuario. Evitar colocar los datos sensibles en los identificadores de sesin. ;tili(ar coo1ies para la identificacin, pero no para la autenticacin.
Caso de Estudio

)omo especifica en sus polticas de privacidad, la p# ina web utili(a coo1ies para obtener la si uiente informacin" a. La fec$a y $ora de la &ltima ve( que el usuario visit el sitio web. b. El diseo de contenidos o preferencias que el usuario esco i en su primera visita al sitio web. El acceso a la informacin por medio de los coo1ies, permite ofrecer al usuario un servicio personali(ado, ya que almacenan no slo los datos personales sino tambin la frecuencia de utili(acin del servicio y las secciones de la red visitadas, reflejando as sus $#bitos y preferencias. Las redes publicitarias que insertan avisos en las p# inas del sitio pueden tambin utili(ar sus propios coo1ies. ). Persistent Custo#er Sessions )on frecuencia los usuarios $acen la misma pre unta en el sitio, y suele ser costoso y requerir demasiado tiempo contestar la misma pre unta una y otra ve(.
Solucin
c. Elementos de seguridad que intervienen en el control de acceso a las reas restringidas.

Empe(ar identificando al unas de las pre untas frecuentes con el equipo de diseo. 9evisar las pre untas y respuestas en las p# inas de pre untas frecuentes de los competidores para identificar cualquier pre unta que se $aya olvidado. ,uplementar las pre untas con las obtenidas de las personas cercanas a los usuarios. * re ar una funcin de b&squeda, si $ay muc$as pre untas. 2acer que la p# ina de pre untas frecuentes sea f#cil de encontrar en el sitio. ;tili(ar la p# ina de pre untas frecuentes slo como una solucin temporal si $ay problemas de usabilidad.
Caso de Estudio

El pie de p# ina de todo el sitio contiene un lin1 a las pre untas frecuentes. !ebido a las caractersticas del sitio, no existen demasiadas pre untas frecuentes. 'or ende no es necesario un buscador en dic$a p# ina.

Figura 33. 0ie de 0gina con lin: a reguntas Frecuentes

". Desi nin

E11ecti!e Pa e 4a'outs

Es difcil disear layouts ordenados y estructurados para las p# inas webs. Este rupo describe cmo crear layouts que sean claros, predecibles y f#ciles de entender para los usuarios. Los patrones son" 7B -97! L*<>;5 7C *.>JE 52E 0>L! 7D )LE*9 079,5 9E*!, 7E ET'*/!7/-637!52 ,)9EE/ ,7NE 7= 07TE!637!52 ,)9EE/ ,7NE 7F )>/,7,5E/5 ,7!E.*9, >0 9EL*5E! )>/5E/5

I% Grid 4a'out Es difcil or ani(ar los elementos de una p# ina 3eb de una manera co$erente, sin crear desorden y abrumar al lector.
Solucin

)rear un diseo de rilla que se pueda utili(ar para or ani(ar todos los elementos en una p# ina 3eb. 5estear distintos bosquejos de diseo y determinar si los clientes pueden adivinar los elementos &nicamente bas#ndose en la posicin y el diseo.
Caso de Estudio

)omo ya se $a explicado para el caso de Page Templates (D4), el diseo de la p# ina se basa en una rilla con distintas columnas y filas dependiendo en donde se encuentre el usuario. El diario siempre mantiene la misma estructura a lo lar o de todo el sitio" el lo o en la parte superior derec$a, por debajo de l se encuentra la barra de nave acin y lue o las noticias. Las publicidades tambin se ubican en las mismas posiciones en todas las p# inas. La p# ina principal tambin tiene un diseo de rilla, pero ste puede resultar bastante desordenado para el usuario. )omo se puede apreciar en la si uiente ima en, slo una pequea parte de todo el contenido se muestra en la pantalla

?$asta la lnea anaranjada@. 'ero al se uir examinando el diseo, se puede ver el panel scrolleable que contiene la lista de noticias. La primera sensacin es que existe demasiada informacin contenida en la p# ina y el $ec$o de que el usuario deba despla(ar el panel para informarse de todas las noticias $acen que no sea posible para el lector obtener una vista r#pida de todos los acontecimientos del da.

Figura 3 . 0gina 0rincipal 4;rid <ayout5

I2 Abo!e t*e 1old ;sualmente los usuarios pierden al unos elementos de nave acin y contenido si stos tienen que despla(arse $acia abajo para verlos.
Solucin

*se urarse de que el material m#s importante est en la parte superior de la p# ina web, f#cilmente visibles y de f#cil acceso. 'robar cmo se ve en diferentes tamaos de pantalla para ase urarse de que los elementos importantes de nave acin y contenido siempre son visibles.
Caso de Estudio

!ebido a que el espacio que se muestra en la pantalla no es demasiado rande, es necesario distribuir correctamente el contenido. 'ara el caso de El Universo, se puede ver una publicidad en la parte superior de la p# ina que ocupa un espacio muy valioso. )onsiderando que la finalidad del sitio es informar distintos acontecimientos, en la pantalla visible solamente se puede alcan(ar a leer el titular de una sola noticia. En el caso de distintos tamaos de pantalla o distinto tamao de fuente, siempre si uen visibles el lo o del diario y la barra de nave acin.

Figura 3!. 0gina 0rincipal e=cesi#amente e=tensa.

En al unos casos, el lector debe si o si despla(arse $acia abajo para poder leer una noticia. *qu unos ejemplos"

Figura 3$. Ejemplos de distintas pginas en donde es necesario despla/arse 2acia abajo para leer los titulares.

I( Clear "irst :eads U)mo se puede disear una p# ina web con un enfoque unificador cuando $ay tantos elementos visuales que compiten por la atencinV
Solucin

;tili(ar este patrn para darle a cada p# ina un enfoque unificador sobre el mensaje m#s importante, y $acer $incapi en el elemento m#s importante de esa p# ina. ;tili(ar el color, tamao, tipo de letra y la posicin para diferenciar y destacar la primera lectura. !isear para pantallas de baja resolucin.
Caso de Estudio

Lo primero que llama la atencin cuando se accede al sitio, es el lo o del diario. Lue o, tenemos la barra de nave acin. ,i nos despla(amos la p# ina un poco para abajo podemos observar que $ay una noticia destacada" est# acompaada por una ima en y el tamao del titular es m#s rande que del resto de los titulares en la p# ina.

.
Figura 3%. 0gina 0rincipal 4Clear First 9eads5

I7 "i;ed Screen Widt* El tamao de las ventanas de los nave adores afecta la cantidad de texto que puede verse en la pantalla. )uando las ventanas de los nave adores son demasiado randes, cada lnea de texto es demasiado lar a para leer con comodidad.
Solucin

;sar un anc$o de pantalla fija para $acer que el texto sea m#s le ible al restrin ir el anc$o de la columna.
Caso de Estudio

5oda la p# ina del sitio tiene un anc$o fijo. Los &nicos paneles que tiene un anc$o variable son los dos paneles blancos de los extremos. *mbos sectores modifican su

tamao a la ve(. Es decir, siempre tienen los dos el mismo anc$o y esto permite adem#s que la p# ina siempre est centrada en la pantalla.

Figura 3*. Fi=ed Screen >idt2

I- Consistent Sidebars o1 :elated Content Encontrar contenido relacionado en una p# ina puede ser frustrante.
Solucin

;bicar las barras laterales en forma co$erente utili(ando un diseo de rilla y plantillas de p# ina. 5ambin determinar una lon itud m#xima de las barras laterales para que el diseo de la p# ina sea equilibrado.
Caso de Estudio

)omo ya se mencion anteriormente, se utili(a una plantilla con un diseo de rilla para todas las p# inas del diario. ;na de las columnas de la rilla ?los coloreados con celeste@ contiene lin1s a las notas de la portada y a las &ltimas noticias.

Figura 3+. &arra <aterales Consistentes

G. Ma$in

Site Searc* "ast and :ele!ant

La b&squeda es una caracterstica esencial para todos los sitios web. Es necesario ase urarse de que se tiene una $erramienta de b&squeda &til y usable. *dem#s, se debe prestar atencin a las palabras que los usuarios pueden utili(ar para buscar contenidos, en cmo se presentan los resultados, cmo interact&an los usuarios con los resultados y qu sucede si no encuentran lo que est#n buscando. Este rupo de patrones se ocupa del diseo de la interaccin, de modo que las b&squedas de los usuarios sean m#s eficaces. Los patrones son" 8B ,E*9)2 *)57>/ 4>!;LE 8C ,59*7-250>93*9! ,E*9)2 0>94, 8D >9-*/7NE! ,E*9)2 9E,;L5,

<% Searc* Action Module Los usuarios a veces quieren ir r#pidamente de una ubicacin a otra, pero las b&squedas de p# inas son demasiadas complejas para ste fin.
Solucin

)onstruir un mdulo de b&squeda en cada p# ina, utili(ando una frase sencilla que indica el campo para in resar la b&squeda y proporcionar el botn de b&squeda. ,i el sitio es demasiado rande, se puede dar la opcin de buscar en al una seccin en particular adem#s de la una frase o palabra.

Caso de Estudio

El sitio cuenta con dos maneras de buscar artculos. El primero es mediante la $erramienta de b&squeda que se encuentra en la barra de nave acin.

Figura -. 7dulo de &'s(ueda

*l reali(ar cualquier b&squeda, por ejemplo (ar del Plata, vemos que el motor de b&squeda es el de )oogle. La $erramienta de b&squeda a$ora desaparece de la barra de nave acin para ubicarse dentro del panel de b&squeda. Lue o podemos ver unas publicidades de -oo le las cuales son realmente fastidiosas ya que se encuentran antes de la lista de resultados. La presentacin de los resultados no es la adecuada, ya que no est#n ordenados por nin &n campo, no siempre podemos identificar la fec$a de publicacin y no sabemos a qu seccin pertenece la publicacin. 5ampoco ofrece nin &n mecanismo para filtrar por seccin, por ao o por perodo de fec$as.
<2 Strai *t1orward Searc* "or#s

Los formularios de b&squeda suelen ser ineficientes puesto que requieren demasiada precisin.
Solucin

;sar un motor de b&squeda que no requiera demasiada precisin. Evitar b&squedas booleanas y coincidencias exactas. )onsiderar el uso de trminos diferentes para decir lo mismo. ,etear por defecto que se busque en todas las cate oras.
Caso de Estudio

El Universo utili(a el motor de b&squeda de )oogle# Esto si nifica que posee todas las caractersticas ya conocidas de este potente buscador.

Figura 1. 9esultados de una &'s(ueda

El otro mtodo para la b&squeda es el de Ediciones *nteriores, que permite seleccionar una fec$a y obtener as todos los artculos publicados en ese da en particular. En este caso, los resultados son ordenados por subcate oras.

Figura 2. &'s(ueda por fec2a

Wste tipo de b&squeda es &til solamente cuando tenemos pleno conocimiento en cu#ndo se produjo el evento, pero eneralmente el lector recuerda las caractersticas del suceso y no al o tan especfico como una fec$a. En eneral, las $erramientas de b&squedas que ofrece el sitio son bastantes pobres, no ofrecen lo que el usuario realmente necesita.

<( +r ani,ed Searc* :esults 'uede ser difcil entender los resultados de la b&squeda si $ay demasiados o muy pocos resultados.
Solucin

'roporcionar res&menes de los resultados de la b&squeda. >r ani(ar claramente los resultados. 'roporcionar ttulos que sean $ipervnculos. ;sar los arc$ivos de re istro para personali(ar el motor de b&squeda con los trminos de b&squeda m#s comunes y para compensar las faltas de orto rafa comunes.
Caso de Estudio

)omo ya se sabe, la forma de presentar los resultados no es la apropiada. ,lo se puede ver la cantidad de resultados que arroj la b&squeda. /o es posible filtrar u or ani(ar la lista de resultados ni es posible personali(ar la b&squeda con los trminos m#s comunes.

). Ma$in

Na!i ation Eas'

web, pero no siempre los usuarios llevar# esos lin1s. Este rupo de or ani(ar y mostrar los elementos y de entender. Los patrones son"

La nave acin es una parte inte ral de todo sitio pueden encontrar los lin1s o saber a dnde los patrones describe varias tcnicas conocidas para de nave acin para $acerlos f#ciles de encontrar :B ;/707E! .9>3,7/- 27E9*9)2< :C /*J7-*57>/ .*9 :D 5*. 9>3, :E *)57>/ .;55>/, := 27-26J7,7.7L75< *)57>/ .;55>/, :F L>)*57>/ .9E*! )9;4., :G E4.E!!E! L7/:, :H ET5E9/*L L7/:, :I !E,)97'57JE, L>/-E9 L7/: /*4E, :BK >.J7>;, L7/:, :BB 0*47L7*9 L*/-;*-E :BC '9EJE/57/- E99>9,

:BD 4E*/7/-0;L E99>9 4E,,*-E, :BE '*-E />5 0>;/! =2 Na!i ation Bar Los usuarios necesitan ser capaces de lle ar a las partes m#s importantes del sitio web en una forma or ani(ada, estructurada y que sea f#cil de entender y de usar.
Solucin

)oordinar una nave acin de primer y se undo nivel en una barra de nave acin en la parte superior y%o en el lado i(quierdo de la p# ina. ;sar texto, o conos y texto, como lin1s dentro de la barra de nave acin.
Caso de Estudio

En el sitio se puede apreciar una barra de nave acin en la parte superior de la p# ina con dos niveles" cate oras y subcate oras.

Figura 3. &arra de ,a#egacin

=( 2ab :ows Los sitios necesitan dejar que los usuarios nave uen a travs de las distintas cate oras de contenidos y darles informacin sobre dnde se encuentran ubicados. 'ara $acer que las pestaas funcionen bien, se requiere incluir detalles especficos de visuali(acin.
Solucin

)rear una fila de pestaas usando una pestaa activa, pero con no m#s de die( tems, o la cantidad que quepan en una sola lnea. !iferenciar la pestaa activa por contraste y color, as como a travs de la pre6seleccin. 7ncluir una lnea indicadora que se extienda a travs de la p# ina para crear la impresin de que toda la p# ina debajo de la lnea pertenece a la pestaa activa.

Caso de Estudio

La barra de nave acin del sitio tiene el formato de pestaas. El efecto est# bien lo rado ya que ofrece la sensacin de que la pestaa seleccionada est# por encima de las dem#s y que la p# ina pertenece a la $oja de la pestaa.

Figura

. ,a#egacin con formato de pesta?as.

=6 Action Buttons Los lin1s son buenos para pasar de una p# ina a otra, pero no para la representacin de acciones, como autori(ar una compra o enviar un mensaje.
Solucin

;sar botones para las representaciones. ,i se utili(an im# enes, deben parecer que se pueden clic1ear sobre l d#ndoles una apariencia tridimensional. 5ambin proveer etiquetas concisas y claras para explicar lo que $ar# el botn.
Caso de Estudio

Existen pocos botones en el sitio de El Universo, pero podemos encontrar al unos en la p# ina de lo 6in. )omo se puede observar, est#n claramente etiquetados con un mensaje conciso que explica la accin del botn. *dem#s tienen un efecto tridimensional, lo rado a partir de las sombras del botn.

Figura !. &otones

=. E#bedded 4in$s * veces los visitantes desean profundi(ar sobre un determinado tema que aparece en el texto, o que necesitan una explicacin, pero no quieren ir en busca de ella. Los enlaces a un lado o al final del texto pueden carecer del contexto necesario para que los lectores comprendan cmo se relacionan con las partes especficas del contenido.
Solucin

Los lin1s embebidos dentro de un texto permiten una mayor exploracin de forma libre. ;sar nombres de enlaces m#s lar os y descriptivos para permitir que los usuarios cono(can dnde los llevar# el lin1. 5ratar de no abrumar al usuario introduciendo muc$os enlaces embebidos. ;tili(ar ventanas flotantes para al unos enlaces embebidos, para proporcionar informacin adicional mientras se mantiene el contexto y evitar que el usuario salte a otras p# inas.
Caso de Estudio

La mayora de los artculos no tienen lin1s embebidos, pues no lo necesitan. Los artculos que tienen lin1s embebidos, stos aparecen de color a(ul y en ne rita. ,in embar o el lector puede creer que es slo una forma de remarcar el texto.

Figura $. <in: embebido

,lo cuando el usuario pasa el cursor por sobre el texto puede notar que se trata de un enlace embebido porque se subraya el texto y en la barra de estado del browser se puede observar la url del lin1.

Figura %. <in: embebido

=0 E;ternal 4in$s La mayora de los sitios tienen lin1s a otros sitios web. Esos lin1s externos deben tratarse de una manera especial para que los usuarios entiendan que ser#n conducidos a otros sitios y que stos no est#n administrados por el sitio actual.

Solucin

Los enlaces externos pueden ayudar a construir confian(a y credibilidad, al tiempo que reduce la cantidad de trabajo necesario para crear nuevos contenidos. 2acer notar a los usuarios que est#n a punto de ser enviados a un sitio externo marcando de forma explcita cada enlace, o poniendo los enlaces externos en un #rea bien definida en la p# ina. ;tili(ar las ventanas emer entes a los enlaces externos slo cuando deba mantenerse el contexto del sitio para que los usuarios no pierdan su lu ar en un proceso.
Caso de Estudio

Los lin1s externos no son debidamente remarcados. * simple vista, no parecen lin1s. ,lo al pasar el mouse sobre el texto, podemos ver que el cursor cambia y que en la barra de estado del browser aparece un lin1. En el caso del ejemplo, todos los lin1s pertenecan a videos de 8outube# Wstos se abren en una nueva ventana ?o pestaa, se &n la confi uracin del browser@, manteniendo as el sitio del diario con la misma noticia. ,e puede ver que no $ay diferenciacin entre un lin1 externo y uno embebido, pues ambos se muestran de la misma manera.

Figura *. <in:s e=ternos.

=3 Descri&ti!e> 4on er lin$ na#es Los $ipervnculos de texto deben ser previsibles y comprensibles en trminos de las p# inas web a las que se enla(an. !e lo contrario, cuando se nave a, los usuarios si uen los lin1s, lle an a al o que no les interesan, y continuamente van de un lado a otro en seal de frustracin.

Solucin

;sar nombres de lin1s descriptivos, ya que act&an como una vista previa de la p# ina enla(ada. )rear el nombre del enlace como un resumen de la p# ina vinculada en pocas palabras. ;sar un len uaje familiar, y diferenciar los vnculos que tienen nombres similares.
Caso de Estudio

*l unos lin1s tienen nombres descriptivos que resumen de qu se trata el enlace, como es el caso del lin1 embebido de la primer ima en. El lector puede saber que el lin1 lo llevar# a la noticia en donde *r entina perdi contra Ecuador por B6K. En la se unda ima en tenemos un ejemplo de lin1s externos. )omo se puede apreciar, el usuario no sabe a dnde lo llevar# el lin1.

Figura +. <in:s embebidos y e=ternos

=%5 +b!ious 4in$s /o siempre es claro qu partes del texto son lin1s.
Solucin

;sar $ipervnculos en color a(ul y subrayado. Evitar usar texto a(ul y subrayado para cualquier otra cosa que no sean lin1s. 2acer los lin1s m#s atractivos usando distintos tamaos de fuentes y estilos. ;sar el atributo 575LE, ya que en al unos casos el texto es utili(ado como tool tip, y mejora la accesibilidad del sitio.

Caso de Estudio

)omo se ve en este ejemplo, los lin1s aparecen en color a(ul y en ne rita pero slo se subrayan cuando se pasa el cursor por sobre l. Esto puede ser confuso para el usuario ya que podra no notar de que se trata de un lin1, ya que el estilo de todo el sitio es en tonos celestes por lo que el lin1 en a(ul, al no estar subrayado, puede lle ar a quedar desapercibido.

Figura !-. <in:s embebidos

'or &ltimo se examin si se utili(aba el atributo 575LE en los lin1s, pero dic$o atributo no es especificado en los enlaces embebidos o externos al sitio. =%% "a#iliar 4an ua e Los trminos y nombre de lin1s desconocidos $acen que la comprensin y la nave acin de un sitio web sean difciles.
Solucin

;sar un len uaje que los usuarios puedan entender. )rear contenidos y enlaces comprensibles y predecibles.
Caso de Estudio

*l estar $ablando de un sitio que informa a sus lectores, es sumamente importante que todo su contenido est expresado correctamente. >bviamente, al ser el sitio de un diario, su len uaje es formal y entendible para todos sus lectores. =%2 Pre!entin Errors

Los usuarios cometen errores y eneran datos errneos cuando se enfrentan a los formularios que tienen una estructura pequea, no incluyen las instrucciones de formato, y no est#n diseados para notificar de los errores desde el principio.

Solucin

'roporcionar pistas sobre el tipo de entrada de texto que se espera. Esto puede $acerse proporcionando campos que muestran el formato, enumerando ejemplos, o proporcionando un texto explicativo. ,iempre que sea f#cil de $acer, permitir formato flexible. 5ambin dejar claro qu campos son obli atorios y cu#les son opcionales para que los usuarios no ten an que adivinar.
Caso de Estudio

En el &nico lu ar en donde el usuario debe in resar informacin es en el formulario de re istracin. )omo ya se coment anteriormente, los campos obli atorios est#n marcados con un asterisco. En el caso de al unos campos, existe un mensaje explicativo de cmo debera ser el formato de la informacin ?como la cantidad mnima de caracteres que debe tener la clave@. Los mensajes de error son correctos y se ubican cerca del error. ,in embar o se muestran en color ne ro, con lo cual no son lo suficientemente visibles para el usuario. Es decir, no llaman la atencin del usuario. >tro problema es que no se informan de todos los errores a la ve(. Esto $ace que el proceso de re istracin sea realmente tedioso si el formulario que se complet tiene varios errores. )omo se puede ver en el ejemplo, si uno se quiere re istrar sin in resar nin &n campo, slo aparece un mensaje de error indicando que el nombre es obli atorio. /o se muestra nin &n otro mensaje de error. El resto de los mensajes se van mostrando a medida que se van arre lando los errores que nos indica el mensaje.

Figura !1. En#o del formulario de 9egistracin con todos los campos #acos

Figura !2. Formulario luego de insertar una direccin de mail con formato incorrecto

Figura !3. Formulario luego de corregir el error del campo Nombre #aco.

)omo ya se explic en otro apartado, la p# ina no identifica todos los campos obli atorios puesto que si se quiere re istrar con los datos requeridos, un mensaje de Error &nesperado intente en unos minutos aparecer# en pantalla. 'ero si se car an m#s datos, como la fec$a de nacimiento, el proceso de re istracin termina exitosamente. =%( Meanin 1ul Error Messa es )uando los usuarios cometen errores, deben ser cuidadosamente informados del problema y cmo solucionarlo, o el error podra persistir
Solucin

'roporcionar mensajes de error si nificativos en un len uaje familiar formal. Establecer la ravedad del problema y enumerar los pasos para recuperarse. 4ostrar el mensaje de error cerca del #rea del problema, y remarcarlo para $acer que sea m#s visible.

Caso de Estudio

En el caso de la suscripcin, cuando se enva el formulario y ste posee errores, el mensaje explicativo del formato de la direccin de mail puede ser confusa" el mensaje &ngrese una direcci5n v6lida puede ser ambi ua ya que el usuario podra creer errneamente que su direccin es inv#lida. 'or otro lado no est#n debidamente marcados los campos obli atorios, puesto que cuando el usuario quiere re istrarse con los datos solicitados, aparece un mensaje de error que dice Error &nesperado intente en unos minutos# ,in embar o, el verdadero error es que el usuario no in res toda la informacin requerida.

Figura ! . 7ensaje de Error

*$ora bien, si se completan m#s datos, como la fec$a de nacimiento y nivel de estudios, obtenemos el si uiente mensaje de re istracin exitosa"

Figura !!. 7ensaje de Confirmacin de 9egistro

,e puede decir entonces que la p# ina de re istracin no tiene en cuenta todos los posibles errores de la p# ina, no identifica todos los campos obli atorios y peor a&n, no muestra un mensaje de error correcto. =%6 Pa e Not "ound * veces los usuarios $acen clic en los enlaces, escriben las direcciones ;9L, o tienen marcadores para las p# inas que ya no existen, dando lu ar al temido mensaje de error de p# ina no encontrada o, peor a&n, un error EKE.

Solucin

)rear una p# ina de P6gina no encontrada que permita a los usuarios nave ar o buscar el contenido que desean de forma m#s f#cil.
Caso de Estudio

Lamentablemente el sitio posee varios lin1s que nos llevan a un mensaje de Page not found# )omo se puede ver en estas dos im# enes, la p# ina de error no est# personali(ada para el sitio y no permite volver a la $ome del diario o a la p# ina anterior. Esto no provoca una buena impresin en los usuarios. ,i bien tener una p# ina de error no evitara que el error persista, no es lo mismo para el usuario se uir viendo el lo otipo y los estilos de la p# ina, que encontrarse con una p# ina en blanco. En el primer caso, el usuario tiene la sensacin que el error est# contemplado en el sitio.

Figura !$. )rtculo no encontrado

Figura !%. Ser#icio no disponible

I. S&eedin

8& ?our Site

Los sitios web lentos son frustrantes de usar. ;na p# ina principal lenta puede tener un impacto importante en la primera experiencia del usuario en el sitio. Los usuarios no deberan esperar para saber qu es lo que ofrece el sitio. Este rupo de patrones describen la manera de $acer que el sitio sea r#pido. Los patrones son" LB L>3 /;4.E9 >0 07LE, LC 0*,56!>3/L>*!7/- 74*-E, LD ,E'*9*5E 5*.LE, LE 254L '>3E9 L= 9E;,*.LE 74*-E,

4% 4ow Nu#ber +1 "iles Las p# inas que tienen muc$as im# enes, arc$ivos de audio y video, applets y plu ins son lentas para descar arse.
Solucin

!eterminar las p# inas m#s importantes del sitio y focali(arse en ellas para mejorar su performance de descar a. 4inimi(ar el n&mero de arc$ivos que debe car arse para cada p# ina. *provec$ar las ventajas de las caractersticas en 254L y en los browsers para minimi(ar el n&mero de im# enes que el usuario tiene de descar ar. *dem#s, mover los objetos que tardan en car arse de las p# inas m#s importantes a otras p# inas, y proveer de lin1s a ellos y previsuali(acin.
Caso de Estudio

)on la ayuda de la $erramienta <,low podemos ver que el sitio car a una cantidad considerable de arc$ivos, sobre todo im# enes. En el r#fico podemos ver que la primera ve( que accedemos al sitio, la cantidad de datos descar ados es de FHC.= :b con un total de BEE requests. ,in embar o, estos componentes no deben car arse cada ve( que se accede al sitio, ya que se uardan en la cac$ permitiendo que los prximos accesos requieran nada m#s que BB requests al servidor con una descar a de DK.B:. *dem#s, la mayora de los componentes est#n comprimidos, lo que ayuda tambin a mejorar el tiempo de descar a.

Figura !*. Estadsticas de la pgina de 6nicio

42 "ast/Downloadin

I#a es

Las im# enes de ran tamao tardan en descar arse.

Solucin

;sar una combinacin de tcnicas para mejorar la velocidad de descar a de las im# enes. * las im# enes en s, aplicar las si uientes tcnicas" cambiar el formato del arc$ivo de la ima en, reducir los colores, comprimirlas. ;tili(ar otras tcnicas como incluir los atributos 2E7-25 y 37!52 en el 254L y el atributo *L5 para el ta 74-.
Caso de Estudio

5odas las im# enes del sitio tienen el atributo *L5 pero no incluyen los atributos 2E7-25 y 37!52. 5odas las im# enes son formato . if y .jp . 5odos los arc$ivos son comprimidos y almacenadas en la cac$ para evitar la descar a innecesaria de las mismas cada ve( que se accede a al una p# ina del sitio. 4( Se&arate 2ables Las p# inas con tablas 254L complejas y lar as tardan demasiado tiempo en mostrarse en los browsers.

Solucin

'ara los sitios viejos en donde se usan tablas 254L, dividir las tablas randes en otras completamente separadas y m#s pequeas. !e esta forma, cada una ser# car ada y mostrada de forma independiente.
Caso de Estudio

)uando la p# ina se est# car ando, se puede ver que lo primero que car a es la publicidad de la parte superior. 'ero como se puede observar, el espacio de la publicidad se encuentra en ris. ,i bien se car a primero la parte superior de la p# ina, sta no es una parte importante del sitio. !ebera car ar primero el lo o del diario y la barra de nave acin. !e todas formas, las im# enes son lo &ltimo que se car an, por lo que el usuario puede comen(ar a leer las noticias sin nin &n problema.

Figura !+. Componentes (ue se cargan primero en la pgina inicial

Figura $-. 0gina principal parcialmente cargada

Figura $1. 0gina principal completamente cargada

46 )2M4 Power Las im# enes son fundamentales para el buen diseo del sitio 3eb, ya que proporcionan pistas visuales acerca de la interaccin y cmo est# or ani(ada la

p# ina. ,in embar o, p# inas web con demasiadas im# enes son lentas para car ar.
Solucin

;tili(ar el uso inte rado de caractersticas de 254L en lu ar de im# enes, siempre que si a siendo todava funcional y estticamente a radable.
Caso de Estudio

El sitio utili(a varias caractersticas de 254L para conformar sus p# inas, como el bac1 round para los fondos de distintos paneles y los ta s de nave acin con listas, en donde los distintos lin1s son texto y no im# enes.

Figura $2. 0gina principal sin imgenes

47 :eusable I#a es *l unas veces los sitios requieren muc$o tiempo para procesar o car ar la informacin, pero $acer esperar a los usuarios puede causar frustracin.
Solucin

2acer al sitio lo m#s r#pido posible optimi(ando el cdi o del lado del servidor, anc$o de banda y diseo de las p# inas. 'ara las p# inas que todava tardan en

car arse, mostrar un mensaje de CargandoX a los usuarios para indicarles de que el sistema est# trabajando, o mostrar partes del contenido mientras stos se van car ando en ve( de esperar por la p# ina completa.
Caso de Estudio

La mayora de los arc$ivos que se descar an en la p# ina, como arc$ivos de estilo, im# enes y javascript, son comprimidas y almacenadas en la cac$. Esto mejora considerablemente el tiempo de descar a de la p# ina. ,i bien se utili(an al unas im# enes css sprites, se podran a rupar varias im# enes para optimi(ar a&n mas la car a de la p# ina.

Criterios de Diseo
Criterios 4ocales
4a'out Los usuarios no deben efectuar scrollin para examinar el contenido de la p# ina. Es por ello que el lar o de cada p# ina no debe exceder B Y pantallas, y en el caso de la $omepa e, la p# ina no debe superar el lar o de una pantalla. Las barras de scroll $ori(ontales dificultan la interaccin a los usuarios por lo que debe evitarse en todos los casos. 5ambin es importante que los elementos de nave acin se coloquen al comien(o de cada p# ina para evitar as que los usuarios deban despla(arse por la p# ina. )on respecto al texto de la p# ina, debe considerarse que los usuarios prefieren escanear la p# ina y no leerla. 'or lo tanto los p#rrafos deben ser cortos, con no m#s de HK%BCK palabras. *dem#s, la cantidad de texto en una p# ina no debiera superar el DKZ. El resto de la p# ina debera contener im# enes o espacios en blanco.
Caso de Estudio

La p# ina principal es sumamente extensa ?ocupa un poco mas de = pantallas@ por lo que debe usarse considerablemente la barra de scroll vertical. El resto de las p# inas no son tan lar as, pero suelen ocupar C o D pantallas. En cuanto a la distribucin del texto, se puede ver que dentro de la p# ina tambin existe un panel con una barra de scroll que contiene la mayora de las noticias. Esto es bastante frustrante para el usuario que est# nave ando el sitio ya que tiene que manejar dos barras de despla(amiento si su intencin es c$equear toda la p# ina. * simple vista, suele parecer una p# ina poco armnica, con muc$as publicidades animadas y demasiado texto. La sensacin del lector es de desorden y desconcierto.

Figura $3. 0gina principal e=cesi#amente e=tensa

Na!e acin 5odos los lin1s debieran, en lo posible, tener una representacin textual. En el caso de los lin1s r#ficos deben tener un lin1 textual alternativo. La presencia de los lin1s de nave acin en una barra o tabla facilita la nave acin del visitante, como as tambin que se coloque al comien(o de la p# ina.
Caso de Estudio

Los nombres de los lin1s suelen representar su contenido, salvo para al unas cate oras como ya se $a mencionado anteriormente. *dem#s, cuenta con una barra de nave acin en la parte superior de la p# ina la cual se repite para todas las p# inas del sitio.

Figura $ . &arra de ,a#egacin

4in$s Los nombres de los lin1s deben ser cortos pero suficientemente representativos y descriptivos.
Caso de Estudio

)omo ya se $a mencionado, los nombres de los lin1s suelen ser representativos y descriptivos. Gr@1icos El usuario puede desactivar la car a de las im# enes por motivos de performance, por lo que es importante que todas las im# enes ten an un texto alternativo. <a que las im# enes son uno de los recursos que m#s deterioran la descar a del sitio, debe acotarse la cantidad de im# enes que se utili(an como as tambin su tamao. Es importante tambin indicar el tamao de las im# enes, puesto que permite al browser determinar exactamente su locali(acin, colocando el texto en su posicin final y permitiendo al usuario leerlo mientras se termina de car ar la p# ina.

Caso de Estudio

El sitio contiene muc$as im# enes, pero stas se uardan en cac$ para evitar recar arlas en cada p# ina. La mayora de las im# enes cuentan con un texto alternativo, por lo que si el usuario desactiva las im# enes puede encontrar los lin1s. ,lo existen un par de lin1s importantes que deberan verse por m#s que el usuario desactive las im# enes" por ejemplo, al desaparecer el lo o del diario, no puede percibir el lin1 que lo lleva a la $ome pa e. 5ampoco puede identificar que el campo que se encuentra a la derec$a de la barra de nave acin pertenece a la $erramienta de b&squeda.

Figura $!. 0gina con imgenes desacti#adas

Lo mismo sucede con los botones para la suscripcin. )omo se ve, el botn cancelar tiene texto descriptivo pero no as el de enviar la suscripcin.

Figura $$. &otones con imgenes desacti#adas

Calidad Es importante que el usuario pueda re resar a la $omepa e siempre que lo desee, sin importar en qu p# ina se encuentra. 5ambin incluir copyri $t para indicar los derec$os de propiedad de las p# inas como as tambin la fec$a de la &ltima actuali(acin. 7ncluir la direccin del webmaster para los usuarios puedan expresar sus comentarios, quejas y su erencias del sitio.

Caso de Estudio

5odas las p# inas tienen el lo o del diario, el cual es un lin1 a la p# ina principal.

Figura $%. <in: a la pgina principal

*l pie de p# ina se puede ver el copyri $t del sitio.

Figura $*. Copyrig2t del sitio en el pie de pgina

5ambin al pie de p# ina se puede acceder al lin1 )>/5*)5E/>,, el cual especifica varias direcciones de mail a las que el usuario puede escribir y la cual incluye la direccin del webmaster.

Figura $+. "ireccin de mail del @ebmaster

SubAeti!idad La p# ina principal representa el fin principal del sitio, por lo que el visitante debe obtener una idea r#pida del objetivo y contenido del sitio. !ebe $aber un balance entre los elementos contenidos en la p# ina, distribuyendo cuidadosamente los elementos visuales y textuales en la p# ina para evitar producir fati a visual al visitante. 5ratar de evitar la presencia de animaciones ya que stas suelen distraer al usuario.
Caso de Estudio

)omo ya se $a mencionado, la p# ina principal contiene demasiada informacin. 9esulta difcil para el usuario $acer una vista r#pida de la $omepa e ya que al contener tanto texto confunde al lector. 5ambin suele distraer las distintas publicidades animadas que aparecen en la parte superior y a un lado de la p# ina.

Criterios Globales
Na!e acin Es esencial evitar que el usuario se sienta desorientado en un sitio, por lo que es importante que en cada p# ina se muestren los lin1s de nave acin y el camino desde la $ome a la p# ina actual. Evitar tambin la existencia de lin1s desactuali(ados o de p# inas aisladas.
Caso de Estudio

La barra de nave acin permite saber en dnde se ubica el usuario, puesto que la cate ora y la subcate ora est#n remarcadas en la p# ina.

Figura %-. &arra de ,a#egacin

En cuanto a las p# inas inexistentes, podemos encontrar varias sin profundi(ar demasiado. *l unos ejemplos son" )uando se quiere acceder a los clasificados

Figura %1. Ser#icio no disponible

)uando se quiere acceder a al unos artculos publicados en fec$as anteriores en el sitio.

Figura %2. 0gina no encontrada

Calidad 5odo sitio debe proveer de una p# ina de 're untas 0recuentes ya que pueden ayudar a los usuarios con sus propias inquietudes. Es importante tambin la comunicacin con el usuario, por lo que debe $aber un formulario en donde los visitantes expresen sus pre untas, su erencias y crticas. Wstas son sumamente importantes para evaluar si el sitio realmente cumple con las expectativas esperadas o si es necesario un rediseo. 'or &ltimo, el sitio debe proveer un motor de b&squeda interno que facilite la locali(acin de la informacin especfica.
Caso de Estudio

El sitio tambin cuenta con un apartado para las 're untas 0recuentes, a la cual se puede acceder desde cualquier p# ina. ,in embar o puede parecer un poco pobre, ya que no tiene demasiadas inquietudes y adem#s no permite que el usuario $a a sus propias pre untas.

Figura %3. 0ie de 0gina con el lin: a 0reguntas Frecuentes

SubAeti!idad ,e debe proveer una or ani(acin clara de los contenidos del sitio para facilitar la comprensin por parte del usuario. /o se debe olvidar adem#s que el usuario est#

buscando informacin, por lo que sta debe ser clara y confiable. !e otro modo, el visitante podra decidir dejar el sitio.
Caso de Estudio

Los contenidos del diario est#n clasificados por cate oras y subcate oras que permiten al visitante encontrar las noticias de inters de forma m#s r#pida.

2est *eurBstico basado en los co#&onentes de usabilidad

* continuacin se presenta el test $eurstico basados en los componentes de usabilidad requerido por la c#tedra. N :es&ue Pre untas o sta 4EA:NABI4I2? La terminolo a y convenciones ?como los colores de los lin1s, colores y tipos de fuentes, iconos, colores de fondo, ttulos de B p# inas, nave acin del sitio, nave acin de p# inas, poltica de si privacidad@ son aproximadamente consistentes con el diseo de est#ndares eneralesV ,e encuentra en el mismo lu ar las instrucciones del men&, los C formatos de nave acin y los mensajes entre las diferentes si p# inasV Los formatos de los datos est#n claramente indicados por el dato D de entrada ?e. . fec$as@ y el dato de salida ?e. . unidades de si medida@V parcialm E La p# ina de inicio se diferencia de las p# inas secundariasV ente El sitio y provee una retroalimentacin inmediata al usuario parcialm = indic#ndole la posicin actual en toda la ruta de la tareaV ente Existe un mapa del sitio que proporcione una descripcin eneral F no del contenido del sitioV E"ICIENCIA G H I El sitio permite que el usuario in rese la informacin una sola no ve(V parcialm Las p# inas se car an r#pidoV ente Los mensajes publicitarios se distin ue del #rea de nave acin de parcialm las p# inasV ente El ttulo de la p# ina de inicio provee buena visibilidad para poder si ser locali(adas por motores de b&squedaV si no

B K B )ada p# ina del sitio comparte un layout consistente B B La mayora de las p# inas utili(an poco scrollin y clicV C MEM+:ABI4I2? B Los conos son visual D mantienen una armonaV y conceptualmente

distintos

pero

si

Las etiquetas si nificativas, los colores usados en los fondos y el B apropiado uso de bordes y espacios en blanco facilitan a los E usuarios a identificar un conjunto de temsV B La p# ina de inicio tiene una direccin ;9L f#cil de recordarV = B Los ttulos y subttulos son cortos, f#ciles, sencillos y F descriptivosV B 'ermite el sitio des$acer%cancelar y re$acer accionesV G B Las palabras, frases y conceptos utili(ados son familiares para H cualquier usuario convencionalV E::+:ES B I C K C B C C C D C E El sitio carece de p# inas $urfanas o lin1 rotosV La informacin que contiene el sitio es actuali(ada y fidedi naV

no si si si si

no si

Es notoria la distincin de los campos LrequeridosM y LopcionalesM no en una p# inaV El sitio est# libre de errores tipo r#ficos y de errores orto r#ficosV El sitio previene al usuario de cometer erroresV si no

Los mensajes de error son escritos en len uaje sencillo con no suficiente explicacin del problemaV SA2IS"ACCICN

C = C F C G C H C I D K

El tamao del cuadro de texto es suficientemente manejar la lon itud de las consultas m#s comunesV El sitio es a radable a la vista del usuarioV

rande para

si no no parcialm ente parcialm ente si

El sitio $ace que la experiencia del usuario sea m#s f#cil y r#pida que si no se tuviera la aplicacinV El diseo de la p# ina de inicio alienta a los usuarios a explorar m#s del sitioV El sitio es f#cil de nave ar para usuarios con muy poca experiencia en la 3ebV El sitio permite que el usuario evite recordar informacin de un lu ar a otroV

,i se reali(a un r#fico de los atributos de usabilidad que tiene el sitio, podemos concluir que su mayor problema est# relacionado con los mensajes de error de la p# ina, puesto que no ayudan al lector a evitar errores comunes que ste puede lle ar a cometer, ni se notifica al usuario con un mensaje apropiado cuando se comete al &n error. Los atributos predominantes en el sitio anali(ado son el de memorability y learnability, puesto que al mantener un diseo co$erente entre todas sus p# inas y una barra de nave acin siempre visible que identifica en dnde se encuentra el lector, permite que los nuevos usuarios aprendan f#cilmente cmo utili(ar el sitio y adem#s que sea f#cil recordar cmo nave arlo. Los otros dos restantes atributos, eficiencia y satisfaccin, est#n relacionados con el diseo de la p# ina de inicio, puesto que contiene demasiada informacin para el usuario teniendo que despla(arse por la p# ina y por un panel para poder acceder a la p# ina completa. *dem#s suele contener demasiadas publicidades que distraen al lector de su verdadero propsito en el sitio. >tro punto importante que perjudica la satisfaccin del usuario est# relacionado con la car a de datos en el formulario de re istracin, puesto que las validaciones no son las m#s apropiadas.

Conclusin
Lue o de anali(ar las distintas p# inas que conforman el portal de noticias El Universo, podemos concluir que es necesario reali(ar un rediseo del sitio, especialmente de la $omepa e, para que los usuarios que lo visitan puedan tener una experiencia m#s positiva. Los cambios m#s importantes est#n relacionados con la $omepa e. )omo ya se $a anali(ado en este informe, la p# ina contiene demasiada informacin, con pocos espacios en blanco y con demasiado texto, lo que provoca cierto cansancio al usuario. *dem#s, es necesario despla(ar uno de los paneles para poder ver todos los titulares del da, lo que no permite obtener una vista r#pida de todas las noticias y tampoco $ace posible focali(ar sobre los temas importantes. >tra modificacin necesaria est# relacionada con la barra de nave acin. Los nombres de las cate oras no siempre son lo suficientemente descriptivas para el usuario, produciendo que, qui(#s, no acceda a una cate ora por creer errneamente que nin una subcate ora le pueden lle ar a interesar. ;n caso puntual es el de la cate ora +ida, que contiene una subcate ora llamada (otores por ejemplo. >tro problema es la confusin que puede lle ar a enerar al usuario cuando las cate oras y subcate oras desaparecen sin ra(n aparente y aparecen otras nuevas, como as tambin la cantidad de publicidades animadas que contiene. 'ara un usuario que accede por primera ve(, o para aquellas personas que no est#n acostumbradas a nave ar por la web, los puede lle ar a confundir tanto las publicidades como los cambios en la barra de nave acin. En cuanto a la noticia en s misma, se puede destacar que no siempre comien(a con un resumen del artculo y ste no se encuentra resaltado, por lo que el lector no puede determinar a simple vista qu p#rrafos corresponden al resumen y cu#les no. En cuanto a las suscripciones se puede decir que son necesarios varios cambios, comen(ando por la pantalla de suscripcin. En primer lu ar, deberan marcarse todos los campos obli atorios necesarios. Lue o, deberan aparecer todos los mensajes de error resaltados como corresponde, y no en color ne ro porque el usuario no puede identificarlos instant#neamente. El $ec$o de que no se validen todos los campos del formulario a la ve( $ace que el usuario se sienta frustrado pues cada ve( que acepta la suscripcin puede aparecer un nuevo error. El diario debera adem#s permitir la desuscripcin a los newsletters. 'ero esto no es posible pues no se menciona en nin &n mail que se recibe de parte del Universo# 'eor a&n es slo recibir un mail de confirmacin, aceptarlo y poder lo uearse en el sitio, pero nunca recibir al &n newsletter en el mail. )on respecto al motor de b&squeda, el sitio debera proveer uno propio, que permita filtrar por distintos campos ?cate ora o subcate ora, fec$as, intervalos de fec$as o por ao@. Los resultados se deberan mostrar de una manera ami able para el usuario, manteniendo los estilos actuales del sitio ?como se muestran las noticias actualmente en las subcate oras por ejemplo@ y adem#s debera permitir ordenar los resultados por distintos campos.

>tros cambios necesarios pero no menos importantes est#n relacionados con los lin1s que devuelven un error. /o slo se debe tratar de evitar estos tipos de errores sino que, en caso en que se produ(can, el mensaje debera mostrarse en una pantalla que manten a los estilos del sitio. Esto permite al usuario saber que si ue dentro del mismo sitio y en cierta manera dar la sensacin de que error es contemplado por el mismo. Las caractersticas de diseo que se pueden resaltar en el sitio est#n relacionadas principalmente con los estilos co$erentes en todas sus p# inas, manteniendo siempre un template que posee la barra de nave acin visible en la parte superior de la p# ina. )abe destacar adem#s que las p# inas para imprimir tambin mantienen un estilo co$erente con el del sitio, conteniendo slo la informacin relevante para el usuario.

Biblio ra1Ba
5$e !esi n of ,ites" 'atterns, 'rinciples, and 'rocesses for )raftin a )ustomer6 )entered 3eb Experience. !ou las :. van !uyne, 8ames *. Landay, 8ason 7. 2on *ddison 3esley. 8ulio CC, CKKC. K6CKB6GCBEI6T. 0ilminas cursada CKBK de 2uman6)omputer 7nteraction. 'rof. !ra. ,ilvia ,c$iaffino, 'rof. 4 . *lfredo 5eyseyre. 0acultad de )iencias Exactas, ;/7)E/.