viernes, mayo 23, 2008

Recursos de mi Presentación "Sitios Exitosos"

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

Me han estado solicitando los recursos que menciono en mi presentación Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario, así que aqui están:

Igualmente les recuerdo el listado de recursos que había recopilado para mi otra charla: Estándares Web y Accesibilidad en Colombia.

jueves, mayo 22, 2008

La Usabilidad en el Email

Campaig Monitor: 2008 Email Design Guidelines

Así como debes tener muy en cuenta la Usabilidad en tus proyectos Web, también debes tenerla para tus proyectos con el email. ¡Sí! Esos boletínes o newsletters que envías periódicamente a tus clientes.

¿Cómo? Teniendo muy en cuenta estas Guías: 2008 Email Design Guidelines, publicadas por Campaing Monitor.

Si claro. Estas son unas Guías de Diseño, pero si las lees detenidamente verás que también te servirán para hacer tus comunicaciones más usables.

  • No desperdicies el tiempo de tus lectores: Así que directo al grano y si tu boletín es un extenso incluye en primera medida una tabla de contenido.

  • Los permisos importan: ¿Tienes el permiso para enviar tu email a cada uno de tus clientes? Además recuérdales quién eres y por qué deben creer en tí.

  • El contenido le gana al permiso: Además de tener su permiso, a tus clientes debes enviarle información relevante.

  • Haz fácil la salida de tu lista: No tienes porque escribirle a quienes no estén interesados.

  • El bloqueo de imágenes es común: Muchos clientes y webs de correo bloquean las imágenes por defecto, así que tu mensaje no debe depender de ellas.

  • Usa tablas: Desafortudamente el soporte de CSS no es el adecuado en los clientes de correo. Así que para diagramar usa tablas.

  • Cuando uses estilos, úsalos inline: Por el mismo motivo anterior.

  • No te olvides de la versión sólo texto: Muchos de tus clientes la prefieren.

  • Conoce las leyes de correo electrónico de tu país: Porque hay leyes que lo controlan y son diferentes en cada uno.

  • Prueba, prueba, prueba: Así como debes probar, probar y probar con tu sitio Web, igual hazlo con tus correos.

Este es un resumen de las guías. Deberías sacar el tiempo y leer el artículo completo en su blog, donde encontrarás más detalles y ejemplos de cada item.

Adicionalmente, te recomiendo su excelente Galería de Emails en HTML y sus plantillas para correos sólo texto en donde encontrarás gran inspiración

Webelo: Herramienta de Evaluación de Accesibilidad Web para Eclipse

Eclipse

Eclipse es un Entorno (IDE) de Desarrollo Open Source, creado originariamente por IBM, que es muy popular con los desarrolladores de Java, C/C++ y Web, por sólo mencionar unos cuantos proyectos que puedes trabajar en él.

La noticia de hoy, gracias al blog de Alan Chuter, es el lanzamiento de la primera versión de prueba de AcTF Webelo (Accessibility Tools Framework).

Webelo es una colección de componentes para Eclipse que permite a los creadores de contenidos Web y desarrolladores de aplicaciones Web llevar a cabo evaluaciones de la accesibilidad de su trabajo. Webelo aprovecha el componente navegador Mozilla para evaluar el árbol de estructura creado por el navegador en vez del código fuente recibido del servidor. Se entrega con un paquete de reglas basado en la Lista de Comprobación de Accesibilidad de IBM. Es una versión muy preliminar de un producto en desarrollo y la documentación en inglés no es completa.

Así que si eres usuario de Elipse, ya puedes comenzar a evaluar la Accesibilidad de tus proyectos.

martes, mayo 20, 2008

La Accesibilidad en Colombia

El Tiempo & El País

El proceso de sensibilización sobre la Accesibilidad en Colombia ha sido largo. Poco a poco este tema, que debería ser de gran prioridad, se está dando a conocer y hoy les invitaré a leer unos artículos que recientemente han sido publicados en dos de los medios más importantes del país.

Por un lado, en la sección de blogs de El Tiempo, Mario Carvajal escribe un muy buen artículo titulado: Accesibilidad Web en Colombia: mal, mal, mal.

Por el otro, en El País, publican una interesante historia sobre inclusión digital: En-redados, en donde cuentan la historia de Sandra Solano, una sorda que ama el chat.

El Retorno de WebMonkey

WebMonkey: The Web Developer's Resource

Ha vuelto un clásico del desarrollo web: WebMonkey: The Web Developer's Resource: un recurso público y gratuito para desarrolladores web, en donde desarrolladores, diseñadores y programadores como tu, escriben los artículos, tutoriales, trozos de código (code snippets) y otras contribuciones.

Como versión 2.0 beta que se respete, incluye blog y nos invita a que escribamos artículos (en inglés) para que hagamos parte de esta "nueva" comunidad de desarrollo Web.

Mi recuerdos con WebMonkey se remontan hace muchos años, cuando leí uno de los primeros artículos sobre Experiencia de Usuario que encontré en la Red: Information Architecture Tutorial. Es más: en esa época ni siquiera era usado el térmico de Experiencia de Usuario. En todo caso un clásico entre los clásicos.

lunes, mayo 19, 2008

La Usabilidad también tiene en cuenta las URLs

URL semántica / Clean URL / Friendly URL

Las URL semánticas o amigables son las direcciones web que pueden ser entendidas por los usuarios a simple vista ya que están formadas con palabras que muchas veces están relacionadas con el contenido de la página y son fáciles de recordar.

Evalúa cuál URL te gusta y resulta más amigable (y usable):
- http:// www.MiSitio.com / productos.aspx ? id=50
o
- http:// www.MiSitio.com / productos / camiseta_R20 /

Obviamente la segunda es mejor para los internautas y hasta para los buscadores.

Te invito entonces a que leas este interesante post: URL semántica / Clean URL / Friendly URL en el blog Interacciones.

Y si quieres hacer tus URLs amigables, te recomiendo buscar en Google de acuerdo al lenguaje/CMS que trabajes. Por mi lado, que trabajo .Net, recomiendo: UrlRewritingNet.

domingo, mayo 18, 2008

Capire: Edición Mayo 2008

Capire: Revista de Estrategia e Interacción

Comenzamos el día con la lectura de Capire: Revista de Estrategia e Interacción, quienes mes a mes nos traen información muy interesante.

