Compartir - Enviar

Guía de Evaluación Heurística

User Testing Techniques

Evaluating CMS usability

Web Site Usability Checklist

Usability Makes a Comeback

Usability Checklist Detail

Usability Guidelines

Compartir - Enviar

Su título “No me hagas pensar” (”Don’t Make Me Think”) lo dice todo. Los usuarios de Internet están hipersaturados de información, tienen prisa y leen poco, por lo que si una página web le hace pensar demasiado, es muy probable que el usuario abandone la web rápidamente.

Escrito en un lenguaje sencillo, convence al lector de la importancia de tener en cuenta la usabilidad en la creación de una página web.

Incluye información muy interesante, como un estudio sobre como deben ser las pestañas, los errores habituales de la página principal o como hacer un estudio de usabilidad con poco (o ningún) presupuesto.

Lo compré en el año 2001 y no solo sigue siendo válido, sino que es altamente recomendable. Todavía lo hojeo de vez en cuando. En cualquier caso, leer sobre usabilidad es siempre una buena inversión.

Entrevista con Steve Krug, autor del libro (en inglés)

Compartir - Enviar

Si bien existen miles de soluciones potenciales para los problemas relacionados a usabilidad en un sitio, presentamos aquí a manera de “checklist”, 20 principios que apuntan a los errores de usabilidad más comunes y la manera de corregirlos. Si aplicas estos principios en tu sitio web, la usabilidad del mismo y la satisfacción de tus usuarios se verá grandemente mejorada.

1. El logotipo de la organización deberá estar enlazada con la página de inicio.

2. Actualizar regularmente el contenido que tus usuarios utilizan con más frecuencia.

3. Asegurate de que el contenido de las secciones esenciales del sitio no se encuentre a más de tres ‘clicks’ (niveles de enlace) de la página principal.

4. La navegación del sitio debe ser colocada en un área inmediatamente visible, usualmente a lo largo de la parte superior de la página o bien a lo largo del lado izquierdo de la ventana del “Browser”.

5. El logotipo de la organización debe ser localizado en la esquina izquierda superior de cada página y se recomienda emplear en lo posible las medidas estándar de 60×60 pixels.

6. La distribución de los diversos elementos de contenido en el interfaz deberán ser organizadas jerárquicamente con el fin de que los usuarios lo perciban y asimilen con un esfuerzo mínimo.

7. Todas las imágenes deberán contar con texto descriptivo mediante el empleo de el atributo ‘ALT’ para que los navegadores con la opción de descargar imágenes desactivada o de solo texto lo puedan leer, así como sistemas alternativos especializados para usuarios con discapacidad.

8. Cada una de las páginas del Sitio Web deben contar con títulos de página diferentes y descriptivos del contenido de la misma.

9. El nombre de cada página debe tener el nombre de la Marca de la empresa u organización, así como también algunas palabras claves. referentes al contenido expuesto en la página. El nombre deberá ser el propio, sin pronombres (“el”, “la”, “una”, etc) para que permita la facilidad de indexado tanto en motores de búsqueda como de listas de favoritos (“bookmarks”)…(El Metodus… NO! – Metodus…SÍ!)

10. Todo sitio público deberá ser creado pensado en una conexión a Internet promedio de 56 kbps o menos.

11. En una página tipo galería de fotos o similar, Evite el empleo de imágenes grandes que descarguen lentamente. Emplee imágenes pequeñas (“thumbnails”) que sugieran su ampliación a conveniencia de los usuarios.

12. Considere en el diseño del Sitio que el contenido sea adaptable a las diversas resoluciones –tamaños de pantalla– empleadas por los usuarios. En caso de usar listas en tablas, no utilice tamaños fijos en las mismas (para efectos de crecimientos de texto o interfaces “elásticas” que se adapten al ancho de la pantalla).

13. El sitio de debe ser accesible por browsers alternativos (Firefox, Internet Explorer, Mozilla, Opera, Safari, Netscape, etc…) y sistemas operativos (Linux, Windows, Macintosh, etc) sin trabas o exclusiones técnicas de ningún tipo.

14. Emplee fuentes (tipografías) en los textos del sitio web que sean comunes a todos los usuarios (Ej: Helvetica, Verdana, Arial, Times New Roman, Georgia) ya que las mismas son empleadas por la mayoría de los sistemas operativos, permitiendo la accesibilidad al contenido sin problemas de compatibilidad.

15. En el caso de sitios que cuentan con amplia cantidad de información, incluya un mecanismo de búsqueda en la página de inicio, analice su comportamiento y sugiera una opción avanzada y una sección de preguntas frecuentes (Frequently Asked Questions).

16. Evite el uso de términos para vínculos tales como “click aquí”, “más información”, “ver detalles”, los cuáles son genéricos. Procure que el texto del vínculo describa el destino del enlace.

17. El uso de ventanas “pop-ups” deben utilizarse con cuidado. Nunca emplee ventanas “pop-ups” en enlaces de contenido interno. En caso de que su empleo sea necesario y según las circunstancias que se presenten, se debe indicar al usuario que la ventana será abierta en una ventana separada.

