12/6/22, 12:08 marzo 2008

martes, 11 de marzo de 2008

Wireframes

Este artículo se puede consultar también en vídeo: Vídeo "Prototipado" para el curso gratuito
"iDESWEB: Introducción al desarrollo web"

Última actualización: 21 de enero de 2011

Terminología

Wireframe, Blueprint, Prototipo, Storyboard, Mock Up, Diagrama de contenido, Sketching …

Lo primero aclaremos la terminología.

Como expliqué en "Disciplinas relacionadas con la usabilidad", hay diversas disciplinas que intervienen en el
Diseño de Interfaz de Usuario, entre ellas se encuentra la Arquitectura de Información (AI).

El Arquitecto de Información se encarga de definir la organización, etiquetado, navegación y sistema de

búsqueda de un sitio web, elementos que ayudan a los usuarios a encontrar y gestionar la información de
manera efectiva.

Para llevar a cabo estas tareas nos valemos de la diagramación para especificar cuál será la organización,
estructura, funcionamiento y navegación del sitio.

Existen dos tipos de diagramas (sin contar los que pueden surgir de la aplicación de otras técnicas como
el Card Sorting) como podemos ver en este gráfico de NSU:

[DE-1]

https://olgacarreras.blogspot.com/2008/03/ 1/14
12/6/22, 12:08 marzo 2008

Así pues distinguimos:

los PLANOS, que son diagramas de organización y funcionamiento

las MAQUETAS, que son diagramas de presentación

Planos: diagramas de organización y funcionamiento

Los diagramas de organización y funcionamiento se llaman BluePrint (también Architecture Map o

Diagramas de contenido o flujo) y pueden ser más o menos avanzados. Es lo que también se denomina
mapa web. En NSU vemos dos ejemplos, uno más sencillo y otro más completo:

[DE-2]

[DE-3]

Como se ve, el objetivo de estos diagramas es mostrar la estructura del sitio y su flujo de
navegación.

Para la realización de este tipo de diagramas de recomienda siempre el "Vocabulario visual para
describir arquitectura de información y diseño de interacción" de Jesse James Garrett.

Una herramienta sencilla y gratuita, recomendable para realizar mapas web sencillos, es XMind. Para realizar
diagramas más complejos se pueden utilizar cualquiera de las herramientas recomendadas más adelante
para la realización de wireframes.

Maquetas: diagramas de presentación

Por otro lado hemos visto que tenemos los diagramas de presentación, cuyo objetivo es mostrar el
contenido de las páginas, concretando los elementos que se plantearon en los primeros planos (blueprints)
y ubicándolos en las páginas o pantallas del producto final.

Podemos tener distintos tipos de prototipos, que en ningún caso incluyen el diseño gráfico puesto que este se
aplica en una etapa posterior. Para simplificar, podemos hablar de:

Prototipos de Baja fidelidad: son un conjunto de dibujos que representan cómo estarán organizados los
elementos en las páginas, de tal manera que implementan aspectos generales del sistema sin entrar en
detalle. Dentro de prototipos de baja fidelidad hablaremos de:

Sketching: un sketch es un boceto rápido e informal que se realiza en papel para transmitir una
idea o concepto con rapidez y claridad. Suele realizarse durante las entrevista iniciales como
técnica eficaz para comunicar al cliente conceptos o proponer alternativas a un problema; también

https://olgacarreras.blogspot.com/2008/03/ 2/14
12/6/22, 12:08 marzo 2008
es muy útil durante un brainstorming o en las reuniones con el equipo de trabajo. Es una forma eficaz
de comenzar el prototipado de un sitio web, pues permite trabajar ágilmente con varias ideas y
esquematizar las páginas.

Ejemplo de boceto de una página web de JustBuildaWebsite.com