El listado de todos los artículos:

jueves, mayo 15, 2008

Crea Webs Accesibles y el TAW en los Premios Día Internet

Crea Webs Accesibles

Crea Webs Accesibles es una campaña online cuyo único objetivo es la concientización de la accesibilidad web hacia todos los sectores de la sociedad. Con el aporte de fotos, que anuncian la campaña, subidas a Flickr con el tag "webs accesibles" y la difusión en varias webs, muchos conocen los beneficios de una web accesible.

Esta campaña ha estado con nosotros desde finales del año pasado, sin embargo la novedad de estos días es que esta Campaña está dentro de los finalistas de los Premios Día de Internet, los cuales tienen como finalidad reconocer el esfuerzo de personas e instituciones para incorporar a los ciudadanos a la Sociedad de la Información, fomentar la accesibilidad y la seguridad y estimular las iniciativas orientadas a conseguir una mayor apertura, diversidad y participación con motivo de la celebración, el 17 de mayo, del día mundial de las telecomunicaciones y de la sociedad de la información.

Felicitaciones a Eugenia, gestora de la Campaña!!

Ah, y se me olvidaba comentar que dentro de los finalistas de estos premios, en la Categoría Diversidad, encontramos otro conocido de esta Casa: el TAW, un validador que te permite evaluar la Accesibilidad de tu Web.

Opera Mini 4.1 ya se Encuentra Disponible

out Now! Opera Mini 4.1

Opera ha anunciado la nueva versión de su navegador para dispositivos móviles Opera Mini 4.1, considerado por muchos como el mejor navegador para dispositivos móviles.

Dentro de las características que encontramos en esta nueva versión tenemos:
  • Es un 50% más rápido que Opera Mini 4.0.
  • Sugiere, de forma automática, la completación de las URL, haciendo fácil e intuitiva el introducir las direcciones.
  • Las páginas Web pueden ser guardadas para acceder a ellas más tarde de forma off-line.
  • Te da un rápido acceso alas palabras o frases que quieras en las páginas Web.
  • Imágenes y otros contenidos pueden ser descargados sin abandonar Opera Mini
Y recuerda que no tienes que tener un móvil para probar esta maravilla. Tan solo visita su Demo y listo.

Gracias a Más Que Accesibilidad.

martes, mayo 13, 2008

Conferencia Sitios Exitosos

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

Mañana miércoles 14 de mayo estaré en la Corporación Universitaria Remington presentando mi Conferencia Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario. La entrada es gratuita, así que están cordialmente invitados.

Lugar: Corporación Universitaria Remington
Fecha: Miércoles, 14 de Mayo
Dirección: Calle 51 N. 51-27 - Edificio Coltabaco Torre 1
   Parque de Berrio (Al lado de la Estación del Metro)
   Auditorio Ligia Posada de Váquez - Piso 10
   Medellín (Colombia)
Horario: De 6:00 PM a 8:00 PM

lunes, mayo 12, 2008

Reunión de Webmasters en Bogotá

usarte.org: reunión de Webmasters

Como resultado del Cocktail Cadius en Bogotá ha comenzado una nueva iniciativa: La Reunión de Webmasters (Bogotá).

Esta es una reunión quincenal para un trabajo académico y de formación entre todos los miembros, donde cada quien aporte desde su propia experiencia y formación...

La primera cita es este próximo viernes 16 de Mayo a las 6 p.m. en el Tecnoparque Colombia (Calle 54 No. 10-39 - Bogotá) y el tema a tratar será "Arquitectura de la Información".

Este es el evento en Facebook si deseas participar o deja tu confirmación en los comentarios del post.

No olvides inscribirte al RSS de usarte.org para que estés enterado de otros eventos en Colombia y si estás en otro país de habla hispana he aquí otros eventos que pueden ser de tu interés.

8 Herramientas Gratuitas para la Usabilidad

Free Usability Tools Online

En el blog de CSS Addict han recopilado 8 herramientas gratuitas que te servirán para evaluar la usabilidad de tu Web:
  • Taskee: Te ayuda en el proceso de comunicación y asignación de tareas. Le facilita la vida a tu grupo de trabajo a la hora de las revisiones y pruebas de tu sitio.

  • StomperScrutinizer: Una especie de navegador que emula un Eye Tracking.

  • CrazyEgg: Te da un "mapa de calor" con las áreas donde tus visitantes hacen Clic.

  • ClickHeat: Te muestra las áreas "calientes y frías" de tus páginas basadas, igualmente, en los Clics.

  • User Rec: Un plugin para Firefox 1.5 que graba la actividad del ratón. Puede ser útil para revisar lo que hace un usuario en tu sitio.

  • OptimalSort: Te ayuda a realizar un CardSorting (Técnica de categorización de contenidos).

  • DejaClick: Otra extensión para Firefox que igualmente te permite grabar lo que hacen tus visitantes.

  • Web Metrics: Un analizador de estadísticas con varias herramientas que te ayudarán con algunos problemas de usabilidad (chequeador de código, analizador de sesiones, entre otros.).
Gracias a ceslava.

Comparativa de Accesibilidad de las WCAG 1.0 y la Norma UNE 139803/2004

Comparativa de accesibilidad de las WCAG 1.0 y la norma UNE 139803/2004

En España la norma que rige en los aspectos de Accesibilidad Web es la UNE 139803/2004, en lugar de la WCAG 1.0 de la W3C. Sin embargo esta Norma se basa en las WCAG y se diferencian en poco.

Si estás en España y dentro de tu trabajo debes revisar la Accesibilidad Web, Olga Revilla en su blog Itákora ha publicado un archivo de Excel que te facilitará la comparación de ambas. En ella pone todas las normas de la WCAG y a lado su correspondencia con la UNE... De esta forma, cuando tengas que evaluar los puntos de prioridad 1 y 2 de la UNE, los puedes identificar rápidamente ordenando por la columna correspondiente de prioridad UNE. Si por el contrario tienes que evaluar según la prioridad 1 y 2 de la WCAG, pues lo mismo pero con la columna de prioridades WCAG.

jueves, mayo 08, 2008

Herramienta de Depuración para el Navegador Opera

opera DragonFly

