Informe HCI

Universidad Nacional del Centro Facultad de Cs.
Exactas Ingeniera de Sistemas Marzo 2010
Anlisis de Usabilidad del Sitio Web del Banco Provincia

Diseo de Interaccin Centrado en el Usuario
Cristian Matas Merlo Mario Ezequiel Scott cristianmmerlo@gmail.com eze.scott@gmail.com
RESUMEN
Considerando la creciente cantidad de sitios web que compiten a diario, se desea mantener a los usuarios clientes interesados en el sitio, y a los que no lo son, tratar de atraerlos a nuestro producto con una correcta imagen. He aqu la importancia que tiene el diseo de interaccin centrado en el usuario, estableciendo principios, tcnicas y convenciones a la web que lleven a realizar un sitio fcil de usar, claro y que cumpla con las expectativas del usuario. Para medir el atributo de calidad usabilidad dentro de un sitio, se recurrir a dos diferentes mtodos: un Anlisis Heurstico y un mtodo cuantitativo. Se podr ver que en particular para el sitio web del Banco Provincia, ambos mtodos conducen a la misma conclusin: el sitio tiene baja usabilidad o bien tiene un pobre diseo, por no decir nulo, centrado en el usuario. Este informe tambin intenta embeber las conclusiones con fundamentos tericos, y se har un balance de los dos mtodos vistos, y concluiremos resaltando el complemento que brindan ambos mtodos cualitativos y cuantitativos.
Contenido
1. 2. Introduccin ............................................................................................... 4 Anlisis Heurstico ....................................................................................... 6 2.1 2.2 La pagina principal .............................................................................. 6 Diseo y Jerarqua Visual ..................................................................... 8 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 2.2.6 2.3 Creacin de una jerarqua visual clara....................................... 8 Aprovechamiento y uso de las convenciones ............................11 Divisin de las pginas en zonas claramente definidas. ............12 Dejar bien claro sobre lo que se puede hacer clic. .....................12 Ruido.......................................................................................14 Eliminacin de Palabras Innecesarias .......................................14
La Navegacin ....................................................................................15 2.3.1 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 Navegacin fcil, fiable y mecnica .........................................16 Ubicacin Actual en el Sitio ......................................................17 Migas de Pan ..........................................................................17 Nombres de las Pginas...........................................................18 Pestaas .................................................................................20 Navegacin coherente .............................................................22
2.4
Ms all del tercer nivel......................................................................31 2.4.1 2.4.2 Errores dentro de la Banca Personal.........................................32 Errores dentro de la Banca Empresa ........................................43
2.5 2.6 3. 4.
El centro de contacto .........................................................................46 Acceso al Home Banking.....................................................................46
Accesibilidad ..............................................................................................48 Errores en la Arquitectura de la Informacin ..............................................49 4.1 Errores Estructurales ..........................................................................49 Bsqueda y Estructura no integradas...................................................49 Falta de Categorizacin .......................................................................49 2
Mini sitios pobremente integrados Sitio Principal .................................49 4.2 Errores de Navegacin........................................................................53 Opciones de Navegacin Invisibles.......................................................53 5. Los errores ms graves en el diseo web ....................................................55 5.1 5.2 5.3 5.4 5.5 6. Mala Bsqueda ..................................................................................55 Archivos PDF para lectura en lnea ......................................................55 No cambiar el color de los enlaces visitados........................................55 Tamaos de las fuentes ......................................................................56 Violar las convenciones de diseos .....................................................56
Heursticas de usabilidad............................................................................57 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9 Visibilidad del estado del sistema .......................................................57 Correspondencia entre el sistema y el mundo real ..............................57 Consistencia y estndares...................................................................57 Prevencin de errores ........................................................................57 Reconocimiento antes que recordar ...................................................57 Flexibilidad y eficiencia de uso ............................................................57 Esttica y diseo minimalista ..............................................................58 Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores Ayuda y documentacin .....................................................................58 58
7.
Usabilidad y el Contexto.............................................................................59 7.1 7.2 7.3 7.4 SUS - Escala de la Usabilidad del Sistema ............................................60 Uso del SUS ........................................................................................61 Puntuacin SUS ..................................................................................61 Reporte sobre el SUS ..........................................................................61
8. 9. 10.
Sitio Propuesto ..........................................................................................65 Conclusin .................................................................................................67 Bibliografa ................................................................................................70
1. I N TROD UCCI N La usabilidad es un atributo de calidad, relacionada con cuan fciles de usar son las interfaces de usuarios. Tambin puede referirse a mtodos para mejorar la facilidad de uso del sistema durante el proceso de diseo. La usabilidad de un sistema informtico, entonces, es un atributo de calidad de cualquier software o incluso una aplicacin web, o una pgina web. Este ltimo es el caso sobre el cual se tratar a lo largo de todo este informe, la usabilidad de un sitio web. En particular el sitio a analizar ser el del Banco Provincia1. La usabilidad tiene cinco componentes de calidad: Aprendizaje: Cun fcil es para los usuarios llevar a cabo una tarea bsica la primer vez que ellos se encuentran ante el sistema. Eficiencia: Una vez que los usuarios han aprendido el diseo del sistema, cun rpido pueden llevar a cabo una tarea. Memoria: Cuando los usuarios retornan al diseo luego de un periodo sin usarlo, cun fcilmente pueden restablecer su habilidad para lograr una tarea. Errores: Cuantos errores realiza el usuario, cuan severos son, y si pueden recuperarse fcilmente de los ellos. Satisfaccin: Cun placentero resulta el uso del sistema.
Existen muchos otros atributos, tambin importantes, como por ejemplo la utilidad, que se refiere a la funcionalidad del sistema, y si cumple con la necesidad de los usuarios. La usabilidad y la utilidad son igualmente importantes. Esto quiere decir que un sistema fcil de usar, pero que no hace lo que uno quiere; as como uno que hipotticamente realiza todo lo que necesitamos, pero cuya interfaz de usuario es muy difcil, son igualmente de intiles. Si hablamos de un sistema que corre en la web, o de una pgina web que intenta promover el uso de algn producto, la usabilidad es una condicin necesaria de sobrevivencia. Si un sitio es difcil de usar, la gente lo abandona. Si la pagina principal falla en poner en claro qu es lo que la compaa ofrece y qu pueden hacer los usuarios en el sitio, la gente lo abandona. Si se sienten perdidos dentro del sitio, lo abandonan. Si la informacin del sitio es difcil de leer, o no responde a ninguna pregunta del usuario, ellos la abandonan. El problema que surge a partir de un usuario abandonando el sitio, es que un potencial cliente abandona el sitio. Si un sitio retiene ms usuarios, los atrae con sus productos, publicidades y la informacin que muestra acerca de ellos, el sitio se volver ms popular, y se satisfar el objetivo de la web (por ejemplo: si el objetivo es vender un producto, se incrementarn los potenciales clientes; si es con fines de provocar un cambio, similar a al objetivo de una propaganda, el sitio tendr ms visitantes que difundan el concepto; etc.) Cuando una persona se frustra frente a un problema que posee el sitio, tiende a culparse para s mismas y no al propio sitio. El objetivo para cada pgina debera ser que fuese evidente, que el usuario medio slo con mirar se diera cuenta de lo que se trata y de cmo se usa. Un banco sobrevive gracias a sus clientes, pues todos sabemos que las entidades bancarias logran sus beneficios en funcin del capital aportado por sus clientes. Es decir, un banco hace uso del dinero que su cliente le confa. Por ejemplo, si hacemos un depsito en plazo fijo, este dinero quedar inmvil durante un determinado tiempo, durante ese tiempo, el banco puede utilizar ese dinero a su criterio, y por ello al terminar el plazo nos otorga un inters. Esto sumado a los dems intereses de las transacciones y otros servicios que brindan, conforman la ganancia del banco. No es el objetivo explicar cmo funciona un banco, sino remarcar la importancia que tienen los clientes en tal entidad. En el caso del sitio web de un Banco, el objetivo debera ser tanto servir de una aplicacin importante hoy en da, para todo cliente de un banco, como lo es el Home Banking, como as el de proveer informacin y difusin sobre los beneficios, productos y servicios que pueden ser brindados a los clientes. De esta manera, se podra capturar todos aquellos potenciales clientes que visitan el sitio, y adems mantener
1
Banco Provincia www.bapro.com.ar 4
conforme por los servicios brindados a los actuales clientes. Si se incrementa la usabilidad de un sitio web, se evita que quiz algunos clientes dejen de serlos debido a que les es muy complicado usarlo, y se pueden ganar nuevos clientes. La web del Banco Provincia la podemos dividir, a grosso modo, en dos partes: la que ofrece el servicio de Home Banking, y la que provee informacin sobre productos y servicios e informacin institucional sobre la entidad. Esta divisin nos permite un mejor estudio de la usabilidad del sitio. Sin embargo, tenemos que resaltar el hecho de que en este informe no se analizar el sitio dedicado al Home Banking, pues consta totalmente de un sitio diferente, una aplicacin web apartada, pero obviamente vinculada al Banco Provincia, y tambin debido a que no poseemos una cuenta del Banco ni somos clientes como para evaluar el Home Banking. Entonces nos focalizaremos en la pgina que est orientada a difundir informacin sobre el Banco. Para estudiar la usabilidad de un sistema, y mejorarla existen variados mtodos. Los mtodos de inspeccin son todos basados en tener evaluadores de la interfaz de usuario. Tpicamente, tienen como objetivo encontrar problemas en el diseo, ver la severidad del problema, u obtener un puntaje general del sistema entero. Algunos de estos mtodos son: Evaluacin Heurstica: es el mtodo ms informal e involucra tener especialistas que juzguen cualquier elemento de dialogo entre el usuario y el sistema, siguiendo principios establecidos de usabilidad (las heursticas). Estimacin Heurstica: es una variante en la cual se pregunta a los inspectores para estimar la relativa usabilidad de dos o ms diseos en trminos cuantitativos (tpicamente el desempeo esperado del sistema) Tutorial Pluralista: se utilizan grupos de encuentro entre usuarios, desarrolladores, y otros factores humanos a travs de un escenario, y se los lleva a discutir sobre cada elemento de dialogo. Inspeccin Estndar: se tiene un experto en una interfaz estndar y examina la interfaz por conformidad.
Muchos otros mtodos se pueden encontrar en el libro Usability Inspection Methods (Nielsen & Mack, 1994). A lo largo de este informe, se utilizar principalmente un anlisis heurstico del sitio web del Banco Provincia, situndonos en el rol de expertos en usabilidad. Este informe se organiza como sigue: a continuacin se desarrollar el anlisis heurstico previamente descripto, cubriendo ampliamente el sitio, desde la pgina principal, pasando por varios detalles en la navegacin, hasta algunos niveles ms profundos de la pgina web. Luego se dedican especiales seccin sobre Accesibilidad (Krug, 2005), Errores en la Arquitectura de la Informacin (Nielsen J. , 2009) y en el Diseo Web (Nielsen J. , 2009). Se sigue con una resumen de las Heursticas de Usabilidad propuestas por Jakob Nielsen (Nielsen & Mack, 1994) y luego una evaluacin cuantitativa de la usabilidad general del sitio web del Banco Provincia haciendo uso del SUS (System Usability Scale) (Brooke, 1996). Finalmente, se expone una nueva proposicin del sitio, modificando levemente el diseo actual del sitio pero que, sin embargo, incrementara su usabilidad. La ltima seccin es una conclusin acerca del sitio y tambin de esta rea de investigacin.
2. ANLI S I S HEUR STI CO

2.1 LA PGINA PRINCIPAL
Segn Krug (Krug, 2005), existen ciertos elementos que toda Pgina Principal debe contener: Identidad y misin del sitio. De repente la pgina principal tiene que decirnos qu es este sitio y para qu es, y si es posible, por qu deberamos estar aqu y no en otro sitio. Jerarqua del sitio. La pagina principal tiene que dar una visin conjunta de lo que ofrece el sitio, tanto del contenido (Qu puedo encontrar aqu?) como de sus caractersticas (Qu puedo hacer aqu?) y cmo est organizado todo. Habitualmente de esto se encarga la navegacin coherente. Bsqueda. La mayora de los sitios necesitan tener un cuadro de bsqueda muy visible en la pgina principal. Este sitio no lo tiene. Sugerencias. Como la portada de una revista, la pagina principal necesita convencer con sugerencias de lo bueno que hay en su interior. Los anuncios de contenido exponene los ultimos, mejores y mas populares contenidos, como las mejores historias y negocios candentes. Las promociones de caracteristicas me invitan a explorar secciones adicionales del sitio o probar caracteristicas como la personalizacion y los boletines de noticias por correo electrnico. Contenido temporal. Si el xito del sitio depende de que se visite a menudo, la pgina principal probablemente necesitara tener algunos contenidos que se actualicen con frecuencia. As mismo, un sitio que no necesite visitantes regulares tambin requiere algunas seales de vida, aunque solo sea un vnculo a una reciente publicacin de prensa, para hacer ver que no est moribundo. Bapro cuenta con una seccin de novedades donde se publican enlaces a stas. Transacciones. Parte del espacio de la pgina principal tiene que destinarse a anuncios, promociones cruzadas y transacciones bilaterales que se hayan hecho. Banco Provincia por ejemplo, cuenta con el aval del Banco Central de la Repblica Argentina y la Provincia de Buenos Aires. Accesos Directos. Las partes de contenido que se solicitan ms frecuentemente, pueden merecer sus propios vnculos a la pgina principal de modo que la gente no tenga que buscarlas. Este tipo de acceso se encuentra en el extremo superior derecho, y ser analizado en ms detalle en la seccin 2.2.3 Registro. Si el sitio utiliza registro, la pagina principal necesita vnculos para que los nuevos usuarios se registren y para que los antiguos firmen, y una forma de hacer ver que ellos estn registrados, como por ejemplo Bienvenido, Juan Prez. Realmente esto sucede con el Home Banking del Banco Provincia.
Dado que todo lo que la pagina principal tiene que realizar, si un sitio no tiene la mnima complejidad, ni siquiera el mejor diseo de pgina principal puede hacerlo todo. El diseo de una pgina principal implica inevitablemente compromiso. Y como los compromisos y la presin aumentan a la hora de intentar poner solo una cosa ms, algunas cosas se pierden al ver en qu lugar pueden ser colocadas. Es obvio que no toda Pgina Principal debe cumplir cada uno de esos incisos, pues todo depende del mbito de la pgina web y tambin de los objetivos que plantee. El sitio del banco Provincia identifica los siguientes elementos:
Identidad del Sitio
Utilidades
Jerarqua
Promos de Caractersticas
Accesos Directos
Contenido Temporal
Promos de Caractersticas
Anuncio Transacciones
Identificador del Sitio

Adems de estas necesidades concretas, la pgina principal tambin tiene que cumplir algunos objetivos abstractos: Mostrarme lo que estoy buscado. La pagina principal necesita hacer obvio cmo conseguir lo que quiero, suponiendo que est en alguna parte del sitio. y lo que no estoy buscando. Al mismo tiempo, la pgina principal debe exponerme algunas de las cosas maravillosas que el sitio tiene que ofrecer en las que puedo estar interesado, incluso aunque no las est buscando. Mostrarme dnde empezar. No hay nada peor que encontrar una pgina principal y no tener idea de por dnde empezar. Establecer credibilidad y confianza. Para algunos visitantes, la pgina principal ser la nica oportunidad de que su sitio cause buena impresin.
2.2
DISEO Y JERARQUA VISUAL
Sabiendo que los usuarios pasan muy rpido, hay cinco claves para asegurarse que ven (y entienden) la mayor parte del sitio: Creacin de una jerarqua visual clara en cada pgina. Aprovechamiento y uso de las convenciones. Divisin de las pginas en zonas claramente definidas. Dejar bien claro sobre lo que se puede hacer clic. Minimizar el ruido.
A continuacin se vern estos puntos con detalle. 2.2.1 CREACIN DE UNA JERARQUA VISUAL CLARA
Uno de los mejores mtodos para que una pgina retenga la atencin del usuario es asegurndonos que el aspecto de las cosas en dicha pagina (todas las claves visuales) representen claramente y de forma adecuada la relacin entre todas ellas: qu cosas estn relacionadas entre s y cules son parte de otras. En otras palabras, todas las pginas deben tener una jerarqua visual clara. Las pginas con una jerarqua visual clara tienen tres caractersticas: Lo ms importante es lo ms prominente. Coherencia lgico-visual. Englobe visual.
Lo ms importante es lo ms prominente
Este punto se refiere, bsicamente, a resaltar aquello ms importante. Por ejemplo, los encabezamientos ms importantes sern ms grandes, aparecern en negrita, en un color distintivo, rodeados por mas espacio o en la parte superior de la pagina (o combinando varios de estos aspectos). En este caso, notamos que en el pgina principal, lo ms importante son las publicidades sobre los mismos productos del banco, es decir los beneficios que provee el banco a sus clientes, o al menos es lo que se puede observar ms rpidamente cuando ingresamos a la pgina ya que es de un contenido muy colorido y llamativo. Suponemos que un cliente del banco visitar la web en busca de informacin acerca de cules son los descuentos, promociones o productos ofrecidos. Entonces esto resulta ser el nivel ms alto dentro de la jerarqua visual. En un segundo nivel de esta jerarqua, encontramos las novedades ofrecidas, correctamente actualizadas. Estas novedades son vnculos hacia otras pginas tanto internas como externas. Dentro del mismo nivel, pero situados en el margen derecho, los accesos a productos que requieren ya un perfil de usuario tales como el Home Banking para chequear online nuestros productos y servicios contratados. Dentro de estos tambin los hay hacia otras pginas externas, pero que estn estrechamente relacionadas con el banco, como por ejemplo el sitio de la tarjeta Visa. El tercer nivel en la jerarqua detectado es el de vnculos hacia pginas con informacin til, como lo son Recomendaciones de Seguridad, Avisos a los clientes, etc. Estos vnculos se encuentran situados tambin en el margen derecho inferior. En el mismo nivel, existen tambin mas banners que vinculan hacia los sitios oficiales de los que de alguna manera son los auspiciantes de la pgina del banco. Estos auspiciantes contribuyen a incrementar la confianza del usuario al acceder al sitio. Dentro de stos se encuentra por ej. el Banco Central de la Repblica Argentina, la Provincia de bs. As., lo que garantiza q es el ente bancario oficial de la Provincia de Buenos Aires. Se puede observar el aval de importancia en la validacin digital por el 8
ente externo CertiSur, que garantiza que el dominio es propiedad o se encuentra registrado por una empresa u organizacin autorizada para ejercer el comercio u otra actividad lcita. Tambin se encuentra el aval del Ministerio de Justicia y Derechos Humanos, garantizando la Proteccin de Datos Personales que transiten por el sitio. Tenemos que resaltar que luego de tantos banners, publicidades, imgenes, y vnculos de colores, las secciones, que se encuentran correctamente situadas, han quedado en un tercer plano, por as decirlo, casi mimetizadas con el fondo. Deberan estar resaltadas dando una correcta impresin de pestaa, enfatizando un poco ms su importancia como se ver en la seccin 2.3.5. El ltimo nivel en la jerarqua es en modo de texto simple, en la seccin inferior de la pgina, el cual nos aporta datos acerca del copyright, locacin fsica de la entidad, y otros datos concernientes a informacin de contacto. Dentro de este mismo nivel tambin podemos ubicar una serie de links, que apuntan a sitios de menor importancia, pero que pueden ser tiles como el Mapa del Sitio, Sucursales, Cajeros, y una lista de acceso rpido.
Coherencia lgico- visual