El libro de referencia suele ser "Sketching User Experience" de Bill Buxton. Es interesante el
artículo "Bill Buxton : Sketching versus Sketchiness, what's the difference for UX design?" de Joel
Eden sobre si deberíamos hablar de sketching o de sketchiness. Otro artículos recomendados:
Sketching Design, de Yan Schober y "Sketching User Experience" (Comparativa entre sketching y
prototipo)

Wireframe: permite crear una referencia visual de la estructura de una página web, definiendo al
detalle el contenido y su distribución visual, organizando así la información a nivel de página. Lo
trataremos en detalle en el siguiente apartado.

StoryBoard: secuencia de wireframes que muestran cómo se realiza una tarea.

Imagen tomada de "Wireframes for the Wicked", de Michael Angeles, Nick Finck and Donna Spencer

El doctor Granollers propone un nuevo tipo de prototipado, el StoryBoard Navegacional, que

une los dos tipos de prototipado. Lo expliqué en el artículo, "Metodología DCU MPlu+a".

Algunos autores los denominan Wireflows (Wireframes+Flowcharts):

https://olgacarreras.blogspot.com/2008/03/ 3/14
12/6/22, 12:08 marzo 2008
Imagen de: Galería de entregables UX – Wireflows,uxd.cl

También podemos oír hablar de “Thumbnail Sketches”, que es simplemente un storyboard de

scketches:

Imagen tomada de "Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches", de Joshua
Johnson

Imagen de: Galería de entregables UX – Wireflows,uxd.cl

Prototipo de Alta Fidelidad (también llamados maqueta, mockUp o prototipo funcional), con los
que se representan aspectos más precisos. Sirven, por ejemplo, para detallar el proceso interactivo global
de una o varias tareas concretas. Son prototipos o maquetas dinámicas, normalmente en (X)HTML, que
simulan o tienen implementadas partes del sistema final a desarrollar. Pueden ser de muy distintos tipos,
completo o parcial, horizontal o vertical, etc.

En Sidar tienes un excelente artículo sobre distintos tipos de prototipado.

El propósito de crear estos prototipos es dar la oportunidad de evaluar el diseño prematuramente.

El objetivo es producir estos prototipos rápidamente y evaluarlos eficazmente para que puedan
ser refinados, elaborados y reevaluados antes del producto final. Ingeniería de la Usabilidad
aplicada al desarrollo de un portal web administrado dinámicamente, José M. Belmonte Marín

Una vez aclarados los términos, me voy a centrar en los diagramas de presentación Wireframes.

https://olgacarreras.blogspot.com/2008/03/ 4/14
12/6/22, 12:08 marzo 2008
¿Cómo es un Wireframe?

Como hemos visto, un wireframe es una representación esquemática de una página web sin elementos
gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de
comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.
También se pueden utilizar para pruebas de usuarios. "Wireframes: recopilación de enlaces" en No lo
entiendo.

Es muy importante aclararle siempre al cliente qué es un Wireframe, estar seguros de que entiende
que ese no es el aspecto final del sitio, sino una mera representación gráfica de su contenido.

Ejemplo 1: Wireframe del Rediseño del blog El Factor Humano 2.0 de WebStudio

Ejemplo 2: Representing Data in Wireframes de Dan Brown

Ejemplo 3: Wireframes for the Wicked, de Michael Angeles, Nick Finck and Donna Spencer:

¿Cuándo se realizan?

Una vez tengamos delimitados los objetivos del cliente, las necesidades de los usuarios y los contenidos y
funciones de la web; antes de empezar a programar y de crear el diseño visual de la página.
"Wireframes: recopilación de enlaces" en No lo entiendo

Por tanto, antes de hacerlo, es necesario tener todos los requisitos del proyecto: requisitos de negocio, de
contenido, de diseño, de accesibilidad, etc.

Personalmente, antes de acometer un wireframe, realizo una serie de tareas previas:

Entrevistas con el cliente y el equipo de desarrollo para definir los requisitos, los objetivos y el público
objetivo.