Opera, uno de los mejores navegadores Web, ya cuenta con el pequeño detalle que le faltaba: Una herramienta de Depuración: Opera DragonFly. ¿Y eso para qué sirve? Simplemente, nos sirve a los desarrolladores Web a depurar nuestras aplicaciones Web.

Otros navegadores ya cuentan con una:
Esta noticia ha sido realmente una novedad, ya que lo he visto mencionado en gran cantidad de Blogs. Así que para no repetir los invito a leer el post de lanzamiento e introducción: Introduction to Opera Dragonfly o la explicación en español por Andrés Nieto: Probando Opera DragonFly Beta.

Publicadas las 3 Ponencias de la Feria Tiendas Virtuales

Feria de Tiendas Virtuales

Ya están publicados los videos de las ponencias de la III Feria de Tiendas Virtuales.

Inicialmente les comenté sobre: Usabilidad: Claves para convertir usuarios en clientes en manos de Daniel Torres Buriel (Slides en SlideShare).

Las nuevas ponencias publicadas son:
Ambas en manos de Eduardo Manchón

lunes, mayo 05, 2008

Experiencia de Usuario en Nokia

User Experience Evaluation in Nokia

Les comparto el artículo User Experience Evaluation in Nokia [PDF - 38 KB], en donde esta compañía describe su proceso de desarrollo de productos desde la perspectiva UX, discute los requisitos para una evaluación de UX y presenta los diferentes métodos que usan para evaluar la UX en las diferentes fases de su proceso de desarrollo.

Como es de esperarse, ellos utilizan desde prototipos en papel, en un proceso que busca tanto diseñar las nuevas experiencias de sus clientes, como mejorar continuamente sus soluciones existentes. Proceso que, además, comienza examinando las necesidades de sus usuarios y sus comportamientos.

Olvídate que Nokia es una empresa que fabrica móviles y aprende de este proceso para los desarrollos Web de tu compañía.

Actualización: Acabo de encontrar el sitio de BetaLabs de Nokia. Precisamente allí podemos descargar, probar y comentar las aplicaciones que están en estado Beta y en las cuales Nokia está trabajando. ¡Esto es lo que se llama inclusión! Todos los usuarios podemos participar del desarrollo e innovación de Nokia.

Gracias a InfoDesign y the product usability weblog.

domingo, mayo 04, 2008

Videos y Podcasts de IxDA Interaction 08

IXDA Interaction 08

A mediados de febrero te comenté sobre algunos videos de Interaction 08, la primera conferencia organizada por IxDA - The Interaction Design Association (La Asociación de Diseño de Interacción).

Hoy tengo el placer de informarte que ya han publicado oficialmente la mayoría de los Videos y Presentaciones de la Conferencia que reunió muchos de los grandes exponentes del Diseño de Interacción en Estados Unidos.

Gracias a IxDA.

100 Recursos Imprescindibles de Accesibilidad Web

WHDb: Your Daily Dose of WWW Goodness

Una muy buena recopilación de recursos sobre Accesibilidad Web (en inglés) la que publicaron en WHDb: 100 Killer Web Accessibility Resources: Blogs, Forums and Tutorials.

En ella encontramos Sitios Web, Tutoriales, Foros, Simuladores, Herramientas, Validadores y mucho más. ¡Muy recomendable!

Gracias a kabytes.

miércoles, abril 30, 2008

Ponencia de Daniel Torres Burriel

Feria de Tiendas Virtuales

Ya si podemos ver la Ponencia sobre Usabilidad que realizó Daniel Torres Buriel en la III Feria de Tiendas Virtuales en España. La presentación está publicada en 3 videos. ¡Para no perdérsela!

La ponencia se llama Usabilidad: Claves para convertir usuarios en clientes y los slides están publicados en SlideShare.

Top 100 Blogs de Diseño en Español

Top 100 Blogs de Diseño en Español

Si te interesa el Diseño Gráfico, he aquí un super listado: el Top 100 Blogs de Diseño en Español, publicado por nfg!

Excelente referencias, con conocidos de la casa como:
Recuerda que hace algunos meses igualmente recomendé Los Mejores Blogs de Diseño Gráfico, cuyo listado en español fue base para este nuevo.

Gracias a Tzek Blog.

lunes, abril 28, 2008

¿Qué es Diseño?



Artículo Original: What is Design? (Yes, all 10 definitions!)
Author: Frank Spillers, MS
Fecha: 30 de octubre de 2007
Traducido rápidamente por: Gabriel Porras
Visita el artículo original para leer el artículo completo en inglés.

Cuando el término diseño es usado puede significar muchas cosas, dependiendo de quién eres y qué conversación estás teniendo.

Debido a que la palabra “diseño” tiene muchos significados y para mucha gente, vamos a definirlo desde la perspectiva de un consultor de usabilidad, agrupando los “diferentes diseños” en 4 conjuntos:


DISEÑO PARA LA MENTE
Es el diseño que impacta los procesos cognitivos incluyendo la interpretación y entendimiento de la experiencia.

  1. Diseño de Interfaces de Usuario: Es el diseño y diagramación de las pantallas. Se enfoca en las interacciones del usuario y los comportamientos de la pantalla. Su objetivo es mejorar la “experiencia de usuario” o la usabilidad del diseño.

  2. Arquitectura de la Información: Es el diseño de esqueletos o “wireframes” con las interacciones en pantalla, de la diagramación, navegación y funcionalidades de un producto. Es usado para reseñar, conceptualizar y probar la funcionalidad inicial.

  3. Diseño de Interacción: Es el diseño que se enfoca en cómo el usuario interactúa con una página, aplicación o producto. Tiene un acercamiento orientado a la tarea, asegurándose que lo principal sea el flujo de la interacción.
¿Estás tres disciplinas del diseño son diferentes? No realmente. Su objetivo en el fondo es el mismo.


DISEÑO PARA EL CORAZÓN
Es el diseño que impacta los procesos sensitivos incluyendo los sentimientos y la emoción o las cualidades afectivas de la experiencia.

  1. Diseño Gráfico: Es el diseño del “look and feel”. Se focaliza en mejorar la apariencia de la diagramación, botones, colores, iconos y elementos de la marca, en mejorar o estilizar los aspectos del diseño.

  2. Diseño Interactivo: Este diseño es una disciplina híbrida que captura un poco de todo. Produce buenas piezas de Flash, animaciones, diseño gráfico y algo de programación con bases de datos o HTML.

  3. Diseño Emocional: Este diseño viene del campo de la usabilidad y el diseño de productos. Está involucrado con las cualidades sociales, ambientales, personales e íntimas de la experiencia de usuario. Este nos puede informar sobre el resultado de cualquiera de los otros tipos de diseño.


DISEÑO PARA EL CUERPO
Este es el diseño que impacta los procesos antropomórficos incluyendo los contextos sociales y físicos de la experiencia.

  1. Diseño Industrial: Diseña los productos físicos con los cuales nos relacionamos, por ejemplo los dispositivos móviles. El resultado: productos intuitivos, que se sienten, suenan, se ven y trabajan elegantemente.


METODOLOGÍAS/ENFOQUES INTEGRALES
Este último grupo presenta metodologías que agrupan las anteriores técnicas de diseño.

  1. Diseño Centrado en el Usuario: Este diseño coloca al usuario en el centro e involucra tres actividades principales: investigación de usuarios, prototipado y evaluaciones de usabilidad. Es iterativo por naturaleza.

  2. Diseño de Experiencia de Usuario: Un término relativamente nuevo que “mejora” el Diseño Centrado en el Usuario adicionándole un elemento más integral a la experiencia. Este diseño o, lo que es lo mismo, la Experiencia de Usuario, se puede considerar más como un acercamiento general y agrupador. No es un tipo de diseño de por sí, ya que sus entregables son los mismos de los Diseños para la Mente.

  3. Diseño de Experiencia: Este término es usado comúnmente como el abreviado de Diseño de Experiencia de Usuario, sin embargo es más ampliamente considerado como lo que llamamos Diseño Ambiental o el diseño de la experiencia en ambientes abiertos/públicos o de comercio. De nuevo, el Diseño de Experiencia, es una “sombrilla” que cobija todas las decisiones de diseño pero con una experiencia más vivencial. Este diseño hace uso del contexto, de los fenómenos sociales y ambientales, así como también de los sentimientos, percepciones e intuiciones del usuario.


En resumen: A lo mejor en este punto ya entiendes por qué el “diseño” puede ser tan ambiguo algunas veces. Así que la próxima vez que escuches “diseño”, te sentarás con la persona que hablas y definirás a qué “diseño” se refieren.

Gracias a InfoDesign.

Kit de Herramientas para Prototipado con PowerPoint

PowerPoint Prototyping Toolkit

Si podemos hacer prototipos de nuestras Webs con Fireworks y con Visio, cómo no vamos a poder hacerlos con PowerPoint 2007.

De acuerto a Long Zheng, PowerPoint se está volviendo una herramienta de prototipado muy popular dentro de Microsoft. Partes de Windows, Windows Live, Internet Explorer, Home Server y Expression Blend fueron prototipados con este programa.

Te invito entonces a que mires una charla de Manuel Clement, del equipo de Diseño de Microsoft, acerca del prototipado con PowerPoint 2007. Además descarga el Kit de Herramientas para Prototipado con PowerPoint y pruébalo tu mismo.

Gracias a guuui.com.

viernes, abril 25, 2008

Investigación sobre Preferencias de Interfaces

Fully Personal Interface

Fully Personal Interface es una investigación que pretende estudiar la relación que hay entre las características de los usuarios y sus preferencias en las interfaces.

Se trata de una encuesta en la cual te preguntan por tus gustos y gracias a todas nuestras respuestas se puede llegar a determinar, de cierto modo, los gustos, en cuanto a interfaces y de acuerdo a la edad, sexo, país, etc. Es obvio que para obtener resultados válidos la muestra tiene que ser muy grande, y con los más de 1.000 personas que se han encuestado no es suficiente, pero por algo se inicia.

Te invito entonces a que participes en esta encuesta, cuyos resultados son públicos y con los cuales podemos "jugar" en cualquier momento.

Por el momento sólo 40 hispanohablantes hemos respondido la encuesta (3 colombianos, 12 españoles, 7 argentinos, 4 chilenos...), pero fácilmente podemos hacer que crezca ese número.

101 Razones para NO Utilizar Flash

Embat Consultores

Flash se tomó el mundo... ¡Pero de la manera indebida! Siempre he comentado que ésta es una excelente herramienta Web, pero que su uso y abuso, la han convertido en una pesadilla a quienes nos interesan los Estándares Web.

Si tu eres de los que crees que Flash es la mejor herramienta para desarrollo de Sitios Web te invito a leer: 101 Razones por las que no utilizar flash.

En realidad no son 101 las razones: Son 13, pero todas ellas de gran valía. ¡Ah! Y lo que más claro debe quedarte es: Cuándo SI y cuándo NO utilizar Flash... Échale una ojeada.

jueves, abril 24, 2008

Cinco Principios para un Diseño Web Efectivo

Five More Principles of Effective Web Design

Nuevamente Smashing Magazine ha publicado un artículo muy interesante: Five More Principles Of Effective Web Design.

El diseño Web ha mejorado significativamente en estos últimos años. Es más amigable y más atractivo, y hay una buena razón detrás de todo esto: a lo largo de los años hemos descubierto que el diseño enfocado a la usabilidad y la experiencia de usuario es más efectivo.

Mencionan los siguientes principios (aunque te invito a leer el artículo original):
  • Usa un principio de mercadeo efectivo
  • Experimenta con pocos colores
  • Esfuérzate por un buen balance
  • Esfuérzate por la claridad
  • Redirecciónate hacia las necesidades de tus usuarios
Un fragmento de la conclusión: Un diseño Web efectivo no necesita ser bonito y colorido. Necesita ser claro e intuitivo.

Ah. Y te recuerdo estos otros artículos que nos complementan la información:

¿Por qué es Exitoso el iPhone?



¿Por qué es Exitoso el iPhone y en general todos los productos de Apple? Por lo que menciono en mi presentación Sitios Exitosos: Por la Experiencia de sus Usuarios. Y eso lo han corroborado en uiGarden con un Test de usabilidad del iPhone.

En este test: So… Does the iPhone live up to its hype? evaluaron a 5 usuarios con 4 teléfonos: un HTC TyTN, un Sony Ericsson W910i, un Nokia N95 y un Apple iPhone.

Sin lugar a dudas el mejor teléfono fue aquel más fácil de usar, es decir, aquel con el cual sus usuarios tuvieron una mejor Experiencia de Usuario: el iPhone.

Así que recuerda: No basta con que tu sitio funcione bien. Se necesita también que tus usuarios tengan una excelente experiencia. ¡Eso marcará la diferencia!

Gracias al Laboratorio Aragonés de Usabilidad, en donde encontrarás un resumen en español de lo que realizaron en este Test de Usabilidad.

Los 50 Mejores Tutoriales y Ejemplos de jQuery

Welcome to Noupe

Cada día salen más y mejores recursos sobre jQuery. Este es de visita obligatoria: 51+ Best of jQuery Tutorials and Examples. ¡La mayoría son excelentes recursos!

Y recuerda siempre la palabra clave: JavaScript No Invasivo (Unobtrusive JavaScript).

miércoles, abril 23, 2008

User Interface Workshop Barcelona



Para quienes están en Barcelona he aquí un Workshop bien interesante: User Interface Workshop - 6a Edición.

El curso está organizado en módulos, con lo que es posible apuntarse solamente a aquellas sesiones que más os interesen. Adicionalmente lo dictan excelentes expertos, de la talla de Eduardo Manchón y César Martín de Alzado.org.

El objetivo del Workshop es proporcionar una base teórica y práctica para el desarrollo de interfaces de usuarios.

La principal novedad respecto a cursos anteriores es la participación del equipo de Panoramio.com (Google): Eduardo Manchón hablará de interfaces para la generación de comunidades on-line y de José Florido impartirá una sesión sobre tagging y sistemas de navegación.

Gracias a la lista de Cadius y recuerda que pueden encontrar más eventos para España y Latinoamérica en nuestra agenda.

Validador para Móviles

Web Compatibility Test for Mobile Browsers

El Iniciativa Móvil de la W3C ha lanzado un nuevo validador especial para móviles: el Web Compatibility Test for Mobile Browsers (Test de Compatibilidad Web para Navegadores Móviles), el cual combina, en una sola página, un número de tecnologías que creen son las necesarias para una mejor experiencia Web, especialmente en los dispositivos móviles.

Cada una de estas tecnologías, 12 en total y entre las cuales evalúan: las transparencias PNG, soporte paga GZip, AJAX, SVG, Selectores de CSS3..., están representadas en un cuadro que se pondrá verde si el navegador pasa la prueba.

El test, aunque hecho para móviles, también permite evaluar los navegadores tradicionales:
  • Firefox 2.0: Pasa 9 de los test
  • Opera 9.24: Pasa 9
  • Safari 3.1: Pasa 9
  • Internet Explorer 7.0: Pasa 4 (¡Tan raro!)
Gracias a aNieto2k.

lunes, abril 21, 2008

Valida tu JavaScript

JSLint

Así como el código HTML de nuestras páginas se puede validar con el Validador de la W3C y las Hojas de Estilo con el Validador de CSS, también es posible validar nuestro código JavaScript con el validador JSLint.

Este validador NO es de la W3C, sino del Maestro Jedi: Douglas Crockford, fundador de JSON, JSMin y otra gran cantidad de trabajos en JavaScript.

Básicamente esta herramienta es muy buena para verificar la sintaxis, al igual, que las mejores prácticas en tu código JavaScript.

Hice mi prueba con un código de jQuery y me sacó gran cantidad de errores y advertencias, pero como no soy experto en Script no sé si es que no sirve para validar código de jQuery o si el código que generé no es tan bueno como parece... ¡Ups! Si alguien nos cuenta sería de gran valor.

Sabía de la existencia de esta herramienta desde hace años, pero hoy la recordé gracias al blog Robert's Talk.

domingo, abril 20, 2008

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

Comparto mi presentación Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario. Si tu Universidad está interesada en presentar esta charla, se pueden comunicar conmigo que lo haré con mucho gusto (y obviamente sin costo alguno).

¡Comentarios más que bienvenidos!

El Contenido NO es el Rey



Publico el artículo que escribí para Capire el mes pasado.

¿Cómo evalúas un sitio Web? ¿Por su contenido? Te cuento que eso es lo último que yo miro. Yo comienzo por su estructura, pues pienso que ésta es en realidad la parte importante.

Por supuesto: soy ingeniero y hago sitios Web. Es por esto, porque conozco el proceso de creación de un sitio Web, que me atrevo a decir tal blasfemia, por la cual he sido recriminado varias veces.

Definitivamente el contenido es importante. ¿Sin embargo, lo es a tal punto que no importe dónde y cómo esté publicado? Eso es lo que hay detrás de tan famosa frase: “¡El contenido es el rey!”.

Como expondré a continuación, aún teniendo el mejor contenido, éste degrada su calidad y hasta se puede volver inaccesible si no está desarrollado sobre una buena estructura. El contenido no es el rey si no hay detrás unas bases que permitan que el contenido sea accesible.

Comenzaré mi exposición seleccionando un contenido. Uno que indudablemente pueda ser considerado rey: el contenido de la biblioteca pública de tu ciudad. Imagina que tal contenido debe ubicarse en un nuevo lugar. ¿Cómo lo construiríamos? ¿Que deberíamos tener en cuenta?