Aquello que est relacionado lgicamente, tambin lo est visualmente. Por ejemplo, se pueden agrupar las cosas similares bajo un mismo ttulo, visualizndolas con un estilo visual similar o ponindolas en una zona claramente definida. En el sitio de Bapro cada grupo de vnculos o informacin se encuentra agrupado en bloques de alguna forma logrando una buena cohesin lgica-visual. Sin embargo, podemos remarcar dos cuestiones que rompen que estos bloques, o al menos sugieren ambigedades: En primer lugar, encontramos una pestaa que acta como tal y como titulo del grupo de vnculos a la gestin de cuentas (Home Banking por ejemplo). Hablamos de la pestaa Centro de Contacto, la cual ha sido objeto de los diseadores para llevarla a cumplir estos dos roles pese a no tener nada que ver el titulo con la gestin de cuentas, ya que no es una oracin representativa, pero como se observa se intent maximizar la utilizacin del espacio de tal manera que no queden cosas poco uniformes, pero como se ve es incorrecta la posicin de sta. Es decir, tenemos un titulo que nos hace predecir interaccin con la institucin y encabeza una serie de vnculos que al hacer clic nos llevan a las respectivas paginas de inicio de sesin de usuarios en vez de ofrecernos formas de contacto, ya sea por mail, telfono o chat, como as lo sugiere el titulo del grupo.
Figura 2.1 Figura en la que se muestra las distintas secciones y en la que se observa donde se encuentra el Centro de Contacto En lo que respecta a las diferentes secciones de Banca que posee la web, si bien existe un cierto orden que denota pertenencia de los tems asociados a cada ttulo, y adems se respeta una jerarqua visual de acuerdo a la importancia de los ttulos, tenemos que destacar que la disposicin de los 3 ttulos 9
principales de la seccin puede llegar a denotar algn tipo de jerarqua cuando no la hay. Por ejemplo, el usuario claramente centra su atencin en las sub-secciones de mayor importancia para el diseador (Ahorro e Inversin y Prestamos, en el ejemplo) cuando en realidad los tres ttulos pueden llegar a ser de igual importancia para el usuario. De esta manera, Productos / Servicios queda sutilmente relegado a un tercer plano, mucho ms si la resolucin que posee el usuario es lo suficientemente chica como para dejarlo fuera del alcance una pantalla.
Figura 2.2 Figura que muestra el orden de las sub secciones, provocando una sensacin de jerarqua dentro de estas. Una mejor propuesta, podra ser la que se muestra en la Figura 2.1.
Figura 2.3 Imagen que muestra una mejor propuesta
Englobe Visual
Todo se engloba visualmente bien para que queden delimitadas las partes que pertenecen a cada bloque. Por ejemplo, el titular de una seccin Libros de Computacin aparecera por encima del ttulo del libro en particular, englobando visualmente toda la zona de contenido de la pgina, porque el libro es parte de la seccin. El titulo, a su vez, abarcara los elementos que describen el libro. Dentro de la pgina del Bapro podemos decir que los ttulos de las secciones tales como Banca Personal, Banca Empresa, etc. al estar seleccionados, no engloban visualmente con un marco todo el contenido que se encuentra en la respectiva porcin de la pgina. Consecuentemente, no se logra diferenciar instantneamente la pertenencia de las pestaas de secciones, es decir, un usuario podra a llegar a pensar errneamente que los ttulos de Banca pertenecen al banner de publicidad central. El hecho de que las pestaas yazcan sobre un fondo blanco, similar a la publicidad, sin ningn tipo de color de fondo u otro que las asle ante otra visin de la web, pueden desempear el rol de pestaas o a elementos de la publicidad ambiguamente. Quiz una correcta propuesta es expuesta en la Figura 8.1.
10
2.2.2
APROVECHAMIENTO Y USO DE LAS CONVENCIONES
Existen una cierta cantidad de convenciones adoptadas en el diseo de la navegacin por una web. Estas logran que el usuario se site de forma ms rpida con un mnimo esfuerzo, debido a que si se estandariza la apariencia del sitio, se pueden distinguir ms fcilmente los objetos o elementos web dentro del sitio. Debemos tener en cuenta lo frustrante que resulta, para un usuario acostumbrado a una determinada convencin, cuando sta no se cumple. Por ejemplo: Colores universalmente aceptados para los vnculos, incluyendo el azul para los vnculos normales, y purpura para los visitados. Se puede observar en la mayor parte de las pginas del sitio que esto no se cumple, porque en general estn de color verde y no se puede observar de alguna manera cuales fueron los vnculos que hemos visitados. Adems podemos observar que algunos se encuentran subrayados y otros no. En la seccin 2.4 se ver con ms detalle estos problemas con algunos ejemplos. El vnculo que lleva a la Pgina Principal debe ser omnipresente, usualmente en el extremo superior izquierdo y en la parte inferior de la pgina. Observamos que en todas las pginas del sitio mantienen un vnculo a la pgina principal aunque solo en el sector extremo superior izquierdo, al igual que se puede lograr haciendo clic sobre el logo del Banco; no as en la parte inferior, solo algunas pginas poseen esta opcin y ya muy profundo en los niveles de navegacin. En la figura 2.2.2.1 se observa una parte del marco que se mantiene en todas las pginas del sitio y es el sector que nos ayuda a volver a la pgina de inicio cada vez que se crea conveniente.
Figura 2.2.2.1 Figura que muestra el acceso a la Pagina Principal o Inicial
El texto ha de ser presentado en fuentes similares, es decir, hay que tener cuidado en no mezclar fuentes en pginas que se enfrenten con la imagen consistente del sitio, lo que hace que sean difciles y lentas de leer. En nuestro sitio nos encontramos con este tipo de error bastante a menudo. Ms all del tercer nivel nos encontramos con todo tipo de tipografa que atenta contra la consistencia del sitio. En la seccin 2.4 Mas all del tercer nivel se vern otros claros ejemplos de esto. No disear el sitio entero para una resolucin especfica, pues la cantidad de usuarios que visitan el sitio es similar a la cantidad de diferentes resoluciones que existen. Durante mucho tiempo 800x600 fue la resolucin ms popular, pero hoy en da, con los monitores de alta resolucin, la mayora posee resoluciones de 1024x768. El sitio est optimizado para resoluciones iguales o mayores a 1024x768, por lo que lo hace accesible para la mayor parte de la poblacin actual. Aunque no es una convencin, la psicologa del usuario es tal que cualquier texto que tiene un subrayado lo considere un potencial vnculo. La mayora de los expertos en diseo de sitios web usan esto y las ventajas que trae, permitiendo mostrar los enlaces utilizados, los internos y externos. Nuevamente el caso de los vnculos; se vern en la seccin antes mencionada que existen gran cantidad de enlaces subrayados y otros que no y tambin texto que no es un vnculo subrayado produciendo grandes confusiones a la hora de entender donde se puede hacer clic y donde no. No presentar vnculos rotos dentro del sitio. Se conoce que los usuarios dejan el sitio ante la aparicin de un solo enlace roto. Una buena prctica de los diseadores en al menos tener una pgina de error personalizada para el sitio. Existe slo un vnculo a una imagen roto, y un link que redirige a la misma pgina, pero la mayor parte del sitio no tiene mayores problemas 11
con esto. Es muy incmodo cuando al hacer clic sobre un vnculo, este nos conduzca a una pgina que no funcione. Por suerte esto no sucede aqu. Para los propsitos de la organizacin de la estructura del sitio web, ste debe tener la mayor cantidad de contenidos accesibles en el primer nivel. Las estructuras que tienen mltiples niveles deben concentrar la informacin en el primer nivel cuando sea posible, y en los niveles ms prximos a los terminales siempre y cuando no confunda al usuario dando demasiadas opciones en los niveles intermedios, ya que se conoce que puede causar confusin en cuanto a la seleccin correcta de la sub-categora. Se puede observar que el sitio est bien organizado en este sentido. Las secciones son claras y las sub secciones tambin. No hay mucho margen de error en la eleccin si se sabe que es lo que se est buscando; sino, tal vez sea un poco ms complicado ya que no poseemos un buscador que logre ayudarnos a encontrar lo que deseamos.
2.2.3
DIVISIN DE LAS PGINAS EN ZONAS CLARAMENTE DEFINIDAS.
En este sitio podemos observar que se mantiene en todas las pginas un marco. ste marco contiene las secciones, el identificador del sitio y las utilidades; pero llegando a un tercer nivel nos encontramos con las sub-secciones tambin. Adems, es claramente visible el sector donde se encuentra el contenido de la pgina. Aunque no hay una divisin clara en cuanto a objetos que lo separen, existe una divisin visual por el tamao de fuente y alguna lneas, pero siempre siguiendo un estilo un tanto sofisticado que resulta algunas veces difcil de entender. 2.2.4 DEJAR BIEN CLARO SOBRE LO QUE SE PUEDE HACER CLIC.
En una pgina web, cualquier cosa puede detenernos y hacernos pensar innecesariamente. Por ejemplo, los nombres de las cosas. Los tpicos culpables son los nombres bonitos o ingeniosos, los producidos por el departamento de marketing, los nombres especficos de la empresa y los nombres tcnicos que no nos son familiares.
Figura 2.4 Figura que demuestra un claro ejemplo de cun difcil es para una persona darse cuenta lo que es y lo que no es un botn En el sitio se observan por ejemplo que los nombres de las secciones en la pgina principal no son los suficientemente evidentes, porque complejizan con la palabra BANCA. Sera preferible, o ms claro, que solo dijera PERSONAS, EMPRESAS, etc. Estas palabras, o mejor dicho frases, se entiende que han sido escritas por los diseadores para mantener un cierto estilo bancario, pero en realidad lo que hacen es hacernos detener a pensar que implica la palabra Banca, y si en realidad un clic en esa seccin nos llevara al lugar esperado.
12
Figura 2.5 Imagen que ilustra los nombres de las secciones con la palabra Banca en ella Otro foco innecesario de interrogantes en nuestras mentes es el tema de los vnculos y los botones en los que se puede hacer clic, pero que nos hacen dudar si podemos o no pulsarlos. Como usuario nunca debera emplear ni una milsima de segundo en pensar en cosas como si se puede o no hacer clic en esto o aquello. Esto sucede con las secciones tambin. Est bien que nos damos cuenta cuando arrastramos el cursor sobre el vinculo, donde cambia la flechita por la manito y tambin el color del texto, sugiriendo un botn, pero no es el caso que el usuario deba estar recorriendo toda la pagina con el cursor para descubrir los vnculos. Sera ms evidente si en lugar de ello apareciera un botn, o una solapa. El tema de las solapas es tratado en profundidad en la seccin 2.3.5. Otro problema detectado es la similitud entre algunos titulares de secciones, cuyo formato no logra hacer una diferencia clara de los botones. Por ej., en la Figura 2.6 se puede observar que el rotulo novedades tiene exactamente el mismo formato que el botn (que no deja de ser una imagen) de acceso al Home Banking. O sea, el usuario no podra hacer una diferencia clara entre aquello donde puede hacer clic y donde no, llevndolo a tener que analizar y pensar en el diseo de la web hasta llevarlo a una frustrante encrucijada.
Figura 2.6 Figura que denota la similitud entre un botn y algo que es un titular
El mismo problema se repite en cada una de las secciones Banca Personal, Banca Empresarial y Banca Agropecuaria, donde en ellas los titulares de la secciones poseen exactamente el mismo formato, tentndonos a hacer clic en ellos como se muestra en la Figura 2.7.
Figura 2.7 Figura que muestra la similitud con otro tipo de botones de los ttulos para las subsecciones Lo que ocurre cuando estamos usando la Web es que los interrogantes que nos surgen aumentan nuestro volumen de trabajo cognitivo y distraen nuestra atencin de la tarea que tenemos entre manos. Las distracciones pueden ser leves, pero se acumulan y pueden, incluso, llevarnos a abandonar. 13
Por norma se tiene que a la gente, en general, no le gusta sentirse desconcertada cuando se pone a pensar en cmo hacer las cosas. El que las personas que crean los sitios no se preocupen demasiado por facilitar el trabajo (y hacerlo evidente) puede llegar a minar nuestra confianza en el sitio y sus editores. 2.2.5 RUIDO
Uno de los grandes enemigos de las pginas fciles de atrapar es el ruido visual. Existen en realidad dos tipos de ruidos: Negocio-abigarrado. Este tipo de ruido sucede cuando toda la pgina clama por la atencin del usuario, provocando un efecto que puede llegar a ser abrumador. Por ejemplo, una pgina que posee una infinidad de invitaciones para que compremos, o una multitud de puntos con exclamaciones y colores llamativos. Ruido de fondo. En algunas pginas se est como en una fiesta; ninguna fuente de ruido est lo suficientemente alta para que lo distraiga, pero existen infinidad de diminutos fragmentos de ruido visual que nos terminan agotando
Debemos reconocer que en la pgina web del Bapro, existe una cuidada armona con respecto a este punto, pues existe una nica publicidad principal que distrae la principal atencin en la pgina de inicio. En el resto de las pginas, se respeta una correcta jerarqua visual y no existe nada que distraiga la atencin del usuario del centro donde se halla la informacin. Es decir, existen otros vnculos llamativos, pero permanecen en los mrgenes con tamaos discretos. 2.2.6 ELIMINACIN DE PALABRAS INNECESARIAS
La norma numero diecisiete de E.B.White en su The Elements of Style (Strunk & White, 1918):
17 Omitanse las palabras innecesarias.