Estudio del portal actual (si existe): problemas de usabilidad y accesibilidad, estadísticas de acceso, test
con usuarios y encuestas (en función del tipo del portal).

Benchmarking, o estudio comparativo de la competencia.

Definición de la arquitectura de informacón y mapa web.

Por otra parte, antes de comenzar a prototipar con Axure (herramienta que recomiendo como explicaré
más adelante) suelo comenzar con bocetos personales (sketches) para trabajar las zonas que tendrán las
páginas  y esquematizarlas, para probar, desechar y tomar decisiones de forma ágil.

Ventajas de crear Wireframes

https://olgacarreras.blogspot.com/2008/03/ 5/14
12/6/22, 12:08 marzo 2008
Hay dos grandes ventajas, por un lado el equipo y el cliente se centra en el diseño de contenidos y no
en el diseño visual, y por otro lado, definiendo la organización y estructura en etapas previas al diseño y
programación se evitan cambios posteriores más costosos, reduciendo así costes y tiempos.

El doctor Granollers resume estupendamente las principales características o ventajas de los prototipos
(se refiere a los prototipos en general, no a los wireframes en particular):

Son formidables herramientas de:

Comunicación entre todos los componentes del equipo de desarrollo y los usuarios

Participación, para integrar activamente a los usuarios en el desarrollo.

Dan soporte a los diseñadores a la hora de escoger entre varias alternativas.

Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos.

Permiten evaluar el sistema desde las primeras fases del desarrollo (facilitan la exploración de ideas
sobre nuevos conceptos tecnológicos).

Son esenciales para la documentación, tanto de conceptos funcionales del sistema como de tareas
concretas del mismo.

Son el primer paso para que ideas abstractas sean concretas, visibles y testables.

Fomentan la iteratividad.

Mejoran la calidad y la completitud de las especificaciones funcionales del sistema.

Son herramientas de propósito general, pues sirven para comprobar la fiabilidad técnica de una idea,
clarificar requisitos que quedaron “indeterminados” o ver como responde con el resto de la aplicación.

¿Qué información debe contener un Wireframe?

Como bien indica "Using Wireframes" de Strange Systems:

Inventario de contenido. Qué contenido debe estar presente en cada página

Elementos de la página. Cabeceras, enlaces, listas, imágenes, formularios, etc.

Etiquetado. De vínculos, títulos, etc.

Layout. Ubicación, colocación y agrupación de los elementos de la página (cabeceras, pies, navegación,
áreas de contenido, titulares, etc.) Muestra la estrategia de navegación y la priorización de contenidos
dentro de la página, así como la agrupación en barras laterales, barras de navegación, áreas de
contenido, etc.

Comportamiento. Mediante notas asociadas a los elementos para indicar cómo se deben mostrar (nº de
elementos, visualización por defecto) o definir el comportamiento funcional cuando un elemento se activa
(enlace externo, etc.)

Tipos de Wireframe

Como especifica "Using Wireframes" de Strange Systems, pueden ser más o menos detallados:

Content-only: tan sólo consta del nombre de la página y un listado de contenidos

Diagrama de bloques: contiene sólo la información básica a través de bloques de funcionalidad y

agrupamiento de contenidos.

Wireframe detallado: tendría todos los elementos antes mencionados incluidas las notas de
comportamiento (Ejemplo: Wireframe del Rediseño del blog El Factor Humano 2.0 de WebStudio)

https://olgacarreras.blogspot.com/2008/03/ 6/14
12/6/22, 12:08 marzo 2008
¿De cuántas páginas creamos un Wireframe?

De la página principal y de los principales tipos de subpáginas o plantillas, entre las que deberán incluirse,
una página de formulario, una página de resultado búsqueda y una página de error. Si estamos ante una
aplicación deberá incluir una página de ingreso de datos, una página de detalle y una página de listado.

¿Cómo se hace un Wireframe?

