En el siguiente video/presentación, Ryan Singer de 37signals nos da una charla de 30 minutos sobre los principios del Diseño de interfaces.

Esta charla la realizó a finales de Septiembre en la conferencia WindyCityRails en la ciudad de Chicago (EEUU).

Muy interesante especialmente para nosotros los Ingenieros de Sistemas o programadores que llaman.

UI Fundamentals for Programmers by Ryan Singer from ChicagoRuby on Vimeo.

Visto en The fundamentals of interface design by Ryan Singer.

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.

Un error común en Internet es crear sitios Web sin pensar en sus usuarios. Los contenidos y la forma de presentarlos se definen con base en las políticas internas de las empresas y algunas veces, por no decir que muchas, es el enfoque errado.

Un sitio Web debe crearse pensando en sus visitantes. Esto es el Diseño Centrado en el Usuario. No es tomar toda la información que la compañía tiene para publicar, sino la que los visitantes necesitan encontrar.

Ejemplos claros de esto se pueden ver en sitios que dan la bienvenida al usuario con imágenes o animaciones, cuando los internautas buscan generalmente es información y servicios. Vemos sitios corporativos con un Home lleno de secciones (encuestas, datos económicos, titulares de prensa, noticias…), cuando el visitante lo que quiere es conocer la empresa y sus servicios.

Hoy quiero plantear el rediseño de un sitio Web. Haremos un rápido análisis del Home actual del Sena Virtual, y elaboraremos una propuesta de rediseño pensando en los posibles visitantes que debe tener este sitio.

¿Sabemos de quién estamos hablando? El Servicio Nacional de Aprendizaje (SENA) es un establecimiento que presta el servicio de Formación Profesional Integral gratuita en toda Colombia, el cual, aprovechando las bondades de Internet, ha ampliado su oferta educativa mediante cursos virtuales, los cuales se ofrecen a través del sitio Sena Virtual.

Este sitio es uno de los merecidos ganadores del Premio Colombia en Línea 2007 como Mejor Sitio de Aprendizaje en Línea en el país y sin lugar a dudas, la labor del Sena es estupenda, toda vez que le lleva educación a toda Colombia gratuitamente.

Ahora, ¿quiénes visitan este sitio? La metodología de “Personas” nos invita a hacer una descripción detallada de los usuarios, pero sin llegar a este análisis, considero que principalmente hay dos tipos de visitantes: los estudiantes actuales y los estudiantes potenciales del Sena Virtual. Seguro hay más visitantes: docentes, empresas interesadas en cursos para sus empleados, entre muchos otros. Pero creo, que las “personas” más importantes y en los cuales deberíamos estar más interesados son los Estudiantes.

¿Qué hacen ellos en el sitio? La metodología de “Escenarios” propone definir tareas comunes de nuestros usuarios (las “personas”). Para este ejemplo las simplificaré en estas tareas:

• Los estudiantes actuales necesitan, principalmente, ingresar al sitio para tomar sus cursos, e igualmente conocer los nuevos y/o próximos a realizarse.
• Los estudiantes potenciales, principalmente, necesitan conocer la oferta educativa del Sena, al igual que conocer el proceso de inscripción en los mismos.

Seguramente hay más tareas que necesitan hacer estos usuarios, pero me atrevo a indicar que estas son las principales.

Ahora, basados en los usuarios y tareas que definimos (que supondremos como acertadas), nos debemos preguntar: ¿el home actual del Sena Virtual ayuda a estos usuarios en sus tareas?

Veamos cómo está diagramado:

1. Encabezado: Su función es identificar el sitio. Aunque claramente está el logo del Sena y hay un slogan: “Comunidad de Aprendizaje” me parece que se puede mejorar. Primero porque cubre mucho espacio y segundo porque no cumple una buena práctica de-facto en cuanto a ubicación del logo. Actualmente está al lado derecho y debería estar al lado izquierdo.

   Así que nuestra propuesta sería reubicar el logo y colocarlo como Sena Virtual (para diferenciarlo del sitio del Sena). Adicionalmente podríamos redefinir el slogan como “La Comunidad Online de Aprendizaje del SENA”. ¿No les parece mejor? Y por último disminuiríamos el espacio que ocupa este encabezado.

2. Presentación: Aquí simplemente hay unas palabras de bienvenida junto con una imagen decorativa. También presentan el Premio Colombia en Línea que ganaron. ¿Esta información sirve a nuestros estudiantes? Realmente no. Si soy un estudiante activo necesito es estudiar y si soy uno potencial quiero conocer los cursos que me ofrecen. Los expertos en usabilidad recuerdan que es mejor listar los servicios que invitar a conocerlos. Igualmente el logo del Premio no da un valor agregado a los estudiantes.

   Así que nuestro rediseño eliminaría las palabras de bienvenida, reubicaría la imagen del Premio fuera de esta sección y aquí podríamos presentar 1 o 2 cursos que queramos resaltar, ya sea porque sean nuevos y/o porque estén próximos a comenzar. ¿Tenemos muchos cursos? Simplemente colocamos aleatoriamente uno de ellos cada vez que ingrese un usuario y colocamos un vínculo a “Cursos que comienzan esta semana” o “Nuevos cursos”.

3. Noticias: Esta sección me parece válida y aunque no ayuda directamente a cumplir las tareas de nuestros estudiantes, son de esas secciones que no pueden faltar.

   Así que en nuestro rediseño simplemente reduciría la cantidad de texto presentado por cada noticia y al final de ellas podríamos colocar un vínculo a “Anteriores noticias” para ofrecer un histórico.

4. Menú de Servicios: El menú es básico en todo sitio Web, ¿pero el actual está bien concebido? Hay 4 secciones: Aprendices, Biblioteca Virtual, Correo Electrónico y Encuestas.

   La primera sección “Aprendices” presenta los ítems que necesitamos: “Nuestros Cursos Ofertados” e “Iniciar Sesión”. Pero también hay un “Ingreso a la Oficina Virtual” y un “Curso de Inducción”, el primero sirve a los estudiantes activos y el segundo a los potenciales.

   Este menú podríamos mejorarlo separando los ítems que son para los estudiantes activos y los potenciales, al igual que haríamos una sección aparte para los cursos.

   Adicionalmente la “Biblioteca Virtual” y el “Correo Electrónico”, podríamos colocarlo en una categoría de Servicios, en donde seguramente se pueden colocar otros ítems.

   La sección de “Encuestas” sobra. Primero, no ayuda a los estudiantes en sus tareas. Segundo, si el Sena desea hacer una encuesta entre sus usuarios, es mejor enviarles un correo e invitarlos a responderla en una página preparada para ello.

   Finalmente debemos recordar que este menú nos debe dar acceso a cualquier página del sitio. Por lo tanto faltan ítems tan importantes como Quiénes Somos, Noticias, Herramientas (que actualmente están ocupando toda la columna izquierda), y algo tan importante como Proceso de Inscripción, el cual no encuentro en ninguna parte del Home.

   En resumen, en lugar de tener:

   1. Aprendices
      - Nuestros servicios ofertados
      - Iniciar sesión
      - Ingreso a la oficina virtual
      - Curso de inducción
      - Inglés para todos los colombianos
   2. Biblioteca Virtual
      - Biblioteca Virtual Sena
   3. Correo Electrónico
      - Correo MiSena
      - Reestablecer contraseña
   4. Encuesta
      - Colombianos en el exterior

   Podríamos ten
   er algo como:

   1. Oferta de Cursos (lo coloco de primero porque sirve tanto a estudiantes activos como potenciales)
      - Inglés para todos los colombianos (el cual está muy resaltado en el Home actual).
      - Clasificados por Categorías
      - Todos los cursos
      - Próximos a iniciar
      - Nuevos
   2. Estudiantes Activos
      - Inicio sesión
      - Ingreso a la oficina virtual
   3. Estudiantes Nuevos
      - Matrículas
      - Curso de Inducción
      - Herramientas necesarias (requisitos)
      - Información para Extranjeros (Recuerden que estamos en Internet a la vista de todo el mundo. ¿El Sena Virtual ofrece educación gratuita también a extranjeros? Aquí se puede responder esta pregunta. Por lo menos este es un vínculo que nunca falta en las Universidades estado unidenses y europeas).
   4. Sena Virtual
      - Quienes Somos
      - Noticias
      - Contáctenos (¡En el sitio no lo veo por ningún lado!)
   5. Servicios (Lo coloco aparte y no dentro de Estudiantes Activos porque, según leí, también se ofrecen a docentes, proveedores, etc.)
      - Biblioteca Virtual Sena
      - Correo Electrónico

   Este puede ser un mejor menú. ¿El ideal? ¡Definitivamente no! Necesitamos conocer todo el sitio para poder completar los ítems que faltan y verificar que los que están si están bien ubicados. Porque como dijimos anteriormente, éste debe servir para navegar todo el sitio.

   Mínimo las 3 primeras categorías son muy acertadas para nuestros visitantes más importantes: los estudiantes (activos y potenciales).

   Adicionalmente aunque la agrupación de los ítems puede parecer lógica, sería ideal apoyarnos de una metodología tipo Card Sorting, en la cual son los mismos usuarios quienes nos ayudan a hacer la categorización. Al fin y al cabo ellos son quienes harán uso del mismo.

   En cuanto a diseño, es una gran pérdida de espacio el utilizar botones para cada uno de los ítems. Tan sólo observemos que este menú en una pantalla de 1024×768 sólo permite ver 5 opciones. Por lo tanto, es recomendable utilizar un menú que ocupe un espacio menor.

5. Enlaces a sitios: Estos vínculos a sitios “amigos” no ayudan para nada en las tareas de nuestros estudiantes. Es otra sección de esas que hay que tener (por lo que he visto en los sitios del gobierno Colombiano) pero definitivamente no deben estar en el menú.

   Para este caso en nuestro rediseño los colocaríamos en la parte inferior de la página, como he visto que lo hacen otros sitios del gobierno.

6. Herramientas: Finalmente esta columna presenta las herramientas necesarias para tomar los cursos del Sena Virtual. ¿Importante? Por supuesto. Pero la pregunta que debemos hacernos es: ¿Deben estar en el Home?

   Si miramos desde la perspectiva del estudiante activo: no sirve, porque ya debe tener estas herramientas. Y desde el punto de vista del estudiante potencial esta es una información que sobra si la comparamos contra los cursos, toda vez que él está buscando qué estudiar. Lo que necesita para hacerlo sería posterior.

   Así que esta columna la podemos eliminar y su contenido lo podemos colocar dentro de la información para los estudiantes nuevos. Es importante resaltar, adicionalmente, que cada curso debería tener la información de las herramientas que se necesitan para cursarlo.

Hasta aquí el contenido del Home actual. Volvamos a evaluar las tareas de nuestros estudiantes.

• Los estudiantes actuales necesitan, principalmente, ingresar al sitio para tomar sus cursos, e igualmente conocer los nuevos y/o próximos a realizarse.
• Los estudiantes potenciales, principalmente, necesitan conocer la oferta educativa del Sena, al igual que conocer el proceso de inscripción en los mismos.

Para todos los estudiantes (tanto los activos como los potenciales) tenemos en el menú todas las opciones que necesitan (las 3 primeras secciones). ¿Pero es suficiente? ¡No!

Si el Home debe destacar por algo es por hacer más rápidas y fáciles las tareas de nuestros usuarios principales.

La tarea principal del estudiante activo es ingresar a sus cursos, por lo tanto sería ideal, que en el Home tengamos una sección de Login. En cuanto a la oferta de cursos ya mencionamos que en la sección 2 tendríamos 1 o 2 cursos resaltados.

Sólo nos faltaría, para el estudiante potencial, la información sobre cómo matricularse.

Así es que hemos completado nuestro nuevo Home del Sena Virtual así:

• Un nuevo encabezado con logo y slogan.
• Un nuevo menú.
• Una sección con un curso resaltado.
• Una sección de login.
• Una sección con la información para matriculas.
• Una sección de noticias.
• El infaltable pie de página

En cuanto a diagramación se podrían plantear una propuesta como esta:

Esto es un prototipo de baja fidelidad: un primer acercamiento, una versión en borrador del Home.

Es una propuesta, que si nuestra definición de usuarios y tareas está correcta resulta muy válida. Pero, es una propuesta de varias que se pueden generar. Podemos generar otras mostrando las 4 secciones principales en otro orden y en otras diagramaciones.

El proceso continúa, pero el ejercicio que quería presentarles ha finalizado.

Para terminar, ¿qué te ha quedado? Puedes hacer un rápido ejercicio definiendo los usuarios que más usan tu sitio. Luego define las tareas que ellos realizan en él. Ahora pregúntate: ¿mi Home les ayuda a estos usuarios a hacer sus tareas rápida y fácilmente?

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.

Gracias al excelente blog Accesibilidad en la Web les voy a presentar dos métodos para evaluar la accesibilidad de un sitio Web.

El primero es una mediante una Metodología Práctica, originalmente concebida por la Unidad de Investigación ACCESO de la Universidad de Valencia (España) en el 2001 (si… aunque suene viejita es muy efectiva). Consta de cuatro pasos:

1. Análisis con un navegador sólo-texto (aquí y aquí puedes encontrar varios).
2. Análisis con los navegadores gráficos habituales (dicen que con IE y Netscape, pero a estas horas de la vida sería con IE, Firefox, Safari, Konqueror, etc.).
3. Análisis con el navegador Opera (¡Se los dije, se los dije! y bueno… no olviden también testear con móviles)
4. Análisis final con Bobby (ahora conocido como WebXact) o TAW (aunque este paso es opcional, yo lo pondría obligatorio y con el Examinator – Si yo sé… Soy su fan Nro. 1 jejeje).

Más detalles en el blog de Sergio.

El segundo método es con una nueva herramienta que llegó a la escena. Se trata del aDesigner de IBM. Este programa “además de evaluar la accesibilidad según las pautas del W3C o Section 508, realiza dos análisis y simulaciones muy interesantes: cómo ve la página web una persona completamente ciega que utilice un lector de pantallas o cómo ve una página web con una visión reducida (por la edad o por alguna enfermedad).” ¿Ya mencioné que es gratuita? ¿Qué esperas para descargarla?

Igualmente, más información de las manos de Sergio.

El pasado jueves 4 de octubre fue la entrega de los Premios Colombia en Línea 2007. Los ganadores fueron:

• Premio Especial: Mejor Desarrollo Móvil Celular – Comcel: Hubo un premio para Categoría Estudiantes y otro para Avanzados. Pero no hay URLs disponibles.
• Mejor Blog en Línea: Se Nos Cayó El Sistema.
• Mejor Sitio de Aprendizaje en Línea: SENA Virtual.
• Mejor Sitio de Comercio Electrónico en Línea: TuBoleta.com.
• Mejor Sitio de Empresa Pyme en Línea: Rines TYM.
• Mejor Sitio Estatal en Línea: Alcaldía Santiago de Cali.
• Mejor Sitio de Finanzas en Línea: Bancolombia.
• Mejor Sitio de Gran Empresa en Línea: Suzuki.
• Mejor Sitio de Noticias en Línea: El Tiempo.
• Mejor Sitio de Alcaldía en Línea: Municipio de Maní.
• Mejor Sitio de Política en Línea: Desierta.
• Mejor Sitio de Promoción de Colombia: Desierta.

Veamos qué tan bien hechos están estos sitios, que representan supuestamente, lo mejor de Internet en Colombia.

Para este pequeño análisis recurrí a los validadores que más me gustan:

• El Validador de la W3C.
• El Examinator.

Como podemos ver en la siguiente tabla en cuanto a Estándares Web no están como bien. Ningún sitio validó, aunque se puede destacar el sitio de El Tiempo que sólo tuvo 4 errores. Por otra parte, el sitio de Rines TYM ni siquiera se dejó validar (¡Oh Sorpresa! Está hecho en Flash).

En cuanto a Accesibilidad, parece que NO es un criterio que los jurados hayan evaluado para la selección de los ganadores. De acuerdo al Examinator, cuya calificación va de a 1 (muy mal) a 10 (muy bien), estos sitios no son para nada accesibles.

Adicionalmente quise revisar estos sitios con el emulador de Opera Mini y para mi sorpresa todos los sitios (excepto el de Rines TYM – hecho en Flash) cargaron bien. Aquí el punto se lo lleva Opera que adapta excepcionalmente los sitios tradicionales al diminuto tamaño de los celulares.

En las pantallas siguientes se puede ver cómo todos los sitios “parecen navegables” (no lo comprobé), destacándose positivamente el blog Se Nos cayó El Sistema y El tiempo, y negativamente Rines TYM, el SENA Virtual y TuBoleta (estos dos últimos por sus grandes imágenes que ocupan toda la pantalla del móvil en el Home).

Se Nos Cayó El Sistema:

SENA Virtual:

TuBoleta.com:

Rines TYM:

Alcaldía Santiago de Cali:

Bancolombia:

Suzuki:

El Tiempo:

Municipio de Maní:

Esta evaluación ha sido muy ligera, pero creo que muestra la calidad de los ganadores. Considero que aquí no está representado lo mejor de la Web en Colombia y me gustaría saber bajo qué criterios se han seleccionado estos ganadores. El año pasado hice una propuesta de cómo consideraba que debería ser una selección de este tipo y creo que, como en años anteriores el criterio pareciera ser “el gusto” de los jurados (no expertos en Web). Es decir que no parecería existir un método concreto de selección.

Ahora, tampoco me mal interpreten y crean que estoy diciendo que esto es de lo peorcito que hay. El contenido y función de varios de estos sitios es excepcional (Ej: Se nos cayó el sistema, SENA Virtual y TuBoleta.com). Igualmente El Tiempo me parece excelente. Sin lugar a dudas es el mejor sitio de Noticias en Colombia (aunque con escasa competencia). Sin embargo no creo que esté bien visto que gane un organizador del evento (Sí, El Tiempo es uno de los organizadores), al igual que tampoco me parece que un sitio hecho en Flash sea un ganador.

Los sitios pueden tener el mejor contenido, pero para qu
e sean lo mejor de Colombia deberían ser también los mejor construidos. ¿O qué opinas? ¿Consideras que estos sitios representan lo mejor de la Web de nuestro país?

¿Quién no conoce UML? Si estás en el área de desarrollo de sistemas seguro lo trabajarás: “es el lenguaje de modelado de sistemas de software más conocido y utilizado en la actualidad“.

Ahora les traigo otro lenguaje de modelado pero especialmente hecho para los Arquitectos de la Información…

Se trata del Lenguaje de Modelado Universal para la Arquitectura de la Información (Universal information architecture Modeling Language – UiaML), “un lenguaje de modelado simbólico como UML, propuesto como herramienta de soporte para los arquitectos de información”.

Aunque está en proceso de desarrollo, en su sitio oficial ya pueden encontrar la Guía de Referencia y algunos artículos con ejemplos (howto’s).

Si la Arquitectura de Información es tu área, no dudes en echarle una ojeadita.

Gracias a InfoDesign.

En el desarrollo de sitios web accesibles uno de los problemas que se encuentran es con la metodología que se emplea para evaluar la accesibilidad del sitio.

Hay diferentes herramientas de evaluación y sabemos que la evaluación manual es la primordial, y aún con esto, nunca se tiene claro si se ha llegado a una correcta conformación con las pautas WCAG 1.0 del W3C.

Por ello para crear una metodología unificada, para guiar a los desarrolladores y evaluadores, se unificaron 3 proyectos europeos, EIAO, Support EAM y Ben ToWeb, que ahora forman parte de un proyecto llamado WAB Cluster.

El objetivo de este grupo es desarrollar una Metodología Unificada de Evaluación Web (UWEM) y actualmente ha lanzado la versión 1.1 que se puede ver en la web del grupo y continúa abierta para recibir sugerencias y consultas para mejorarla.

La traducción al español se puede encontrar en Technosite.

Vía: seraccesible

Actualización: Gracias a Accesibilidad, Usabilidad y Estándares Web me doy cuenta de que en España hay una norma, la UNE 139803:2004, la cual se basa en igualmente en la especificación WCAG 1.0.

Su listado de requisitos pueden ser igualmente de importante referencia en material de construcción y evaluación de sitios accesibles. Y bueno… La norma puede descargarse gratuitamente.