Usabilidad

Medidor de contraseñas con JavaScript

Si la contraseña contiene caracteres raros, números y letras, se considerará una contraseña súper segura; pero, si la contraseña es sólo una palabra, conocida y en minúsculas, la contraseña puede ser fácilmente descubierta… Ya existen algunas aplicaciones, como las de correo electrónico (Gmail, Hotmail o Yahoo), que indican a una persona cuando va registrarse, que tan buena contraseña es la que esta escogiendo; y esto, lo realizan utilizando un javascript como el que podemos probar y descargar aquí.

Este script mide que tan segura es una contraseña (vía webappers), alargando una barrita de colores, mientras se la va escribiendo. Así, cuando más larga es la barrita, más seguro será el password… Interesante el script. Pero, otra manera de entender este sistema, es viendo la aplicación de Geek(Wisdom), que incluso añade puntajes a la palabra que vamos escribiendo.

Además, profundizando un poco, un buen tutorial para aprender sobre medidores de contraseñas seguras, es este artículo publicado en codeandcoffee, en donde explican todos los pasitos al detalle, aquí pueden ver el ejemplo del tutorial. Muy bueno.

El eyetracking es una tecnología que permite seguir los movimientos oculares de una persona para determinar lo que esta observando en la pantalla. Esto se logra con el uso de un eye tracker, un monitor ó camara especial que emite rayos infrarrojos a los ojos de quien lo usa. Estos rayos rebotan en su pupila y vuelven al aparato, permitiendo así calcular con precisión dónde está observando.

Eyetracking y Usabilidad

En Baluart, ya hemos publicado algunos artículos y enlaces referentes a estudios de Eyetracking. Pero en estos días, Usolab ha publicado, creo yo, el más reciente estudio, enfocado desde el de vista de la Usabilidad y sobre webs en español. Realmente vale la pena leerlo.

Enlace | La aportación del eyetracking en el sector de usabilidad

Desde un punto de vista práctico, los microformatos no son más que una forma de dar instrucciones, una forma manual de comunicarse entre Webs. Así, como cuando un editor etiqueta sus artículos y los lectores comprenden de que trata el contenido sólo con ver las etiquetas. Con los microformatos, lo que se hace es "etiquetar" las etiquetas XHTML, para que sean los servicios webs (google ó technorati por ejemplo) quienes puedan comprender fácilmente y actuar de acuerdo a lo que cada microformato le indica.

Dos populares microformatos, por ejemplo, son los atributos:

rel=”nofollow” para indicarle a los buscadores que no lo tomen en cuenta, y
rel=”tag” para indicar a technorati que almacene el artículo bajo tal etiqueta.

Esta es una explicación muy práctica y simple. En realidad, sobre los microformatos se esta hablando muchísimo y un muy buen artículo que acabo de leer, es el que acaban de publicar en Grancomo. En él, nos cuentan casi todo sobre los microformatos: ¿Cómo surgió la idea? ¿Quiénes la impulsaron en sus inicios? ¿Qué son los microformatos? ¿Cómo implementarlos? y más.

Yo me quedo convenientemente con esta rápida explicación de ¿Por qué el título Microformatos: La web semántica para torpes?

  • Porque cualquier usuario con conocimientos mínimos de XHTML puede incorporarlos a su sitio Web y anunciarlo al mundo
  • Porque un desarrollador con algo de carisma y de acuerdo con la Comunidad puede proponer su propio microformato
  • Porque si fallan, no pasa nada, la información que gestionan no es crítica (de momento)
  • Para darle un título “original” y polémico a este artículo.

Artículo recomendado | Microformatos: La web semántica para torpes

En Maestros del Web han publicado la traducción de Ajax Mistakes, un excelente artículo por la cantidad de ítems (errores) que comenta:

  • Usar AJAX por ser “AJAX”
  • Hacer inservible el botón de volver atrás
  • No mostrar inmediatamente señales del progreso de una operación
  • No pensar en la gente desconectada (offline)
  • No me hagas esperar
  • Enviar de forma insegura información sensible
  • Asumir que el desarrollo AJAX sólo es para una plataforma
  • Olvidar que la aplicación puede estar siendo usada por varias personas a la vez
  • Demasiado código, hace que el navegador sea lento
  • No tener un plan para aquellos que no usen o habiliten Javascript
  • Hacer parpadear o cambiar partes de la página de forma inesperada
  • No usar enlaces que pueda pasar a un amigo o añadir a favoritos
  • Realizando operaciones por lotes de forma asíncrona
  • Mover la posición vertical en la página y hacerme perder la situación donde me encontraba
  • Inventar nuevos “estándares” de interacción con la interfaz
  • Blockear el acceso a la información a nuestras amigas las arañas
  • Conjuntos de caracteres
  • Cambio del estado con enlaces (peticiones GET)
  • No transferir los cambios locales a otras partes de la página
  • Aviso de errores
  • Retorno de la inversión
  • Imitar el comportamiento de navegación del navegador de forma errónea

La traducción fue realizada por Manuel Cebrian y se titula Puntos a tener en cuenta cuando uses AJAX.

Como una F, así es como leen los usuarios una página web. A una increíble velocidad nuestras vistas recorren la página creando la estela de una letra "F" en mayúscula.

Las áreas de color rojo son las que los usuarios miraron más; seguida de las amarillas,
luego las azules y, finalmente, las grises no atrajeron ninguna mirada

Estas imágenes forman parte del último estudio llevado a cabo por useit (la web del gurú de la usabilidad Jakob Nielsen) y que se ha publicado hoy día. El estudio es sobre la base de 232 usuarios que observaron miles de páginas Web. El resultado fue constante, aún en diferentes diseños. El modelo de lectura dominante se parece a una F y tiene tres componentes:

  1. En primer lugar, los usuarios leen con un movimiento horizontal, por lo general a través de la parte superior del área de contenido. Este componente inicial forma la barra superior de la F.
  2. Después, los usuarios bajan la página un poco (mueven el scrollbar) y luego leen en un segundo movimiento horizontal que típicamente cubre un área más corta que el movimiento anterior. Este elemento adicional forma la barra inferior de la F.
  3. Finalmente, los usuarios exploran el lado izquierdo del contenido en un movimiento vertical. A veces esto es una exploración lenta y sistemática que aparece como una raya sólida sobre un "eyetracking heatmap". Otros usuarios de veces se mueven más rápido, creando un "spottier heatmap". Este último elemento forma el tallo de la F.

Asi pues, el informe nos da algunas luces para mejorar nuestros diseños... En que áreas colocar el contenido más importante, en cuales algún texto ó gráfico de relleno, etc. Obviamente, esto no significa que todos usuarios no visualicen o revisen las demás partes de la página, no debemos descuidarlas.

Enlace | F-Shaped Pattern For Reading Web Content

Por fin, después de casi tres meses que Gmail añadió el botón "delete" a sus cuentas de correo en ingles, los usuarios de este servicio en español tenemos la misma comodidad para "suprimir" nuestros mensajes.

Como lo muestra la imagen, el boton suprimir ya esta en la interfase y ha sido puesto a la izquierda del menu desplegable. Antes, para borrar un mensaje se necesitaba seleccionarlo, pulsar en el desplegable y luego suprimir. Ahora, con el nuevo botón, estos pasos se han reducido, haciéndo a Gmail más agradable.

SuscrĂ­bete

  • Suscribete a nuestro feed
  • Add to Google Reader or Homepage
  • Subscribe in NewsGator Online
  • Add to My AOL
  • Subscribe in Bloglines
  • Add to netvibes