Miremos algunos procesos y las personas que están involucrados en ellos para crear una excelente biblioteca, digna de nuestra ciudad.

  1. Ubicación
    Lo primero que hay que definir es dónde vamos a ubicar nuestra nueva biblioteca. Es nuestro trabajo buscar el lugar y con ayuda de un arquitecto definir uno adecuado para comenzar a construir. ¿Qué variables se deben tener en cuenta para ello? Simplemente que tenga buenas vías de acceso, que sea un lugar céntrico, entre otros detalles. El objetivo aquí es que a nuestra biblioteca pueda llegar fácilmente cualquier persona.

    Esto en una Web es la parte del “Findability”, traducido por algunos como Encontrabilidad. Si tenemos un sitio queremos que sea encontrado y, obviamente, que sea visitado por personas y buscadores. Aquí se pueden aplicar técnicas de SEO (Search Engine Optimization), es decir, que trabajamos para que nuestros visitantes potenciales nos encuentren y lleguen a nosotros fácilmente.

    El “Findability” es parte de la estructura. ¿Importante? Por supuesto. Imagínate una biblioteca que no la encuentre nadie, que esté en un lugar inaccesible o que para llegar a ella haya que dar mil vueltas.

  2. Iniciamos con las bases
    Una vez tengamos el lugar, podemos comenzar a construir el edificio y en cuanto a construcciones nadie mejor que un ingeniero civil (constructor). El se encargará de poner todas las bases sobre la cual pondremos nuestra nueva biblioteca.

    Esto en una Web significa que necesitamos un ingeniero para programar el sitio, ya sea desarrollándolo mediante un lenguaje como .Net o PHP, o mediante un generador de contenidos como Drupal, Wordpress, Joomla, entre cientos que hay. El ingeniero se debe encargar de proveer las bases para el contenido de la Web.

    Fíjate que si esta parte de la estructura no está bien concebida, no hay biblioteca y sin biblioteca no hay contenido. ¿Importante? Por supuesto. Imagínate un edificio sin unas buenas bases, que tan sólo se comience a debilitar cuando comencemos a colocarle todos los libros de la biblioteca o con todas las visitas de toda la comunidad.

  3. Diseño Exterior
    Ahora vamos a darle el toque elegante a nuestra nueva biblioteca. Si el ingeniero civil se encarga de las bases, del diseño exterior se encarga el arquitecto, quien nos hará, entre muchas otras cosas, la fachada, los laterales, los alrededores. Esto es algo importante porque seguramente querremos que nuestra nueva biblioteca tenga un toque moderno o elegante o sobrio o funcional o amigable o todas las anteriores… Eso dependerá de nuestro gusto y expectativas que tengamos del edificio que alojará la futura biblioteca.

    Esto en una Web es el diseño gráfico. La imagen del sitio definitivamente ayuda a hacer nuestro sitio más amigable, a tener su toque moderno o elegante o sobrio... Es la puerta de entrada a todos los contenidos que estamos ofreciendo.

    El Diseño Gráfico también es parte de la estructura. ¿Importante? Por supuesto. Imagínate una biblioteca que sea fea, que no resulte amigable o peor aún, que esté diseñada de una manera tan innovadora o extravagante que los visitantes a la misma no se sientan cómodos para entrar.

  4. Diseño Interior
    Y si hablamos del diseño exterior también debemos hablar del interior, que no sólo implica la parte estética sino también la estructural, como por ejemplo, en dónde están ubicados los libros en la biblioteca, al igual que el resto de secciones que debe tener un edificio (baños, zonas comunes, cafetería, oficinas…). Nuevamente, es nuestro arquitecto quien diseña los interiores del edificio. De igual manera debemos ayudarnos de un bibliotecólogo que se encargará de organizar todos nuestros libros y hacer el catálogo.

    Esto en una Web es la Arquitectura de la Información. Dentro de sus funciones está definir y organizar los contenidos, la navegación, la señalización, la búsqueda. En general es el encargado de organizar el contenido y hacer que pueda ser encontrado y gestionado fácilmente.

    La Arquitectura de Información también es parte de la estructura. ¿Importante? Por supuesto. Imagínate que en la nueva biblioteca no puedas encontrar el libro que buscas, que no puedas ubicar los baños, que cuando menos pienses estés perdido en ese mar de libros.

  5. Funcionamiento
    Adelantémonos un poco e imaginemos ya nuestra biblioteca está construida, organizada y funcionando. ¿Pero lo hace óptimamente? Es aquí donde entra el rol de Administrador. Esta persona debe, por ejemplo, definir los procesos de funcionamiento de la Biblioteca, procesos cómo horarios y préstamos, revisar la satisfacción de los usuarios, entre otras muchas cosas del funcionamiento en general de la misma.

    Esto en una Web corresponde al Diseño de Interacción y a la Usabilidad. El primero se encarga de diseñar la forma en que el visitante interactúa con el sitio (por ejemplo diseña el proceso de compra en una tienda y los diferentes formularios que se necesitan llenar), mientras que el segundo se encarga de determinar qué tan bien están diseñados esos procesos, si realmente le sirven a los visitantes actuales del sitio y cómo se pueden mejorar.

    El Diseño de Interacción y la Usabilidad también son parte de la estructura. ¿Importante? Por supuesto. Imagínate que en nuestra biblioteca una persona no pueda hacer “rápidamente” un simple préstamo porque el proceso o los requerimientos son muy engorrosos.

  6. Accesibilidad
    Nos falta algo. Lo que se llama la Responsabilidad Social, es decir, el compromiso que tenemos con nuestra propia ciudad. Hasta ahora nuestra biblioteca la hemos pensado para los visitantes tradicionales. Pero, ¿qué hay de aquellas personas con necesidades especiales? Aquí nuevamente llamaremos al Arquitecto para que implemente por ejemplo rampas y/o ascensores, para que puedan acceder las personas con sillas de ruedas. También podríamos crear un programa de lectura, donde personas voluntarias le lean a personas ciegas. En esta área se puede hacer mucho.

    Esto en una Web corresponde a la Accesibilidad y el trabajo aquí es hacer que el contenido esté disponible, no importando el dispositivo o las capacidades de nuestros visitantes. Además de Internet Explorer o Firefox hay gran variedad de programas y equipos que pueden navegar en nuestro sitio: lectores de pantalla (Screen Readers) y navegadores sólo texto por mencionar algunos. Lo más interesante de esta área es que también trabajan en pro de los móviles y los buscadores (imagínalos como personas ciegas), los cuales no tienen las mismas capacidades que los navegadores tradicionales.

    La Accesibilidad también es parte de la estructura. ¿Importante? Por supuesto. Imagínate que en nuestra biblioteca no pudiera entrar una persona en silla de ruedas, que un adulto mayor tenga serias dificultades en su ingreso y movilización, que una persona ciega no pueda participar de todo el conocimiento que nuestra ciudad ha acumulado…

Mira todos los factores que he tenido en cuenta. ¡Y faltan! ¿Lo habías pensado desde este punto de vista?

Como te darás cuenta, una excelente biblioteca para nuestra ciudad no la forman sólo los libros. Además de ellos se necesita un edificio bien construido con una excelente estructura. Esto es igual para un sitio Web: Uno bien hecho, además de tener un muy buen contenido, necesita una muy buena infraestructura debajo de él.

