Credito: http://www.flickr.com/photos/flattop341/224175619/

Los formularios muchas veces pasan tan desapercibidos en un sitio web (por parte de los desarrolladores y diseñadores) pero en realidad es un factor importantísimo para la mayoría de los sitios web.

Al plantear los objetivos de un sitio, casi siempre se encuentra involucrado un formulario. Por ejemplo, si yo quiero que mis visitantes me contacten, tengo que hacer que el formulario sea amigable y fácil de llenar -como mínimo.

Es por esto que es importante prestarle atención a algunos detalles dentro de la creación de formularios, y algo de eso tiene que ver con el botón “reset” en éstos.

Básicamente hay dos posturas al respecto del uso o no del botón reset en un formulario. Quienes apoyan el uso del botón reset, justifican que en los diseños centrados en el usuario, el visitante debe tener la posibilidad de tomar una “salida de emergencia” y volver atrás en sus pasos. Así que si ya no quiere llenar un formulario, tendrá disponible el botón reset para limpiar el formulario.

Sin embargo, desde el punto de vista de usabilidad, es también probable que el usuario al ver dos botones pueda confundirse y presionar “sin querer queriendo” (estoy viendo mucho el chavo ) el botón de reset, esto puede representar un contacto u objetivo perdido.

Adicionalmente, para optimizar las conversiones de un sitio web el botón reset puede ser un factor en contra: Es presentarle una puerta de salida al usuario cuando está a punto de cumplir uno de los objetivos del sitio web.

Pensando en un usuario, es rara vez que alguien quiera borrar todo un formulario, si se equivocaron en alguna acción es más común que se dirijan directamente al campo y cambien el contenido, no que borren todo un formulario e inicien nuevamente.

Talvés puedan existir casos donde el uso del botón reset pueda ser útil, pero yo diría que evitar su uso, ayuda tanto a los usuarios como a los objetivos y conversiones de un sitio web.

Es realmente irónico que una organización con un sitio web tan pobre y con tantas falencias se de el lujo de realizar y organizar un premio donde se escogen a los “mejores” sitios web en Colombia.

En serio, son tantas las cosas malas que ví en el sitio oficial del concurso, que no se por donde empezar!

Dios, otro sitio con maquetación en tablas, y con una profundidad de 7 tablas … es decir, existen partes del código donde una tabla se encuentra dentro de otras 6 tablas … muy poco óptimo desde mi punto de vista:

Eso por una parte, por otra parte corrí una prueba de accesibilidad y adivinen … no, tampoco pasó, y por muchas razones, no es que se tratara de una o dos cosas, son varios los factores de accesibilidad que este sitio no cumple.

Acá está el enlace de la prueba de factores de accesibilidad del sitio de la CCIT

Las cosas más básicas como ponerle el atributo ALT a una imagen, o hacer uso de encabezados no se cumplen. Esto da a entender que estos factores definitivamente no son tenidos en cuenta por la CCIT como criterios de evaluación al momento de escoger a “los mejores” sitios web en Colombia.

En cuanto a usabilidad el sitio también presenta sus falencias:

• El menu de navegación no es claro
• Las páginas no tienen títulos
• Los enlaces se abren casi siempre en ventanas nuevas, lo que hace que el usuario se pueda confundir entre tantas ventanas

Un tema especial en la usabilidad del sitio es que es dificil (al menos a mí me costó ) encontrar el enlace donde me pueda registrar a participar en tan magno concurso. Se supone que ese debe ser el objetivo principal de la página, y lo que los usuarios “deberían” realizar.

Sin embargo, el enlace se encuentra, a mi parecer, muy escondido:

Lo más chistoso es que cuando finalmente encontré el enlace me aparece esta página:

Otro paso más para que el usuario llegue al objetivo de la página. Esto es una falla para la usabilidad del sitio. Otra cosa que me llamó la atención es que hay un enlace en la navegación principal del sitio que se llama “PMFS”. Al revisar este enlace se trata de las “Preguntas Frecuentes”.

Falta ver, creo que desde que se inició con este premio, desde ya hace bastante tiempo, se ha criticado que los sitios ganadores no son en realidad muy buenos. Con toda la prensa y patrocinadores que tiene este premio, creo que se puede hacer algo muchísimo mejor y que en realidad sea una competencia y un honor tener un premio como “el mejor sitio de Internet en Colombia” en X categoría.