18. En lo posible, no utilizar “Framesets” (marcos), pues son virtualmente imposibles de utilizar por los “Spiders” (robots de buscadores en Internet) en su proceso de indexado además de que son difíciles de desplegar e interpretar por algunos “browsers”.

19. Desarrolle el sitio mediante la creación de plantillas que empleen formatos estándar para presentación (hojas de estilo – CSS -) y estructura de contenido (XHTML) los cuales permitirán que el sitio sea accedido correctamente, y agregar credibilidad en la percepción del usuario.

20. Cree paralelamente al desarrollo del sitio una hoja de estilos (CSS) que permita imprimir el contenido correctamente, eliminando elementos innecesarios en una impresión (menús, etc) y en hojas de tamaño estándar (81/2 X 11).

Vía: Metodus

Compartir - Enviar

Visto en : 86400

Compartir - Enviar

Después de pasar dos días en un congreso sobre buscadores, tratando junto a otras 400 personas de aprender cosas sobre posicionamiento, me parece al menos curioso el comentario que verás al final del articulo, en el que el autor de la web afectada reflexiona sobre las consecuencias negativas de ser enlazado desde Google.

Comentario de usabilidad: ¿A quién se le ocurrió poner semejante símbolo ~ en una url? La verdad es que hace tiempo, muchas paginas personales gratuitas (por ejemplo en Arrakis) incluían ese símbolo.

El dichoso símbolo: Si eres de los que todavía se pregunta como escribir ~ aquí tienes la respuesta: Pulsa ALT y a la vez 126 (pero del teclado numérico de la derecha, el superior no vale)

Compartir - Enviar

Introduciendo la url puedes comprobar:

- Sus datos en Alexa.
- Los links entrantes desde buscadores y agregadores de feeds.
- Ver las copias guardadas en el cache por Internet Archive.
- El whois del dominio.
- Páginas similares y caché en diferentes buscadores.
- Ver cuantos y quienes lo tienen en su Del.icio.us.
- Traducir la web a otro idioma.
- Validar el código y comprobar su nivel de accesibilidad.
- Descubrir palabras repetidas.
- Comprobar el número de páginas indexadas.
- Etc…

No soy muy partidario de los frames, pero en este caso aportan una utilidad muy clara. Nos permiten hacer todas estas consultas sin tener que entrar y salir cada vez de la web.

Espero que te sea útil: URL info

Compartir - Enviar

Para asegurarme de que no era una percepción mía he capturado unas pantallas de www.bbc.com con Firefox y con Explorer:

Microsoft Explorer 7.0 vs. Mozilla Firefox 2.0

Parece que la captura con Explorer esta un poco borrosa ¿No?

Microsoft Explorer 7.0

Mozilla Firefox 2.0

No tengo nada en contra de Microsoft, de hecho le reconozco muchos meritos en el desarrollo de la informática a nivel mundial, pero esta es una cuestión objetiva:

Y yo me pregunto ¿Por qué ha escogido Microsoft esta tipografía tan ‘pastelona’ para utilizarla por defecto con su navegador? Seguro que ‘me estoy perdiendo algo’ pero estaría encantado en conocer la respuesta.

Si sabes porque ¡Comparte tu conocimiento con nosotros, por favor!

Actualización (16-2-07): Descubri la forma de evitar que la tipografia de Microsoft Explorere 7 se vea borrosa: Menu Herramientas + Opciones de internet + Opciones avanzadas + Multimedia + desactivar “usar siempre clear type”. Luego reinicia el navegador y ya se vera normal.

Actualización (20-2-07): En este enlace puedes ver la solución al ‘problema’ desde la propia pagina oficial de Microsoft.

Compartir - Enviar

Todos queremos que nuestra web sea fácil de usar, tanto para un experto como para alguien mas novato, pero muchas veces hacer que las cosas sean simples requiere mas tiempo y esfuerzo del que imaginamos.

La usabilidad de una web depende de muchos factores, pero sobretodo depende de que el responsable de la web entienda bien el enorme impacto que puede tener mejorar la usabilidad de su sitio.

Leo en un blog de usabilidad la traducción de una lista de cuestiones a comprobar respecto a la usabilidad de un sitio web.

Repasa la lista y seguro que encuentras varias mejoras que poder hacer en tu web.

Técnicos

1.- Validar el código (X)HTML usando el validador de etiquetas del W3C.
2.- Validar el código CSS usando el validador de CSS del W3C.
3.- Comprobar el sitio web al menos en los navegadores IE, Firefox, Opera y Safari.

Imágenes

4.- Añadir los atributos ALT y TITLE a todas las imágenes importantes.
5.- Añadir el atributo LONGDESC a las imágenes que necesiten una descripción.
6.- Escribir un texto alternativo eficiente para las imágenes.
7.- Realizar tus páginas con un tamaño menor a 50KB.
8.- Elegir el tipo de fichero apropiado para tus imágenes.
9.- Añadir una descripción a imágenes que soportan el contenido.
10.- Usar texto plano en vez de imágenes para el contenido importante.

Contenido

