Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Usabilidad

Datos de búsqueda

Etiqueta ‘Usabilidad’

Zurdos y portátiles

Fecha de publicación: 2010/09/07

Al adquirir un portátil se tienen en cuenta muchos factores: el procesador que lleva, el precio, el color, el peso, etc.

Pero hay un par de detalles al que, sobre todo los zurdos, deben prestar especial atención:

  • Ubicación de la rejilla de ventilación que expulsará el aire caliente.
  • Posicionamiento de puertos USB.

Leer el resto del artículo

Datos del artículo:

Simulación de elemento SELECT con jQuery

Fecha de publicación: 2010/07/11

He preparado un componente que simula un elemento SELECT, en el que se puede seleccionar una sola opción, que evita algunas de las limitaciones de los elementos SELECT de verdad, pudiendo dar formato a las opciones que contiene, añadir imágenes, etc.

Leer el resto del artículo

Datos del artículo:

Accesibilidad: Advertencia de caracteres en otros alfabetos

Fecha de publicación: 2010/05/06

Cuando se insertan textos en HTML que están en idioma distinto del principal de la página lo indicamos mediante el atributo lang. Pero, ¿que ocurre cuando ese texto en otro idioma es además en un alfabeto distinto? ¿Y cuando el navegador no puede mostrar caracteres de ese alfabeto?

Leer el resto del artículo

Datos del artículo:

Enmascaramiento de contraseñas en los formularios

Fecha de publicación: 2009/06/25

Actualizado 2009-06-30.

Según Jakob Nielsen Ocultar los caracteres de un campo de contraseña (mediante <input type="password" id="ejemplo" name="ejemplo" />) puede ocasionar algunos problemas. Considero que se pasa un poco, de modo que expongo los que creo que son más importantes:

  • El usuario no ve lo que está escribiendo, lo que facilita que se equivoque.
  • Utilización de contraseñas más sencillas a la vez que inseguras o uso del copiar-pegar para introducir la contraseña.
  • En dispositivos móviles, en los que la escritura es más incómoda e imprecisa el usuario puede desesperarse, pensando si habrá tecleado bien.

He de aclarar que en bastantes dispositivos móviles en los campos de contraseña el caracter introducido está visible durante un breve espacio de tiempo, pero puede que no sea suficiente.

Nielsen también menciona que ocultar los caracteres de contraseña puede hacer que los usuarios se desanimen a entrar en un sitio web. Esto me parece un poco exagerado.

Puede que sea interesante dejar visibles los caracteres de los campos de contraseña, pero, si nos decantamos por esa opción habrá usuarios que no se sientan seguros, ya que la contraseña será visible por otras personas (imaginemos punto de acceso a Internet en un lugar público). Aquí Nielsen sugiere el uso de un checkbox para activar o desactivar la ocultación de los caracteres.

Ejemplo en Winzip

Capturas de la pantalla de encriptación de WinZip 12, en las que se puede apreciar la casilla que alterna la contraseña visible u oculta:

Ventana de encriptación de WinZip 12 con contraseña oculta

Ventana de encriptación de WinZip 12 con contraseña visible

Enlaces relacionados

Datos del artículo:

Secciones "Acerca de": como distribuir bien el contenido

Fecha de publicación: 2008/09/30

Jakob Nielsen nos da unas cuantas pistas en su Alertbox de 29 de septiembre de 2008 para distribuir los contenidos del Acerca de en un sitio web de forma útil para el usuario:

  1. Tagline on the homepage: A few words or a brief sentence summarizing what the organization does.
  2. Summary: 1-2 paragraphs at the top of the main About Us page that offer a bit more detail about the organization’s goal and main accomplishments.
  3. Fact sheet: A section following the summary that elaborates on its key points and other essential facts about the organization.
  4. Detailed information: Subsidiary pages with more depth for people who want to learn more about the organization.

