Categoría: Usabilidad
Categorías
Josefina Valls Sin: Accesibilidad Web
Categorías
Nielsen y su “pura usabilidad”
El último AlertBox del gurú Jakob Nielsen trae cola, como de costumbre. En esta ocasión se titula Los diez errores de usabilidad de las bitácoras.
Que recuerde, comentan los 10 puntos:
…y no sé quién más. Cada uno a su aire.
Nielsen es un provocador nato. Ya lo hizo hace un par de semanas comentando la usabilidad de las aplicaciones de Microsoft, y no sé cuantos temas más. Pero cómo podemos hablar con una persona que trata la usabilidad como fin. Para muestra un botón. Useit.com es usabilidad en estado puro. ¿Cómo hablar de diseño usable cuando no aplica, simplemente, diseño? Estoy plenamente convencido de que la esencia de Internet como medio es la pura hipertextualidad. Esto no tiene nada que ver con lo de lapapelera.org y su opinión sobre edans
Estoy más que harto que hablar de medios. Diseño como medio, tecnología como medio. En esta ocasión hay que tratar a la usabilidad como medio. Y dejémonos de escrúpulos.
Categorías
Elemento TITLE
Usolab levantó el debate sobre el elemento TITLE de la cabecera de toda página web. Ahora retoma Torresburriel la conversación haciendo hincapié en la importancia semántica del título de la página, ya que para muchos el valor de la etiqueta está en un segundo plano. Torresburriel marca la significación de TITLE porque aparece en:
- Barras de tareas y de notificación en los sistemas operativos
- Sistemas online de almacenamiento de favoritos
- Bookmarks o Favoritos de los navegadores
- Nombre del registro en los resultados de búsqueda de, por ejemplo, Google
- Asunto del mensaje de correo que enviamos cuando queremos recomendar un sitio web a alguien a través de la utilidad “enviar página” que suelen incorporar los navegadores
De todos modos Daniel no entra en uno de los aspectos que Usolab ponía el tapete. ¿Cómo debe estructurarse el título de una página? Las dos opciones son las siguientes planteadas son las siguientes:
- Nombre de la entidad : Categoría de producto : Nombre concreto del producto
- Categoría de producto : Nombre concreto del producto : (Nombre de la entidad)
El sentido común me dice que la opción más correcta es la 2. Evidentemente el nombre de la entidad es fundamental pero de nada me sirve tener tres enlaces favoritos que comiencen con el mismo título. Pongamos un ejemplo, en la barra de favoritos de mi Firefox veo dos enlaces con el título Biblioteca Virtual Mig…. ¿Como sé quién es quién? Me sería mucho más útil que la estructura fuera la siguiente:
- Escaparate de obras – Servicios – Biblioteca Virtual Miguel de Cervantes
- Guiones – Escaparate de obras – Biblioteca Virtual Miguel de Cervantes
La necesidad de promoción y recuerdo de la marca que ponen como excusa muchas compañías para escoger la estructura número 1 se ve satisfecha con la URL, que a su vez debe ser semántica también.
Mientras continúo con el nuevo diseño, que veréis pronto, de todo simdalom.com, enlazo algunas de las conversaciones más interesantes que se han levantado estos días en la blogosfera.
Cadius weblog enlaza El mal de la usabilidad de biguel.com. A este estupendo artícuclo, de los imprescindibles tanto para los diseñadores y desarrolladores como para empresarios y autoridades, le han seguido algunas reacciones, la más destacada es sin duda la de Torresburriel.
A petición de Emmanuelle Gutiérrez y Restrepo, coordinador Sidar.org publico lo siguiente:
Boletín de la II Cumbre Mundial de Ciudades y Autoridades Locales sobre la
Sociedad de la InformaciónHola a todos,Os remito el boletín de la II Cumbre Mundial de Ciudades y Autoridades Locales sobre la Sociedad de la Información, rogándoos le deis la máxima difusión posible.
Como veréis, el tema central de la Cumbre es “construir una Sociedad de la Información para todos”. Por ello, y a petición de los organizadores de esta Cumbre Mundial, se organizan también en Bilbao y justo los días previos, las IX Jornadas Sidar (www.jornadas.sidar.org) de manera que las conclusiones de nuestras Jornadas puedan servir de base y ser tenidas en cuenta a la hora de
redactar las conclusiones finales de la Cumbre.Es por tanto, una oportunidad única para hacer llegar nuestro mensaje de accesibilidad y nuestra visión y experiencia en apoyo de las localidades y ciudades de manera que la Sociedad de la Información que se construya sea realmente para TODOS.
Por ello, extendemos la invitación a participar en las IX Jornadas Sidar, no sólo a los webmasters de la administración pública sino a sus máximos responsables, para que de primera mano puedan conocer las necesidades de los ciudadanos y las soluciones que tenemos para conseguir que todos podamos participar en la Sociedad de la Información en igualdad, sean cuales sean nuestras circunstancias técnicas, sociales o personales.
¡Os esperamos en Bilbao!
Categorías
Wireframes
Hace algunos días mantuvimos una conversación sobre los wireframes en la lista de correo de Cadius. Aunque en muchas ocasiones he utilizado métodos similares no lo conocía como técnica concreta y ni mucho menos por ese nombre. He indagado un poco sobre el asunto y esto es lo que puedo decir por ahora.
Técnicamente los wireframes son las mayas de líneas que se utiliza en el modelado 3d para reducir dificultad en la transformación del boceto. Aplicado este concepto a la arquitectura de la información deducimos que el wireframe es el esqueleto de páginas, con sus relaciones, dependencias y condiciones, de un sitio web. De este modo podemos planificar, y conocer para su posterior diseño y desarrollo, todas las páginas y procesos de nuestro sitio web con detalle.
El resultado es el inventario de contenido y el diagrama de contenidos.
Las ventajas las describe muy claramente Factor Humano en su artículo Wiframes.
En primer lugar, el definir claramente las características de contenido de las páginas que componen un sitio es de una importancia sustantiva. Esto permitirá que el desarrollo de todas las etapas posteriores se realice inequívocamente, con todos los miembros hablando de lo mismo.
En segundo lugar permite establecer hitos con el cliente que generan definiciones precisas. Al momento de validar los wireframes de un sitio con el cliente, se centra la atención en el diseño de contenidos, no en el diseño visual. Un wireframe puede contener ciertos elementos de carácter visual como una sugerencia de diagramación general, la jerarquización de los elementos, pero en rigor se trata de organizar la información a nivel de página, por lo tanto no se discute de diseño. De hecho, es muy posible que posteriormente, al traducir el wireframe a diseño, el diseñador gráfico determine que es necesario alterar ciertos elementos para optimizar aspectos comunicacionales, siempre que esto enriquezca al contenido y no sea exclusivamente por manierismos estéticos.
Para establecer las relaciones informacionales y documentales entre los distintos elementos de un sitio web es necesaria la utilización de un vocabulario visual estándar –Un vocabulario visual es un conjunto de símbolos usado para describir algo (usualmente un sistema, estructura o proceso)–. Hay que partir de la base de que los wireframes o diagramas documentos que van a revisar muchas parte de construcción de un producto: inversores, responsables de proyectos, productores de contenido, diseñadores, desarrolladores y arquitectos de información. Jesse James Garrett ha desarrollado un vocabulario visual para describir arquitectura de información y diseño de interacción.
En la lista se dejaron una serie de lecturas y recursos en inglés que apunto aquí para que todo el que quiera y yo mismo profundicemos poco a poco en el tema:
- http://deyalexander.com/resources/wireframes.html
- http://iainstitute.org/tools/
- http://www.subtraction.com/
- http://www.mezzoblue.com/archives/2005/05/13/columns_grid/
- http://tinyurl.com/d9vqd
- http://cardsword.sourceforge.net/index.php?option=com_frontpage&Itemid=1
- http://www.newcastle.edu.au/services/cms/downloads/
- http://www.iawiki.net/cgi-bin/wiki.pl?back=DeliverablesAndArtifacts
Actualización 18/12/05: Nuevos recursos y plantillas en Templates & Stencils for Visio & Omnigraffle de Garret Dimon.
También tenemos la posibilidad de buscar en http://del.icio.us/tag/wireframe.
Las lecturas en español las preparó hace ya algunos meses Torresburriel en el artículo La importancia de los wireframes.
Categorías
El papel del diseño gráfico
Cuando ponemos en marcha un proyecto es fácil caer en la tentación del diseño. Pero el diseño gráfico no es un fin e sí mismo sino un medio que nos lleve hacia la meta propuesta. Lo resume perfectamente Pere Alvaro [bis] en el libro Editorial Made in Spain:
El diseño editorial debe ser un medio eficaz y comprometido para transmitir una idea.
Es frecuente que en el momento de presentar un diseño, este sea rechazado porque no satisface el ansía multicolor y multiforma de nuestro cliente. Por otro lado, también ocurre que el diseñador cree un puro diseño. No es ni una cosa ni otra. Me atrevería a comparar el diseño gráfico con el cine: para unos industria, para otros arte. No. El cine, también el diseño, es un punto medio entre los dos extremos.
Lo primero en el diseño es la idea que debemos comunicar. De igual modo debe comunicar de forma eficaz. El compromiso es personal y creativo.
Del mismo modo ocurre con un sitio web. Un portal presenta una oferta de contenidos. Ante todo, estos contenidos deben ser ordenados y jerarquizados. A partir de aquí podremos entrar en el terreno del diseño. Utilizo palabras de Nielsen:
El diseño debe ayudar a dar un sentido de la prioridad al diseño de interacción atrayendo la atención del usuario hacia los elementos más importantes de la página.
Para ello podemos utilizar varios recursos:
- Reducir el número de estilos de fuente (tipo, tamaño, color…)
- Contraste en el color
- Los elementos principales deben ser visibles en su totalidad dentro de la resolución de pantalla más usado.
- El uso de los logotipos debe realizarse con mesura.
Como conclusión podría volver a Editorial Made in Spain con otras palabras de Pere Alvaro:
Pensemos en el diseñador (…) como un director de orquesta que conduce sus componentes a lo largo de la interpretación, resaltando las virtudes de cada uno de ellos, resaltado cada nota y, sobre todo, controlando el ritmo e intensidad de la interpretación de la obra en todo momento
¿Me permiten una línea más? Esta vez en voz de Pep Carrió y Sonia Sánchez, hablado de diseño en el mismo libro:
Recursos profesionales, en definitiva, puestos al servicio de un mismo fin: conseguir un lenguaje gráfico capaz de transmitir, de comunicar, de hacer amable, atractivo o simplemente funcional un material final (…).
Categorías
Usabilidad en las páginas de inicio
A partir del libro de Jakob Nielsen y Marie Tahir “Usabilidad de páginas de inicio” me gustaría sacar una serie de artículos con las conclusiones fundamentales para conseguir un buen resultado en las páginas principales de nuestros sitios web.
Para conseguir nuestro objetivo debemos tener clara la finalidad de la usabilidad. Un sitio usable es aquel que distribuye la información de una forma eficaz para conseguir los siguientes objetivos:
- Presentarnos de manera adecuada
- Dar a conocer nuestro objetivo
- Mostrar todo el contenido de nuestro sitio de manera clara
- Facilitar la búsqueda en nuestros contenidos y que el usuario tenga una respuesta clara de forma rápida
- Facilitar la navegabilidad
- No generar falsas expectativas
Para ello la página principal es un lugar clave. Como dice el mismo Nielsen en el prefacio:
Las páginas de inicio son el espacio inmobiliario más valioso del mundo. […] La repercusión de la página de inicio en el plan de una empresa conlleva mucho más que la toma de decisiones relativas a ingresos por comercio electrónico, también es la cara de la empresa ante el mundo.
La página de inicio es una portada, es un diseño gráfico, un índice, el titular principal en la prensa, una conserjería. Por ello su importancia y su poder es impresionante. Aunque, si bien, no todos los usuarios entran directamente por la página de inicio, las páginas interiores deberán hacer clara referencia a ellas en todo momento para que se convierta en meeting (reference) point de la web.
Para comprobar la usabilidad de una página principal debemos tener en cuenta el siguiente esquema fundamental de análisis.
- Finalidad del sitio
- Información sobre la empresa
- Contenidos (redacción, distribución y presentación)
- Archivos históricos
- Vínculos
- Navegación
- Búsqueda
- Accesos directos
- Imágenes y animaciones
- Diseño gráfico
- Títulos
- URL
- Noticias y notas de prensa
- Pop-ups
- Publicidad
- Gestión de emergencias
- Distinciones
- Actualizaciones
- Personalización
- Recopilación de datos del cliente
- Comunidad y convivencia
- Fechas y horas
- Gráficos y números
Evidentemente no todos estos aspectos son válidos para todos las páginas de inicio. Pero cada uno en su caso deberá aplicarse los consejos –¿normas?– que considere necesarias, las principales las iremos analizando poco a poco.