Me ha gustado mucho el post 10 Errores Comunes de un Diseñador de Web de Marisol López en el blog UXPanamá.

Pero he convertido estos 10 errores en reglas para así tenerlas bien presentes:

1. Diseña para el cliente de tu cliente, no para tu cliente.
2. Haz un HomePage en el cual se distinga lo más importante.
3. Diseña acorde a tu cliente y su audiencia.
4. Utiliza pocos colores.
5. Utiliza sólo las animaciones necesarias.
6. Utiliza adecuadamente los elementos gráficos (iconos, tipografías, fotos…).
7. Haz entender claramente de qué trata el sitio Web.
8. Diseña un menú claro y consistente.
9. Valida tu HTML.
10. Revisa periódicamente las tendencias de diseño para la Web.

Siempre ten en cuenta estas reglas y estarás haciendo Webs que alta calidad. Y ahora que las tienes claras, te invito a leer los 10 Errores Comunes de un Diseñador de Web en donde encontrarás muchos ejemplos y referencias muy interesantes.

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

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.

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:

• Duopixel
• Intenta
• Arte Gami
• Tzek Blog de Diseño
• …

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.

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.

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:

• 10 Principios para un Diseño Web Efectivo
• Las 10 Pesadillas de la Usabilidad que Deberías Conocer
• 30 Conceptos de Usabilidad que Deberías Conocer [EN]

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

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?

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:

• People-centred designing
• Accessibility in interaction design
• Designing the user interface
• Design
• Managing Complexity: A Systems Approach

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.