No hay que crear una sola página específica para el Acerca de, sino que hay que distribuir el contenido en determinadas partes del sitio:

  • Una breve descripcion (no más de una línea) del cometido del sitio organización en la página de inicio.
  • Ya en la página del Acerca de uno o dos párrafos que detallen un poco más lo del punto anterior: algo así como un resumen.
  • Una tabla con los puntos que describan la actividad del sitio u organización justo después del resumen.
  • Si fuese necesario crear páginas de detalle jerárquicamente por debajo de la del Acerca de.

Datos del artículo:

Persuabilidad

Fecha de publicación: 2008/05/07

Actualizado: 2008-05-08 14:00.

La persuabilidad es algo así como un complemento a la usabilidad de un sitio web. Se trata de crear un sitio que además de ser usable atraiga usuarios: la usabilidad no es el único factor que atraerá la atención de los usuarios.

La persuabilidad consiste en insertar contenidos y servicios útiles y acordes con las necesidades de los usuarios, que tengan credibilidad, que conviertan al usuario en cliente.

Saber más

Datos del artículo:

Duplicación de elementos de la interfaz en sitios web

Fecha de publicación: 2008/02/10

Enlace "Volver"

Una práctica muy habitual al diseñar un sitio web es la de introducir botones o enlaces con los textos "Atrás", "Volver" o cualquier otro cuyo significado sea el de volver a la página inmediatamente anterior.

Este tipo de enlace probablemente sea un poco redundante, ya que todos los navegadores web disponen en su interfaz de un botón para ir atrás, incluso los de móviles.

Enlace o botón "Imprimir"

Más de lo mismo. Todos los navegadores disponen en su interfaz de un botón para imprimir.

Adquiere sentido si lo que hace es abrir una versión de la página optimizada para la impresión.

Enlace "Enviar esta página por email"

Los navegadores también coinciden en incorporar esta opción, aunque en este caso se ahorra al usuario una más que probable apertura de la aplicación de correo que utilice.

Enlaces de aumentar/disminuir tamaño de página

Los habituales botones para aumentar o disminuir el tamaño en pantalla de la página. Cada navegador lleva sus propias herramientas para este propósito, además accesibles desde sencillos atajos de teclado.

Los usuarios que necesitan ésta funcionalidad muy probablemente estarán habituados a utilizar dichos atajos de teclado, prescindiendo de los enlaces de zoom.

Conclusión

Este tipo de enlaces y botones tiene como objetivo, consciente o inconsiente, sustituir a la interfaz del navegador para determinadas acciones, lo cual puede resultar redundante y ayuda a que los usuarios no se molesten en aprender a utilizar minimamente el navegador web que hayan (o les hayan) elegido.

Datos del artículo:

Usabilidad: El uso de la voz pasiva

Fecha de publicación: 2007/10/23

Según Jakob Nielsen el uso de la voz pasiva en los contenidos de una web es poco adecuado:

Active voice is best for most Web content [...].

Y propone algunos ejemplos:

  • Worst: The passive voice should be avoided.
  • Bad: The passive voice should be avoided by writers.
  • Better: Writers should avoid using passive voice.
  • Best: Writers should use active voice.

Los mismos ejemplos pero en idioma español:

  1. Peor: La voz pasiva debe ser evitada.
  2. Malo: La voz pasiva debe ser evitada por los autores.
  3. Bueno: Los escritores deben evitar el uso de la voz pasiva.
  4. Mejor: Los escritores deben utilizar la voz activa.

Estos ejemplos muestran en primer lugar que es mejor utilizar voz activa que voz pasiva. De esa forma el usuario comprenderá con mayor facilidad y rapidez el texto.

En segundo lugar queda reflejado que es mejor el uso de frases afirmativas, como el ejemplo número 4, que la utilización de frases negativas, como en el ejemplo número 3.

Y en tercer lugar, cuando se usa la voz pasiva es mejor que aparezca el complemento agente (quien realiza la acción), como en el ejemplo número 2, ya que ayuda un poco más a comprender la frase.

Voz pasiva en los encabezados