Esperemos que en esta edición mejoren los premios como tal, más allá de todas las fallas que tiene la página oficial del concurso. Ah, en la página de la CCIT tampoco se pueden ver los inscritos hasta el momento :s …

Para los que les interese, se reciben inscripciones hasta el Viernes 24 de julio de 2009 antes del medio día. La premiación se realizará el 14 de Octubre. El formulario de inscripción está en esta dirección.

Según Nielsen, el hecho de NO mostrar una constraseña que se ingresa a un sitio web (sino que se muestran puntos por ejemplo) no incrementa la seguridad de un sitio, sino que puede afectar la usabilidad del mismo.

Por ejemplo:

Básicamente Nielsen sugiere que mantener los campos de contraseña como contraseña (puede ser redundante pero no encontré otra forma de explicarlo!) puede afectar la usabilidad de un sitio debido a los errores que pueden cometer los usuarios.

De esta forma, él sugiere que es hora de mostrar las contraseñas en texto normal.

Criminal

Y la seguridad?

Teóricamente, los campos de contraseña se muestran de esta forma para que no sean vistos por alguien que se encuentre cerca nuestro al momento de ingresarla. Como argumento, Nielsen afirma que si alguien en realidad quisiera robarte una contraseña éste miraría directamente en el teclado y no a la pantalla. Así que el hecho de aplicar esta máscara no previene mucho para que te roben una contraseña.

El problema de Usabilidad:

Al tener estos campos de contraseña, finalmente se le está haciendo más dificil al usuario ingresar la información en tu página o aplicación web. De esta forma, los usuarios cometen más errores cuando no ven lo que están llenando un formulario.

Obviamente no en todos los casos un usario querrá que su contraseña pueda ser vista por cualquiera. Imagínense si estoy ingresando a la cuenta de mi banco, no me imagino que alguién tenga la más mínima oportunidad de que me vean mi clave.

Sin embargo, para otro tipo de aplicaciones sí se puede permitir al usuario la opción de visualizar o no su contraseña.

Plugin para wordpress:

Encontré un plugin que hace exactamente lo que sugiere Nielsen. (Por eso es que me gusta wordpress! Existen muchos plugins muy útiles)

Para los interesados el plugin lo pueden conseguir en esta dirección.

Quienes estarán hablando?

• Mario Carvajal (Astrolabio) – Moderador
• David Ricardo Ramírez Ordóñez (Hiperterminal)
• Natalia Vivas (Usarte.org)
• Juan Diego Velasco (Tatuajefalso)
• Mauricio Candamil Llano (@maocandamil)

Arquitecto de la información es una profesión, a pesar de todas las dificultades en Colombia.

Primera pregunta? Con qué se come la arquitectura de la información?

Inicia David Ramirez: Se trata de hacer que los usuarios lleguen más rápido a la información. Natalia continua con: Diseñar y planificar, todo lo que se diseña tiene un sentido: “Se come con el olfato”.

Juan Diego Velasco: La Arquitectura de Información se trata de pensar con sentido común y pensar cómo la gente podría encontrar la información.

En conclusión: Se trata de hacer lo complejo fácil, hacer que cada usuario encuentre su camino hacia la información.

Desde cada punto de vista, como llegó la Arquitectura de Información a cada uno?

• Llegar desde el punto de vista de usabilidad: La bibla de la IA es el libro “Information Architecture for the WWW”.
• En una empresa de desarrollo web: Nació de la necesidad de mejorar el producto final de una empresa.

La disciplina como tal no es nueva, aunque es dificil pensar en la Arquitectura de Información como una profesión.

Arquitectura de la Información en los sitios web. Que ocurre cuando no se realiza la Arquitectura de Infomración en un sitio web, o se hace de una forma deficiente?

Mauricio: Al haber ausencia de planeación, existirán algunas falencias sobre las necesidades transaccionales del sitio. Algunas veces sale bien, pero siempre es mejor planear. Una practica buena, es realizar wiframes o bocetos, para planear desde antes donde van a estar ubicados los elementos del sitio, de esta forma,  cuando el proceso de la creacion de un sitio vaya en otras fases, no se debe incurrir en costos adicionales.