37signals propone en "Una introducción a la utilización de patrones de diseño en la web" una metodología
para hacer un Wireframe que consta de 6 pasos. No ha de tomarse como una receta mágica, pero puede
orientarnos:

Haz una lista numerada de toda la información que debe tener tu página (no sólo datos, sino también
acciones, actitudes), lo que llaman "bit".

Agrupa los "bits" que se relacionan entre sí. A cada grupo lo llamarías con una letra y asociada a esa
letra pondrías los números de la información que relaciona. Por ejemplo A:1,3,5

Prioriza qué grupos son los más importantes desde un punto funcional, agrupando los grupos en tres
prioridades: Lo más importante, Lo necesario y Lo que es bueno tener.

Diseña cada fragmento, cada agrupación de "bits". Lo podemos hacer sin preocuparnos de los
conflictos porque ya sabemos que incluyen a todos los elementos relacionados entre si.

Junta los fragmentos teniendo en cuenta la prioridad y el equilibrio.

Hazlo real. Hasta ahora todo lo hemos hecho en papel, es el momento de pasarlo a pantalla y hacer los
ajustes necesarios para ello.

Errores en la creación de Wireframes

Debe ser claro, sin diseño gráfico y sin color (salvo el estrictamente necesario, por ejemplo para indicar
que un elemento está seleccionado, para lo cual recomiendo usar gamas de grises)

Yo suelo trabajar con prototipos funcionales, pues la experiencia me dice que con ellos el cliente comprende
mejor la interacción de las páginas y los cambios posteriores son menores. Por tanto yo siempre recomiendo
que su funcionamiento se asemeje lo máximo posible al futuro funcionamiento del portal, lo cual además
ofrece una herramienta de gran valor para el equipo de desarrollo.

Desde mi punto de vista, el mayor error es no presentar personalmente el prototipo al cliente. Es cierto
que debe ser autoexplicativo y que las notas son importantes para que después puedan revisarlo, pero
siempre es necesario explicar cada una de las decisiones que se han tomado y el por qué de las mismas.

Liz Danzico propone sus propias recomendaciones en "The Devil's in the Wireframes"

¿Cómo planteo un Wireframe para una aplicación RIA?

Recomiendo el artículo "The Guided Wireframe Narrative for Rich Internet Applications" de Andrés Zapata.
También es recomendable "Crear prototipos de Rich Internet Applications en Visio" de Usolab.

¿Qué herramienta utilizo para realizar un Wireframe?

Depende de cual manejes con mayor fluidez. Puedes usar Illustrator, Photoshop, PowerPoint, Visio,
OpenOffice Draw, Omnigraffe, etc.

Pero sí que existen herramientas específicas para realizar Wireframes, yo recomiendo Axure.

https://olgacarreras.blogspot.com/2008/03/ 7/14
12/6/22, 12:08 marzo 2008

Axure permite crear de manera muy sencilla un prototipo funcional (mostrar y ocultar paneles, cambiar el
estado o el contenido de los elementos, por ejemplo de los campos de un formulario; crear zonas fijas
reaprovechables por todo el prototipo, etc.)

También permite exportar un documento Word con los pantallazos de la aplicación y sus partes para redactar
el análisis funcional. Podéis conocer las novedades de Axure 7 en el artículo: Novedades Axure 7

Recursos para Wireframes

Stencil Kit de Yahoo que proporciona objetos predefinidos en diferentes formatos.

"Recopilación de plantillas y stencils para prototipar" en deinterfaz.

"Templates" de Information Architecture for Designers

"Tools" de The Information Architecture Institute

"Using Wireframes: Templates" de Strange Systems

"Visio Wireframe Stencil" de UrlGreyHot

"Graph Paper" (plantillas para wireframes y story boards) en Konigi

Kit para prototipado en papel de la consultora australiana Information & Design, listos para ser impresos

Stencils más "hand-drawn" para tus wireframes