Active voice is best for most Web content, but using passive voice can let you front-load important keywords in headings, blurbs, and lead sentences. This enhances scannability and thus SEO effectiveness.

La voz activa es mejor para los contenidos, pero en encabezados y otros textos destacados puede resultar más adecuado el uso de voz pasiva, ya que las primeras palabras de esas frases, que serán en las que más se fijen el usuario y los motores de búsqueda, tendrán mayor relevancia y darán más información.

Nielsen propone el siguiente ejemplo:

Yahoo Finance follows all 13 design guidelines for tab controls, but usability suffers due to AJAX overkill and difficult customization.

A primera vista parece que se trata de información sobre la aplicación Yahoo Finance, no sobre sus contenidos, como podría parecer a primera vista.

El mismo contenido que antes pero en voz pasiva:

13 design guidelines for tab controls are all followed by Yahoo Finance, but usability suffers due to AJAX overkill and difficult customization.

En este segundo ejemplo se usa la voz pasiva y se consigue el efecto deseado: resaltar que se trata de un artículo sobre la aplicación.

Conclusiones

  1. La voz activa es la forma adecuada en el texto de contenido.
  2. La voz pasiva es adecuada en encabezados, enlaces a otros contenidos y otras frases destacadas.

Referencias y enlaces relacionados

Datos del artículo:

Usabilidad en los sitios web de las universidades de Galicia

Fecha de publicación: 2007/10/13

Hace casi un año tuve que presentar un trabajo para una asignatura de la licenciatura en Documentación. Dicho trabajo debía ser planteado como si de una tesis doctoral se tratase, pero con la limitación temporal que imponía el que la asignatura fuese de un solo cuatrimestre (entre unas cosas y otras había un par de meses, y si además se añade que me gusta dejar estas cosas muy para el final…).

Se me ocurrió como tema la usabilidad en los sitios web de universidades públicas gallegas (la región la escogí totalmente al azar). El análisis de esos sitios web, por la limitación de tiempo, no fue muy fiable, pero si conseguí, creo, una interesante lista de puntos de verificación de usabilidad.

Así que pongo ese documento aquí, por si a alguien le resultase interesante (bajo la misma licencia Creative Commons que este sitio).

Descargar Evaluación de usabilidad en sitios web de universidades de Galicia (2007) en formato PDF (1,2 MB). También disponible en formato Open Document (635 KB).

Datos del artículo:

Accesibilidad en la versión electrónica de la revista Tráfico y Seguridad Vial

Fecha de publicación: 2007/03/04

Tráfico y Seguridad Vial es una excelente revista (aunque ultimamente la calidad ha ido decreciendo y ha perdido objetividad) editada por la Dirección General de Tráfico.

La versión electrónica de la revista se distribuye en diferentes archivos PDF, uno por cada artículo o sección (cosa que la gente con conexión de 56K agradece mucho). Para acceder a esos archivos la revista tiene un sitio web, que nunca ha sido ejemplar en cuanto a cumplimiento de estándares, accesibilidad, usabilidad, etc.

Pero la versión actual es de vergüenza. A pesar de que la ley obliga a que los sitios web financiados con dinero público sean accesibles a alguna lumbrera se le ha ocurrido hacer la página en flash:

DISPOSICIONES ADICIONALES

Quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos.

Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005.

Asimismo, podrán exigir que las páginas de Internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.

Algunas capturas de pantalla:

Página inicial
Vista de la página inicial (JPG 260 KB).

Captura página inicial sin estilo
Página inicial con las hojas de estilo deshabilitadas.

Página inicial vista en Dillo
Página inicial en Dillo.

Código fuente de la página inicial
Parte del código fuente de la página inicial.

Creo que la captura de la página inicial en Dillo deja dicho todo lo que hay que decir. Dillo es un navegador que solo visualiza páginas accesibles, y en este caso no aparece practicamente nada.

El área de navegación en Flash, por supuesto, con todas sus “ventajas”.

De nuevo un gran trabajo de la Administración Pública.

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: