Contenido

Usamos.es, informes de usabilidad y accesibilidad gratis

5 feb

+ 7

Fran de Mas Que Accesibilidad, me avisa de que por fín, despues de un año dandole vueltas al proyecto, Usamos.es ha visto la luz.

usamoses

Usamos.es es una consultoría de accesibilidad y usabilidad que tiene como meta mejorar las páginas web de instituciones y empresas con el fín de mejorar en acceso a estas y ofrecer un camino más sencillo y eficaz para completar acciones en dichas páginas.

Actualmente los informes automáticos son gratuitos pero este no va a ser el único aliciente de esta aplicación, sinó que periódicamente nos van a tener informados de técnicas, documentos y el estado de los temas que más directamente tocan al usuario.

Visita Usamos.es

Plantilla para hacer análisis heurísticos de usabilidad

1 dic

+ 0

Daniel Torres Burriel nos pone a nuestro alcanze una plantilla para realizar nuestro propios análisis heurísticos de usabilidad. Un sistema para los que no tenemos los conocimientos necesarios para realizar las evaluaciones de usabilidad de nuestros sitios web. Esto no quiere decir que podamos ser técnicos en usabilidad web simplemente aplicando esta plantilla, pero seguro que nuestras aplicaciones tendrán un aspecto diferente despues de aplicarla.

Consejos para mejorar la usabilidad de tus formularios

18 jul

+ 4

Los formularios han sido, y son, las llaves para conseguir que la web 2.0 sea una realidad. Por ese motivo hemos de cuidar los detalles para conseguir que su uso sea el más cómodo y rápido posible, teniendo en cuenta los siguientes consejos será más que suficiente para que nuestros usuarios los usen:

  • Añade sugerencias
  • Añade AutoSuggest  (Crealo tu mismo o usa uno ya hecho)
  • Crea validaciones simples en tus inputs
  • Muestra elementos ocultos mediante un radiobutton

Via (Código explicativo en la fuente)

Mejorando la usabilidad del panel de escritura de WordPress 2.5

14 abr

+ 6

Alex de BuyaCorp nos comenta hoy que Judy Becker ha realizado unos cambios en la estructura del panel de escritura de WordPress con el fin de conseguir un aspecto más usable en el cual tengamos que hacer menos scroll a la hora de escribir nuestras entradas.

Nuevo Panel compactadoNueva Panel Extendido

Viendo resultado podemos ver, que la mejora recuerda mucho al aspecto que anteriormente nos ofrecía WordPress. Algo de agradecer los que hemos vivido con versiones anteriores.

¿Como lo cambio?

Alex publica una modificación, tan simple como reemplazar los ficheros originales de WordPress por estos otros.

wp-admin\
            - css\
               global.css
            - wp-admin.css
            - edit-pages.php
            - edit-page-form.php 
            - edit-form-advanced.php

[Descargar]

Nota: Imagenes via Carrero.es

60 Directrices para realizar formularios usables

28 feb

+ 0

Olga, como es de costumbre, nos deleíta con un artículo que recoge las 60 directrices para realizar formularios usables. Algo que todo desarrollador web debería tener presente.

10 pesadillas de la usabilidad que deberías evitar

2 feb

+ 5

Interesante artículo de SmashingMagazine que desde Estandares y Accesibilidad han traducido en el que nos muestran 10 errores aberrantes que se comenten hoy en día que atentan contra la usabilidad de las páginas web. Por favor, no los cometas!!!

Analizando la usabilidad del nuevo panel de WordPress

6 ene

+ 6

La nueva versión de WordPress está dando mucho de que hablar, y el nuevo rediseño del panel de administración tambien. Despues de la mala acogida por parte de la comunidad de usuarios y el retraso ocasionado por todo lo que este rediseño conlleva, testeos, refinamientos,… la comunidad continua destripando el nuevo panel.Ahora los chicos/as de NosCope, analizan la usabilidad que desde la demo que desencadenó todo el aluvión de críticas del nuevo panel.

23 conclusiones extraídas de sesiones de eye-tracking

2 ene

+ 1

Daniel TorresBurriel, nos traduce un artículo en el que analizan los resultados obtenidos tras sesiones de eye-tracking. Una recopilación de 23 puntos a tener en cuenta para diseñar cualquier sitio web.