11.- Usar tipo de letra sans-serif con un tamaño de texto decente para el texto del body.
12.- Ajustar el contenido principal y secundario, si es necesario para aumentar la legibilidad.
13.- Alinear el texto del body a la izquierda (dependiendo de las lenguas).
14.- Usar EM o porcentaje en lugar d ePX.
15.- Asegurarte que no hay grandes sentencias en mayúscula.
16.- Usar menos de 78 caracteres, incluidos espacios, por linea.
17.- Usar párrafos sencillos y precisos con títulos explicativos.
18.- Usar listas cuando es necesario.
19.- Escribir primero la conclusión y luego la explicación.
20.- Crear suficiente contraste entre el texto y el fondo.
21.- Hacer tu sitio web accesible para navegadores sólo texto.
22.- Asegurarte que no hay páginas “en construcción”.
23.- Incluir una función de imprimir en las páginas con gran cantidad de texto.
24.- Incluir una hoja de estilos para imprimir.
25.- Reemplazar todos los caracteres especiales por su código ISO Latin-1.
26.- Revisar la ortografía y gramática del contenido.

Navegación

27.- Asegurarse que todos los links funcionan mediante el uso del comprobador de links del W3C.
28.- Incluir un link a todas tus páginas principales en la página Home.
29.- Incluir la navegación principal en cada página.
30.- Usar menos de 8 items en la navegación principal.
31.- Distinguir las páginas activas y no activas en el menú.
32.- Usar texto explicativo para los links en lugar de “clic aquí”.
33.- Usar texto explicativo para los links en lugar de términos de negocio.
34.- Hacer distinción entre links visitados y no visitados.
35.- Hacer distinción entre links y texto plano.
36.- Añadir el atributo TITLE a todos los links.
37.- Usar breadcrumbs (“migas de pan”) si tienes una gran cantidad de páginas.
38.- Incluir opciones de búsqueda si tienes una gran cantidad de páginas.
39.- Hacer que el link del logotipo nos lleve a la página de inicio.
40.- Hacer un link de saltar al contenido en las páginas.
41.- Hacer un link del salto al menú en las páginas.
42.- Comprobar si es posible navegar por el sitio web usando las teclas SHIFT-TAB y RETURN.
43.- Asegurarte que no usas ningún links de javascript.

Estructura

44.- Hacer una estructura de página consistente.
45.- Colocar el logotipo arriba a la izquierda.
46.- Colocar una línea explicativa junto al logotipo.
47.- Colocar la caja de búsqueda arriba a la derecha.
48.- Colocar el contenido importante arriba en la página.
49.- Hacer el diseño en un sistema de rejilla.
50.- Hacer un diseño fluido usando porcentajes.
51.- Hacer el sitio web visible con baja resolución.
52.- Usar títulos particulares para todas las páginas.

Formularios

53.- Asegurarte que los usuarios no devuelven un formulario alterado después d eun error.
54.- Hacer una página de error amigable e informativa.
55.- Hacer una página de “gracias” amigable y con confirmación por email.
56.- Añadir un único botón de “submit” y ningún botón de “reset”.
57.- Decirle al usuario lo que le espera después de hacer clic en el botón de submit.
58.- Dividir formularios largos en múltiples páginas.
59.- Dar un espacio al usuario para escribir.
60.- Poner un asterisco en los campos obligatorios.
61.- No cambiar el look estándar de lo campos de entrada del texto.
62.- Preguntar información usando un orden lógico.
63.- Usar campos de entrada dobles para passwords.
64.- Permitir al ordenador, no al usuario, formatear información.
65.- Asegurar que el usuario puede rellenar el formulario entero usando la tecla TAB.
66.- Explicar al usuario por qué se pregunta cierta información.
67.- Explicar al usuario que vamos a hacer con la información.
68.- Usar validación en tiempo real usando AJAX.
69.- Usar la etiqueta LABEL.
70.- Colocar la etiqueta LABEL encima de los campos de entrada, en vez de junto a ellos.
71.- Elegir tipos de entrada correctos para diferentes datos.
72.- Colocar automáticamente el cursor en el campo de entrada superior.
73.- Distinguir los campos activos de los no activos.
74.- Usar cuando sea apropiado las entidades FIELDSET y LEGEND.
75.- Comprobar si el formulario también funciona sin javascript.

Multimedia

76.- Asegurarse que la información/navegación principal no está hecha en Flash.
77.- Asegurarse que la música y los videoclips no empiezan automáticamente.
78.- Asegurarse que la música y los videoclips pueden ser apagados.
79.- Informar al usuario sobre el tamaño y longitud de la música y los videoclips.

Características extras

80.- Hacer una página formateada para los errores 404.
81.- Hacer un mapa del sitio.
82.- Usar RSS (si se añade contenido regularmente).
83.- Hacer una versión de alto contraste del sitio web.
84.- Hacer unas URLs con buena apariencia.
85.- Asegurar que no hay frames en el sitio web.
86.- Asegurar que no hay pop-ups en el sitio web.
87.- Hacer un formulario de contacto en vez de sólo un link al email.

Vía: Not usable
Traducido por :Accesibilidad, Usabilidad y Estandares Web

Compartir - Enviar

Vía: Daily Blog Tips

Compartir - Enviar