Si trabajas en diseño Web deberás reconocer los factores que acabo de presentar. Son los que se han agrupado bajo las Disciplinas relacionadas con la Usabilidad, los cuales inicialmente presentó Francisco Tosete en su Rueda de la Experiencia de Usuario y luego mejoró Olga Carreras en su Esquema de Disciplinas relacionadas con la Usabilidad.

Pero recuerda que la estructura es mucho más: es todo el trabajo que no se ve en un sitio, lo que es invisible. Es el mantenimiento que se le hace, son las estrategias de mercadeo que se implementan, son los servidores que lo hospedan, por mencionar algunos más.

El contenido es el rey porque es lo que se ve, pero lo que hay detrás, la infraestructura que lo sostiene también es muy importante y de mucha mayor envergadura, como nos lo presenta la analogía del Iceberg que APIS Design nos presentó hace algunos días.

Ahora respóndete, ¿el contenido es el rey?

viernes, abril 18, 2008

Ponencias de Daniel Torres Burriel



Daniel Torres Burriel es un español, líder en su país en el área de Usabilidad y su blog siempre está en mis favoritos. Últimamente ha estado muy activo dando algunas presentaciones obviamente sobre Usabilidad.

Por un lado te cuento que hoy publicó la presentación que utilizó en el Seminario sobre Periodismo 2.0 en Aragón, que realizó junto con el periodista Jorge Romance.

Por otro lado, el Laboratorio Aragonés de Usabilidad publicó su ponencia titulada "Convertir usuarios en clientes", la cual realizó en la Feria de Tiendas Virtuales en España. Personalmente he tenido problemas para cargar esta última ponencia. Si la logras ver me avisas. En todo caso seguro que ambas presentaciones pueden resultar de tu interés.

Prototipos Interactivos con Visio



La utilización de prototipos está cobrando más importancia en el desarrollo de nuestras Web y eso lo demuestran los recursos que nos encontramos día a día en la Web.

Hace tan sólo algunos días te presentaba como hacer Prototipos Interactivos con Adobe Fireworks y hoy, gracias a elclerigo!, los invito a leer Cómo crear prototipos interactivos en PDFs desde Visio.

Si no conoces este software te cuento que el Microsoft Office Visio es un programa de dibujo vectorial especialmente creado para hacer diagramas (de bases de datos, de flujo, de UML...).

Ah! ¿Y para qué me sirve un Prototipo Interactivo? De acuerdo al Espectro de Prototipos nos sirven para comunicar, discutir, evaluar y probar nuestros diseños y están en la fase de Proponer (después de "Jugar" y antes de "Especificar").

Si... Los prototipos me sirven inicialmente para (1) jugar con propuestas de diseño. Posteriormente para (2) comunicar y discutir los diseños que se han mejorado. Para finalmente (3) especificar el diseño final que hemos depurado. Y durante estos tres pasos, la calidad de los prototipos van mejorando y mejorando, comenzado con un simple boceto para terminar con uno de gran calidad y que me servirá como Guía de Desarrollo y de Especificación.

jueves, abril 17, 2008

Sueldos de los Profesionales de la Usabilidad

UPA 2007 Salary Survey

Hace unos días Alberto de la Calle, vía Cadius, nos informó que ya está disponible el Informe de Salarios de los Profesionales de la Usabilidad [EN - PDF - 312 kb] resultado de una encuesta que realizó la Asociación de profesionales de la Usabilidad (UPA - The Usability Professionals Association).

Se me había olvidado comentarlo por acá, pero afortunadamente Darcy lo hizo en su blog y nos sacó algunos daticos interesantes:

La encuesta fue respondida por profesionales de 34 países de distintas partes del mundo, incluso por chilenos (¡No aparece Colombia!).

Las principales conclusiones que puedo rescatar a modo de resumen son:
  • La mayor cantidad de profesionales (45%) tiene entre 26 y 35 años.
  • El 45% posee estudios de master.
  • El 27% tiene de 2 a 4 años de experiencia.
  • Las técnicas de medición más utilizadas son los test heurísticos y los expert reviews.
  • Una de las técnicas menos utilizadas es el Eyetracking (¿será porque pocos tenemos la suerte de contar con uno?).

