• Titular.
• Metadatos (fecha, autor, etiquetas, etc.).
• Cuerpo de la noticia.
• Opciones de la noticia (compartir, imprimir, tamaño de la tipografía).

Todavía se juega con la distribución de estos elementos entre sí y en la página, estudiando la forma óptima para lograr la mayor fluidez comunicativa.

El titular está claro que debe ser lo primero, con una letra bien grande. El problema viene para saber qué debe ir después. Las opciones son tan variadas como válidas. Miento, hay opciones que no tienen sentido. Una de ellas, la he encontrado en el periódico Levante – EMV: mostrar las opciones para aumentar o disminuir el tamaño del texto al final del artículo –más que eso, detrás de la publicidad que “cierra” el mismo. El usuario encuentra esas opciones al finalizar, al haber leído ya, el artículo.

Como punto a favor, la opción de enviar página, en esa misma posición final, “fuerza” a que el lector se dirija al final del artículo, momento en que teóricamente acaba de leer, para poder enviar la noticia por email.

¡Bonus quisquilloso! Un último punto final en referencia a la calidad del texto de las opciones: ¿Qué significa “Reducir texto”? ¿Significa que reduce la cantidad de texto de la noticia, resumiéndola (¡qué cómodo!)? ¿O significa que reduce el tamaño de la fuente empleada en el texto? Mi propuesta: “Reducir tamaño del texto” (en equilibrio entre tecnicismo y gente normal ).

La mayoría son evidentes, visibles en todos los navegadores. No obstante, como dicen nuestros amigos anglosajones, the devil is in the details. En Google lo saben. Muestra de ello es la adaptación de la barra de scroll que aparece únicamente en los navegadores webkit, muy similar a la que se emplea en iOS y en el próximo OSX Lion.

Estas ligeras diferencias entre navegadores, que no afectan (¿o sí?) a la experiencia de usuario me recuerdan al planteamiento de Andy Clarke en su imprescindible Hardboiled Web Design de aceptar las diferentes capacidades de los distintos navegadores y, cuando sea posible, jugar con ellas a tu favor.

Sin embargo, se me plantea la duda sobre la idoneidad de dicha alteración. De vez en cuando, investigo las nuevas posibilidades que ofrecen CSS3 y otras propiedades propietarias de Mozilla y Webkit para aprovecharlas de cara a mejorar los sitios web en los que trabajo. Cuando me encontré con este post acerca de cómo estilar la barra de scroll, mi primera reacción fue una agradable sorpresa. Sin embargo, se debe estudiar más a fondo las implicaciones y consecuencias de transformar/estilar elementos de interfaz nativos. Tengo pendiente un post sobre ello, pero ya os puedo adelantar que apuesto por no alterar dichos elementos.

** Sí. Internet Explorer permite desde hace tiempo alterar la combinación de colores de las barras de scroll. No es exactamente lo mismo y, en el 99% de los casos, el resultado era terrible.

Transcribo el texto del bloque que llama mi atención (el resaltado en negrita es mío):

Nota: el Administrador de configuración que ve en la parte superior no es una imagen, es el Administrador de configuración real. Haga clic en las fichas para ver los diferentes paneles y haga clic en la opciones de éstos para cambiar los ajustes de Adobe Flash Player.

En este caso, tenemos un problema de coherencia visual: contenedor (página web) y contenido (Administrador de configuración) no guardan relación gráfica alguna, especialmente en el aspecto de legibilidad (escasa altura de línea y fuente mal suavizada). Dicho problema es un grave fallo de usabilidad ya que el usuario se siente desconcertado ante la disparidad de la apariencia gráfica de contenedor y contenido. Tan grande es el fallo que ha propiciado la colocación de una nota explicativa sobre cómo utilizar la página.

Mención especial merece la retahíla explicativa que acompaña al administrador (varios párrafos); señores, si hace falta tanta explicación, algo -más- falla. Además, el copy es mejorable, en la nota deberían sustituir “fichas” por “pestañas”.

El rellenado de un formulario es uno de los procesos más tediosos para el usuario. La voluntad y ganas de completar un formulario es inversamente proporcional al número de campos a rellenar.

Generalmente, en los formularios se entremezclan campos obligatorios con opcionales para procesar una solicitud (desde introducir un comentario hasta realizar una compra). ¿Para qué solicitar datos que no son estrictamente necesarios? Si no son obligatorios ¿por qué debería molestarse el usuario en rellenarlos?

Por otro lado, el criterio que marca cuando un campo pasa de ser opcional a obligatorio suele venir pautado por aspectos de marketing; así que, por favor, ciñámonos de verdad a los campos que son realmente necesarios. Los campos opcionales que sirven para ampliar la información sobre el cliente deben poder ser rellenados siempre a posteriori.

Como ejemplo, incorporo una captura de pantalla del sitio web de Luis Rull. En dicho sitio, requieren los siguientes campos para enviar un comentario:

• Nombre (obligatorio)
• Email (obligatorio)
• Web (opcional)
• Comentario
• Checkbox de respuestas al comentario
• Botón Enviar

Un formulario para enviar un comentario es un ejemplo básico. En este caso todos los campos son obligatorios menos el de “Web”. En general, este campo podría ser eliminado. Sin embargo, dado el perfil de los potenciales lectores parece interesante mantenerlo, para que así puedan conocerse más a fondo el autor del blog y los lectores que comentan.

Volviendo a la captura, podemos mejorar el formulario eliminando el texto “(obligatorio)” que aparece por duplicado y desplazar la explicación de “campo opcional” a un placeholder en el propio campo de “Web”. Además, he subido el checkbox de “suscribirse a las respuestas al comentario” debajo del email, que será donde lleguen los avisos.PD: por cierto, con el cambio hemos ganado 60px

La digitalización de distintas obras y publicaciones es, además, de suma utilidad histórica. Pongamos por ejemplo las hemerotecas digitales de los distintos periódicos españoles. Es entendible en dicho caso que la digitalización consista, en su mayoría, en meros escaneos de las publicaciones empotrados en un archivo PDF.

Sin embargo, hay sitios que van más allá, como la Hemeroteca del ABC, que han utilizado una herramienta de reconocimiento de caracteres para potenciar la utilidad del servicio.

Por otro lado, tenemos sitios como el nuevo Orbyt de El Mundo, que nos ofrece un servicio fundamentalmente basado en Flash. Tendría su lógica hacerlo así si el medio ayudara a una mejor calidad de entrega de la información, pero la única característica destacable de tal herramienta es la posibilidad de pasar “páginas” como si fueran páginas analógicas, de papel. Un absoluto despropósito que hace años fue como un interesante guiño al pasado en la escena Flash.

Pero no, ciertos directivos no se dieron cuenta de la inutilidad de tal técnica y se emplea de forma más o menos amplia para ver periódicos escaneados online, los folletos de Media Markt e incluso los catálogos del IVAM. Si bien se proveen alternativas en JPG y PDF respectivamente, ¿por qué no priorizar tales opciones a la graciosa –pero inútil– opción de páginas virtualizadas?

Existen algunas etapas más o menos mecánicas que pueden optimizarse en tiempo, pero la gran parte del proyecto, donde se crearán los conceptos que le harán destacar del resto, requiere siempre del tiempo y esfuerzo creativo.¿150€ por su web? ¿Cuántas horas se dedican a cada etapa? ¿A cuánto se cobra la hora? ¿Cuántos profesionales están envueltos en el proyecto?

¿Qué garantías me ofrecen?

Una página web es una inversión. Habla a sus clientes de la empresa, de los productos que ofrece y le infunde en mayor o menor medida seguridad y confianza en la empresa/página.

Citando a Jakob Nielsen en factores para comunicar confianza online:

“Design quality: professional appearance feels solid; clear navigation conveys respect for customers and an implied promise of good service. Typos or difficult navigation communicate disregard for the users.” 

“Calidad del diseño: el aspecto profesional aparenta solidez; la navegación clara transmite respeto a los clientes y una promesa implícita de buen servicio. Las faltas de ortografía o la navegación complicada comunica desconfianza a los usuarios.”

Al contrario que un libro, una web debe también juzgarse por su cubierta.

Lo que me motiva ahora a hablar de un libro del que se ha escrito tanto -y hace ya mucho tiempo- es que en un mundo como Internet, en el que todo sucede tan rápido y pronto acaba obsoleto, sus palabras son tan vigentes que preocupa (la segunda edición data de 2006).

El motivo de su vigencia reside en que la mayoría de los consejos descritos son de sentido común y, pese a ello, todavía siguen sin aplicarse a gran escala -especialmente en España.Para describir el contenido y los consejos, nada mejor que el índice del propio libro:

1. Don’t make me think(primera ley de la usabilidad de Krug)
2. Cómo usamos la web realmente(escaneado, satisficiencia…)
3. Diseño básico de carteles(diseño para escaneado, no lectura)
4. ¿Animal, vegetal o mineral?(por qué a los usuarios les gusta hacer elecciones sin pensar)
5. Omite palabras innecesarias(el arte de no-escribir para la web)
6. Señalética y miguitas(diseñando la navegación)
7. El primer paso para curarse es admitir que la Home está fuera de tu control(diseñando la Home)
8. El granjero y el vaquero deberían ser amigos(por qué las discusiones sobre usabilidad son una pérdida de tiempo y cómo evitarlas)
9. Test de usabilidad baratos(por qué el testeo con usuarios es la cura para todos los males de tu página)
10. Usabilidad como cortesía(por qué tu sitio debería ser todo un caballero)
11. Accesibildad, CSS y tú.
12. Ayuda, mi jefe quiere que haga _____ .

Una lectura muy recomendada, ya que el sentido común nunca pasa de moda.