La escritura vigorosa es concisa. Una frase no debe tener palabras innecesarias y un parrafo debe omitir las frases superfluas por el mismo motivo que el dibujo debe prescindir de las lineas innecesarias y cualquier aparato de las partes inutiles. La mayoria de las paginas web que se observan contienen una cantidad bastante considerable de palabras que simplemente ocupan espacio y que no se van a leer. Solo por el hecho de estar ah, todas esas palabras sugieren que , en realidad, hay que leerlas para entender lo que pasa, lo cual hace que las paginas parezcan mas desalentadoras que lo que realmente son. Suprimir las palabras que no van a leerse tiene diversos efectos beneficiosos: Reduce el nivel de ruido de la pagina Realza el contenido verdaderamente practico Se acortan las paginas permitiendo ver al usuario mas de cada una con solo un vistazo y sin avanzar o retroceder.
Gran parte del discurso innecesario es del tipo de escritura publicitaria de felicitacin a uno mismo que se suele encontrar en los folletos mal escritos. A diferencia de los buenos folletos publicitarios, el discurso innecesario carece de informacin prctica y est enfocado al elogio de los buenos que somos en lugar de definir que nos hace tan buenos. Aunque el discurso innecesario se encuentra algunas veces en las paginas principales (normalmente en prrafos que empiezan con Bienvenido a), su hbitat favorito son las pginas de primera plana de las secciones del sitio (primeras planas de las secciones). Dado que estas pginas contienen normalmente la tabla de contenidos y no un contenido real propio, existe la tentacin de llenarlas con discursos innecesarios.
14
En los primeros niveles del sitio, es decir en la pagina inicial y en las secciones de Baca (Empresa, Agro, etc.) no hay sobrecarga de discurso, con palabras innecesarias, ya que ni siquiera existe discurso alguno. Es ms, la pgina inicial carece de un prrafo de presentacin inicial porque asume que todo el que visita el sitio tiene conocimiento acerca de esta famosa entidad provincial.
2.3 LA NAVEGACIN
Al explorar la Web, de alguna forma se siente como estar movindonos por un espacio fsico, es por ello que para describir la experiencia se utiliza la palabra navegar. Del mismo modo, hacer clic en un enlace no visualiza o carga la pagina, sino que conduce a ella. Entonces, continuando con la analoga al mundo real, podemos decir que a veces la navegacin nos hace sentir: Falta de sensacin de escalas. Incluso despus de haber usado exhaustivamente un sitio web, y a menos que sea un sitio muy pequeo, carecemos del menor sentido del tamao que puede llegar a alcanzar. Por lo que sabemos, podra haber gran cantidad de rincones que jams se explorarn. En sitios de gran envergadura como el del Bapro, esto es inevitable. El resultado prctico al que llegamos nos habla de la gran dificultad que existe sobre si se ha visto todo lo que nos interesa de un sitio, as como cuando se ha de parar de buscar. Aqu es cuando resulta practico, tanto por la enorme extensin del sitio como para encontrar la informacin deseada dentro de ste, adoptar la convencin del cambio de color de los enlaces una vez que son visitados (Ver la seccin 2.2.2), porque nos da una sensacin de terreno ya cubierto. Ausencia de sensacin de direccin. En un sitio web no hay izquierda o derecha, arriba o abajo. Podemos hablar de movimientos hacia arriba y hacia abajo, pero se refieren a la jerarqua (a un nivel ms general o ms especfico). Ausencia de la sensacin de ubicacin. En los espacios fsicos a medida que nos desplazamos, vamos conocindolos. Desarrollamos un sentido del lugar donde estn las cosas y podemos incluso, atajar para conseguirlas
Cuando queremos volver sobre algo en la Web, en lugar de contar con el sentido fsico del lugar donde estbamos, solo tenemos que recordar su lugar en la jerarqua conceptuar y volver sobre nuestros pasos. Sin duda estamos hablando aqu de la incorporacin de Migas o Breadcumbs, pero esto se tratar ms en profundidad en la Seccin 2.3.3. Esta ausencia de espacios fsicos tiene sus pros y sus contras. Entre las ventajas esta la sensacin de ingravidez que puede ser excitante y que explica, en parte, por qu es tan fcil perder la nocin del tiempo en la Web (igual que ocurre cuando nos perdemos en un buen libro). Se habla de navegacin web porque averiguar dnde estamos es un problema bastante ms predominante en la Web que en los espacios fsicos. En la Web estamos intrnsecamente perdidos, no podemos asomarnos por los pasillos para ver donde estamos. La navegacin web compensa la ausencia del sentido del lugar incorporando la jerarqua del sitio, creando una sensacin del tipo all. Luego de todo esto, como conclusin se puede decir que la navegacin por la web tiene que ser buena. Dos son, especialmente, los propositos evidentes de la navegacion: nos ayuda a encontrar lo que estamos buscando y nos dice tambien el lugar donde nos encontramos. Podemos incluso hablar de un tercero: Nos ofrece un lugar donde no nos perdamos. Sentirse perdido no es habitualmente algo demasiado agradable. Si se ha hecho bien, la navegacion pone el terreno bajo nuestros pies (aunque sea un terreno visual) y nos proporciona las barandas donde poder sujetarnos. 15
Pero la navegacion tiene, tambien, otras funciones muy importantes (y que se suelen pasar por alto): Nos dice lo que hay en cada lugar. Con una jerarquia visible, la navegacion nos presenta lo que contiene el sitio. La navegacion nos revela el contenido; descubrir el sitio puede ser mas importante, incluso, que el guiarnos o situarnos. Nos ensea a usar el sitio. Si la navegacion hace bien su trabajo, mostrar, implicitamente, el lugar por donde empezar y las opciones que hay. Si est correctamente realizada, debe ofrecer todas las intrucciones que usted necesita (lo que es ideal, dado que la mayopria de los usuarios ignora las otras intrucciones). Nos permite confiar en las personas que la han creado. En todo momento durante el tiempo que estamos en un sitio web tenemos en mente lo siguiente: Sabe esta gente lo que esta haciendo?. Es uno de los factores principales que usamos ala hora de decidir si merece la pena y si vamos a volver. Una navegacion clara y bien desarrrollada es una de las mejores oportunidades con las que cuenta un sitio para dar una buena impresin. NAVEGACIN FCIL, FIABLE Y MECNICA No importa el nmero de veces que hay que hacer clic en algo si la opcin es mecnica e inequvoca. Segunda
2.3.1
norma de Krug sobre la usabilidad.

Los diseadores web, as como los profesionales de la usabilidad, han estado debatiendo durante mucho tiempo, y a lo largo de los aos, sobre la cantidad de veces que se espera que el usuario haga clic para obtener lo que quiere sin frustrarse demasiado. Algunos sitios tienen incluso unas normas de diseo que establecen que nunca se ha de sobrepasar un nmero determinado de clics (normalmente tres, cuatro o cinco) para acceder a cualquier pgina del sitio. En realidad se trata solamente de una parte de un debate ms extenso sobre los meritos relativos de la jerarqua de un sitio amplio frente a la jerarqua de un sitio profundo. Un sitio amplio se divide en ms categoras dentro de cada nivel, pero tienen menos niveles. As, son necesarios menos clics hasta alcanzar el botn. Un sitio profundo tiene ms niveles y requiere ms clics, aunque las opciones a considerara en cada nivel son menores. Nielsen asegura que, despus de todo, lo que reina es el contenido, y sus estudios muestran que los usuarios tienden a ignorar las opciones de navegacin y mirar directamente el cuerpo de la pgina cuando ellos van a una nueva pgina. Las Migas son extremadamente tiles en las pginas con arquitecturas de informacin jerrquicas porque ellas requieren niveles anidad de progresivos sub sitios ms pequeos. Recomienda el uso de estos elaborados mecanismos de navegacin solo para sitios de gran envergadura y contenido heterogneo, como lo es el sitio del Bapro. (Nielsen J. , 1999) Este sitio web, se caracteriza por ser un sitio amplio en vez de profundo, pues notamos que cada seccin no posee demasiados links para seguir adentrndonos en la informacin necesaria. El diseo de la informacin radica en la amplia categorizacin del contenido web que posee, por lo que se logra acceder a la informacin buscada si uno analiza, y escoge, correctamente las categoras que desea. Una vez en una de ellas, se cuenta con toda una pgina con suficiente informacin, con algn que otro link en profundidad a algn archivo (en formato PDF) que cuente con mas informacin si la ocasin lo amerita. Aparentemente, el numero de clics para acceder a cualquier parte parece un criterio bastante prctico, aunque, con el paso del tiempo, se ha llegado a pensar que lo que realmente importa no es el numero de clics que hay que hacer para alcanzar lo que se desea (si bien existen lmites), sino la dificultad en la eleccin de ese clic (El esfuerzo necesario de pensamiento y la incertidumbre sobre si la eleccin tomada es la correcta). En general, parece que se puede decir sin temor a equivocaciones que al usuario no le importa el numero de clics que hacer en tanto que sea sencillo y ofrezca una confianza continuada sobre el acierto en la pista que se persigue (siguiendo lo que Jared Spool denomina la fragancia de la informacin ). La 16
regla de oro puede ser algo como que tres clics mecnicos e inequvocos equivalen a un clic que requiere cierto grado de reflexin. En cuanto a la confianza otorgada por el numero de clics sobre los vnculos que provee el sitio, podemos decir que son lo suficientemente confiables ya que se reducen el numero de equivocaciones al entrar en una u otra seccin, ya que la categorizacin es amplia y buena, con esto queremos decir que los nombres de los vnculos no se solapan y son claros. Tenemos que destacar que debido al dominio del sitio web, resultara una navegacin confiable, clara y evidente siempre y cuando el usuario sea uno con cierto conocimiento en dicho dominio. Es decir, si una persona que por ejemplo, no conoce la diferencia entre un Fondo Comn de Inversin y la Administracin de Ttulos y Valores obviamente, no podr llevar una navegacin clara y limpia, pues deber ingresar en estos vnculos para averiguar sobre lo que stos tratan. 2.3.2 UBICACIN ACTUAL EN EL SITIO
Una de las formas que tiene la navegacin de contrarrestar la sensacin inherente a la Web de perdido en el espacio es mostrndome donde estoy en un esquema, igual que el indicador Usted est aqu lo hace sobre el plano de un centro comercial. Krug propone una serie de formas para resaltar la ubicacin actual como se observan en la Figura 2.8.
Figura 2.8 Figura que muestra las distintas maneras para resaltar la ubicacin actual. Tambin asegura que el defecto ms comn de los indicadores Usted est aqu es que son demasiado sutiles. Tienen que resaltarse o, de lo contrario, pierden su valor de clave visual y terminan aadiendo ms ruido a la pgina. Una forma de asegurar que sobresalgan es aplicando ms de una distincin visual; por ejemplo un color diferente y texto en negrita. Las claves visuales demasiado sutiles son realmente un problema muy comn. A los diseadores les gustan las claves sutiles, porque la sutileza es uno de los rasgos del diseador sofisticado. Pero los usuarios web por lo general tienen tanta prisa que no les importan demasiado. En el caso de nuestro sitio a analizar, sabemos que estamos en la seccin principal Banca Personal, Banca Empresa, etc. Porque lo podemos observar con la pestaa resaltada (aunque sutilmente, pues se podra hacer un poco ms evidente) pero luego, ya dentro de las sub secciones no existe una forma que nos indique en cul de todas nos encontramos. Esto logra perdernos dentro de la web, en especial cuando estamos en un nivel ms profundo al tercero. Se podra solucionar con una mnima modificacin del panel de navegacin con alguna de las tcnicas propuestas por Krug arriba. Por ejemplo, nuestra propuesta se adjunta en la seccin 8, donde se pueden observar imgenes de muestra. 2.3.3 MIGAS DE PAN
Al igual que los indicadores Usted est aqu, las migas de pan nos indican donde estamos (Algunas veces incluso, incluyen un texto como, por ejemplo, Usted est aqu.) 17
Veamos un ejemplo del Banco Francs en la Figura 2.9.
Figura 2.9 Se muestran las migas de pan en la pgina de BBVA Banco Francs Se llaman migas de pan porque nos recuerdan a la pista de migas de pan que Hansel iba dejando caer en el bosque para poder volver, junto a Gretel, a casa. A diferencia de los indicadores Usted est aqu, que le indican su situacin en el contexto de la jerarqua del sitio, las migas de pan solo muestran el camino desde la pgina principal al lugar donde se encuentra. Una miga muestra donde se encuentra en el esquema global e las cosas, y la otra dice como llegar hasta all. Podra decirse que los marcadores de libros se parecen mucho a las migas de pan de los cuentos, ya que se van dejando caer a medida que avanzamos, previendo la posibilidad de volver sobre nuestros pasos en algn momento. O podra sugerirse que los vnculos visitados (vnculos que han cambiado de color para reflejar que se ha hecho clic en ellos) se parecen ms a las migas del pan porque sealan el camino que hemos tomado y, si no se vuelven a visitar pronto, nuestro explorador (como los pjaros) los har desparecer. Para la mayora de los sitios, no se cree que solo las migas de pan constituyan un buen esquema de navegacin. No son un buen sustituto para mostrar, al menos, las dos capas superiores de la jerarqua, porque no revelan lo suficiente. Dan una idea, una visin, pero se trata ms bien de una visin parcial limitada. Si las migas de pan estn bien realizadas, son claras y fciles de entender, no ocupan demasiado espacio y proporcionan una forma acertada, conveniente y coherente de hacer dos de las cosas que con ms frecuencia se necesitan: retroceder un nivel o ir a la pgina principal. Son de mucho valor como parte de una dieta equilibrada, como un accesorio a un esquema slido de navegacin; en particular, para los sitios grandes con una jerarqua profunda o cuando hay que relacionar un conjunto de sub sitios. Notamos que al sitio web del Banco Provincia, le convendra adoptar el uso de Migas para facilitar la navegacin, debido a la enorme cantidad de contenido que tiene esparcido en diferentes y mltiples niveles. Por ello sera bueno hacer uso de ellas, siempre conservando que: Se mantengan en la parte superior de todo Se utilice el signo > entre niveles. Haciendo alusin a mayor que Se utilice un tamao de letra pequeo Se utilice la etiqueta previa Usted Est Aqu: Se resalte en negrita el ultimo termino No se utilice como el nombre de la pgina, aprovechando el ltimo termino lo suficientemente grande.
Otra cosa que funciona como miga de pan como se vio anteriormente es el uso de links de otro color, cosa que tampoco sucede en este caso. 2.3.4 NOMBRES DE LAS PGINAS
Los nombres de las pginas son las seales de las calles en la Web. Al igual que las seales de las calles, cuando las cosas van bien no se presta ningn tipo de atencin a los nombres, pero tan pronto como se siente que lejos de la direccin adecuada se necesita encontrar el nombre de la pgina sin esfuerzo, para permitir una re orientacin. Hay cuatro cosas fundamentales en cuanto a los nombres de las pginas: 18
Todas las pginas necesitan un nombre. Al igual que cada esquina ha de tener su propia seal de calle, todas las pginas deben tener un nombre. Muchas veces se piensa que solo con las migas alcanza. Algunas veces se coloca el nombre de la pgina al final de las migas con una fuente distinta, que destaque ms en lugar de utilizar el ttulo de la pgina ya que ahorra espacio y es una cosa menos sobre lo que hay que trabajar en el diseo de la pgina, pero no es suficiente. El nombre de la pgina tambin es necesario.
En el caso del sitio del banco provincia podemos ver que en la mayora de las pginas existe un nombre adecuado a modo de titulo, pero esto no siempre ocurre. Un caso es la pgina a la cual nos traslada el link de Transferencias personales desde y hacia el exterior. Se puede ver claramente que el ttulo de la misma no est en ninguna parte y en cambio se nota el ttulo Productos y servicios para particulares con un estilo y fuente distinta a la de toda la pgina. La Figura 2.10 muestra esta pgina.
Figura 2.10 Imagen que muestra la pgina a la cual nos conduce el link de Transferencias personales desde y hacia el exterior El nombre ha de estar en lugar adecuado. En la jerarqua visual de la pgina, el nombre de sta debera aparecer enmarcando el contenido que es nico para esa pgina. (Despus de todo, es a lo que se est dando un nombre, no a la navegacin o a los anuncios, que son slo parte de la infraestructura.)
Desgraciadamente no podemos decir que esto se cumpla en la pgina, pues si bien existe un nombre que encabeza, no est enmarcando toda la pagina. Ya hemos propuesto una solucin esto en la Figura 8.1. El nombre ha de ser prominente. Hay que buscar la combinacin de posicin, tamao, color y caracteres para que el nombre diga: ste es el encabezamiento para toda la pgina. En la mayora de los casos ser el texto ms grande de la pgina. Tampoco esto se cumple, un ejemplo de esto es la pgina antes mencionada y existen varias otras que pueden llegar a confundirse con un hipervnculo, ya que son solo un poco ms grandes que estos y poseen el mismo color. A modo de ejemplo vemos la Figura 2.11.
19
Figura 2.11 Ejemplo de ttulo poco prominente. Otro error importante dentro del sitio es la discrepancia entre el nombre del vnculo y el nombre de la pgina (como se vio anteriormente) o algunas muchas diferencias menores, lo que disminuye la confianza en el sitio. Cada vez que se viola esto en un sitio, se debe pensar aunque sea una milsima de segundo para entender si se trata de lo mismo.
2.3.5
PESTAAS
Las pestaas son una gran opcin para navegar en sitios grandes. Las razones son las siguientes: Son muy claras y fciles de entender. Se puede observar que todo el mundo entiende cual es la idea detrs de ellas, cual es su funcin. Son difciles de perder de vista. Las pestaas son visualmente distintivas por lo que a los usuarios le resulta difcil pasarlas por alto, cosa que no sucede con las barras de botones por ejemplo en la parte superior de la web. Dado que tambin es muy difcil que se las confunda con algo que no sea navegacin, crean el tipo de separacin tan obvia a primera vista deseada entre la navegacin y el contenido. Estn muy logradas. Los diseadores web siempre estn luchando porque las pginas sean ms interesantes visualmente. Si se hacen correctamente, las pestaas pueden aadir un estilo pulido y cumplir un objetivo til. Sugieren un espacio fsico. Las pestaas crean la ilusin de que la etiqueta activa se desplaza fsicamente para colocarse en primer plano. Es un truco fcil pero efectivo, probablemente, porque se basa en una clave visual que detectamos fcilmente. De otra forma, el resultado es una sensacin ms fuerte de lo habitual por la que vemos que el sitio est dividido en secciones y nos encontramos en una de ellas.
Actualmente existe una idea de los diseadores de especie de pestaa, pero no es lo suficientemente evidente como para sugerir un espacio fsico ni tampoco un englobe visual del que hablamos anteriormente en la seccin 2.2.1.
20
Existen otras pginas del mismo dominio que poseen buenas pestaas que cumplen con todos los puntos anteriormente descriptos, tales son la web del Banco Francs Figura 2.12 y del Banco Galicia Figura 2.13
Figura 2.12 Imagen que muestra las pestaas en el sitio de BBVA Banco Francs
Figura 2.13 Figura que muestra las pestaas en el sitio del Banco Galicia Nuestra proposicin para mejorar la web del Banco Provincia, con un sutil cambio, ha sido hecha en base a los principios antes mencionados y tambin de los ejemplos anteriores, en la seccin 8.
21
2.3.6
NAVEGACIN COHERENTE
Los diseadores web utilizan el trmino navegacin coherente (o global) para describir el conjunto de los elementos de navegacin que aparecen en todas las pginas del sitio.
Figura 2.14 Figura que muestra cmo las distintas pginas dentro del sitio poseen un marco en comn y la idea de navegacin coherente Si est perfectamente realizada, la navegacin coherente debera decir (preferiblemente en un tono de voz calmado y reconfortante): La navegacin est aqu. Algunas partes cambiarn un poco dependiendo de donde se encuentre, pero siempre se encontrarn aqu y siempre funcionarn de la misma forma. Por el simple hecho de tener en todas las pginas la navegacin en el mismo lugar y tener un aspecto coherente confirma, de forma inmediata, que an se encuentra en el mismo sitio. Mantenerlo as en todo el sitio significa que, muy probablemente, solo tendr que aprender cmo utilizarlo una sola vez ya que luego ser simplemente lo mismo. La navegacin coherente debera incluir los cinco elementos que ms se necesitan tener siempre a mano: Identificacin del sitio Camino hacia la pagina principal Una forma de buscar Utilidades Secciones
22
Identificacin del sitio

Del mismo modo que esperamos ver el nombre del edificio encima de la puerta de entrada, esperamos ver el identificador del sitio en la parte superior de la pgina (normalmente en la esquina superior izquierda, o al menos, cerca). Esto es porque la identificacin del sitio representa al sitio entero y, como tal, ocupa la posicin ms alta en la jerarqua lgica del mismo. Este sitio Secciones del sitio Sub secciones Sub-subsecciones, etc. Esta pgina Zonas de la pgina Elementos de la pgina Existen dos formas de alcanzar esta primaca dentro de la jerarqua visual de la pgina: convertirla en lo ms prominente dentro de esa pgina o que sirva de marco para todo lo dems. La pgina del Bapro opta por la primer opcin. Vase la Figura 2.1 Adems de estar donde creemos que debera estar, el identificador del sitio tambin debe tener aspecto de un identificador de sitio. Esto significa que debera tener los atributos que esperamos ver en el logotipo de una marca o la seal exterior de un almacn: unos caracteres distintivos y un grfico que sea reconocible, ya sea del tamao del botn o de una valla publicitaria.
Camino hacia la pgina principal

Uno de los elementos ms cruciales segn Krug en la navegacin coherente es el botn o vnculo que me lleva a la pgina principal del sitio. Tener el botn de inicio o Home a la vista en todo momento es tranquilizador ya que solo con hacer clic sobre este cuando estamos perdidos nos lleva a un lugar seguro. Siempre se puede volver a empezar. Est comenzando a surgir una convencin por la que el identificador del sitio funcione tambin como botn que me lleva a la pgina principal. Se trata de una idea muy vlida que debera ponerse en prctica en todos los sitios, pero existe un nmero asombroso de usuarios que todava no lo conoce. Se puede observar en la Figura 2.1 que la pgina posee un link a la pgina principal que se puede ver en todo momento y adems, si se hace clic sobre el identificador, este tambin nos conduce a dicha pgina, por lo que se observa que la pgina cumple con este objetivo.
Una forma de buscar

Dada la capacidad de potencial de la bsqueda y el nmero de personas que prefiere buscar en lugar de echar un vistazo rpido, a menos que el sitio sea muy pequeo y est muy bien organizado, todas las pginas deberan tener un cuadro de bsqueda o vnculo a la pgina de bsqueda. Y aunque haya un mnimo de razones para buscar en el sitio, siempre debe haber un cuadro de bsqueda.
23
Cuando se visita un sitio web el proceso de bsqueda, como en la vida real, se repite en muchos aspectos: Normalmente trata de encontrar algo. En el mundo real se puede tratar de una sala de urgencias o de una lata de pur de tomates. En la web puede ser el reproductor de DVD ms barato o el nombre del actor que actu en alguna pelcula o alguna otra cosa. Decide si preguntar o buscar por su cuenta primero. La diferencia se encuentra en que en un sitio web no hay nadie a su alrededor que pueda ayudarlo o que le indique donde estn las cosas. El equivalente en la Web a un ayudante es el cuadro de bsqueda y la mejor manera de devolverte los resultados sera mediante una lista de vnculos en donde encontrarlo.
Algunas personas (Jakob Nielsen los llama usuarios con dominio de bsqueda) buscarn, casi siempre, el cuadro de bsqueda en cuanto visiten el sitio. (Puede que sean las mismas personas que buscan al empleado mas prximo en cuanto entran a un negocio). Otras (Nielsen los llama con dominio de vnculos) buscarn, casi siempre, por si mismas y solo usarn el cuadro de bsqueda cuando se queden sin vnculos posibles sobre los que hacer click o cuando el sitio los frustre lo suficiente. Para el resto, la decisin sobre si empezar a dar un vistazo por si mismos o utilizar el buscador depende del esquema actual de la mente, de la prisa que tengan y de si el sitio muestra una navegacin digna para una exploracin decente. El cuadro de bsqueda nos provee una buena funcionalidad para el usuario, y es importante en cuanto a la usabilidad que sea simple y no nos haga pensar demasiado con opciones tales como palabras clave. Un mal ejemplo lo encontramos en la pgina del banco Creedicop, ya que ofrece una nica opcin de bsqueda, una especie de bsqueda avanzada, que complejiza la bsqueda a tal extremo que resulta intil casi para un usuario normal, ofrecindonos combinaciones lgicas y hasta reglas para la bsqueda como se observa en la Figura 2.15
Figura 2.15 Bsqueda en el sitio del banco Credicoop
24
Una cosa ms sencilla es solo colocar un cuadro para hacer la consulta y que devuelva todo lo que sea necesario y luego el usuario decidir si es lo que realmente le interesa o no. Despus de todo, Por qu el usuario debe pensar en cmo quiere hacer la bsqueda? O aun peor, porque tiene que tener en cuenta la forma en que el mecanismo de bsqueda del sitio quiere que se formule la pregunta como si se tratase de alguien que puede obligarte a hacer cosas innecesarias? Si se quiere dar la opcin de ampliar la bsqueda solo se debe dar si es prctica (cuando se obtiene la pgina con los resultados de bsqueda y se descubre que la bsqueda arroja demasiados resultados, se necesita delimitar el mbito). De todas formas, en nuestro sitio objeto de anlisis, directamente no existe la opcin de buscar, solo cuenta con una lista de accesos directos que analizaremos ms adelante. Esto tiene una serie de desventajas, ya que si consideramos la clasificacin hecha por Nielsen, podemos decir que el diseo del sitio web tiene una tendencia a facilitar la usabilidad de aquellos usuarios con dominio de los vnculos. Al privar de la opcin de bsqueda al sitio, lo que logramos es complejizar la usabilidad de aquellos otros usuarios con dominio de bsqueda, ya que le impedimos usar la herramienta que ellos mas conocen o se sienten ms a gusto. A lo que apuntamos es que logramos notar que la incorporacin de un motor de bsquedas en el sitio no resta nada, ms bien suma a la usabilidad de, podramos decir, cualquier usuario, ya que si un usuario cualquiera est interesado por el formulario BP1519 - Solicitud de apertura de cuentas-, es poco probable que conozca la ruta exacta por la cual deba navegar para encontrarlo. Mucho ms simple, usable, y fiable seria proveer un cuadro de bsqueda, que arroje resultados en forma de lista clara y sencilla. Buenos ejemplos para este inciso dentro del mbito bancario son el del banco Francs Figura 2.16
25
Figura 2.16 Ejemplo de buscador en el sitio de BBVA Banco Francs Luego de hacer una bsqueda normal te da la opcin de hacer una bsqueda avanzada, que es lo ms adecuado para estos casos. Adems, se puede observar que muestra la ruta en la cual se encuentra el link, que es tambin correcto. Por ejemplo enuncia: BBVA Banco Francs > Empresas > Financiacin > Prestamos para
26
Otro ejemplo es el resultado obtenido por el Banco Galicia Figura 2.17
Figura 2.17 Ejemplo del buscador del Banco Galicia En esta lista de resultados no se puede obtener de manera clara a que seccin pertenece por lo que resulta difcil para el usuario obtener lo que est buscando, y mas an no existe luego una bsqueda avanzada para filtrar los 124 resultados.
Utilidades
Las utilidades son los vnculos a los elementos importantes del sitio que realmente no forman parte de la jerarqua de contenidos. Son cosas que nos pueden ayudar a usar el sitio, tales como Ayuda, Mapa del sitio o Carrito de compras, o nos pueden proporcionar informacin sobre su editor, como Acerca de nosotros y contctenos. Al igual que las seales en un establecimiento, la lista de utilidades debe ser ligeramente menos prominente que las secciones. Normalmente, la navegacin coherente solo puede dar cabida a cuatro o cinco utilidades: las que los usuarios posiblemente necesiten con ms frecuencia. Si se intenta poner alguna mas, los usuarios se perdern en la multitud. Las que puede que se usen menos deberan agruparse en la pgina principal. Ahora nos centraremos en analizar las utilidades que provee el sitio en el extremo superior derecho como se observa en la Figura 2.18
Figura 2.18 Imagen que muestra las utilidades del sitio
27
Accesos Rpidos
No hay duda que los mens desplegables desafortunadamente tienen algunos problemas: definitivamente ahorran espacio, pero
Tiene que buscarlos. Se debe hacer clic en el men desplegable para ver la lista, de manera que no hay posibilidad de que los elementos de la lista llamen su atencin mientras consulta la pgina. Esto puede ser un verdadero inconveniente en la pgina principal donde est intentando exponer el contenido del sitio. Son difciles de consultar. Si los diseadores utilizan el men desplegable estndar de HTML, pierden todo el control sobre el tipo de letra, el espaciado o el formato de la lista para hacerla ms legible y no existe realmente un buen mtodo de dividir la lista en subgrupos. Resultan incmodos. De alguna forma, el hecho de que la lista vaya y venga tan rpido hace que sea difcil leerla.
Los desplegables son ms eficaces para listas de elementos conocidos ordenados alfabticamente, como pases, provincias o productos, que no hay ideas implcitas. Si estoy buscando algo en especial, solo me dirijo inmediatamente a los elementos que empiezan con la primera letra de lo que estoy buscando. Pero resultan mucho menos eficaces con listas donde no conozco el nombre de lo que estoy buscando, especialmente si la lista no est ordenada alfabticamente, o si es tan larga que necesita desplazamiento. Justamente este ltimo es el caso de nuestros Accesos Directos, pues resulta terriblemente incomodo ya que se cumplen todas las caractersticas para hacerlo realmente inutilizable. En lugar de estos accesos, tal vez sera una mejor opcin reducir el nmero de entradas de la lista, con los sitios estadsticamente ms visitados, y ordenarlos alfabticamente. Sin embargo, debido a que estas listas traen ms inconvenientes que beneficios potenciales, creemos que resultara mucho mejor si esta lista de accesos no se encontrase y en lugar de ella hubiese un buscador que si resulta til como ya dijimos en la seccin 0. Hasta ahora analizamos los Accesos Directos que propone el sitio a travs de la herramienta que utiliza para que el usuario pueda acceder a ellos: una lista desplegable. Sin embargo, podemos encontrar a lo largo del sitio, dos secciones que las utilizan correctamente, pero desafortunadamente estas secciones no poseen tanta relevancia como lo es un Acceso Directo en la Pagina Principal del sitio. Dichas secciones son las de Sucursales Figura 2.19 y tambin las de Cajeros Automticos Figura 2.20. Ambas utilizan listas desplegables para que el usuario seleccione la localidad donde buscar, y los tems que se muestran estn ordenados alfabticamente, lo que incrementa la usabilidad.
28
Figura 2.19 Figura que muestra una forma correcta de utilizar una lista desplegable en el buscador de sucursales
Figura 2.20 - Figura que muestra una forma correcta de utilizar una lista desplegable en el buscador de cajeros automticos
Mapa del Sitio

Es correcto el intento de colocar un vnculo hacia una pgina que muestre como est organizado el sitio jerrquicamente, siempre y cuando sea de manera clara y cumpla con el objetivo. En este caso, vemos que la presentacin no tiene una correcta estructura, es evidente que los diseadores han querido mostrar el mapa del sitio en forma de rbol, pero, el mapa que se puede ver no lo respeta. Las hojas se pierden ya que no dan la sensacin de hoja, pues algunas se encuentran encima de otras y se pierde el sentido de la jerarqua. Sin duda esto es confuso para un usuario. En la Figura 2.21 se observa el rbol.
29
Figura 2.21 Vista del mapa del sitio del Bapro Quiz sera menos confusa una presentacin en forma de lista con vietas y correctamente indentadas de acuerdo a su jerarqua, como lo hace el Banco Francs; lo vemos en la Figura 2.22
Figura 2.22 Vista del mapa del sitio de BBVA Banco Francs
Secciones
Las secciones (denominadas con frecuencia navegacin principal) son los vnculos a las secciones principales del sitio: el nivel superior de la jerarqua del sitio. En la mayora de los casos, la navegacin coherente dispondr, adems, de un espacio para visualizar la navegacin secundaria: la lista de sub secciones de la seccin actual. 30
En esta pgina se puede observar las secciones Figura 2.23 no as las sub secciones.
Figura 2.23 - Imagen que muestra las distintas partes de la que consta el encabezado de la pgina De todas maneras existen excepciones para la regla de sgame a todas partes: La pgina principal no es como las otras pginas (tiene que soportar un peso diferente y tambin ha de cumplir con unos cometidos diferentes). Tal y como se vio en el seccin 2.1, algunas veces es mejor no recurrir a la navegacin coherente en ella. Los formularios tambin pueden ser una excepcin, ya que la navegacin coherente puede ser una distraccin innecesaria. Por ejemplo, cuando un usuario paga sus compras en un sitio electrnico, lo nico que se desea es que termine de rellenar el formulario. Sucede lo mismo al registrarse, al obtener retroalimentacin o al comprobar las preferencias personales.
2.4 MS ALL DEL TERCER NIVEL
En la mayor parte de los sitios web no se le presta la misma atencin a la navegacin del nivel inferior que a la del nivel superior. Muchas veces, en cuanto se supera el segundo nivel, la navegacin se deteriora y se vuelve ad-hoc. El problema es tan comn que resulta realmente difcil encontrar buenos ejemplos de navegacin en tres niveles. En el sitio web del Banco Provincia, se nota claramente que luego del tercer nivel, por lo general, el diseo del contenido cambia, sin embargo el panel de navegacin coherente se mantiene como ya lo analizamos anteriormente, fijo sobre el margen derecho. Este cambio en el diseo del contenido, puede llegar a romper con la lgica visual que mantena el sitio muchas veces, variando los elementos webs utilizados (diferentes tipos de nfasis, diferentes imgenes y estilos de botones), y tambin rompiendo algunas de las convenciones, por ej., utilizando subrayados para enfatizar alguna porcin de texto. Por qu ocurre esto? En parte se puede pensar que una buena navegacin multinivel es bastante difcil de disear (dado el limitado espacio de la pgina y el nmero de elementos que se deben colocar en ella). En parte porque los diseadores no disponen del tiempo necesario como ya se explic anteriormente. En parte porque simplemente no parece tan importante. Despus de todo, es realmente importante? No es fundamental, ni siquiera secundario. Hay una tendencia a pensar que si el usuario ha llegado tan lejos en el sitio, ser capaz de entender su funcionamiento. La realidad muestra que el usuario termina pasando tanto tiempo en las pginas de niveles inferiores como en las de niveles superiores y, a menos que se haya resuelto el tema de la navegacin de arriba hacia abajo y desde el principio, es muy difcil insertarla luego y que termine siendo algo coherente. Segn Krug (Krug, 2005)una buena solucin sera que se cuenten con pginas de ejemplo que muestren la navegacin en todos los niveles potenciales del sitio. Estas pginas de ejemplo entonces sern utilizadas por aquellos que completen el contenido de la ltima hoja del sitio dentro de la 31
jerarqua, por ejemplo por el Administrador de Contenidos del sitio, sin dar lugar a dudas sobre el estilo a utilizar. Algunos claros contrastes detectados con respecto a este punto se pueden apreciar en las siguientes imgenes... 2.4.1 ERRORES DENTRO DE LA BANCA PERSONAL
Figura 2.24 Figura que muestra elementos que no se encuentran en la lista de sub secciones de la derecha Se puede observar en la Figura 2.24 que algunas de las sub secciones de banca personal que estn en el segundo nivel (izquierda de la imagen) no se encuentran en la lista de sub secciones a las que se puede ir una vez hecho clic sobre una de las sub secciones; esto nos lleva a una nueva pgina en donde en su parte derecha podemos ver la lista que observamos en la parte derecha de la imagen. Sub secciones tales como Test del inversor o Cajas de seguridad en sucursales no existen en tal lista. Tal vez no sea de vital importancia, pero se pierde un poco de uniformidad con esto.
32
Plazo Fijo
Figura 2.25 Pgina de plazo fijo En este caso todas las frases escritas con color verde son hipervnculos, lo que no es correcto en el sentido de usar convenciones pero al menos la pgina utiliza bien estos enlaces y te lleva ms abajo en la misma pgina, sin haber hecho una pgina nueva para cada uno de los links ya que se puede observar que era innecesario porque solamente provee informacin. Se observa en la Figura 2.25
33
Fondos comunes de inversin
Figura 2.26 Pgina de fondos comunes de inversin En la Figura 2.26 se pueden observar unos nuevos hipervnculos (los rectngulos con una flecha), no vistos anteriormente que nos llevarn a otra pgina dentro del sitio y que sin embargo no posee relacin alguna con los vistos anteriormente. Y si se hace clic en Cdigo de Proteccin al Inversor [] descarga un PDF lo cual en principio se esperaba que lleve al usuario a otra pgina. Esto es porque no existe una forma de saber si un link es un vnculo a otra pgina o descarga un archivo. Esto se observa a lo largo de toda la pgina web.
34
Figura 2.27 Pgina vinculada desde la pgina anterior mediante el link Requisitos y Documentacio En la Figura 2.27 tenemos el problema con los subrayados que nos dan una idea de hipervnculo y el nombre de la pgina en minscula, pero adems encontramos un nuevo objeto: un botn rectangular gris, en el cual al hacer clic se obtiene formularios en formato PDF. Los nombres colocados a la izquierda de los botones no son fcilmente entendibles por lo que se tendera a descargar todo por si es necesario.
35
Prstamos Personales
Figura 2.28 Figura que muestra la pgina para prstamos personales En esta seccin de contenido, dedicada a los prstamos personales, debemos remarcar tres puntos principales: (1) Vemos que el titulo de pgina que se haya en color verde, con maysculas, y en cursiva; redunda con la imagen a modo de publicidad situada arriba. No se entiende bien cul es el objetivo de esa publicidad, tal vez quiera solo remarcar el producto. De todos modos, en ambas partes uno puede leer Prestamos Personales, existiendo mayor carga cognitiva y redundante. Quiz una buena prctica seria situar el titulo principal de la pgina por encima de la publicidad, y quitar de esta el texto Prstamos Personales. De esta manera se conservara la publicidad o eslogan del producto y tambin se mantendra un hilo de estilo con respecto a las otras pginas. (2) Tambin vemos en esta pgina que existe un nuevo tipo de botn como vinculo a otra pgina. A simple vista, estos vnculos no parecen ser botones, pues no tienen siquiera un relieve o algo que sugiera clic aqu, y tampoco es un estilo de vnculo al que nos tiene acostumbrado el sitio, pues como vimos en los primeros niveles del sitio, las paginas poseen otro tipo de vnculos (por ej. el vinculo al Home Banking). 36
Cuando hacemos clic en uno de esos vnculos redondos y grandes, nos dirige a la correspondiente sub seccin con la informacin pertinente, pero cada una de ellas posee los mismos errores y rompe las convenciones existentes. Veamos por ej. esta sub seccin dentro de Publico en General en la Figura 2.29, y no mostraremos el resto porque son exactamente los mismos errores.
Figura 2.29 Pgina a la cual nos conduce al hacer clic sobre uno de los links-imgenes circulares En primer lugar, debemos resaltar que ya el titulo de pgina no es coherente con el anterior, porque ahora se encuentra en minsculas excepto la primera letra de cada palabra del ttulo. En segundo lugar, remarcamos que se rompe con una convencin: usar subrayado solo para hipervnculos. Un usuario acostumbrado a navegar por la web, tendera a realizar un clic sobre Monto. Sin embargo es rescatable la utilidad de volver a la pgina anterior (donde se presentan el resto de los botones redondos) con el hipervnculo en verde y negrita. Tambin la informacin es corta y concisa, es decir, no existen palabras innecesarias. (3) Este estilo solo lo queremos resaltar para mostrar que, si bien es digno de un estilo aceptable, donde los nfasis verdes son hipervnculos, podemos ver que en las siguientes pginas este estilo cambiar por otro, rompiendo con la conducta que se haba estado llevando. (4) Si bien cada botn nos conduce a una pequea seccin con los mismos errores que notamos en (2), prestemos especial atencin al vnculo sealado con el nmero cuatro. Este vinculo nos re direcciona a otra pgina del sitio, pero no en un nivel ms de profundidad, sino saltando por la jerarqua hasta Prstamos Personales por Cajeros Automticos y Home Banking donde se intenta mantener el estilo de la pagina, pero sin mantener la suficiente cohesin con las anteriores. Los puntos (5) y (6) analizan este caso en detalle.
37
Prstamos Personales por Cajeros Automticos y Home Banking
Figura 2.30 Pgina para los prstamos personales por cajeros automticos y Home Banking
(5) Lo primero a notar es que el titulo de la pgina ahora est todo en negrita y cursiva, con un tamao menor a los anteriores. Contina manteniendo la redundancia debido a la publicidad a modo de imagen, y ahora aparecen los botones redondos nuevamente. Obviamente un usuario esperara, luego de haber visto la pgina anterior, poder hacer clic sobre estos 38
botones, pero en realidad resulta que NO son botones!! Son solo imgenes que representan el tipo de cliente aceptado. Esto resulta muy confuso para cualquier usuario si navega de un lugar a otro, es decir, en el sentido que describimos o bien a viceversa. Tambin si seguimos leyendo la pgina, vemos que se contina con la ruptura del convenio del subrayado para hacer nfasis en la pgina. (6) Otro punto importante a resaltar es el Hipervnculo Trminos y Condiciones que se encuentra en color verde y subrayado. En este caso se respeta el convenio, pero resulta enormemente confuso que en la misma pgina existan tambin porciones de texto como Beneficiarios que tientan al usuario a realizar un clic. Por ltimo tambin notamos que aqu cambia el estilo del pie Consltenos, ya que ahora no tiene negrita como en todas las paginas anteriores. Esto rompe con la conducta de estilo.
Mi PC Argentina
Figura 2.31 Pgina de Mi PC Argentina En la Figura 2.31 se observa la pgina de Mi PC Argentina donde el titulo para prstamos personales est subrayado lo que provoca sensacin de hipervnculo, pero en realidad en esta pgina el hipervnculo est en negrita y color verde, como se observa en Programa mi PC. Se podra haber diseado de manera inversa. Si el usuario no pasa el cursor por la palabra en verde no puede darse cuenta que es un hipervnculo. En esa misma pgina existen muchos casos similares. Adems, el nombre de la pgina tambin es de color verde lo que puede confundir aun ms.
39
Cuentas
En el acceso a Cuentas de la Banca Empresa, ms especficamente si entramos al detalle de Cuenta Corriente, vamos a encontrar un texto bastante importante con la descripcin acerca de este producto. Pero queremos resaltar el hecho de que casi al final de la pgina, uno se topa con un nuevo vinculo/botn hacia otra seccin. Lo grave de este vnculo es, de nuevo la falta de cohesin y coherencia con el resto del sitio, pese a que tal vez, consecuentemente al contexto donde se encuentra, sugiera ser presionado. En fin, tanto cambio de estilos, y formatos de botones provocan una reaccin que hace dudar a cualquier usuario (aunque sea un pequeo instante) sobre si debe o no hacer clic en l.
Figura 2.32 Imagen de un botn diferente a los que normalmente se observan en la pgina
Tarjetas
Figura 2.33 Pgina para las tarjetas de crdito En el texto Complet el formulario y presentlo en tu sucursal!!, como se observa en la Figura 2.33, se espera al menos sea un hipervnculo para rellenar un formulario, est de color verde y subrayado, pero en cambio nada sucede al hacer clic; es un intento por resaltar algo pero utilizando herramientas que en otras pginas son utilizadas para tareas completamente distintas.
40
Cajas de Seguridad en Sucursales
Figura 2.34 Pgina para la caja de seguridad en sucursales El titulo de la pgina de la Figura 2.34 se diferencia del resto ya que est escrito en letra minscula. Se puede observar en los casos anteriores que en todos ellos el ttulo est con letras maysculas; esto genera una sensacin de inseguridad, palabras en color verde y minsculas anteriormente eran vnculos a otras pginas, aunque la letra difiere en tamao en este caso.
Home Banking: el Banco en su Casa
Figura 2.35 Figura que ilustra la pgina del Home Banking El Banco en su casa
41
Una convencin es utilizar el violeta para vnculos visitados pero en este caso, en la Figura 2.35, lo que se puede observar es que simplemente son vnculos coloreados violeta, cuando se hace clic sobre el que est coloreado verde, luego, al volver atrs, este no cambia su color, e incluso los que estn coloreados de violeta no fueron nunca visitados.
Transferencias Personales desde y hacia el exterior
Figura 2.36 Figura que muestra la pgina de Transferencias desde y hacia el exterior En la pgina que se observa en la Figura 2.36, nos encontramos con dos vnculos a otras pginas donde aqu si son de color verde y subrayadas dando una clara alusin a lo que es, pero podra tambin pensarse que no lo es por lo visto en otras pginas. Aqu tambin se observan dos imgenes que poseen la misma funcin que las frases ya que al hacer clic sobre ellas nos traslada a una pgina distinta pero que se corresponde con la frase justo bajo ella. Estas imgenes rompen con los esquemas vistos hasta ahora en donde no existan prcticamente imgenes que funcionen como vnculos. Otra cosa a observar son las rayas en la pgina que no posee relacin con ninguna de las otras pginas.
Figura 2.37 Pginas a las que somos enviados haciendo clic en cada link de la imagen anterior Al hacer clic sobre los vnculos obtenemos las dos pginas anteriores. Se puede observar que estas si guardan coherencia con la anterior, pero no con el resto de la pgina.
42
2.4.2
ERRORES DENTRO DE LA BANCA EMPRESA
Prestamos
En la Seccin Prestamos de la Banca Empresa, encontramos un vinculo en bucle en una imagen. Es decir, un usuario, al explorar la pagina, recorre con el puntero los elementos que existen, si descubre la imagen y su vinculo, se har una expectativa (como nosotros lo hicimos) sobre un nuevo sitio y es realmente frustrante toparse con que el vinculo no hace nada.
Figura 2.38 Pgina de prstamos dentro de Banca Empresa
Leasing
En la sub seccin Leasing de la Banca Empresa (y tambin en Banca Agropecuaria), encontramos todo en armona excepto cuando leemos los objetivos que propone este tipo de prstamo. Podemos leer un texto enorme, en maysculas, que dice CREAR, que logra situar toda nuestra atencin. Un usuario se vera tentado a hacer clic en esa palabra esperando un vnculo, lo cual no sera nada raro luego de analizar el resto del sitio y ver que los estilos de los vnculos son tan variados y poco uniformes. O sea, cada nueva pgina es un mundo nuevo a descubrir.
Figura 2.39 Pgina para Leasing
43
Tasas Activas
Dentro de Banca Empresa (y tambin en Banca Agropecuaria), en la sub seccin de Tasas Activas tenemos que remarcar que nos encontramos ante un nuevo estilo de botn con el nombre Tasas Activas Histricas. Luego volvemos al mismo problema de siempre, los vnculos y la poca conducta. El segundo ttulo, Restantes Operaciones si nos ubicamos en el lugar de alguien que conoce algo de la pgina, pensara que es un vnculo porque se encuentra en negrita y con color verde, cuando no lo es. Ahora, si nos ponemos en lugar de un usuario que llega por primera vez a esta seccin, pensar automticamente, que el tercer ttulo Descuento de Cheques es un hipervnculo, porque se dejar llevar por la convencin web que encuentra en las dems paginas. Esta ambigedad, por no respetar estndares ni una conducta en todo el sitio, de nuevo produce confusiones y frustraciones a los usuarios. En realidad en esta pgina no hay ningn vnculo.
Figura 2.40 Pgina para Tasas activas
BaproEmpresa
Figura 2.41 Pgina para BaproEmpres@ 44
Nos hallamos ante un nuevo problema: Se puede pasar por alto que haya unos nuevos botones con tringulos pero la tipografa es la correcta para los links en esta pgina, pero en general est bien; pero nos encontramos con dos botones ms abajo, uno que dice : Pago de Impuestos y servicios que al hacer clic se espera que podamos realizar algn pago, pero por el contrario nos lleva a las instrucciones de cmo efectuar este tipo de pago; por lo que el botn debera decir Instrucciones de pago o algo por el estilo. La pgina a la cual nos dirige se observa en la Figura 2.42.
Figura 2.42 Pgina para el pago de impuestos dentro de BaproEmpres@ Se puede observar en la Figura 2.42 un vnculo roto en la parte superior. El otro botn, opere desde aqu es el que realmente nos deja operar, ya sea pagos de impuestos y servicios como otras acciones. Estos botones tambin no se corresponden ni entre ellos ni con los vistos anteriormente. Cuando clickeamos sobre el vinculo de descripcin en la Pagina de BaproEmpres@ llegamos a una pgina un tanto diferente que se puede observar en la Figura 2.43.
45
Figura 2.43 Pgina para la banca electrnica para empresas En la Figura 2.43 encontramos un nuevo tipo de botn, muy distinto a los anteriores, en color gris en el cual si, hacemos clic en el primero nos lleva nuevamente a la pgina anterior y si hacemos clic sobre el otro no sucede nada. La tipografa dentro de esta pgina es realmente distinta a las dems y encontramos dos vietas que rompen con el estilo. Todos estos cambios provocan un tipo de desorientacin en el usuario.
2.5 EL CENTRO DE CONTACTO
Algo que se puede destacar del sitio del Banco Provincia, es la pgina del Centro de Contacto. Esta pgina es la nica que posee toda la informacin de contacto, es decir, medios para interactuar con el banco ya sea por Telfono, por Escrito, o por Internet llenando un formulario. La navegacin resulta coherente y organizada porque toda otra pagina cuando tiene que informar alguna manera de contactarse con la entidad, re dirige a esta seccin.
2.6 ACCESO AL HOME BANKING
Nos centraremos en el acceso a una de las aplicaciones ms importantes que debe poseer todo sitio web de un Banco: el Home Banking. Analizando sitios de la competencia, es decir, pginas como la del Banco Francs2, Banco Hipotecario3 y Banco Galicia4 notamos que este acceso, es una parte vital de la pgina, y por lo tanto debera resaltar y ser lo suficientemente clara y visible. Tampoco se pretende que sea lo ms prominente en la pgina principal, pues lo ideal debera ser que el diseo este organizado de forma tal que cuando acceda un cliente del banco al Home Banking, (por ejemplo, para chequear su saldo) tambin exista informacin o publicidades que logren captar su atencin conducindole a que se adhiera, o al menos lea la informacin pertinente a ese servicio o producto. De esta manera se logra un efecto de capturar la adhesin a un servicio de un cliente, aprovechando una tarea que l deba realizar. En este caso, en la pgina del Bapro, creemos que el acceso al Home Banking pasa desapercibido, pues se confunde con las publicidades que existen en la pgina. Tenemos en cuenta de que el punto intermedio a encontrar de lo llamativo que debe ser este acceso, no es simple de encontrar. Pero nos sirve de ejemplo mostrar otros accesos, donde es lo suficientemente prominente para un cliente con el objetivo de acceder, pero al mismo tiempo puede llegar a estar en un segundo plano, pues predomina la
2 3
Banco Francs - www.bancofrances.com.ar Banco Hipotecario www.hipotecario.com.ar 4 Banco Galicia www.e-galicia.com 46
informacin y publicidades acerca de productos y/o servicios. Ejemplos que se ajustan a esta descripcin son la Figura 2.44 y 2.45.
Figura 2.44 - Pgina de Inicio del Banco Francs. Se puede observar como el acceso a la Banca Online (en azul, sobre el margen izquierdo) resalta lo suficiente, pero al mismo tiempo, las publicidades capturan sutilmente nuestra atencin.
Figura 2.45 - Pagina inicial del Banco Hipotecario. Podemos observar como el acceso al Home Banking est en el margen derecho, de color violeta prominente, resaltando entre un fondo claro. Y vemos como las llamativas publicidades centrales capturan nuestra atencin.
47
3. ACCES I BI LI DAD Ante el interrogante sobre la accesibilidad, si sta forma parte de la usabilidad, Krug (Krug, 2005) afirma que esto es un hecho. A menos que se tome la decisin global de que las personas con discapacidades no son parte del pblico, realmente no se puede decir que ese sitio es utilizable a menos que sea accesible. Cabe destacar que en el caso de E.E.U.U., este pas posee una ley conocida por 508, que se refiere a la Seccin 508 de la Enmienda 1988 del Acta de Rehabilitacin, que especifica las normas de accesibilidad a la tecnologa de la informacin (como por ejemplo, los sitios web) que debe reunir todo aquel que quiera hacer negocios con el gobierno. Tristemente, debemos decir que no ocurre lo mismo en este pas, ya que una pgina que pertenece al gobierno, como lo es el Banco Provincia, no es realmente un ejemplo de accesibilidad cuando no posee siquiera un recurso de este tipo. (Division, U.S. General Services Administration - IT Accessibility & Workforce) Una buena forma de comenzar quiz sera solucionar los problemas de usabilidad que confunden a todos. Es decir, si algo confunde a la mayora de las personas que utilizan el sitio, es casi seguro que tambin confundir a los usuarios que tienen problemas de accesibilidad. Entonces, Por qu no corregir los errores de usabilidad? Entre otros factores, Krug recomienda (aquellos que Bapro cumple se indican con un tilde en verde; aquellos que no, con una cruz roja): Usar hojas de estilo CSS. Lo que aumentan la flexibilidad del sitio. Aadir texto alternativo a todas las imgenes. Aadiendo un atributo ALT a las imgenes, con un texto descriptivo y til para todos. Hacer que los formularios funcionen con los lectores de pantallas. Usar los prompts, para que el usuario sepa lo que se supone que debe introducir. Hacer que todo el contenido sea accesible mediante el teclado. Debemos recordar que no todo el mundo puede utilizar el ratn. Impresin. Nielsen recomienda generar dos versiones de todo documento web que sea extenso. Una versin debera ser optimizada para su lectura en lnea, siendo apropiadamente seccionada en varios archivos usando hipervnculos y una plantilla de estilo orientado a la pantalla. La otra versin debera mantener el documento entero en un solo archivo cuya disposicin o layout este optimizado para la impresin. (Nielsen J. , 1999). Si aplicamos esta recomendacin a la pagina del Banco Provincia podemos decir que en vez de poseer tantos vnculos a descargas en documentos portables PDF, quiz sera conveniente realizar ese documento en una versin para la lectura en lnea, para no romper con el flujo de navegacin, y adems proveer una versin imprimible, ya sea en el mismo PDF o bien con un formato en HTML adecuado para este propsito. Tamao del texto. Las recomendaciones son en general, tener en cuenta que los usuarios tienen diferentes preferencias con respecto al tamao de la letra, por lo que hay que asegurarse de que el diseo web trabaje bien con grandes y pequeas fuentes. El sitio de Bapro, se comporta relativamente cuando el explorador web incrementa el tamao de la fuente, sin embargo, esta personalizacin es propia del explorador. Teniendo en cuenta el publico al cual va dirigido el sitio (poblacin econmicamente activa, es decir, de jvenesadultos en adelante) tal vez sera conveniente incorporar la opcin del incremento de la fuente para la lectura en aquellas pginas que lo ameriten (que tengan gran cantidad de texto informativo). Maneras de incrementar la usabilidad del sitio, mejorando la accesibilidad, hay numerosas y de diferente ndole. Para ms informacin ver (Clark, 2002), (Thatcher, y otros, 2002), (Slatin & Rush, 2002) El hecho est en que el mundo deja de ser perfecto en cuanto deja descolgado a alguien. Incluso con la tecnologa y los estndares actuales, es posible conseguir que cualquier sitio sea muy accesible sin un gran esfuerzo. Y queremos destacar que sera un excelente ejemplo, digno de orgullo, ver a un sitio web de una entidad gubernamental implementar estas tcnicas.
48
4. ERRORES EN LA ARQUI TECTURA D E L A I N FO RM ACI N La estructura y la navegacin deben soportarse mutuamente e integrarse con la bsqueda y a travs de las sub secciones. Complejidad, inconsistencia, opciones escondidas y mecanismos sofisticados de diseo evitan que los usuarios encuentren lo que ellos necesitan. Este tipo de errores pueden ser divididos en dos partes: estructura y navegacin. Ambos son necesarios, comprendiendo esencialmente dos niveles de diseo: la manera invisible en que el sitio est estructurado y la manera visible en que los usuarios manejan y entienden la estructura. En Top 10 Information Architecture Mistakes (Nielsen J. , 2009) se elabora un ranking de estos errores comunes en la Arquitectura de la informacin. Aqu mostraremos los que ocurren en el sitio web del Banco Provincia. Totalizando encontramos 4 errores dentro de este Top 10, de los cuales 3 se hayan dentro de la clasificacin de problemas estructurales y 1 solo pertenece a los errores de navegacin.
4.1 ERRORES ESTRUCTURALES
BSQUEDA Y ESTRUCTURA NO INTEGRADAS Como ya antes hemos mencionado, existen usuarios que a menudo exhiben comportamientos de bsquedas dominantes. Esto no quiere decir que una bsqueda es todo lo que el usuario necesita, ya que arribar a una pgina desde una bsqueda no siempre es lo que el usuario realmente necesita, pero sin embargo, estos navegan por las pginas vecinas hasta encontrar el destino deseado. Entre otras cosas, para lograr una conciliacin entre la bsqueda y la estructura, e incrementar la usabilidad, es conveniente mostrar en los resultados la localizacin en la estructura del sitio (notar que proveedores de bsqueda externos como Google no pueden hacer esto porque no conocen sobre la estructura del sitio). Desgraciadamente, nuestra pgina no cuenta con siquiera un buscador, por lo que vemos este error como muy grave. FALTA DE CATEGORIZACIN Se recomienda que los sitios tengan una serie de categoras para cada vnculo que ellos proveen, dndole a los usuarios una vistazo general de la seccin y cuanto ella abarca. Estrechamente relacionado con mostrar la ubicacin actual dentro del sitio, cuando una pgina no es claramente identificada como una pgina de una sub seccin, los usuarios pueden no entender el alcance del sitio y perder importantes detalles, productos y servicios. Entonces al realizar una buena categorizacin de la informacin, y acompaado con el uso de Migas [ver seccin 2.3.3] se puede orientar mas al usuario y facilitar su navegacin, permitindole saltar de a un nivel o dos anteriores fcilmente, lo que resulta sumamente cmodo cuando el sitio est ampliamente cargado de informacin, donde existen muchas hojas que detallan alguna informacin de un producto o servicio. Este error es tambin cometido por el bapro.com.ar, porque pese a existir una categorizacin, esta es bastante pobre (abarca solo 2 niveles) y no existe ningn tipo de Migas. MINI SITIOS POBREMENTE INTEGRADOS SITIO PRINCIPAL Un micro sitio dedicado podra ser una buena idea cuando se lanza un nuevo producto o servicio, pero es conveniente considerar su existencia a largo plazo. A veces es tpicamente mejor renunciar a micro sitios independientes y colocar la nueva informacin en sub-sitios dentro del sitio principal. Este es justamente el caso del Banco Provincia, donde claramente encontramos los siguientes subsitios, todos ellos integrados dentro del dominio www.bapro.com.ar Comercio Exterior. Banca Empresa > Comercio Exterior 49
Oportunidades Inmobiliarias Institucional > Oportunidades Inmobiliarias CITAB Institucional > CITAB
Nielsen remarca la importancia de que estos sub-sitios estn integrados con la estructura total del sitio. Esto realmente no sucede con el mini sitio de Comercio Exterior, ni con ningn otro.
Figura 4.1 - Imagen que muestra una parte de la animacin flash
Figura 4.2 - Imagen que muestra el fin de la animacin flash Una vez hecho clic, siguiendo la ruta Banca Empresa > Comercio Exterior nos encontramos con una animacin flash y sin nombre de la pgina. En realidad esta animacin no concuerda con lo que venamos viendo en la web. Al finalizar las imgenes, vemos el siguiente eslogan: No importa cul sea su actividad para sus negocios internacionales acrquese a nosotros. Nosotros le acercamos el mundo. El eslogan es bueno, pero la realidad es que es innecesaria la manera en que este se muestra y la esttica que posee ya que no tiene coherencia con las otras pginas.
50
Figura 4.3 - Imagen que muestra el mini-sitio de Comercio Internacional dentro del sitio del Bapro Luego del video anterior nos encontramos con la pgina vista en la Figura 4.3.Esta tambin es muy distinta a todas las dems, ya que nada concuerda visualmente con lo antes observado. Los botones, difciles de encontrar, los colores y las fuentes son completamente distintas. Lo nico que nos dice que nos encontramos dentro de la web del Bapro es el marco que mantiene la correlacin con todos los dems. Con respecto a Oportunidades Inmobiliarias, mantiene una cierta coherencia visual con el resto del sitio, pero cada vez que nos adentramos en profundidad, nos encontramos con pginas que son completamente diferentes a lo que estamos acostumbrados. Por ejemplo, provee un motor de bsquedas avanzadas solo para inmuebles, que SOLO permite buscar por medio de un cdigo identificatorio. Es decir, el usuario debe conocer a priori este cdigo para encontrar la informacin que desea. Quiz sera ms coherente proveer un motor de bsqueda mas real, que permita a cualquier usuario, con conocimiento o no sobre el tema, buscar acerca de un inmueble como oportunidad, este tipo de buscadores ya los mencionamos en el capitulo 0.
51
Figura 4.4 Pgina del buscador de inmuebles
Figura 4.5 Imagen que muestra la bsqueda avanzada dentro de oportunidades inmobiliarias
52
En la imagen Figura 4.4 mostramos una seccin del sub sitio. Como se aprecia, el formato visual es completamente diferente a lo que nos tiene acostumbrado el sitio. Cambia la tipogrfica, el titulo de la pgina, los botones, colores todo. Ni siquiera se respeta el color caracterstico del banco provincia: el verde. Esto hace que cualquier usuario pierda la nocin de donde est ubicado, a lo que contribuye tambin que no existe ningn tipo de marca o Miga que nos lo comunique. Si nos detenemos en la pgina del CITAB, se puede observar que no es un sub-sitio en realidad, sino ms bien un sitio completamente diferente, con otros propsitos y objetivos, y otra esttica, pero esta como incrustado dentro de la pgina del Banco Provincia. Es ms, si buscamos en Google la palabra CITAB, el primer resultado que arroja es la pgina oficial de este organismo, pero nos la presenta como un sitio independiente del Banco Provincia http://www.bpba.com.ar/citab/citab.htm . Esto nos conduce a sugerir que el sitio se mantenga como un verdadero micro sitio, externo al banco, en una ventana nueva quiz. Adems, el dominio sobre el cual yace CITAB nos provoca a pensar que es un sitio con algunos aos de antigedad, sin mucha actualizacin, pues www.bpba.com.ar era el dominio del Banco Provincia antes de difundir su actual y conocido pseudnimo Bapro.
Figura 4.6 Mini-sitio del CITAB

