La Usabilidad también tiene en cuenta las URLs

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.

Experiencia de Usuario en 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.

101 Razones para NO Utilizar Flash

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.

Valida tu JavaScript

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.

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.

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.

Todo sobre los Microformatos

Los Microformatos son un grupo simple y abierto de formatos para datos, diseñados inicialmente para humanos y en segunda medida para las máquinas, construidos sobre estándares existentes y adoptados masivamente.

Más claro con un ejemplo. Si tienes en una página Web tu contacto:

<div class="contacto">
    <p>
      <strong>Gabriel Porras</strong><br />
      cargo: Analista de Desarrollo<br />
      Intergrupo<br />
      email: ghporras@gmail.com<br />
      Medellin
      -
      Colombia
    </p>
  </div>

El microformato hCard, te invita a que lo reescribas así:

<div class="contacto vcard">
    <p>
      <span class="fn"><strong>Gabriel Porras</strong></span><br />
      <span class="title">Analista de Desarrollo</span><br />
      <span class="org">Intergrupo</span><br />
      email: <span class="email">ghporras@gmail.com</span><br />
      <span class="locality">Medellin</span>
      -
      <span class="country-name">Colombia</span>
    </p>
  </div>

¿Qué son entonces los microformatos? ¿Cuáles son sus beneficios? ¿Quiénes los han implementado? ¿Tienen futuro? ¿Qué herramientas existen para crearlos (fácilmente)? ¿Dónde encuentro tutoriales para aprender?... Tranquilo... Todas estas y muchas más preguntas ya las puedes responder en la excelente recopilación Microformats University: 100+ Articles and Resources.

¿No tienes tiempo? Mira entonces este resumen ejecutivo: Microformatos en Acción.

Actualización: En CSS Lab acaban de publicar la segunda parte de unos post sobre Microformatos. Con más ejemplos. Te invito a que los leas:
1. Un poco sobre Microformatos.
2. Microformatos 2 contra-ataca.

Wireframes, Blueprints, Prototipos, Storyboards, Mock Ups, Diagramas de contenido…

¿Qué es un Wireframe? Es una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.

¿Cuándo usarlos? ¿Qué ventajas tienen? ¿Qué información deben contener? ¿Cómo se hacen?

Todas éstas y muchas más preguntas en la Nueva Guía sobre Wireframes. ¡De lectura obligatoria! Gracias a Olga Carreras.

Correcciones a la WCAG

En manos del grupo WCAG Samurai, acaban de publicar unas correcciones y extensiones a las Directrices de Accesibilidad del Contenido Web [en] (Antes de leerlo deberías pasar por la introducción [en] que escribieron a este documento).

Sí! Correcciones a las tan conocidas y mencionadas WCAG (En inglés - En español).

Desde mayo del 2006, cuando publicaron el artículo To Hell with WCAG 2 este grupo de desarrolladores, encabezados por Joe Clark, el mismo del libro Building Accessible Websites, han trabajado en estas correcciones, debido a que no estaban muy contentos con el camino que tomó la W3C para crear las WCAG 2.

¡Lectura recomendable si trabajas con la WCAG y la Accesibilidad Web!

Gracias a la lista Web Design Update.

Resumen del Reporte de Accesibilidad de Jakob Nielsen

¿Recuerdas que en diciembre informé sobre el reporte de Accesibilidad: Beyond ALT Text:Making the Web Easy to Use for Users With Disabilities que Jakob Nielsen y su compañía Nielsen Norman Group publicó gratuitamente?

¿Ya lo leiste? ¿No? Pues no sabes de lo que te estás perdiendo. Como dice Olga: El documento no tiene desperdicio y su lectura es muy recomendable, por no decir obligatoria.

Así que para aquellos a los que les dé pereza leerse las 148 hojas en inglés, Olga Carreras ha publicado en su blog Usable y Accesible un breve resumen del estudio que realizaron y las conclusiones que extrajeron en forma de 75 directrices de accesibilidad. O lo lees o lo lees.

10 Errores Comunes al Implementar la Accesibilidad

