sep 30, 2009 - Categoría: Usabilidad Web    Escrito por Jorge López   Número de comentarios: 0 Comentarios

Test heurístico – parte 2: Como hacer un informe

En el primer artículo de esta serie, Test heurístico – parte 1: ¿Qué es y para que sirve?, se explicó de manera general que era un test heurístico, para que servía y las ventajas que tenía respecto a otros test de usabilidad. Debemos recordar que en la heurística, todo gira alrededor de los factores de evaluación, que son una lista de principios de usabilidad comúnmente aceptados que aplicaremos a nuestros análisis.

El resultado de un test heurístico, es un informe emitido por el evaluador en el que describe el problema analizado, las reglas específicas que son afectadas por su comportamiento y cómo podría mejorar el cumplimiento de ellas con un cambio en la interfaz. Hay que añadir que si bien esto último no es posible, sí será importante que los problemas encontrados sean anotados con el fin de intentar hacer las modificaciones posibles para aportar a su solución.

Así pues, en este artículo veremos que aspectos debe incluir un buen informe de evaluación heurística. Dicho informe está dividido en varias secciones:

Descripción del método a seguir:

En esta parte de la evaluación se debe hacer una breve descripción de las características del proceso realizado. Al fin y al cabo, el cliente tiene derecho a saber porque vale tanto el informe que le estamos confeccionando. Entre los elementos que hay que citar incluiremos los siguientes:

  • Fecha y hora de la evaluación.
  • Tipo de conexión a Internet, para descartar problemas de velocidad y optimización.
  • Datos sobre la forma y la puntuación de la evaluación.
  • Justificación de los diferentes factores utilizados en nuestra lista de comprobación

Criterios de evaluación

Es necesario que los analistas que la lleven a cabo el test, tengan un sistema de evaluación que permita interpretar y homologar los comentarios vertidos a cada factor evaluador.

Nuestra escala de evaluación irá a de 1 a 5:

  1. No funciona: Existen graves defectos en la estructura y diseño de la página. No se muestran los contenidos correctamente. El evaluador debe recomendar rehacer todo el sitio.
  2. Funciona pero no sirve: A pesar de que los contenidos del sitio se muestran de manera aceptable, la experiencia general y navegación no son correctas. Se debe recomendar cambiar la mayor parte del sitio.
  3. Funciona pero debe mejorar: El contenido y su distribución es de relativa calidad, pero es susceptible a mejoras. Se deben aportar mejoras al sitio.
  4. Cumple: El contenido evaluado es satisfactorio, a pesar de todo hay detalles que pueden mejorar. Se deben aportar mejoras al sitio.
  5. Es lo que el usuario busca: El contenido cumple o excede la expectativa del usuario.

Dichas notas deben ser puestas, tras analizar los factores de evaluación, que vamos creando alrededor de las diferentes áreas de un sitio web. Los factores se articulan alrededor de estas áreas:

  • Generales
  • Identidad e información
  • Lenguaje y redacción
  • Rotulado
  • Estructura y navegación
  • Lay – out de la página
  • Búsqueda
  • Elementos multimedia
  • Ayuda
  • Accesibilidad
  • Control y retroalimentación

Desarrollo del Informe

Puntuados los factores, el evaluador debe hacer un comentario que explique al usuario el estado real de su sitio, de está manera se podrán sacar conclusiones. Habrá que recopilar los aspectos positivos y negativos de cada factor evaluado. Con estos apuntes se hará más fácil la tarea de mejorar el sitio web.

Conclusión Final

En esta parte se entrega la recomendación final respecto de los problemas encontrados. En función de los resultados obtenidos con este informe, el cliente podrá decidir si es conveniente o no, hacer un análisis más detallado o cualquier otro tipo de inspección de usabilidad.

Número de expertos

Respecto del número de expertos que debe llevar a cabo dicho informe para que éste tenga validez, todo dependerá del costo-beneficio. Más evaluadores deberían ser usados en casos en que la usabilidad de una web sea crítica para la rentabilidad de la misma.

Con estos pequeños apuntes, nos podemos hacer una idea de cómo se hace un informe heurístico. En los siguientes artículos, veremos los principios heurísticos básicos que propuso Jakob Nielsen y confeccionaremos una detallada lista de factores para que podamos aplicarlos a nuestras propias páginas.

sep 26, 2009 - Categoría: CSS, HTML    Escrito por Álvaro Brito   Número de comentarios: 0 Comentarios

70 Tutoriales CSS3 y HTML5 (CSS3 & HTML5 Tutorials)