4.2 ERRORES DE NAVEGACIN
OPCIONES DE NAVEGACIN INVISIBLES Para Nielsen uno de los ms graves errores esta en no mostrar correctamente los elementos que permiten al usuario navegar a travs del sitio, con esto nos referimos con Opciones Invisibles. Sugiere que los vnculos en la navegacin permanezcan siempre visibles y claros, y no que el usuario tenga que andar arrastrando el puntero por todo el sitio hasta descubrir cules son los verdaderos vnculos. Esto resulta desagradable para los adolescentes, y mucho ms para los adultos. Desafortunadamente, el sitio web del Banco Provincia abunda en este tipo de errores, cambiando continuamente los estilos y formatos de aquellos elementos donde se puede hacer clic. Pero vamos a ver una vez ms un ejemplo, realmente un mal ejemplo, donde se cumplen varios errores, y lo peor, todos al mismo tiempo.
53
Hipervn
Hipervn Quiz un Hipervnculo? Hipervn
Hipervn
Figura 4.7 Pgina de cooperacin y servicios a los sectores de produccin en donde se marcan los distintos tipos de hipervnculos que encontramos.
54
5. LOS ERRORES M S GRAV ES EN EL D I S E O WEB Jakob Nielsen es su artculo Top Ten Mistakes in Web Design (Nielsen J. , 2009) realiza un ranking esta vez con los diez delitos ms atroces contra los usuarios. A continuacin analizaremos cuales de estos errores existen en la pagina del Banco Provincia.
5.1 MALA BSQUEDA
Este error encabeza el ranking de Nielsen. Sobre este punto ya hemos analizado bastante a lo largo de este informe. En la seccin 0 analizamos por qu es importante que el sitio posea un buscador. Pero el sito del Bapro no posee ningn tipo de buscador, por lo tanto comete el primer y principal error dentro de este ranking.
5.2 ARCHIVOS PDF PARA LECTURA EN LNEA
En el segundo lugar, se encuentran los documentos portables para la lectura en lnea. Los usuarios odian encontrarse con un archivo PDF mientras navegan, porque rompen con el flujo de navegacin. Incluso cosas simples como imprimir o guardar documentos son difciles porque los comandos del navegador estndar no siempre funcionan. Los diseos de estos documentos portables son a menudo optimizados para una hoja de papel, que rara vez coincide con el tamao de la ventana del navegador del usuario, lo que genera problemas, o bien resulta incomodo, a la hora de desplazarnos usando scrolls. Lo peor de todo es que estos documentos son una burbuja indiferenciada de contenido que resulta difcil de navegar. Pero hay que rescatar que son ideales para la impresin y distribucin. Es por eso que cuando mucho algn vinculo hacia uno de ellos, en caso de formularios que deben ser completados a puo y letra es justificable, pero no en el caso de que se quiera mostrar algn tipo de informacin, como sucede muchas veces en este sitio. Si se quiere proveer una facilidad de impresin, es mejor proveer de sta utilidad antes que un vinculo a un documento portable. Un claro ejemplo de esto es si vamos a la seccin bajo la ruta Institucional > Derechos Humanos. Bajo este vinculo, sin pagina previa siquiera que nos provea un texto con una introduccin o pantallazo general acerca de lo que trata la pagina, directamente nos descarga un PDF. Esto rompe con el flujo de navegacin, y el contenido de ese documento realmente no justifica su formato, ya que al leerlo es obvio el objetivo de difusin que persigue, que raramente ser impreso, en contraste con lo que puede llegar a ser un formulario o el detalle de un balance. Tampoco existe, en aquellos lugares que se amerita un documento PDF, un solo vnculo o informacin en todo el sitio que sugiera instalar Adobe Acrobat Reader o algn otro lector de este formato, como muchas otras pginas web sugieren. Ni siquiera una pequea imagen junto al hipervnculo que sugiera que vamos a descargar uno de estos documentos, sino que nos enteramos de la descarga luego de haber hecho clic, de ninguna manera esto es previsible y realmente incomodo.
5.3 NO CAMBIAR EL COLOR DE LOS ENLACES VISITADOS
La posicin nmero 3 se refiere a los enlaces ya visitados y su color. Una vez ms, nos topamos con errores en la navegacin. Una buena comprensin de la navegacin que hemos hecho en el pasado ayuda a entender la ubicacin actual. Conocer los lugares del pasado y presente, hace que sea ms fcil decidir a dnde ir. Los enlaces son un factor clave en este proceso de navegacin, ya que los usuarios pueden excluir aquellos vnculos que resultaron infructuosos en sus visitas anteriores. Por el contrario, se podra volver a examinar los vnculos que encontraron tiles en el pasado. Lo ms importante en este punto es saber qu pginas se han visitado ya, lo que libera a los usuarios de volver a examinar las mismas pginas una y otra vez, lo que resulta enormemente frustrante en casos donde el sitio es de gran envergadura, como sucede en este caso con el Banco Provincia.
55
Estos beneficios slo se acumulan bajo un supuesto importante: que los usuarios pueden ver la diferencia entre los enlaces visitados y no visitados, porque el sitio muestra en colores diferentes, lo cual no ocurre en este sitio.
5.4 TAMAOS DE LAS FUENTES
Saltando a la posicin nmero 5, Nielsen asegura cerca del 95% de las veces, se utiliza un tamao de letra fijo que es pequeo, lo cual reduce la legibilidad de manera significativa para personas mayores de 40 aos de edad. Por lo que sugiere respetar las preferencias del usuario y dejar cambiar el texto segn sea necesario. Muchas de las guas de estilo en cuanto al tamao de la fuente proponen: No usar tamaos de fuentes absolutas Hacer el tamao de la fuente por defecto razonablemente grande (al menos 10 puntos). Esto definitivamente no sucede si prestamos atencin al contenido de cualquier pgina dentro del sitio del Banco Provincia. En algunas de nuestras pruebas, no muy profundas en la jerarqua encontramos tamao de 7.5 puntos. Si el sitio persigue un pblico adulto, es mejor usar una fuente de mayor tamao (al menos 12 puntos). Obviamente un banco apunta a un pblico de jvenes adultos y adultos, por su carcter de ser econmicamente activos. Considerar agregar un botn o botones que permitan cargar el texto en diferentes tamaos. Esto resulta muy til y se ve que es una estrategia utilizada por sitios web de varios diarios.
VIOLAR LAS CONVENCIONES DE DISEOS
5.5
El puesto nmero 8 refiere a la consistencia. sta es uno de los principios de usabilidad ms poderosos: cuando las cosas siempre se comportan de la misma, los usuarios no tienen que preocuparse de lo que suceder. Por el contrario, sabemos lo que ocurrir sobre la base de la experiencia anterior. Las expectativas de la mayor parte de los usuarios prueban que cuanto sientan que tienen el control sobre el sistema ms le guste. Y cuanto ms el sistema rompe con las expectativas de los usuarios, se sienten ms inseguros. Justamente, esto es lo que sucede en todo el sitio, como vimos en la mayora de las secciones anteriores. Esto significa que los usuarios forman sus expectativas para un sitio sobre la base de lo que comnmente se realiza en la mayora de los otros sitios. Si se desva, el sitio ser ms difcil de usar y los usuarios se irn.
56
6. HEUR STI CAS D E USABI LI DAD Jakob Nielsen enumera las 10 heursticas para la usabilidad, de las cuales solo algunas de ellas se pueden utilizar para esta pgina ya que en realidad son enunciadas para aplicaciones , pero de igual manera encontramos algunas tiles para nuestro anlisis:
6.1 VISIBILIDAD DEL ESTADO DEL SISTEMA
El sistema debe mantener informados a los usuarios sobre qu es lo que est sucediendo con el feedback apropiado en un tiempo razonable. Esto se puede observar en tipos de sitios en los cuales se realicen transacciones de algn tipo; en nuestro caso solo provee informacin. Tal vez en el Home Banking se puede observar esto de alguna manera, pero no nos hemos dedicado a esta seccin de la pgina.
6.2 CORRESPONDENCIA ENTRE EL SISTEMA Y EL MUNDO REAL
El sistema debe hablar el lenguaje del usuario, con palabras, frases y conceptos familiares al usuario en lugar de trminos orientados al sistema. La pgina del Bapro sigue esta heurstica, ya que, en general, no utiliza palabras o conceptos que no sean entendibles para el usuario familiarizado con conceptos bancarios, como s se puede observar en el buscador del Banco Credicoop, en donde utiliza palabras como and y or (Figura 2.15)
6.3 CONSISTENCIA Y ESTNDARES
Los usuarios no deberan preguntarse si palabras, situaciones o acciones significan lo mismo. Se deben seguir ciertas convenciones, en este caso para la web. Ya hemos hablado demasiado sobre la consistencia y los estndares y como sta pgina no los mantiene.
6.4 PREVENCIN DE ERRORES
Incluso mejor que los mensajes de error, es un diseo cuidadoso que impida que se produzca un problema. Es mejor hacer un chequeo previo y pedir confirmacin antes de que realicen alguna accin. Hay pocos casos en la pgina del Bapro en donde se puedan cometer este tipo de errores, tal vez haciendo clic sobre algn hipervnculo que no nos sea til y que por alguna razn se pudo producir alguna equivocacin. Otro de los problemas es por ejemplo, tener que descargar un PDF sin previo aviso. En lugares donde se debe colocar algn tipo de informacin, como es en el centro de atencin al cliente, se puede observar que existen algunos mtodos para la deteccin de errores. Por ejemplo encontramos el asterisco (*) al lado de los campos obligatorios que en s es una convencin. Si no llenamos alguno de estos campos, entonces al hacer clic en enviar nos devuelve el error que corresponde. De esta manera se minimiza el error.
6.5 RECONOCIMIENTO ANTES QUE RECORDAR
Minimizar la carga de memoria del usuario haciendo objetos, acciones y opciones visibles. El usuario no debe recordar informacin de una parte del dilogo a otra. Las instrucciones de uso del sistema deben ser visibles o fcilmente recuperables cuando el usuario lo crea apropiado. Remarcar con color los links o los ya visitados podra entrar dentro de esta seccin. Al no cumplir con estndares y consistencia se debe prestar mucha atencin sobre que se puede hacer clic y sobre que no, y tal vez llegar a recordar para futuras entradas.
6.6 FLEXIBILIDAD Y EFICIENCIA DE USO
Los aceleradores, invisibles para los usuarios inexpertos, pueden a menudo darle ms velocidad de interaccin a usuarios expertos y as, el sistema puede funcionar tanto para los usuarios expertos e inexpertos. Entonces, lo que se debe hacer es permitir a los usuarios adaptar acciones frecuentes. Esto se intent lograr en esta pgina mediante la lista desplegable y los mens de acceso rpido, pero como se vio anteriormente no son de gran utilidad.
57
6.7
ESTTICA Y DISEO MINIMALISTA
Las pginas no deben contener informacin irrelevante o poco necesario. Cada unidad de dialogo irrelevante adicional compite con las unidades relevante y disminuye su visibilidad relativa. En este caso, no existe informacin relevante mas all de los mini sitios incrustados que tal vez no posean mucha relacin con la pgina del banco, pero se podra decir que en general, esta heurstica se cumple.
6.8 AYUDAR A LOS USUARIOS A RECONOCER, DIAGNOSTICAR Y RECUPERARSE DE ERRORES
Los mensajes de error deben ser expresados en un lenguaje sencillo (sin cdigos), indicar con precisin el problema y sugerir una solucin constructiva. En este caso, en el solo lugar en el cual se puede cometer un error, el cual puede ser captado por el sistema y producir un feedback con el usuario es en el centro de contacto. Aqu, el dialogo que se ejecuta al producirse un error, se observa que es fcil de entender y es un dialogo modal, no dejando hacer otra cosa hasta que no se lea y acepte el error. El nico problema aqu es que luego de insertar un nombre, me dar un nuevo error, esta vez para apellido, pero en general est bien desarrollado.
Figura 6.1 Imagen que muestra una ayuda para los errores en la pgina de centro de contacto.
6.9 AYUDA Y DOCUMENTACIN
Algunas veces es necesario ayudar al usuario, pero esto debe ser fcil de encontrar y no muy grande. Aqu no existe demasiada ayuda, salvo cuando queremos ingresar al Home Banking en el que vemos un video demostrativo muy bien logrado. Luego, no existe demasiada ayuda. Tal vez algunas veces sea innecesaria pero en algunas ocasiones sera de utilidad por ejemplo posicionarse en algn hipervnculo y que este te muestre una breve resea de hacia adonde se dirige.
58
7. USABI LI DAD Y EL CON TEXTO La Usabilidad no es una cualidad que existe ni en un sentido absoluto ni real. Quiz pueda ser resumida como una cualidad general de la adecuacin de un propsito de cualquier artefacto. Es decir, la usabilidad de cualquier herramienta o sistema ha de ser vista en trminos del contexto en el cual es usado, y su adecuacin a tal contexto. Haciendo una referencia particular a los sistemas de informacin, en general, es imposible especifica la usabilidad de un sistema, sin primero definir quienes son los usuarios interesados del sistema, las tareas cuyos usuarios podran realizar con l, y las caractersticas de psicolgicas, organizacionales y sociales del ambiente en el cual ser usado. (Brooke, 1996) Las medidas de usabilidad entonces deben ser por ellas mismas dependientes del camino en el cual la usabilidad es definida. Es posible hablar de algunas clases generales de este tipo de medidas; ISO 9241-11 sugiere que una medida de usabilidad debera cubrir: Efectividad. La habilidad de los usuarios de completar una determinada tarea del sistema, y la calidad de la salida para esa tarea. Eficiencia. El nivel de recursos consumidos al realizar una tarea. Satisfaccin. Las reacciones subjetivas de los usuarios al usar el sistema.
Una consecuencia de la especificidad contextual de la facilidad de uso y medidas de usabilidad es que es muy difcil hacer comparaciones de la usabilidad a travs de diferentes sistemas. La comparacin de la utilidad de los diferentes sistemas destinados a fines diferentes, es un caso claro de "comparar manzanas y naranjas" y debe evitarse siempre que sea posible. Tambin es difcil y potencialmente engaosa de generalizar caractersticas de diseo y experiencia a travs de los sistemas, por ejemplo, porque una caracterstica de diseo particular, ha demostrado ser muy til para un sistema utilizable no significa necesariamente que lo har por otro sistema con una diferentes grupos de usuarios realizan diferentes tareas en otros entornos. Si hay un mbito en el que es posible hacer evaluaciones ms generalizadas de la usabilidad, lo que poda soportar la comparacin del sistema, es el rea de las evaluaciones subjetivas de la usabilidad. Las medidas subjetivas de la usabilidad suelen obtenerse mediante el uso de cuestionarios y escalas de actitud, y existen ejemplos de escalas de actitud general que no son especficos de ningn sistema en particular (por ejemplo, Cus (Kirakowski & Corbett, 1988)) Las exigencias de la evaluacin de la usabilidad de los sistemas dentro de un contexto industrial significan que a menudo no es ni rentable, ni prctico, llevar a cabo un anlisis de contexto y seleccionar sistemas de medicin adecuados. A menudo, todo lo que se necesita es una indicacin general del nivel general de la usabilidad de un sistema en comparacin con sus competidores o sus predecesores. Comnmente se somete a los usuarios a travs de ejercicios de evaluacin (del sistema, no de ellos) de duracin entre 20 minutos y una hora; al finalizar, una medida subjetiva de la usabilidad del sistema podr ser recogida. Pero puede que despus de este perodo de tiempo, los usuarios estn muy frustrados, especialmente si se han encontrado con problemas, y si se les presenta a continuacin un cuestionario largo, ser muy probable que no se complete y no habra datos suficientes para evaluar las reacciones subjetivas a la usabilidad del sistema. En este caso, persiguiendo resultados rpidos, se adapto el cuestionario al sitio web del Bapro. Se realiz una versin en lnea del cuestionario5, dndole carcter de encuesta y se lo difundi a travs de amigos y conocidos. Conociendo de antemano los potenciales evaluadores del sistema, se tuvo en cuenta que no eran usuarios frecuentes de la pgina web del Banco Provincia. Entonces se modifico el cuestionario, aadiendo una serie de tareas frecuentes que hipotticamente cualquier cliente del banco estara interesado en realizar, como por ej.:
Cuestionario online disponible en http://cott.byethost8.com/encuesta.php 59
Realizar un reclamo Buscar informacin sobre un determinado tema, por ej. una oportunidad inmobiliaria Intentar contactar al Gerente General Ingresar al Home Banking
Es decir, se seleccionaron cuidadosamente escenarios comunes de uso de que cualquier cliente, potencial o no, podra interesarle. Esta serie de tareas se le sugiere realizar al encuestado en la primer parte de la encuesta, con el solo objetivo de que haga uso del sistema. Pues si as no fuese, a la hora de realizar sus afirmaciones subjetivas, no sera lo suficientemente real o representativo. Sin embargo tenemos que aclarar que lo ideal hubiese sido que existan solo los veinte puntos, o quiz menos an, para que el formulario sea ms ameno y usable; incluso lo ideal sera incluirlo bajo una seccin aydenos a mejorar este sitio web, convirtindolo en un feedback explicito del sitio, destinado solo a usuarios que ya hayan hecho uso del sitio. Pero considerando el dominio a evaluar y lo difcil de encontrar usuarios reales del sistema, resulta una conveniente adaptacin para sacar algunas conclusiones.
7.1 SUS - ESCALA DE LA USABILIDAD DEL SISTEMA
La Escala de la Usabilidad del Sistema (SUS: System Usability Scale), es una simple escala de diez tems, en principio, dando una visin global de las evaluaciones subjetivas de la usabilidad. En este caso si ha extendido a unos veinte tems, basndonos en el esquema propuesto por WAMMI6. SUS es una escala de Likert. A menudo se supone que ste tipo de escalas esta simplemente basada en preguntas de opcin forzada, donde se hace una declaracin y el demandado indica el grado de acuerdo o desacuerdo con la declaracin en un 5 (o 7) escala de puntos. Aunque las escalas Likert se presentan en esta forma, las declaraciones con las que el encuestado indica el acuerdo y de desacuerdo deben ser seleccionadas cuidadosamente. La tcnica utilizada para la seleccin de temas para una escala de Likert es identificar ejemplos de cosas que dan lugar a las expresiones extremas de actitud, dignas de ser capturadas. Teniendo en cuenta un gran nmero de tales declaraciones, en general, habr algunos tems donde hay gran acuerdo entre los encuestados. Adems, existirn algunos cuyas declaraciones provoquen estados extremos de acuerdo o desacuerdo entre todos los encuestados. Son estas ltimas declaraciones las que se tratan de identificar para su inclusin en una escala de Likert, ya que, se espera, si se han seleccionado ejemplos adecuados, habra un acuerdo general de las actitudes extremas de ellos. A continuacin se listan las afirmaciones: 1) Esta web tiene mucho de inters para usted. 2) Le resulta difcil moverse a travs del sitio. 3) Puede encontrar fcilmente lo que usted desea. 4) La pgina tiene suficiente sentido lgico. 5) Necesitara ms prrafos de explicacin. 6) La pgina es muy atractiva. 7) Siempre siente que tiene el control sobre la pgina. 8) La pgina es muy lenta. 9) El sitio le ayuda a encontrar lo que realmente quiere o necesita. 10) Aprender a encontrar o recordar su camino alrededor del sitio es un problema. 11) No le gusta usar esta pgina web. 12) Puede contactarse fcilmente con la persona que usted quiera.
Website Analysis and MeasureMent Inventory www.wammi.com 60
13) Se siente eficiente cuando est usando esta web. (Piense si tarda mucho tiempo en encontrar o realizar una determinada tarea y cuanto tiempo le consume) 14) Es difcil decir si el sitio tiene lo que usted desea. 15) Usar por primera vez el sitio fue fcil. 16) El sitio web tiene algunas caractersticas molestas. 17) Recordar dnde est en el sitio es difcil. (Piense en el camino que hizo para llegar a un lugar determinado del sitio) 18) El uso de este sitio web es una prdida de tiempo. 19) Obtiene lo que espera cuando hago clic sobre algn vnculo en el sitio. 20) Todo en el sitio es fcil de entender.
Se ver que las declaraciones seleccionadas en realidad cubren una variedad de aspectos de la usabilidad del sistema, como la necesidad de apoyo, capacitacin y complejidad, y por lo tanto tienen un alto grado de validez aparente para la medicin de la usabilidad de un sistema.
7.2 USO DEL SUS
La escala se utiliza generalmente despus de que el demandado ha tenido la oportunidad de utilizar el sistema que est siendo evaluado, pero antes de cualquier interrogatorio o la discusin tenga lugar. Se deber solicitar al registro de su respuesta inmediata a cada elemento, en lugar de pensar acerca de los elementos de un largo tiempo. Todos los artculos deben ser revisados. Si un demandado considera que no puede responder a un tema particular, se debe marcar el punto central de la escala.
7.3 PUNTUACIN SUS
SUS provee un solo nmero que representa una medida compuesta de la usabilidad general del sistema en estudio. Para obtener el SUS se procede de la siguiente manera: Para calcular la puntuacin del SUS, primero se suman las contribuciones de la puntuacin de cada elemento. La contribucin de puntuacin de cada elemento ir de 1 a 5. Para los tems cuya premisa es negativa, con respecto al desempeo del sistema, (marcados con una cruz en la lista) la contribucin a la puntuacin es la posicin de la escala menos 1. Para los artculos en que la premisa resulta ser positiva (marcados con un tilde en la lista), la contribucin es de 5, menos la posicin de la escala. Luego se multiplica la suma de las puntuaciones por 1,25 (factor de normalizacin) para obtener el valor global del SUS, para cada uno de los encuestados. Luego se puede sacar un promedio para obtener el valor final.
El puntaje de SUS nico que se obtuvo de acuerdo a las personas encuestadas en nuestra experiencia es de 35.68. Podemos decir que este nmero es muy bajo en cuanto a la usabilidad general, ya que 100 representa el mximo puntaje que se puede obtener. Si traducimos esto, debemos informar que el sitio web del Banco Provincia posee graves deficiencias en el diseo y se debera prestar ms atencin a la usabilidad.
7.4 REPORTE SOBRE EL SUS
El dominio de encuestados fue de veinte personas, amigos y conocidos, dispuestos a colaborar en este anlisis de usabilidad. Sin embargo, dado el dominio del sitio, pocos de ellos estaban familiarizados con el sitio del Banco Provincia, ya que no son clientes, por lo que era la primera vez que accedan (He aqu la necesidad de los pasos previos para lograr un previo uso de la web). En su mayora los encuestados tienen una edad que rondan entre los 19 y 23 aos, y todos ellos poseen conocimientos bsicos en informtica, es decir, la mayora navega por internet por redes sociales y utiliza mensajera
61
instantnea nicamente. Se muestra un grafico que particiona el dominio de los encuestados de acuerdo a su edad.
Edad de los encuestados