Un sitio que siempre está dentro de mis lecturas es el de WebCredible, especialistas en Usabilidad y Accesibilidad en Inglaterra.

Para el mes de enero publicaron el artículo: 10 common errors when implementing accessibility, el cual me desconcertó. Dentro de los supuestos errores que mencionan tenemos: No insertes texto en campos de formulario vacíos, No utilices atajos de teclado (access keys), No utilices el atributo summary en una tabla, por mencionar sólo 3.

Estas son prácticas que trato siempre de llevar a cabo, así que mi pregunta fue inmediata: ¿Cuándo dejaron de ser buenas prácticas?

Consulté en la lista de AccesoWeb de Sidar y muy rápidamente Emmanuelle Gutiérrez y Restrepo, además de traducir el artículo en mención, lo comentó totalmente. Los invito a leerlo porque realmente es muy clarificamente.

Ah... E Inserta texto en campos de formulario vacíos, Utiliza atajos de teclado (access keys), Utiliza el atributo summary en una tabla... Son prácticas totalmente recomendadas...

Actualización: Igualmente en la lista han recomendado el artículo 7 errores de accesibilidad que se cometen a menudo que resulta interesante para leer.

10 Principios para un Diseño Web Efectivo

Artículo Original: 10 Principles of Effective Web Design
Author: Smashing Magazine
Fecha: 31 de enero de 2008
Traducido rápidamente por: Gabriel Porras
Visita el artículo original para ver ejemplos de cada principio.

La Usabilidad y la utilidad, y no el diseño visual, son los que determinan el éxito o el fracaso de un sitio Web. Puesto que el visitante de una página es la única persona que hace clic en el mouse y, por consiguiente, decide lo que quiere hacer, el diseño centrado en el usuario se ha establecido como un método estándar hacia el diseño Web comercial y exitoso.

No vamos a discutir los detalles de implementación (por ejemplo dónde debe colocarse la caja de búsqueda), como ya lo hemos hecho en otros artículos, sino que nos centraremos en los principios, heurísticas y estrategias para un diseño web efectivo – métodos que, usados apropiadamente, pueden guiarnos a decisiones de diseño más sofisticadas y a simplificar el proceso de percepción de la información presentada.

¿CÓMO PIENSAN LOS USUARIOS?
Básicamente, los hábitos de los usuarios de un sitio Web son diferentes de los hábitos de los compradores de una tienda. Los visitantes dan un vistazo a cada nueva página, examinan rápidamente algo del texto y hacen clic en el primer vínculo que les llama su atención o se asemeja vagamente a los que están buscando. De hecho, hay muchas partes de la página que ni siquiera miran.

La mayoría de los usuarios buscan algo de su interés (o que les sea útil) y que tenga un vínculo. Tan pronto lo encuentran le hacen clic. Y si en la nueva página no encuentran lo que estaban buscando, hacen clic en el botón Atrás y el proceso de búsqueda continua.

• Los usuarios aprecian la calidad y la credibilidad. El contenido es más importante que el diseño. Es por eso que sitios con muy buen contenido y no tan bien diseños obtienen gran cantidad de tráfico.
• Los usuarios no leen, sino que ojean rápidamente. Buscan puntos fijos que los guíen hacia lo que están buscando.
• Los usuarios son impacientes y quieren resultados instantáneos. Un principio simple: Si un diseño no hace que el usuario encuentre lo que busca, el diseñador falla y hace perder dinero a la empresa. Entre más tenga que pensar el usuario y la navegación sea menos intuitiva, más fácil será que los usuarios busquen otras alternativas.
• Los usuarios no seleccionan lo más óptimo. No examinan la página linealmente ni van de sección en sección buscando lo que necesitan. Por el contrario buscan rápidamente y toman la primera opción que encuentren, en lugar de buscar la mejor de todas las opciones.
• Los usuarios siguen su intuición. La mayoría de las veces los usuarios se las arreglan como puedan, sin siquiera leer la información que el diseñador ha puesto.
• Los usuarios quieren tener el control. Sobre su navegador y esperan que todo el sitio sea consistente. Es por eso que no les gustan los pop-ups ni que el botón Atrás les deje de funcionar. Así que es una buena práctica nunca abrir vínculos en nuevas ventanas.