Wireframes para móvil

I love wireframes: recopilatorio

960.gs Grid Based Prototypes

Quince

Wiki "Resources for designing and building mobile applications and website"

Libreria para prototipar aplicaciones de Android

Fuentes a consultar
"La diagramación en la arquitectura de información" de Rodrigo Ronda León

"Prototipado" de SIDAR

"Un vocabulario visual para describir arquitectura de información y diseño de interacción" de Jesse James
Garrett

"Using Wireframes" de Strange Systems

“Wireframes for the Wicked”, de Michael Angeles, Nick Finck and Donna Spencer

"Wireframes: recopilación de enlaces" en No lo entiendo

https://olgacarreras.blogspot.com/2008/03/ 8/14
12/6/22, 12:08 marzo 2008
"An Introduction to Using Patterns in Web Design" de Ryan Singer

"Representing Data in Wireframes" de Dan Brown

"The Devil's in the Wireframes" de Liz Danzico

"The Zen of Wireframes" de Gene Smith

"Wireframes" de Nelson Rodríguez-Peña:Rediseño: Wireframe de Portada y Rediseño: Wireframe de

Página Interior

"The Guided Wireframe Narrative for Rich Internet Applications" de Andrés Zapata

"Crear prototipos de Rich Internet Applications en Visio" de Usolab

"Wireframes" de Drey Alexander Consulting

MPIu+a. Una metodología que integra la Ingeniería del Software, la Interacción Persona-Ordenador y la
Accesibilidad en contexto de equipos de desarrollo multidisplinares del Doctor Granollers

Ejemplos: Storyboard navegacional, diagramas de flujo, etc.

DIseño en HCI, Universidad Carlos II de Madrid

Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches, de Joshua Johnson

Wireframes Magazine, blog especializado.

Artículos relacionados:

La usabilidad como metodología para el desarrollo de una aplicación web

Metodología DCU MPlu+a

Novedades Axure 6

Imprescindibles... (8)

Enlaces recomendados de accesibilidad:

Protocolo NI4. Pautas de Diseño de Navegación Fácil

Técnicas para el desarrollo de Flash accesible en accesibilidadweb.com

Directrices de accesibilidad para las aplicaciones que generan contenido web: ATAG (Authoring Tools
Accesibility Guidelines) em Accesibilidad, Usabilidad y Estándares Web

Beneficios Auxiliares del Diseño Web Accesible de la WAI. Traducción en SIDAR.

Normativa y regulación relacionada con la Accesibilidad Audiovisual en CESyA

Cómo utilizan la Web las personas con discapacidad en Accesibilidad Web y Alan.

viernes, 7 de marzo de 2008

Metodología DCU MPlu+a

Artículos relacionados
[15/03/2012] Estándares formales de usabilidad y su aplicación práctica en una evaluación heurística
[01-10-07] La usabilidad como metodología para el desarrollo de una aplicación

En el año 2004, Toni Granollers i Saltiveri, profesor de la Universidad de Lleida, presentaba su tesis doctoral:
"MPIu+a. Una metodología que integra la Ingeniería del Software, la Interacción Persona-Ordenador
y la Accesibilidad en el contexto de equipos de desarrollo multidisplinares", que está disponible en la
red en 5 PDF.
https://olgacarreras.blogspot.com/2008/03/ 9/14
12/6/22, 12:08 marzo 2008

Aunque no está concebida como un manual, lo cierto es que esta tesis de 562 páginas se convierte en un
auténtico manual de Diseño Centrado en el Usuario y Usabilidad gracias a todos los temas que trata y
a su claridad.

Lo recomiendo a todos aquellos que buscan referencias de calidad gratuitas sobre estas disciplinas.

La parte central de la tesis se centra en su propuesta de metodología que bautiza como MPlu+a:

[...] modelo de diseño y desarrollo de sistemas interactivos centrado en los usuarios al que hemos
denominado “Modelo de Proceso de la Ingeniería de la Usabilidad y de la Accesibilidad, MPIu+a”.

Este modelo de proceso, que se fundamenta en la disciplina de la Interacción Persona-Ordenador (IPO) y

también en las Ingenierías del Software y de la Usabilidad, proporciona la manera de proceder organizada
y formalizada para conseguir usabilidad y accesibilidad en el diseño de interfaces de usuario durante el
desarrollo de un sistema interactivo.

El esquema de la metodología es el siguiente:

 
[D-1]
[Ver imagen "Esquema de la metodología MPlu+a" más grande]

Dentro del apartado dedicado a la fase de prototipado, además de explicar los distintos tipos que existen,
aporta un modelo de prototipado nuevo muy interesante que bautiza con el nombre de StoryBoard
Navegacional:

Con esta técnica se representan en un espacio bidireccional (con papel, en una pizarra, con impresiones
de pantalla y flechas con rotulador, etc.) todos los estados de las interfaces (pantallas…) de la parte del
sistema que se examinará y todas las posibilidades a nivel interactivo desde cada uno de estos estados
para visualizar las posibles acciones o movimientos que el usuario puede realizar mientras interacciona
con la interfaz.

 
[D-2]

https://olgacarreras.blogspot.com/2008/03/ 10/14
12/6/22, 12:08 marzo 2008
[Ver imagen "Ejemplo de storyboard navegacional" más grande]

De la misma manera, Granollers explica las diversas técnicas de evaluación de la usabilidad que existen,
aportando una nueva que bautiza como Recorrido cognitivo con usuarios, que se explica con detalle a
partir de la página 38 del tercer PDF de la tesis.

Hay que destacar que el modelo de proceso metodológico está basado en la participación en el mismo de un
equipo de personas multidisciplinares. En este esquema se muestra cómo participan en las diversas fases
las distintas disciplinas:

 
[D-3]
[Ver imagen "Participación multidisciplinar en MPlus+a" más grande]

Otra aportación de la tesis es un nuevo concepto: el Esfuerzo de Usabilidad (EU), con el que se pretende
medir el nivel de usabilidad del sistema implementado, y que se define como:

[...] medida que indica los recursos empleados y las actividades realizadas durante el desarrollo de una
aplicación interactiva con la finalidad de conseguir un determinado nivel de usabilidad.

Con ello se pretende tener al final de cada implementación un número que revele “la cantidad de esfuerzo
realizado” para conseguir la tan deseada usabilidad, obteniendo así una medida cuantitativa indicadora de
la usabilidad del sistema a partir de las actividades realizadas durante la consecución del sistema.

Supone la primera aproximación conocida de valorar la usabilidad de un sistema a partir de ligar el

procedimiento con el resultado.

Para el cálculo de este valor se utiliza la HT-DC (Hoja de Trabajo de la Gestión de la Configuración) en la
que se incluye por orden cronológico todas las actividades realizadas. En esta imagen se ve un ejemplo de
HT-DC:

 
[D-4]
[Ver imagen "Ejemplo HT-DC" más grande]

Las fórmulas para el cálculo matemático se explican a partir de la página 30 del cuarto PDF.

https://olgacarreras.blogspot.com/2008/03/ 11/14
12/6/22, 12:08 marzo 2008

Es interesante que "el valor del EU no es equivalente al dinero invertido en la usabilidad del sistema. Esto
es debido a que la metodología seguida para conseguir este valor puntúa la realización de las actividades
y no el precio que cuesta realizarlas. Lo importante son las actividades bien realizadas, pues su coste
económico puede variar mucho en función de parámetros como la aptitud del evaluador, su experiencia o
su “caché” personal."

El EU mínimo es un valor comprendido en el rango [1200, 1600] aunque los valores comprendidos entre
[2200, 2500] son los que mejor recogen la experiencia del usuario y contribuyen a optimizar la usabilidad del
sistema.