Detectar si Bloq Mayús está activado mediante Javascript

13 dic

+ 0

Cada vez más las aplicaciones web se están pareciendo a las llamadas “de escritorio”, pero no solo en apariencia sinó tambien en funcionalidad y en usabilidad. Una muestra de ello es la posibilidad de informar al usuario de que el botón “Bloq Mayús” está activo a la hora de introducir una contraseña, con lo que evitas que el usuario se rompa los cuernos pensando en por que la contraseña que ha usado toda la vida no funciona en su página web.

En 24ways del 2007 han explicado como capturar el estado de esta tecla usando los atributos del evento lanzado al accionar el input indicado.

keypress: function(e) {
    var ev = e ? e : window.event;
    if (!ev) {
      return;
    }
    var targ = ev.target ? ev.target : ev.srcElement;
    // Cogemos la tecla pulsada
    var which = -1;
    if (ev.which) {
      which = ev.which;
    } else if (ev.keyCode) {
      which = ev.keyCode;
    }
    // Cogemos el estado de la tecla Bloq Mayus
    var shift_status = false;
    if (ev.shiftKey) {
      shift_status = ev.shiftKey;
    } else if (ev.modifiers) {
      shift_status = !!(ev.modifiers & 4);
    }
  },

Conociendo el keyCode obtenido podemos además saber si están usando las mayúsculas pero sin tener marcado el Bloq Mayús. Para ello tendremos que tratar el código recibido y conocer si estamos entre el rango otorgado a las letras mayúsculas.

if (((which >= 65 && which <=  90) && !shift_status) ||
        ((which >= 97 && which <= 122) && shift_status)) {
      // Mayuúsculas, sin Bloq Mayus
	...
    } else {
      // Mayusculas forzadas
	...
    }

En el ejemplo muestran una imagen indicando que tienes las mayúsculas activadas, pero es más para hacer bonito que práctico, así que he readaptado el script, para usar un nodo de texto anexado al input activo.

//Texto que mostraremos de alerta
var txtWarning = 'Ojo! tienes las mayusculas activas';
	
var capslock = {
  init: function() {
    if (!document.getElementsByTagName) {
      return;
    }
    var inps = document.getElementsByTagName("input");
    for (var i=0, l=inps.length; i<l; i++) {
      if (inps[i].type == "password") {
        capslock.addEvent(inps[i], "keypress", capslock.keypress);
      }
    }
  },
  addEvent: function(obj,evt,fn) {
    if (document.addEventListener) {
      capslock.addEvent = function (obj,evt,fn) {
        obj.addEventListener(evt,fn,false);
      };
      capslock.addEvent(obj,evt,fn);
    } else if (document.attachEvent) {
      capslock.addEvent = function (obj,evt,fn) {
        obj.attachEvent('on'+evt,fn);
      };
      capslock.addEvent(obj,evt,fn);
    } else { }
  },
  keypress: function(e) {
    var ev = e ? e : window.event;
    if (!ev) {
      return;
    }
    var targ = ev.target ? ev.target : ev.srcElement;
    var which = -1;
    if (ev.which) {
      which = ev.which;
    } else if (ev.keyCode) {
      which = ev.keyCode;
    }
    var shift_status = false;
    if (ev.shiftKey) {
      shift_status = ev.shiftKey;
    } else if (ev.modifiers) {
      shift_status = !!(ev.modifiers & 4);
    }
    if (((which >= 65 && which <=  90) && !shift_status) ||
        ((which >= 97 && which <= 122) && shift_status)) {
      capslock.show_warning(targ, this.parentNode);
    } else {
      capslock.hide_warning(targ, this.parentNode);
    }
  },

  show_warning: function(targ, elem) {
    if (!targ.warning) {
      targ.warning = document.createTextNode(txtWarning);
      elem.appendChild(targ.warning);
    }
  },
  hide_warning: function(targ, elem) {
    if (targ.warning) {
      elem.removeChild(targ.warning);
      targ.warning = null;
    }
  }
};

Experiencias de usuario futuras

27 nov

+ 2

Los chicos de SmashingMagazine, se han levantado “TorresBurrielizados” y han pensado en las personas. Nos deleítan con un post recopilación de los nuevos interfaces de usuario que podemos ver en un futuro más o menos lejano.