LOS PRINCIPIOS

1. No hagas pensar a los usuarios
   
   De acuerdo a la primera ley de la usabilidad de Krug, la página web debe ser obvia y auto-explicativa. Tu trabajo al diseñar una página es que el usuario no tenga ninguna pregunta. Debes tener una navegación y una arquitectura intuitiva, una estructura clara, ayudas visuales moderadas y vínculos fácilmente identificables. El visitante debe entender qué hace la página, cómo funciona y cómo puede ir a otro lado. De eso se trata que no tenga ninguna pregunta.
   
   Una vez que tus visitantes entiendan de qué se trata tu sitio, les puedes explicar por qué es útil y cómo se pueden beneficiar de él.


2. No desperdicies el tiempo de los usuarios
   
   Si vas a ofrecer algún servicio o herramienta, trata de tener unos requisitos mínimos. Entre menos necesiten los usuarios para probar un servicio, más fácil lo harán. Ellos quieren “jugar” con él, en lugar de registrarse porque tal vez nunca vuelvan. Déjalos explorar y descubrir cuáles son tus servicios sin pedirles ni el correo.
   
   Un solo registro es suficiente para evitar que tus visitantes naveguen en tu sitio y reducir tu tráfico.


3. Haz que los usuarios enfoquen su atención
   
   Algunas partes de la interfaz de usuario atraen la atención más que otras. Obviamente las imágenes son más atractivas que el texto y la negrita atrae más que el texto plano. El ojo humano no es para nada lineal y los usuarios pueden identificar instantáneamente bordes, patrones y movimiento.
   
   Así que enfocar la atención del usuario a áreas específicas del sitio mediante el uso moderado de elementos visuales puede ayudar a que fácilmente vaya de un lugar a otro sin siquiera pensarlo. Este visitante estará más orientado y desarrollará más confianza en el sitio, y por ende en la compañía que visita. Entre menos tenga que pensar el usuario, mejor será su experiencia.


4. Esfuérzate por mostrarte
   
   Los diseños Web modernos son normalmente criticados por guiar a sus usuarios con unos procesos 1-2-3 muy atrayentes y por tener botones grandes con efectos visuales Pero precisamente estas guías son extremadamente útiles, porque guían al usuario de una manera muy amigable y simple.
   
   Dejar ver al usuario claramente las funciones disponibles es un principio fundamental del diseño de interfaces de usuario. No importa cómo se logre, lo que importa es que el contenido sea entendible.


5. Haz uso de una buena escritura
   
   Como la web es diferente de los medios impresos, es necesario ajustar el estilo de escritura a los gustos y hábitos de los usuarios.
   
   Evita nombres lindos, rebuscados, de mercadeo, específicos de la compañía, técnicos o no familiares. Si quieres que los usuarios creen una cuenta, usa “Regístrate” en lugar de “Comienza ahora”, que es aún mejor que “Explora nuestros servicios”.
   Una solución óptima para una escritura efectiva es:
   
   • Usa frases cortas y concisas.
   • Usa una diagramación que se ojee fácilmente (categoriza el contenido, usa múltiples niveles en los encabezados, usa elementos visuales y listas).
   • Usa un lenguaje objetivo y plano.


6. Esfuérzate por la simplicidad
   
   El principio “Hazlo Simple” (KIS: Keep It Simple) debería ser el objetivo principal del diseño de un sitio. Los usuarios raramente visitan un sitio por su diseño. Lo que buscan es información o servicios.
   
   Desde el punto de vista del visitante el mejor diseño es uno en sólo texto, sin publicidades. Es por eso que una versión para imprimir de las páginas es esencial para una buena experiencia de usuario.