Tatuajefalso: Se crean “cadaveres web” al no planear. Un sitio web donde no le ‘hablan a nadie’. Se tienen que crear sitios que le hablen a alguien.

Natalia: El usuario invierte mucho tiempo en un sitio web, donde no se encuentra lo que se busca. Las afecciones humanas se ven afectadas, se tienen usuarios frustrados, con rabia, lo que finalmente genera pérdidas para una empresa. Los usaurios se van frustrados al no encontrar lo que buscaban. Se debe procurar que todo lo que se estructura permita que la gente busca lo que necesita en el menor tiempo posible. Ejemplo de mal uso de AI el sitio web de colciencias.

Desde la experiencia de cada quién, que roles son necesarios para construir un sitio web?

Natalia: Metodologicamente: El proceso inicia un ingeniero en la parte de programación o desarrollo, cuando se termina la aplicación, el siguiente paso consiste en que el diseñador genere el ‘look and feel’,  finalmente asa al usuario.

Cómo debería ser: En la primera fase, el Arquitecto de la Información debe ser transversal a todo el desarrollo del sitio. El Arquitecto de Información levanta requerimientos de uso y del cliente . La segunda fase articula las necesidades del cliente con las del usuario. Tanto el cliente como el usuario tienen unas necesidades.

El punto final es evitar soporte posterior al lanzamiento de un sitio web al planear anteriormente usando una buena arquitectura de la información de un sitio web. Se debe centrar los sitios web en el usuario.

Tatuajefalso: En las empresas generalmente existe una área de diseño, una área de desarrollo y una área de cuentas que supuestamente es el representante del cliente en la empresa. Lo que falta en las empresas colombianas es una área que se encargue por velar por los intereses del usuario.

La Arquitectura de la Información es compleja de vender por falta de oferta y demanda, cómo se vende entonces?

Tatuajefalso: Las entidades del estado están recientemente más interesadas en estándares, usabilidad y accesibilidad (lo que significa que puede haber oferta). Se vende al enfocarse en las ventajas:

• Evitar tiempos extras en cambios innecesarios
• Rehacer o tener múltiples revisiones de un sitio web al finalizar el proyecto.

Candamil: Se ofrece una mejor experiencia al usuario, donde al final costos de rediseños son evitados. Invertir al inicio para no repetir al final.

Hiperterminal: Vender desde el punto de vista de SEO y posicionamiento web.

Natalia Vivas: Para vender, no hay que nombrar la Arquitectura de la Información. Se debe vender como estrategia de comunicación web, para que una empresa mejore los caminos de comunicación web con sus clientes.  En cambio, lo que podría venderse, es enseñar a hacer la Arquitectura de la Información, no la Arquitectura de la Información como tal. Se debe empezar a educar al cliente.

Cuanto vale la Arquitectura de Información, cómo se cobra?

Natalia Vivas: La AI es cara,  sin embargo primero se debe diferenciar en qué sitios web se necesita Arquitectura de Información, y en que proyectos se necesita un analisis de usabilidad. El proyecto más dificil para un Arquitecto de Información es una tienda online. No es lo mismo una página vitrina a una página de comercio electrónico. Se debe cobrar por el proceso y por los entregables.

La cifra de un Arquitecto de Información por 1 hora de consultoria vale $80 dólares. En Colombia es muy complicado, porque la gente no entiende los beneficios. Se debe comparar con el precio de lo que cueste determinar una estrategia de comunicación.

Tatuajefalso: El desarrollo de un sitio se encarece más, por las horas invertidas por parte del arquitecto de información. El desarrollo de un sitio web se puede ver frenado por cambios o recomendaciones que sean dificil de implementar por la parte de desarrollo.

Lo clave es mostrar al cliente el retorno de la inversión:

• Disminuir horas de capacitación.
• Disminuir los tiempos posteriores a la entrega (retrabajar).

Otro mal ejemplo de Arquitectura de Información (miplanilla.com) Se ahorrarían mucho dinero en el call center que tienen dedicado a atender llamadas de personas que no pueden realizar un pago a través del sitio web.

Por donde arrancar en la carrera de Arquitectura de la Información?