CSS 3 y HTML 5 son capaces de revolucionar la forma en la que se diseñan los sitios Web. Ambos incluyen nuevas características y tantas funciones que es imposible no empezar a ver como funcionan. La inclusión de soporte nativo para cosas como las esquinas redondeadas y diseño de columnas múltiples son sólo la punta del iceberg.

A continuación se presentan los recursos de 70 tutoriales y artículos para empezar con CSS3 y HTML5. Un listado que nos trae CSS Gallery Muchas de las técnicas analizadas son soportados en cierta medida en algunos algunos navegadores modernos (Safari y Firefox con el apoyo más amplio), para que puedas empezar de inmediato.

Ver 70 Tutoriales CSS3 y HTML5

Listado resumido del contenido del artículo de CSS 3 y HTML 5

  • Tutoriales CSS3 y Recursos
  • CSS3 y HTML 5 Combinación de Recursos
  • HTML 5 Recursos
  • Recursos adicionales
sep 25, 2009 - Categoría: Noticias, Recursos    Escrito por Álvaro Brito   Número de comentarios: 0 Comentarios

Convierte Internet Explorer en Google Chrome

Desde el blog de anieto2k nos llega una interesantes noticia. Google ha adoptado una estrategia para “acabar con Internet Explorer”, y lo ha echo con Chrome Frame.

Como explica en el vídeo, se trata de un plugin que nos permite convertir nuestro Internet Explorer en Google Chrome (el motor de renderizado). Mediante un tag html añadido en las páginas web activaremos o no el motor de Chrome para renderizar la página que estemos visitando.Con esto conseguiremos visualizar nuestra página exactamente igual que si fuera Google Chrome el que abre dicha página. Mostramos a continuación como implementar este curioso plugin:

HTML

Añadimos simplemente esta línea de código (meta) en el head de nuestro HTML.


Si Internet Explorer tiene instalado el plugin, hará que el motor de renderizado de HTML empleado por Google Chrome se encargue de procesar la página.
Podemos detectar si el plugin está instalado de la siguiente forma:



Este código nos permite comprobar si el plugin está instalado y ofrecer al usuario la posibilidad de instalarlo.

Este tipo de cosas (Chrome Frame) hace que Google Chrome sea cada vez más usado entre los usuarios

Fuente: anieto2k

Formularios Accesibles según WCAG 2.0

Olga Carreras, nos explica como crear y auditar formularios partiendo de las pautas WCAG 2.0 en dónde nos proporciona una serie de documentos que facilitan la a evaluación de la accesibilidad de los formularios de acuerdo con los criterios definidos en las WCAG 2.0:

  • Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles
  • Guía rápida de normas de accesibilidad WCAG 2.0 para formularios
  • Checklist para validar formularios de acuerdo con las WCAG 2.0
  • Ejemplo de formulario usable y accesible
  • Documentación de interés

En las nuevas pautas nos daremos cuenta de que, exiten muchas técnicas (Techniques for WCAG 2.0) referidas a los formularios.

Ver artículo: Formularios Accesibles según las WCAG 2.0

sep 21, 2009 - Categoría: Posicionamiento Web    Escrito por psuarez   Número de comentarios: 0 Comentarios

Las páginas que validan no posicionan mejor

Una cosa que practicamente ya se sabía. Según Google las páginas que validan XHTML/HTML no tienen ninguna ventaja sobre las que no. Ya que el 99% de las páginas que hay en la red no validan.

Pero claro, por optimización se supone que será mejor que valide, ya que normalmente el código que valida suele tener mejor marcado semántico y por lo tanto mejor indexación. Os dejo con el vídeo en donde Matt Cutts explica la respuesta a la pregunta ¿Posicionan mejor las páginas que validan?:

Como dice Matt Cutts, de momento solo sirve para el interés de tu propia página. Cuando se sirven millones de páginas por segundo, hasta el más mínimo bit cuenta. De todas maneras no tenemos que pensar tan solo en que posicione mejor o no nuestra Web en Google, sino en la optimización del código que desarrollamos.

Referencia: adseok

Estudio de Usabilidad Móvil de Jacob Nielsen

Jacob Nielsen, experto en estudios de usabilidad, ha realizado un estudio de usabilidad sobre el uso de la Web móvil en general, con 48 participantes en los EE.UU. y Reino Unido. Se realizó una revisión de diseño de 20 sitios Web, con 6 teléfonos: un teléfono móvil de pantalla táctil, tres teléfonos inteligentes (smartphones) diferentes, y dos teléfonos de contacto diferentes.

Usabilidad Web Móvil

El estudio revela que el uso de la Web en un teléfono móvil varía dependiendo de las características del dispositivo que se use. Como era de esperar, se descubrió que los sitios diseñados específicamente para su uso en un teléfono móvil rinde sustancialmente mejor, que los “sitios completos” y no adaptados para ello. Cosa que debemos tener muy en cuenta para nuestros proyectos Web.