7. No le tengas miedo al espacio en blanco
   
   Actualmente es difícil valorar la importancia de los espacios en blanco. No sólo ayudan a reducir la carga cognoscitiva, sino que también mejoran la percepción de la información. Cuando un visitante llega a una página lo primero que intenta hacer es examinar la página y dividirla en secciones y los espacios en blanco son esenciales en esta tarea.
   
   Las estructuras complejas son más difíciles de leer, examinar, analizar y de trabajar con ellas. Las estructuras jerárquicas reducen la complejidad (Ley de Simon): entre mejor logres que tus usuarios encuentren un sentido de jerarquía, tu contenido será más fácilmente percibido.


8. Comunícate efectivamente con un lenguaje visual
   
   En sus artículos de comunicación visual efectiva, Aaron Marcus declara tres principios fundamentales [en] implicados en el llamado lenguaje visual:
   
   • Organiza: dale al usuario una estructura conceptual consistente y clara. Conceptos importantes dentro de la organización son: la consistencia, la diagramación, las relaciones y la navegación.
   • Ahorra: haz lo que más puedas con tus elementos visuales. Los cuatro puntos principales a tener en cuenta son: simplicidad (sólo incluye los elementos importantes), claridad (ningún elemento debería presentar ambigüedad), individualidad (debe ser distinguible lo que realmente importa) y énfasis (los elementos más importantes deben ser los que más fácilmente se perciban).
   • Comunica: La interfaz del usuario debe mantener un balance en legibilidad, tipografía, simbolismos, visualización y color, para poder comunicarse efectivamente. Usa máximo 3 tipos de letras en cómo máximo 3 tamaños y un máximo de 18 palabras o 50-80 caracteres por línea.


9. Las convenciones son nuestras amigas
   
   Las convenciones son muy útiles para reducir la curva de aprendizaje y el tener que pensar cómo funcionan las cosas. Imagínate cómo sería si todos los sitios usaran un icono diferente para sus RSSs. ¡Toda una pesadilla para la usabilidad!
   
   Con ellas ganas la confianza y credibilidad de tus usuarios. Entiende qué es lo que esperan los usuarios de la navegación de un sitio, de la estructura del texto, del lugar de la búsqueda, etc.
   
   Por ejemplo traduce tu página a otro lenguaje como el japonés y pon a prueba el sitio con algunos usuarios. Si las convenciones están bien aplicadas, aunque la página esté en otro idioma, estos usuarios podrán ubicarse en ella.


10. Prueba temprano, prueba a menudo
    
    Este principio llamado TETO (Test Early, Test Often) debería ser aplicado en todo proyecto, debido a que estas pruebas de usabilidad a menudo dan gran conocimiento sobre problemas y situaciones.
    
    Sólo podrás saber con certeza que un diseño es mejor que otro analizándolo desde un punto específico, es decir: probando con un usuario.
    
    Algunos puntos importantes para que tengas en cuenta:
    
    • De acuerdo a Steve Krug, probar con un solo usuario, es 100% mejor que probar con ninguno y probar con uno al principio del proyecto es mucho mejor que probar con 50 al final. De acuerdo a la primera ley de Boehm, los errores son más frecuentes en la etapa de requisitos y diseño y entre más se demoren en removerse serán más costosos.
    • Las pruebas son un proceso iterativo, lo que significa que cuando diseñas algo, lo pruebas, lo arreglas y lo vuelves a probar.
    • Las pruebas de usabilidad siempre producen resultados útiles. Ya sea porque encuentres problemas que tienes o para ver que no tienes grandes fallas en tu diseño.
    • De acuerdo a la ley de Weinberg, un desarrollador no es el apropiado para probar su propio código. Lo que aplica también para los diseñadores. Ya has trabajado mucho en un diseño, lo conoces, lo que hace que no tengas una perspectiva diferente sobre él. Ya sabes cómo se hizo y cómo funciona, así que busca otras personas para que lo prueben.

REFERENCIAS

• Designing Effective User Interfaces por Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” por Gerald Weinberg
• “Designing Web Usability” por Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” por Jakob Nielsen
• “Don’t Make Me Think” por Steve Krug
• “Usability for the Web: Designing Web Sites that Work” por Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Design

¿Qué hace que un sitio Web sea bueno?

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.