-18 19-23 24-30 31-40 41-55
Figura 7.1 Grafico de Torta mostrando las diferentes edades de los encuestados. Si bien el nico valor general acerca de la usabilidad del sistema es representativo, es conveniente realizar algn otro tipo de anlisis para sacar el mximo provecho a los datos disponibles. Esto se mide en trminos de: Atractivo, Control, Eficiencia, Amabilidad y Aprendizaje. A continuacin se definen estas caractersticas para no dar lugar a ambigedades: Atractivo. Un sitio atractivo es visualmente agradable, y tambin ofrece mucho de inters directo para los usuarios previstos, ya se trate a travs de la funcionalidad o informacin. Control. Un sitio con alto puntaje en Control es un sitio donde la mayora de los usuarios probablemente sientan que pueden navegar por de l con facilidad. Un sitio mal organizado tendr un valor pobre. Eficiencia. Cuando los usuarios dan una calificacin de alta eficiencia es que creen que pueden localizar rpidamente lo que es de inters para ellos y sienten que el sitio web responde (posiblemente, la carga de las pginas) a una velocidad razonable. Amabilidad. Un sitio amable se corresponde con las expectativas de los usuarios sobre su contenido y estructura. Un sitio pobre en amabilidad puede ser confuso en cuanto a su contenido. Aprendizaje. Cuando el Aprendizaje es alto, los usuarios sienten que son capaces de empezar a utilizar el sitio con el mnimo de explicaciones. Todo es fcil de entender desde el principio. Cuando el Aprendizaje es bajo, los usuarios consideran que el sitio puede estar utilizando conceptos o trminos con los que no estn familiarizados. Usabilidad General. Ronda los conceptos que un sitio debe facilitar a los usuarios para que puedan tener acceso a lo que necesitan o desean del sitio, que hay un buen nivel de comprensin de la organizacin de la informacin, y que el sitio habla el idioma de los usuarios.
Cualquier medida de estas caractersticas que rondan un valor de cincuenta puntos se encuentra en la media. Ahora si una de ellas est por debajo de los 30 puntos, o por encima de los 70, ser excepcional en tal caracterstica (excepcionalmente mala o buena, respectivamente). Se puede ver en la tabla los valores estadsticos ms comunes, la media, la mediana y el desvi estndar para cada uno de las caractersticas categorizadas. A grandes rasgos podemos decir que no existe una gran diferencia entre la mediana y la media, excepto en las opiniones que refieren a la eficiencia; y la distribucin de los datos para cada categora es bastante homognea, excepto en el caso de la Usabilidad Global, que abarca varios trminos, y por lo tanto las opiniones de los usuarios no coinciden perfectamente.
62
Promedio
Mediana
Desvo
Atractivo
37,50
37,50
Control
35,00
30,00
9,882
Eficiencia
48,13
40,63
17,15
Amabilidad
29,58
29,38
5,683
Aprendizaje
31,00
32,50
2,71
Usabilidad Global
31,25
27,50
10,05
Tabla 7.1 Estadsticas clsicas acerca del valor de usabilidad por cada categora.
Puntajes Categricos
50,00 40,00 30,00 20,00 10,00 0,00
Figura 7.2 Grafico de Barras mostrando el valor de usabilidad categricamente. Como se puede apreciar en el grafico, podemos decir que se debera prestar especial atencin a la categora Amabilidad, ya que posee un puntaje inferior al 30%. Esto quiere decir que el sitio web puede llegar a ser confuso en cuanto a su contenido y organizacin. En realidad, tambin hay considerar el Aprendizaje y la Usabilidad Global del sitio, pues estos valores son muy cercanos al este lmite de 30%. Se destaca entre los resultados de la encuesta la eficiencia del sitio, ya que tiene el valor ms alto, cercano al 50%, aunque este valor no es lo suficientemente bueno, nos indica que la mayora de las personas se encuentra conforme ante el desempeo del sitio, gracias a la tecnologa con la cual est implementado (ASP). En general, podemos decir, que los puntajes obtenidos en todos los atributos estn por debajo de la media, es decir, ninguna caracterstica supera el 50%, lo que nos lleva a concluir que se debera rever el diseo del sitio en su totalidad (recordemos que para que el sitio se destaque en una caracterstica debe superar el 70%). Tambin podemos hacer un anlisis por cada una de las premisas. Es decir cul es la puntuacin media sobre cada una de las oraciones. Esto nos permite realizar un ranking y prestar especial atencin sobre aquellas cualidades buenas que actualmente provee el sitio, y sobre cules sera recomendable hacer mejoras. En el grafico, podemos ver cada una de las premisas que los usuarios contestaron, y su 63
respectiva inclinacin hacia si estn de acuerdo o no. Aquellas barran de color verde indican que el sitio se desempea bien en esa caracterstica, es decir los usuarios se encuentran a favor del sitio. Lamentablemente, la nica caracterstica que tiene buen desempeo segn los usuarios es la velocidad de la pgina. En el otro extremo nos encontramos con las caractersticas en las cuales se debera prestar mayor atencin y corregir los potenciales errores, stas se indican barras de color rojo. La lectura del grafico nos sugiere darle ms importancia a factores como eliminar las caractersticas molestas de la pgina, facilitar el control sobre la pgina, incorporar facilidades de bsqueda. Es decir mejorar la jerarqua visual y la navegacin de la pgina. Aquellas barras naranjas son las caractersticas aceptables o que pueden llegar a ser irrelevantes estadsticamente. Es recomendable considerar y mejorar los puntos que conciernen a las caractersticas extremas y luego volver a evaluar, pues esas caractersticas ms importantes tendrn impacto sobre el resto. Totalmente de Acuerdo
Caractersticas Excepcionalmente malas. Caractersticas Excepcionalmente buenas.
11 16 14 2 17 10 5 18 19 4 12 13 6 1 15 9 3 20 7 8
Totalmente en desacuerdo
Figura 7.3 Grafico que muestra la tendencia favorable o desfavorable de los encuestados por cada una de las premisas o caractersticas que expone el cuestionario.
64
8. S I TI O P ROP UESTO A continuacin se puede observar el sitio propuesto por nosotros donde se puede ver un buscador en lugar del acceso rpido, pestaas, un indicador de Usted est aqu y las migas de pan. En la Figura 8.1 se puede ver el caso para la seccin de Banca Personal y en la Figura 8.2 se observa un nivel ms abajo en la jerarqua, Compra y Venta de Dlares, donde tambin se enfatizaron los links ponindole un color acorde a stos, suponiendo por ejemplo el caso de ya haber visitado el link Sucursal del Banco.
Figura 8.1 Imagen que muestra la pgina propuesta para la seccin de Banca Personal
65
Figura 8.2 Imagen que muestra la propuesta para una pgina dentro de una sub seccin, en este caso Compra y Venta de Dlares
66
9. CON CLUS I N El informe desarrollado aborda una tarea que compete a un anlisis de usabilidad web, involucrando conocimientos e investigaciones dentro del rea del Human Computer Interaction. Se trat entonces de evaluar la facilidad de uso que provee el sitio web del Banco Provincia. En primer lugar se conocieron tcnicas de evaluacin de la usabilidad de un sistema. Lo interesante resulta que sistema es aplicable a cualquier aplicacin, ya sea una que se vale de las tecnologas de internet, como otras que no, y con esto nos referimos, por ejemplo, a cualquier procesador de texto que tengamos instalados en nuestra computadora. Es decir nos centramos principalmente en todo lo que involucre una interaccin entre un usuario y el sistema. Especialmente interesante es analizar la web, ya que hoy en da es un recurso muy importante que provee infinidad de informacin y facilidades, y lo que es aun ms importante al alcance de todos. Decir esto suena fuerte en principio, pero queremos referirnos a que a la web acceden con ms frecuencia personas con menos conocimientos especficos o tcnicos sobre un dominio en particular, que por ejemplo lo requiere una determinada aplicacin, como un software contable, o un software mdico; es ms, en general, los sistemas requieren de alguna capacitacin de los usuarios que van a hacer uso de l. No es este el caso (o no debera) ser el de la Web, pues debe ser lo suficientemente clara como para difundir informacin y proveer servicios por medio de aplicaciones fciles de usar. Y sera muy deseable que todo sistema, web o no, tambin persiga el mismo objetivo. He aqu cuando la usabilidad toma la identidad de un atributo de calidad de un sistema. A travs del anlisis, cuyos resultados intenta plantear este informe, se ha comprendido el impacto profundo que puede tener la usabilidad en el sistema puesto a prueba, el sitio web del Banco Provincia. Es decir, hemos podido concluir que una baja usabilidad web, contradice los objetivos que persigue en general un sitio web. Con esto queremos decir que el propsito de tener un sitio web, naturalmente es el de promocionar productos y servicios, en este caso financieros, como as tambin proveer alguna aplicacin de utilidad, en este caso el Home Banking. Para lograr una promocin satisfactoria, necesitamos usuarios que accedan a nuestra web, y si estos usuarios no resultan ser clientes, lograr llamar su atencin lo suficiente para tratar de sumarlos. Una baja usabilidad web contradice todos estos principios, logra que los actuales clientes estn insatisfechos con el servicio que se les brinda, llevndolos quiz a plantearse el dejar de ser clientes, y tambin hace que todo visitante que ocasionalmente navega por el sitio, no capture la informacin necesaria como para verse atrado y se vea motivado a convertirse en un cliente. Es claro, una web difcil de usar, aleja usuarios. Un caso real investigado, indica que, despus de ser rediseado prestndose especial atencin a la usabilidad, el sitio web de IBM increment sus ventas en un 400% (Magarzo, 2005) Para llevar a cabo un anlisis de usabilidad, se obtuvo conocimiento acerca de diversas tcnicas y mtodos que se pueden aplicar a un sistema. Varios son nombrados en (Nielsen & Mack, 1994). Entre ellos se pudieron discriminar los mas econmicos y factibles entre un grupo pequeo de personas. Es decir, todos estos mtodos se ajustan a determinadas configuraciones dentro de una empresa, de acuerdo al rol que estemos desempeando. En este caso, somos dos, por as decirlo, expertos en usabilidad, o mejor dicho, dos estudiantes con suficientes conocimientos tcnicos acerca de la materia como para llevar a cabo el papel de consultores externos. Es decir, nada tenemos que ver con el grupo de desarrollo ni los diseadores que construyeron el sitio, ni tampoco tenemos las posibilidades de contactarnos y reunirnos con ellos como para llevar a cabo un anlisis del tipo Tutorial Pluralista, coordinando un encuentro y discutiendo acerca del diseo. Por eso, elegimos los anlisis ms adecuados de acuerdo a nuestra situacin: el Anlisis Heurstico. Este fue el primer mtodo que se llevo a cabo, recorriendo exhaustivamente el sitio web en busca de inconvenientes en el diseo de interaccin con el usuario. Luego de sacar conclusiones, nos resulto interesante implementar un mtodo cuantitativo para analizar si los resultados estadsticos a partir de, por ejemplo, una encuesta, coincidan con todo el anlisis previo. En realidad ambos mtodos nos llevaron a la misma conclusin: la pgina del Banco Provincia tiene serios problemas en su diseo de interaccin con el usuario, y sera recomendable que sea modificada prestndole especial atencin.
67
El Anlisis Heurstico sobre la web, nos condujo a detectar errores a lo largo de todo el sitio, desde la pgina principal, pasando por la arquitectura de la informacin que posee, hasta los niveles ms profundos del sitio. En general, todo el diseo del sitio posee importantes problemas en lo que tiene que ver con la consistencia visual y con la navegacin por sobre la sitio que brinda a los usuarios. Podemos citar para el primero, cambios continuos en los estilos (por ejemplo en los botones y texto informativo), rotura de las convenciones y principios establecidos, pobreza en el atractivo visual (ver resultados de la encuesta), entre otros. En cuanto a los inconvenientes de navegacin que provee la web del Bapro, se pueden destacar la dificultad de orientacin provista al usuario (esto se ve a que no posee Migas, ni tampoco un indicador en el panel del lugar actual donde uno se encuentra), una difcil forma de buscar, en realidad ninguna, pues no provee motor de bsqueda, lo que dificulta a cualquier usuario encontrar informacin especfica, baja predictibilidad en lo que se refiere a los vnculos del sitio, y poco englobe visual, interrupcin del flujo de navegacin (producto de la cantidad de documentos PDFs no sealados), entre otros. Tampoco podemos obviar la falta total de accesibilidad de la pgina. Segn lo investigado esta es una caracterstica menospreciada en general por los diseadores, y claramente el Bapro resulta ser un ejemplo de esto, lamentablemente. La gravedad incluso se ve aumentada si se analiza el pblico objetivo que persigue el sitio (Ver Seccin 0) En cuanto al anlisis cuantitativo, llevado a cabo mediante un clculo del SUS a travs de un cuestionario, podemos decir que los resultados obtenidos fueron peores a los esperados. Es decir, tenamos una visin un poco ms optimista, pese a todos los problemas detectados heursticamente que ante mencionamos. Es decir, considerando la lectura de los resultados, por ejemplo el valor sus global de 35.68 indica que el sitio es pobre en cuanto a su usabilidad, conclusin a la cual tambin habamos abordado luego del anlisis heurstico. Lo fructuoso de la encuesta fue el lograr implementar un sistema que permita medir cuantitativamente la usabilidad, lo que sirvi de soporte, o mejor dicho, como herramienta para complementar y afirmar nuestra conclusiones previas. La lectura de los resultados arrojados por el cuestionario, que nos mostr valores ms bajos a los esperados, es decir criticas an peores de las que nosotros formulamos, quiz puede deberse a la poca experiencia con respecto a la usabilidad del sitio que tenan los encuestados. En su mayora eran personas que accedan por primera vez al sitio. Este fue el obstculo ms dificultoso que intentamos sortear, tratando de conducir a los encuestados a una serie de acciones a travs del sitio. Quiz algunas estas acciones fueron elegidas, en principio creyendo que eran tareas comunes que cualquier cliente del banco pudiera realizar, pero que se vieron afectadas subjetivamente por nuestra eleccin. Por ejemplo, entre otras tareas, se le requera al usuario que busque una Oportunidad Inmobiliaria, que si bien no es una tarea muy descabellada dentro de un banco, quizs era realmente complicada de llevar a cabo en esta web. En resumen, podemos decir que la seleccin de las tareas a realizar previas, tuvieron gran impacto en los resultados. Otro punto destacable es que, el indicarle al usuario esas determinadas tareas a realizar, nos condujo a construir un formulario quizs poco usable y complejo de entender. Sin embargo intentamos ser lo ms claros posibles e incluir una fase de preparacin psicolgica de los encuestados, tratando de que entiendan que su respuesta debe ser natural y que no podan cometer errores, porque no se los evaluaba precisamente a ellos, sino al sitio web. Sin embargo, realmente valoramos la utilidad de este anlisis estadstico, es decir de ninguna manera lo descartaramos como herramienta de medicin. En realidad, lo ideal sera modificarlo, quiz en versiones posteriores, eligiendo otras tareas previas, acortando el tamao el formulario, hacindolo un poco ms claro y veloz de realizar. En realidad lo ideal hubiese sido que este cuestionario este incorporado como feedback explcito dentro del mismo sitio. Lo importante, ms all de estos inconvenientes, es que ahora conocemos una herramienta que arroja buenos resultados, que nos permite medir la usabilidad del sitio, desde el punto de vista de los usuarios.
68
Luego de haber considerado todas deficiencias en el diseo, y haber evaluado por medio de los dos mtodos, tambin tenemos que decir que fuimos capaces de proponer nuestra propia versin del sitio. En realidad, son simples modificaciones sobre el actual, pero que incrementan notablemente la usabilidad. Como conclusin final, podemos decir que el sitio web del Banco Provincia es realmente un sitio que debe ser re diseado, poniendo nfasis en el diseo de interaccin con el usuario. Hemos ya tratado todos los beneficios que conlleva la aplicacin de las investigaciones relativas al Human Computer Interaction en la web.
69
10. BI BLI OGRAF A Brooke, J. (1996). SUS - A quick and dirty usability scale. Taylor and Francis. Clark, J. (2002). Building Accessible Websites. New Riders. Division, U.S. General Services Administration - IT Accessibility & Workforce. (s.f.). Section 508. Recuperado el 19 de Marzo de 2010, de http://www.section508.gov Kirakowski, J., & Corbett, M. (1988). Measuring User Satisfaction. En D. M. Jones, & R. Winder, People and Computers IV. Cambridge: Cambridge University Press. Krug, S. (2005). Don't make me think - A Common Sense Approach to Web Usability. New Riders Press. Magarzo, A. d. (2005). Cmo la usabilidad puede ayudar a incrementar las ventas on-line? MK: Marketing + ventas , 34-37. Nielsen, J. (1999). Designing Web Usability. Indianapolis: New Riders. Nielsen, J. (2003). Homepage Design Guidelines. Jakob Nielsen's Alertbox. Nielsen, J. (2009). Top 10 mistakes of Web design. Jakob Nielsen Alertbox. Nielsen, J. (2002). Top Ten Guidelines for Homepage Usability . Jakob Nielsen's Alertbox. Nielsen, J. (2009). Top-10 Information Architecture Mistakes . Jakob Nielsen's Alertbox. Nielsen, J. (2003). Usability 101: Introduction to Usability. Jakob Nielsen's Alertbox. Nielsen, J., & Mack, R. L. (1994). Usability Inspection Methods. New York: John Wiley & Sons. Slatin, J. M., & Rush, S. (2002). Maximum Accessibility: Making Your Web Site More Usable for Everyone. Addison-Wesley Professional. Strunk, W. J., & White, E. B. (1918). The Elements of Style. Boston: Allyn & Bacon. Thatcher, J., Waddell, C., Henry, S., Swierenga, S., Urban, M., Burks, M., y otros. (2002). Constructing Accessible Web Sites. Peer Information Inc.
70