Mauricio: A través de la lectura en Internet, libros,  blogs (nosolousabilidad.com). Aplicar el sentido común en lo que se desarrolla, practicar a través de ejemplos sencillos.

Natalia Vivas: Hacer un inventario de su closet … aunque para un sitio web es más dificil. Recomienda estar en redes, se aprende inicialmente más en redes sociales. Acercarse a las personas que ‘saben’, generar contactos y acompañarlas con lecturas como “diseño de experiencia de usuario”.

No hay diplomas para arquitectos de información (Existen Postgrados en AI en Estados Unidos). Si se vende como estrategia de comunicación, un comunicador social puede cumplir el papel de lider de Arquitecto de Información en un proyecto.

Carnegie Mellon, de los más conocidos. En España está la  Universidad de Murcia : Diseño de webs eficaces (Curso a distancia – 70 euros apróximadamente) el tutor de ese curso es Yuseff Hassan.

Tips, consejos y herramientas web

Natalia: Un consejo es nunca hacer un inventario de contenido de un sitio web estatal = Mucho contenido. Nunca evaluar un trabajo basándose únicamente en el home page, se debe revisar y explorar todo el sitio para poder realizar una cotización. Otro consejo es llevar documentación, llevar registro de cada fase de un proyecto.

Herramientas: Desde Word y Excel hasta Axure (Axure es útil para los que no son programadores, pues es un programa donde “solo mueves cajas y flechas”).

Tatuajefalso: Juegue a ser el usuario, haga pruebas usted mismo. Herramientas: Balsamiq Mockups (Algo muy básico, que el cliente entiende que se trata de un boceto). MindMaster: Cuenta con pago PRO y se vuelve colaborativo, lo cual es muy valioso para un equipo en una empresa.

Mauricio: Prubas de card sorting: Optimalsort (versión gratuita, con menos tarjetas). Otra herramienta es Cardzort. Axure es util para generar prototipos interactivos.

Nunca se va a tener una arquitectura de información perfecto. Se puede mejorar, pera cada persona tiene una forma única de interactuar con un sitio. Por más esfuerzo que se invierta, siempre van a existir usuarios con dificultades para usar un sitio, el reto está en que el porcentaje de personas tengan una buena experiencia usando un sitio web.

Benchmarking como primer paso para AI:

Mirar lo bueno que está haciendo el otro, es una buena práctica para la AI. Hacer que eso se ajuste al público objetivo. Existen estándares de navegación, se pueden basar en otros sitios web para crear una propia AI.

Pasos esenciales para un sitio ‘vitrina’
Matriz de recolección de información: Para un sitio web pequeño obtener las respuestas a las siguientes preguntas:

• ¿Para qué quiere estar en internet?
• ¿Cómo le va a ayudar su sitio a cumplir sus objetivos organizacionales?
• ¿Qué tipo de personas visitaría su sitio web?

Determinar las necesidades del cliente, necesidades de usuarios, y recursos. Un proceso típico es la generación de un  mapa del sitio, posteriormente se genera un wiframe, y luego un prototipo.

Primero que todo, se tiene que tener claro el concepto de una página de introducción. La mayoría de las veces, es una página en la cual se presenta al usuario una información ‘previa’ a la página web como tal. El ejemplo típico, es una página con una introducción en flash, al finalizar la animación en esta página de introducción, se pasa al contenido del home, o se le presenta al  usuario un botón que dice “Entrar”

Otro ejemplo de este tipo de páginas ocurre en aquellos sitios donde el usuario debe realizar algún tipo de selección para poder ingresar a visualizar el contenido del sitio web.

Página web de Snickers, Deportes extremos y deportes de aventura

En el ejemplo anterior, se puede ver cómo al ingresar a la página de snickers, el usuario inmediatamente debe realizar una selección extra, de acuerdo al país en el que esté interesado.

Relación con SEO

Este tipo de páginas no funciona muy bien con los motores de búsqueda debido a las siguiente razón:

• Poco texto con palabras claves: Es típico que este tipo de páginas contengan poco texto, ya sea porque se presenta una imagen, o una animación en flash (que no es interpretada por los motores de búsqueda. Pueden leer más sobre SEO y Flash). De esta forma, no se le está indicando al motor de búsqueda sobre el contenido del sitio web, lo cual puede prejudicar su posicionamiento.