¿Están Bien Asignados los Colores de Tu Web?

La programación web no es más que otra forma de vender un producto que has de hacer llegar a los ojos de los clientes y enamorarlos en la primera impresión....

Los colores es lo segundo que nuestro cerebro capta despues de la estructura, por ese motivo hemos de pensar muy a conciencia que colores usar para vender nuestro producto. Al igual que colocamos en la parte superior el título de nuestra página para que sea lo primero que vea nuestro usuario, hemos de pensar en el conjunto y crear un estructura homogenea que transmita unos sentimientos al usuario.

En el blog Estandares y Usabilidad de Aplicaciones nos quieren recordar la importancia de la asignación de los colores en nuestros diseños, y es por eso que publicaron estos muy buenos post:

• ¿Que quieres transmitir con tu web? (Original de Anieto2k)
• El significado de los colores (Original de WebUsable)
• Color, arquitectura y estados de ánimo (Original en Monografías)

¿Ya evaluaste si los colores de tu Web transmiten realmente lo que quieres?

Evaluación Heurística o Autodiagnóstico de Usabilidad

¿Deseas evaluar la usabilidad de tu sitio Web? Lo que siempre hemos leído es que hagamos pruebas con usuarios reales, pero también existen otras técnicas que nos pueden ayudar en esta tarea como la Evaluación Heurística.

Esta técnica consiste simplemente en responder un cuestionario, previamente hecho por expertos, y con las respuestas negativas que obtengas te darás cuenta qué puedes mejorar en la usabilidad de tu sitio Web.

Una excelente heurística y que te recomiendo tener siempre a la mano es la Guía de Evaluación Heurística de Sitios Web de No Sólo Usabilidad. Adicional a ella, yo recopilé algunas otras heurísticas (después del grupo de herramientas de CARD CORTING).

Toda esta introducción es para recomendarles una nueva heurística que he encontrado de la mano del Laboratorio Aragonés de Usabilidad: Autodiagnóstico de Usabilidad (para su uso es necesario registrarse gratuitamente).



Además de ser un muy completo cuestionario (43 preguntas repartidas en 11 secciones), de cierta forma está automatizado y al final te muestra un informe sobre tu sitio. ¡Muy recomendable!

Actualización: Los invito a revisar una nueva heurística que acaba de publicar Fran Tarifa.

Diagramación con Hojas de Estilo (CSS)

Algo sobre lo que siempre se habla en los Estándares Web es la diagramación mediante Hojas de Estilo - CSS. Y este recurso que acabo de encontrar me cae como anillo al dedo, porque precisamente hace 2 días estuve revisando un sitio que están rediseñando y !oh sorpresa la mía cuando veo un sitio con un gran toque gráfico pero diagramado totalmente con tablas!

Y es que para diagramar con CSS no se necesita ser un experto. Tan sólo tienes que:

1. En lugar de acomodar tus secciones/columnas en TDs de tablas hazlas con DIVs.
2. Busca la diagramación que corresponda a tu diseño (Encabezado con 2 columnas, encabezado con 3 columnas...).
3. Descarga el layout y acomoda los anchos de tu diseño.
4. Y comienza a montar.

¡Ah! Ya te estarás preguntando: ¿Y dónde busco la diagramación que cuadre con mi diseño (Paso 2)? Fácil: En 22 Recursos para Diagramar Fácilmente con CSS.

Precisamente el primero es el que generalmente consulto: Layout Gala. Pero como verás hay muchos más recursos de donde bajar tu digramación en CSS.

Gracias a 22 sitios útiles para crear layouts en CSS.

Gratis Reporte de Accesibilidad por Jakob Nielsen

Como regalo a sus lectores y clientes fieles, Jakob Nielsen y su compañía Nielsen Norman Group han publicado gratuitamente su reporte de Accesibilidad: Beyond ALT Text:Making the Web Easy to Use for Users With Disabilities

El título completo del reporte es: Más allá del Texto Alternativo: Haciendo la Web fácil de usar para usuarios con discapacidades - Guías de Diseño para Sitios Web e Intranets basadas en Estudios de Usabilidad de Gente usando Tecnología de Asistencia.

