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.

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.

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.

4. 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.
5. 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.
6. 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.

7. 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.

8. 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.
9. 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.
10. 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.

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!

Los recursos mencionados en esta presentación se pueden encontrar en este otro post.

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?

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.

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.

Para esa edición me han invitado a escribir un artículo, el cual espero que disfruten y me comenten.

El listado de todos los artículos:

• El problema con web 2.0, ¿puede funcionar para la empresa? por Alexander Wilms (Coordinador) de Central European Business Analysis Group.
• En qué fallan los sitios web de las grandes empresas II por Jorge Garrido, director de proyectos en Amable.
• Centraliza tu arquitectura de información por Gerry McGovern, creador del proyecto Customer Carewords.
• Cortina de Humo por Luiz Agner, Doctor en Diseño de la Universidad Católica de Río de Janeiro.
• El contenido no es el rey por este servidor.

Artículo Original: What Makes a Good Website?
Author: APIS Design
Fecha: 25 de enero de 2008
Traducido por: Gabriel Porras

Ah, si, la pregunta del millón de dólares. ¿Qué hace que un sitio Web sea bueno? ¿Qué hace que sea malo? Todos queremos saberlo. Bueno, la belleza depende del ojo del espectador, por supuesto, pero hay cosas esenciales. Aquí hay 7 para obtener un buen sitio Web:

1. Idea/Objetivo
Esta es la cruz de la que hablamos cuando les hablamos. Nos escucharás usar mucho la palabra “objetivo”. ¿Por qué tienes un sitio Web? ¿Cuál es su propósito? ¿Cómo vas a medir su éxito?

2. Diseño
Aquí hablamos de cosas como la selección de color, alineación, interés visual y metáforas que tengan sentido.

3. Mensaje
El contenido es el rey. Cada página de tu sitio Web necesita un fin. Necesitas entender cuál es tu audiencia objetivo y qué quieres que hagan. Luego dárselos, con la información apropiada y un llamado a la acción que entiendan fácilmente.

4. Arquitectura
¿Cómo están organizadas tus páginas? ¿Son intuitivas? ¿Tu audiencia objetivo las entederá? Piensa en cómo son de diferentes Disney.com de Microsoft.com.

5. Usabilidad y Accesibilidad
El HTML todavía es un lenguaje y necesita estar bien formado y ser accessible. No todas las personas que visitan tu sitio están perfectamente capacitadas. Algunas de ellas tienen discapacidades, algunas tienen conexiones lentas, algunas no podrán instalar el plug-in de Flash. Entender tu audiciencia objetivo y tus objetivos te ayudarán a definer tus estándades de usabilidad y accesibilidad, sin lugar a dudas.

6. Mercadeo Online
Recurrir a los buscadores es todo un juego. Hazlo mal y terminarás prohibiéndote tu mismo en ellos. Hazlo bien y serás premiado con una gran cantidad de tráfico gratuito y del que necesitas. No es difícil, sólo toma experiencia y planeación.

7. Lo técnico
¿Es tu dominio fácil de recordar? ¿Es tu proveedor de Internet confiable? ¿Tienen otros 20.000 sitios hospedados en tu servidor? ¿Soportan las tecnologías que tu sitio necesita para crecer?

Componentes de un Sitio Web Exitoso
Son más numerosos de lo que crees. Y por eso hemos diseñado un diagrama para ilustrar algunos de los componentes importantes de un muy buen sitio Web.

Versión original en inglés:

Versión traducida al español (gracias a disacido):

Si deseas conocer algunos casos de estudio (en inglés) visita:

• Good Website #1 Dell.ca
• Good Website #2 FoodNetwork.com
• Bad Website #1

Gracias a Anieto2k.

Actualización: Otro gráfico titulado El iceberg de la experiencia de usuario, que muestra esta misma idea, lo acaban de reseñar en el blog de UsoLab.

Comenzaron a publicar los videos de las presentaciones del Segundo Gran Encuentro Italiano de Arquitectura de la Información, evento que sucedió en Noviembre del año pasado.

La mayoría de las presentaciones están en Italiano, pero las de Eric Reiss y Jess McMullin están en inglés así que pueden ser de interés para muchos.

En próximos días publicarán los videos faltantes y las memorias.

Gracias a InfoDesign.

No Solo Usabilidad ha sido punto de referencia para mi, y estoy seguro que para muchos de mis lectores. Y como regalo de navidad han publicado un excelente artículo titulado La Diagramación en la Arquitectura de Información en manos del Cubano Rodrigo Ronda León.

Igualmente Daniel Torres Buriel lo comenta e incluye otros enlaces muy interesantes en Arquitectura de información y sus elementos asociados.