¿Salarios?
  • Los hombres ganan más que las mujeres :(
  • Los sueldos han aumentado en 5 mil dólares (anuales) entre 2005 y 2007.
  • En promedio, según la encuesta, un profesional gana cerca de 83 mil dólares anuales (algo más de 12 millones de pesos mensuales en Colombia).
  • Los países con mejores salarios son Alemania y Estados Unidos, seguidos por Australia e Inglaterra. En sudamérica el primer lugar lo tiene Brasil.

Día W3C en España: Standards for Business

Día W3C en España: Standards for Business

El Día W3C en España es un evento que desde el año pasado se viene celebrando en Madrid, con el objetivo de facilitar un entorno en el que poder establecer un debate sobre el uso de los estándares web y poder conocer las experiencias de empresas y organismos a la hora de poner en funcionamiento los estándares.

La jornada de este año que lleva por título Standards for Business está estructurada en tres sesiones, orientadas a la aplicación de estándares en el mundo de la empresa. Bajo los epígrafes Web para todos, Web desde cualquier lugar y Web como base de conocimiento se cubrirar temáticas como accesibilidad, independencia de dispositivo, web móvil y web semántica, entre otros.

La participación como ponente está abierta a todo aquel que esté interesado en presentar sus ideas, proyectos, etc., relacionados con una o varias de estas temáticas.

La asistencia es gratuita pero el número de asistentes está limitado por el aforo de la sala, por lo que es imprescindible registrarse previamente.

Recuerda que más eventos en España y Latinoamérica los puedes encontrar siempre en nuestra Agenda de Eventos.

Video de un Test de Usabilidad con Prototipos de Papel

Corel

He aquí un interesante video que muestra cómo un test de usabilidad con prototipos de papel ayudó al equipo de usabilidad de Corel a encontrar algunos defectos en un diseño preliminar de un producto de creación de sitios web.



Gracias a guuui.com.

martes, abril 15, 2008

Capire: Edición Abril 2008

Capire: Revista de Estrategia e Interacción

Comenzamos el día con la lectura de Capire: Revista de Estrategia e Interacción, quienes mes a mes nos traen información muy interesante.

El listado de todos los artículos:

lunes, abril 14, 2008

Guía de Diseño Web Accesible

GDWA: Guía de Diseño Web Accesible

La Guía de diseño web accesible surge del problema con el que se encuentran muchos profesionales de la web a la hora de abarcar un proyecto desde el punto de vista de la accesibilidad.

Las pautas están ahí, y todo el mundo puede leerlas e intentar aprenderlas, pero a la hora de aplicarlo al trabajo diario es lo que más complicación y confusión conlleva.

El objetivo es intentar crear una guía que ayude al profesional de la web que quiere considerar la accesibilidad como un requisito más en su proyecto web, desde las etapas iniciales hasta las etapas finales de un proyecto.

Estos fueron los inicios de una excelente iniciativa que quedó parada hace algún tiempo. Sin embargo hoy renace en las manos de Rubén Lozano, Emmanuelle Gutiérrez y Carlos Casado M..

Para ello han dispuesto este Wiki (que es la Guía como tal) y una lista de correo en los grupos de Google.

Como podréis comprobar, el índice del WIKI está creado (es parte del trabajo que se hizo la vez anterior) y la idea es que entre todos vayamos llenando las diferentes secciones de que está compuesto, hasta conseguir una guía útil.

Tu misión, si decides aceptarla, es colaborar con la creación de esta importante Guía en Español. ¡Anótate en el grupo!

Visto en AccesoWeb.

Presentaciones y Podcasts de IA Summit 2008



Hoy se termina el iA Summit 2008, realizado en Miami (Estados Unidos). Una de las reuniones más importantes de Arquitectos de la Información en el mundo.

Si estás interesado en esta área te cuento que los Slides y Podcasts ya están disponibles: IA Summit 2008 Slides and Podcasts, con personajes de la talla de Peter Morville y Jared Spool.

domingo, abril 13, 2008

Tutoriales de Accesibilidad, HTML, CSS, JavaScript...

Webucator

Gracias a la Newsletter Web Design Update me encuentro con estos tutoriales gratuitos:
Aunque, para aprender Estándares Web (XHTML, CSS y JavaScript) siempre recomiendo los Libros sobre Estándares Web, nunca sobran este tipo de recursos.

Adicionalmente puedes encontrar estos otros tutoriales:
Ahí tienes para que te entretengas un ratico...

viernes, abril 11, 2008

jQuery no es el Único Framework de JavaScript



Aunque ya les hablé de jQuery, este no es el único framework para mejorar nuestra vida con el JavaScript.

Hoy, nuevamente Andrés Nieto, nos presenta otros frameworks. De consulta obligatoria.

Personalmente seguiré con The Almighty jQuery.

Actualización: En este otro enlace pueden encontrar estos y muchos otros paquetes de JavaScript calificados.

jueves, abril 10, 2008

Sobre CSS3 y jQuery

The Prototyping Spectrum

Gracias a Andrés Nieto, que siempre nos trae muy buenas noticias, me entero sobre buenas nuevas de los Estándares Web...

Por el lado del comportamiento, es decir del JavaScript, me entero de unas excelentes recopilaciones de Plugins para el Framework de JavaScript jQuery, el cual me encanta por su facilidad de generar scripts No Invasivos:

Por el otro lado, el lado de la presentación, es decir las Hojas de Estilo (CSS), nos cuenta sobre unas nuevas propuestas para mejorar el CSS, de mano del equipo de WebKit, las cuales se han recopilado en CSS3.info para su debate.

Todas las propuestas, pretenden convertir el lenguaje de maquetación CSS, en un lenguaje cargado de nuevas funcionalidades que enriquecerán sustancialmente las posibilidades que actualmente ofrece. Así que puede resultarte interesante enterarte del posible futuro del CSS.

Todo sobre El Prototipado

The Prototyping Spectrum

Todos deberíamos conocer y trabajar los Prototipos antes de comenzar a desarrollar cualquier producto.

Hace algunos días mencioné un muy completo artículo sobre Wireframes, Blueprints, Prototipos…, sin embargo hoy me encontré con este excelente esquema del Diseño de Prototipos: The Prototyping Spectrum: An overview of the issues, goals, tools, and phases of design prototyping [PDF].

Este es un pequeño afiche, en formato PDF, sobre el "arte del prototipado" con sus temas, objetivos, herramientas y fases

The Prototyping Spectrum PDF

Gracias a la lista IxDA (The Interaction Design Association).

viernes, abril 04, 2008

Ponencias de la Jornada Informativa sobre Accesibilidad Web

AENOR - Accesibilidad TIC

En el paso mes de marzo en España aconteció la Jornada informativa sobre Accesibilidad Web. Organizada por AENOR, estuvo dirigida especialmente a las Administraciones públicas, a propietarios de sitios Web financiados por estas instituciones, a las organizaciones que gestionan servicios públicos o a empresas que presten servicios por medio de sus sitios Web.

Ya están disponibles para decargar las ponencias de esta Jornada:Gracias a AccesibilidadWeb.com

jueves, abril 03, 2008

Navegadores Web para Móviles

Guía de Inicio de Genbeta

Una de las razones por las que Internet Explorer está dejando de ser "el navegador de la web" es porque Internet dejó de ser un medio para los computadores y poco a poco otros dispositivos están comenzando a navegar por la red.

Los dispositivos que ahora están tomando la vanguardia en Internet son los dispositivos móviles y para navegar en ellos necesitamos navegadores especiales, algunos de los cuales nos los presentan en Genbeta: Guía de inicio Móvil: Navegadores web.

Este post se suma a la serie Guía de inicio en donde previamente publicaron otros navegadores para Linux, Mac OS y Windows.

La variedad de navegadores es incríble. ¿Y tú? ¿Sigues usando y probando sólo con IE?

Cursos Gratuitos en Learning Space

LearningSpace

Gracias a Yusef les comparto otro recurso bien interesante: LearningSpace un espacio web de Open University en el que ofrecen acceso completo a formación virtual.

Dentro de los cursos que nos ofrecen gratuitamente y de nuestro interés están:

Actualización: De manos de Usándolo me acabo de dar cuenta de otro curso gratuito, nada más y nada menos que en el MIT: User Interface Design and Implementation.