Este reporte fue publicado inicialmente en octubre del 2001 y contiene, entre otras cosas:

• El resultado de las pruebas de usabilidad en 19 sitios Web con usuarios discapacitados y que usan diversos tipos de tecnologías asistenciales.
• Datos recolectados en Estados Unidos principalmente.
• 75 guías detalladas de diseño.

Gracias a Free report on accessibility from Jakob Nielsen.

Mejores Prácticas para Diseño de Formularios Web

Si has trabajado aplicaciones Web sabes de la importancia de los formularios. Mientras que en un sitio tradicional sólo los vemos en la página Contáctenos, en una aplicación Web son el pan de cada día... Debes utilizar formularios para ofrecer un registro, para las búsquedas, para que tus clientes compren...

Ahora, ¿sabes hacer formularios usables y accesibles? El diseño de formularios es "toda una ciencia" y para demostrarlo los invito a ver la presentación Mejores Prácticas para Diseño de Formularios Web [en] de Luke Wroblewski, especialista en el área en Yahoo! Inc.

En ella nos da unas recomendaciones, basado en pruebas de usabilidad, soporte a clientes, mejores prácticas y pruebas de eye y site tracking. Recomendaciones en cuanto a la alineación de los label, los campos requeridos, tamaño de las cajas, agrupamiento, validación, mensajes de error, entre otros tópicos.

Si te interesa aprender más (estos no son más que los slides de una presentación), debes estar pendiente de su futuro libro: Web Form Design Best Practices.

Spry: El Framework para AJAX de Adobe

Los interesados en AJAX de seguro conocerán SPRY: la propuesta de Adobe para implementar AJAX en tu sitio Web.

¿Por qué se los quiero mencionar? Básicamente por dos cosas:

1. Me he dado cuenta que Adobe está trabajando con los estándares Web
2. Siempre han tenido muy en cuenta a los diseñadores, de tal manera, que la implementación resulte fácil para alguien no experto en programación.

Es claro que mientras los ingenieros usamos software del estilo de Microsoft Visual Studio, los diseñadores prefieren sin duda: Adobe Dreamweaver.

Ahora, ¿que Adobe está trabajando con los estándares Web? Pues así es como están promocionando este Framework: ¡AJAX para Todos!... Spry es un framework que facilita el rápido desarrollo de páginas con AJAX... Sin necesidad de ser un experto en JavaScript... Sin sacrificar tu interés en los estándares Web y tus buenas prácticas de desarrollo...

Los invito entonces a pegarle una ojeada al framework y a estos artículos que prometen mucho (además de los artículos hay una buena cantidad de ejemplos):

• Spry y los Estándares Web
• Mejora progresiva con Spry
• Separando la estructura del comportamiento - Spry no Invasivo
• Validando Spry

¿Quién ha trabajo este framework para que nos de sus impresiones?

24 Maneras de Impresionar a Tus Amigos

Ha vuelto el set de tutoriales conocido como 24 Ways. Esta ya es la tercera edición, que desde el 1 y hasta el 24 de diciembre publicará un tutorial de desarrollo Web. ¡Sí! Cada día publican un tutorial.

Todos son tutoriales de programación Web y de cuando en vez se les cuela alguno que tiene que ver con Accesibilidad y Usabilidad.

Les recuerdo algunos tutoriales que publicaron en ediciones anteriores:

• Improving Form Accessibility with DOM Scripting
• Practical Microformats with hCard
• Transitional vs. Strict Markup
• Debugging CSS with the DOM Inspector
• Accessible Dynamic Links
• Fast and Simple Usability Testing
• The Mobile Web, Simplified
• …

Ah bueno… Y para acabarlos de convencer de visitar este recurso, les comento que estos tutoriales están hechos por la crema y nata de la Web… Menciono personajes como Molly E. Holzschlag, Roger Johansson, Andy Clarke, Dave Shea, Cameron Moll y otros varios que no se quién serán pero que supuestamente son la crema y nata ; )