Relación con Usabilidad

Desde el punto de vista de usabilidad, estas páginas también cuentan con una gran importancia. Algunos estudios indican que un porcentaje considerable de personas simplemente abandonan un sitio web al momento de ver una página cn una introducción en flash.

Adicionalmente, los botones que se presentan en las páginas de introducción con mensajes como “Entre” o “Continue”, son extremadamente redundates, pues un usuario de hecho ya ingresó al sitio web, porque se le pregunta otra vez si quiere ingresar al sitio? … no tiene sentido.

Finalmente, una página de introducción va en contra de la premisa de minimizar la cantidad de pasos que un usuario debería tomar para llegar a la información que buscan

Algunas animaciones en flash pueden tardar mucho en cargar, y puede resultar en el abandono de visitas incluso antes de que se muestre la página, para los usuarios con conexiones lentas este problema puede ser mayor.

En conclusión, y por las razones expuestas en esta entrada, considero que en la mayoría de los casos es mejor evitar el uso de estas páginas de introducción. Aunque obviamente, pueden existir casos en los que el uso de este tipo de páginas sea un requisito.

Tips Usabilidad

La primera regla de usabilidad según Nielsen, es “No hacer pensar a las personas”.

Esta regla tan sencilla, parece ser olvidada por muchos diseñadores o desarrolladores web. En muchas ocasiones, los diseños web pueden llegar a ser confusos y complejos, y la información es dificil de encontrar, lo que hace que las personas no encuentren lo que buscan en un sitio web.

Las personas quieren encontrar la página correcta de forma rápida y eficiente.

• Nombrar los enlaces claramente: De esta forma, los visitantes podrán encontrar lo que buscan de forma rápida y sin confundirse.

Otro factor importante a tener en cuenta, es que los humanos generalmente sacrifican tiempo por sacrificio, sin ser concientes de lo que hacen. Es decir, toman decisiones basados en lo que ven, sin explorar todas las opciones.

Muchos usuarios web hacen click en el primer enlace que pueda funcionar para ellos, sin revisar todas las opciones, este comportamiento se puede ver más claramente en audiencias más jóvenes.

• Pensar cuidadosamente la forma en la que se presenta la información a los usuarios
• Ubicar los enlaces y la información más importante en la parte superior de las páginas
• Si quieres que las personas hagan click sobre un enlace con respecto a otro, debes poner el enlace al que quieres que hagan click primero en el código.

Estos son solo unos tips de usabilidad, que pueden ayudar a los visitantes a un sitio web tener una mejor experiencia, o que encuentren la información que están buscando.

Varios puntos de vista pueden ser tenidos en cuenta, principalmente factores de usabilidad y factores de optimización, además obviamente de factores visuales ligados al diseño como tal.

Las 3 resoluciones principales que se contemplan para diseñar una web son: 800×600, 1024×768 hasta 1280×1024.

Ahora, la pregunta es, cual es el tamaño más usado? No se puede dar una respuesta exacta, pero una buena aproximación se presenta a continuación:

A partir de la gráfica anterior se puede deducir que la gran mayoría de los usuarios de Internet, poseen pantallas cuya resolución supera los 1024 x 768 px.

Desde el punto de vista de usabilidad, se debe procurar, sin embargo, que un sitio web funcione bien, y se vea bien independientemente de la pantalla que se use para visualizarlo. Nielsen, recomienda los siguientes factores para optimizar una página web para un determinado tamaño:

1. Visibilidad Inicial: Toda la información clave deber ser visible para los usuarios sin necesidad de que ellos tengan que desplazarse a traves de la página para encontrarla.
2. Legible: Es simple para los usuarios leer el texto de su sitio web?

Desde el punto de vista de SEO o posicionamiento web, la forma en la que se le presenta la información al usuario tambien puede jugar un papel importante. Una de las bases de la optimización para buscadores es la cantidad de texto visible para que un motor de búsqueda pueda indexar y determinar de que se trata una página web.

Generalmente, con diseños amplios, es muchos más sencillos ubicar gran cantidad de texto, o la suficiente, para encontrar un balance óptimo entre texto y gráficos. Por otro lado, en un diseño realizado para una menor resolución, esto aveces es algo complicado.