Informe HCI

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Informe HCI

Caricato da

Copyright:

Formati disponibili

Universidad Nacional del Centro Facultad de Cs.

Exactas Ingeniera de Sistemas Marzo 2010

Anlisis de Usabilidad del Sitio Web del Banco Provincia

Diseo de Interaccin Centrado en el Usuario

El centro de contacto .........................................................................46 Acceso al Home Banking.....................................................................46

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Banco Provincia www.bapro.com.ar 4

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

2. ANLI S I S HEUR STI CO

Identidad del Sitio

Diseo de Interaccin Centrado en el Usuario

Identificador del Sitio

Diseo de Interaccin Centrado en el Usuario

DISEO Y JERARQUA VISUAL

Diseo de Interaccin Centrado en el Usuario

Coherencia lgico- visual

Diseo de Interaccin Centrado en el Usuario

Figura 2.3 Imagen que muestra una mejor propuesta

Diseo de Interaccin Centrado en el Usuario

APROVECHAMIENTO Y USO DE LAS CONVENCIONES

Figura 2.2.2.1 Figura que muestra el acceso a la Pagina Principal o Inicial

Diseo de Interaccin Centrado en el Usuario

DIVISIN DE LAS PGINAS EN ZONAS CLARAMENTE DEFINIDAS.

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

17 Omitanse las palabras innecesarias.

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

norma de Krug sobre la usabilidad.

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Veamos un ejemplo del Banco Francs en la Figura 2.9.

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Identificacin del sitio

Camino hacia la pgina principal

Una forma de buscar

Diseo de Interaccin Centrado en el Usuario

Figura 2.15 Bsqueda en el sitio del banco Credicoop

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Otro ejemplo es el resultado obtenido por el Banco Galicia Figura 2.17

Figura 2.18 Imagen que muestra las utilidades del sitio

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Mapa del Sitio

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Fondos comunes de inversin

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Diseo de Interaccin Centrado en el Usuario

Prstamos Personales por Cajeros Automticos y Home Banking