Granollers propone un conjunto de ciclos básicos de la aplicación del modelo de proceso, con el que
han constatado que se consiguen resultados considerablemente buenos con un esfuerzo que suele encajar en
los márgenes presupuestarios de cada proyecto, y que se refleja en este esquema:

 
[D-5]
[Ver imagen "Ciclos básicos del modelo" más grande]

Se explica cada ciclo a partir de la página 43 del cuarto PDF.

Puedes también consultar el portal donde los miembros GRIHO (Grupo de Investigación de la Disciplina de la
Interacción Persona-Ordenador) de la Universidad de Lleida, al que pertenece el doctor Granollers, presentan
su modelo de DCU MPIu+a.

Artículos relacionados
[01-10-07] La usabilidad como metodología para el desarrollo ...

jueves, 6 de marzo de 2008

Prototype 1.6.0.2 CheatSheet

La última versión de Prototype, la 1.6.0.2, del 25 de Enero de 2008, ya tiene CheatSheet [vía anieto2k].

Esta versión es compatible con:

Mozilla Firefox ≥ 1.5

Microsoft Internet Explorer ≥ 6.0
Apple Safari ≥ 2.0
Opera ≥ 9.25

Para los amantes de las CheatSheet, encuentro también vía anieto2k una recopilación muy interesante: The
Developer Cheat Sheet Compilation.

Otra recopilación de CheatSheet es Quick Reference Cards

Eduardo Sanchez publica también hoy otra recopilación: Top 100 Cheat Sheet para web developers.

Me apunto aquí las que más me interesan:

https://olgacarreras.blogspot.com/2008/03/ 12/14
12/6/22, 12:08 marzo 2008

XHTML

CSS

JavaScript

Expresiones regulares

XSL

XML

ASCII Character Codes Table

Photoshop y Atajos de teclado

HTML 5 Canvas

SEO

Imprescindibles... (7)

Enlaces recomendables sobre la revisión de la usabilidad de un sitio:

10 Principios para un Diseño Web Efectivo en Estándares y Accesibilidad

39 sugerencias para hacer un sitio usable en Accesibilidad, Usabilidad y Estándares Web

Autodiagnóstico de Usabilidad del Laboratorio Aragonés de Usabilidad

Checklist del Laboratorio Aragonés de Usabilidad

Plantilla Análisis Heurístico v1.2 de Torres Burriel.

Guía de Evaluación Heurística de Sitios Web de NSU

Guía para evaluación experta de Joaquín Márquez Correa

Manual de las técnicas de Evaluación y testing de Usabilidad de WebUsable.com

"Com es realitza una avaluació heurística per experts", PROYECTO MUPA-UOC - Metodología de usabilidad
para aplicaciones de la Universitat Oberta de Catalunya

Taller de Usabilidad de la Semana de la Ciencia

Usability Toolkit

Noticias... (10)

Progreso de WCAG 2.0 en Accesibilidad Web y Alan:

El Grupo de Trabajo WCAG espera publicar WCAG 2.0 como “Recomendación Candidata” en abril o mayo

https://olgacarreras.blogspot.com/2008/03/ 13/14
12/6/22, 12:08 marzo 2008
de 2008. [...] En función de cuanto dure la etapa de Recomendación Candidata, el último borrador de
WCAG 2.0 (llamada “Propuesta de Recomendación”) podría estar disponible en el último trimestre del
2008.

[Artículo relacionado WCAG 2.0]

Explorer 8 Beta. Muy recomendables los artículos de anieto2k:

Probando Internet Explorer 8 Beta 1

Internet Explorer 8.0, será super estandar por defecto

El Consejo de Europa adopta una nueva resolución sobre Accesibilidad Universal en CEAPAT (25/02/2008)

Entradas más recientes

https://olgacarreras.blogspot.com/2008/03/ 14/14