Nielsen también en comparación con un estudio del año 2000. Las mismas tareas que llevan más tiempo a hacer hoy, que los que lo hicieron en el año 2000 en un teléfono WAP. Sugiere que la razón principal es que en aquel entonces, la web móvil era un “jardín cercado”, limitado, pero relativamente simple, mientras que hoy la Web es más abierta en los teléfonos móviles. Y la gente lo que necesita es ir a un motor de búsqueda y no perder tiempo en introducir y buscar una palabra, debido a los tiempos de carga para buscar una respuesta.

Como se ha comentado, con respecto al año 2000 la usabilidad Web en móviles no ha progresado, sobre todo en los tiempos de espera para ver los contenidos que buscas y teniendo en cuenta que las conexiones a Internet son mucho más rapidas que hace 9 años. Pero poco a poco se piensa mas en el diseño Web para Móvil, ya que es el futuro de la Web.

Las pantallas grandes y la manipulación directa tiene un gran impacto en la usabilidad.

Como era de esperar, entre más grande sea la pantalla, mejor será la experiencia del usuario al acceder a sitios Web. A continuación os dejo con el promedio de exito en estos dispositivo:

  • Teléfonos móviles de contacto 38%
  • Smartphones 55%
  • Teléfonos de pantalla táctil 75%

Con estos números, el consejo para los consumidores es fácil: comprar un teléfono de contacto si los sitios Web que están utilizando son importantes para ellos.

El consejo para los Desarrolladores Web es más difícil. Los teléfonos de uso tienen una mejor facilidad de uso, pero ¿realmente se usa para navegar, lo suficiente como para tenerlos en cuenta?. Otra posibilidad es centrarse en los usuarios de teléfonos smartphone y teléfonos táctiles que son más propensos a navegar por la Web.

Fuente: Mobile Usability

sep 17, 2009 - Categoría: Noticias    Escrito por Jorge López   Número de comentarios: 4 Comentario

Google patenta su página de inicio

Gwker.com nos informa que tras varios años de intentos infructuosos, finalmente google y sus abogados ha conseguido convencer a burócratas federales para otorgar una patente sobre su página principal e icono de la empresa.

Patente la que se muestra el diseño de la página de inicio de google

Si, si esa página con una caja para introducir las búsquedas, y dos botoncitos como elementos más destacados. Por lo tanto, Google es propietario de la idea de tener un cuadro de búsqueda gigante en el centro de la página, con dos grandes botones debajo y varios pequeños enlaces cercanos. De hecho, todos estos elementos unidos son “una innovadora interfaz gráfica de usuario para la visualización de una pantalla de una terminal de comunicaciones”, según el minimalista documento que recoge la patente.

No está claro cómo la empresa, que está bajo la lupa de los reguladores antimonopolio, ejercerá la patente frente a los competidores. Recordemos Yahoo y Ask, tienen un diseño sorprendentemente parecido a google.

Pantalla de Inicio de Yahoo, Ask, The pirate Bay y Bing, todas muy parecidas a la página de google

Literalmente la patente dice “The ornamental design for a graphical user interface for a display screen of a communications terminal, as shown and described.

¿Tiene derecho una empresa de apropiarse para sí, una forma lógica de presentar un formulario de búsqueda que hoy ya es un estándar para todo el mundo?

sep 17, 2009 - Categoría: JavaScript    Escrito por Eduardo Sainz   Número de comentarios: 2 Comentario

Juegos en Javascript

En este artículo vamos a mostrar el potencial que puede ofrecernos Javascript, hemos realizado una lista de juegos realizados por auténticos gurús de este lenguaje, desde simples rompecabezas hasta juegos en 3d:

Tetris, el juego más jugado de la historia no podía faltar en su versión javascript.

Tetris

Supermario, el fontanero más famoso del mundo en 14 kb.

Mario

Buscaminas, el juego al que todos alguna vez hemos jugado, sobre todo si alguna instalación se hacia eterna.

Buscaminas

Solitario, el legendario juego de cartas.

Solitario

Pacman, el juego que marcó una época.

Pacman

Batalla naval, el clásico de hundir barquitos.

Batalla naval

Bunny Hunt, a la caza del conejo !!.

Bunny Hunt

Pocker, el juego por excelencia para las apuestas.

Pocker

ProtoRPG , un motor para crear juegos de rol, utilizando Prototype.

ProtoRPG

ajedrez, un juego de ajedrez en 5 kb.

Ajedrez

Wolfenstein, el primer juego de disparos en primera persona.

wolfehstein

Que disfrutéis