Will Web For Food

Las Greek Pages son paginas de contenido “dummies” cuya finalidad es servir de soporte del contenido de la web, permitiendo que se evalúe la pantalla, analizando que los elementos del site son identificables .

can be used to provide insight into whether a particular Web page design and layout will be effective in helping users to navigate the site and find content

Y es una técnica de evaluación de la metodología del diseño centrado en usuario.

Refencias:

• En Usability and the Web: An Overview De George Murray and Tania Costanzo
• Una herramieta para “griegizar” tus sites
• Y la siempre interesante opinión de Jacobo.

yo siempre había creído que loren ipsum era Latin…?

Sobre la tecnología de prototipado se esta hablando últimamente mucho en muchos sitios.

Hechos como el lanzamiento hace unos meses de una de las referencias imprescindible sobre el tema, como es “Effective prototyping for maker software” han avivado el debate entorno a uno de las tares principales de la profesión.

En esa línea, he estado investigando sobre herramientas específicas orientadas a la tarea “prototipista” y me he topado con un hilo de IxD donde se referencia positivamente la herramienta Altia.

Básicamente es un plugin para photoshop, y no se ha adaptado desde el principio a lo que estoy buscando, una herramienta funcional y agil, que me permita precisar funcionales e interacción, y en el caso de altia, la capa de diseño es excesivamente densa.

La siguiente referencia que he testado es ConcepDraw, progama multiplataforma, publica xml, capea los diagramas y promete, servir, salvo por el pequeñísimo detalle de que el trial viene sin las librerías de diseño web, y que la orientación mas que a pantallas es a sitemap.

Tras las pruebas, creo que por muchos problemas que tenga Visio, (principalmente el de visualización, que no es muy grave y se solventa en maquinas con Windows con el Visor Visio , o exportando a html y haciendo navegables los protos.) va a seguir siendo la opción.
(Y en Mac Omnigraffle)
¿Las razones?, es vectorial,( eso es bueno, por que quiero estructuras, no diseño) pero hay muchos programas vectoriales en el mercado, la ventaja de Visio es que tiene un gran numero de stencils y templates adaptados a las tareas de diseño de prototipos, es sencillo, carga rápido, no consume muchos recursos y genera maquetas html.

Las pautas con las que definimos la usabilidad son múltiples, y en ocasiones parece que están subordinadas a la bibliografía consultada.

Parece que existe una serie de prácticas aceptadas por la mayoría de los profesionales, que podrimos encuadrar en metodología, aunque algo distinto ya es como cuantificamos estas pautas. (¿Cuál es el valor de usabilidad tiene un site respecto aun test o aun heurístico o una prueba?)

Posiblemente esta situación se deba a que carecemos de un sistema que ponga en común “pautas” con “puntuaciones”, como ocurre con la accesibilidad y la validación.

Así, logramos tener una amplia bibliografía “de consejos” que recomiendan como lograr hacer nuestros desarrollo más usables, en muchos casos desde un enfoque macro, que hace que estén a una gran distancia de la necesidad del proyecto concreto.

Y se corre el peligro de que se obvie un rasgo principal, el objetivo del sitio web.

Este rasgo es de capital importancia, necesitamos saber a quien nos dirigimos, eso condicionara tanto todo el diseño de interacción como la arquitectura de los contenidos, que me resulta difícil imaginar una formula magistral, (si no con una buena colección de templates podríamos prescindir de tres roles profesionales distintos).

Pero no por plantearnos la audiencia esta todo hecho. Ya que la bibliografía clásica de la profesión siempre es utilísima, y no debe ser olvidada ni desempleada, pero si condicionada a nuestro objetivo.

Lecturas como “Don´t make me think” de Steven Krug es una excelente colección de referencias que no deben olvidarse.

Otra buena practica creo que es acostumbrarse a establecer puntos de comprobación de usabilidad, de modo que las abstracciones que llevemos a cabo respeto al usuario sean lo más uniformes y continuas posibles.

Al plantearme un diseño de interacción, lo primero que considero es ¿para que? , en que contexto, a que audiencia, con que contenidos, de que modo se va a realizar la navegación.

Creo que es importante tener conciencia desde el principio del proceso de estos aspectos, por que el diseño de interacción es una capa sutil que rodea todo, y además lo hace a un nivel muy profundo, condicionando la experiencia de uso.

Realizar una revisión de patrones de uso y templates también puede ser una importante ayuda a definir ideas, ya que se puede encontrar modelos funcionales que pueden ser adaptados a las necesidades de tu diseño (y servirte de inspiración).

Con esto ya tendríamos una especie de “aproximacion bibliografica”.

Pero en ocasiones, necesitas algo novedoso y rompedor, que sea avanzado y que no se parezca a nada, (o no mucho a otros diseños…).

Ahora mismo me encuentro implicado en un proyecto en el que se desea que el valor innato sea el constructor: “novedad, tecnología, moderno, sorprendente”
Por lo que tras trabajar un poco los referentes de la cadena de valor, me he planteado que un sistema de navegación, un tanto “bastardo”, a nivel de estándar de facto. Una navegación basada en “nubes de tags”.

Para empezar, esto no es correcto ( ni la nube, ni la navegación …), pero primero la nube, ya que me refiero más a una nube de categorías, o la representación gráfica de las categorías.

Esta precisión es importante por que a nivel teórico ideal, una nube de tags, es simplemente un keyword asignada a una entrada.

Mientras que una categoría es una estructura jerárquica con distintos niveles, y con distintas relaciones entre los niveles.

Así que lo que vamos a definir para este caso, será una nueve de categorías, ya que partimos de un listado cerrado de atributos en los que vamos a identificar los contenidos, que vamos a gestionar desde el cms.

• Bien, ¿por que la nube de categorías para navegar?

Cuando etiquetamos contenidos asignándoles categorías lo que estamos haciendo es resumir ese contenido, o lo que es lo mismo “concentrar” ese contenido en la unidad mínima. Esto en principio no tiene mucho que ver con la navegación, pero solo en principio, si de toda una multitud de puntos podemos identificar uno, tenemos un punto de referencia, eso implica movimiento, y en este sentido la navegación por tags no se aleja mucho de la clásica navegación hipertext.
Así podríamos tener un argumento para usar un elemento de contenidos como elemento de navegación, pero no esta claro porque esta sustitución.

Tenia ganas de ver que se le podía sacar a los stencil de Guui de los que hablábamos en la entrada anterior, y he dedicado estos días a testarlos.

Y tras las pruebas los comentarios, en la más pura línea proacctiva.

El estilo handy me gusta, preciso, estéticamente me resulta atractivo, tiene algo de arte y por ello me gusta, no descarto que sea acertado para algún proyecto en el que la línea comunicaciónal busque ese valor, o valores asociados, pero no seria mi estilo de todos los días.

Otro tema es si podría ser sustito del prototipado a mano, una clásica discusión del Ai patrio…, yo creo que no, aunque el acabado se parece, son cosas diferentes.
Si quiero esbozar ideas, uso papel, emborrono, pinto cajas, pinto flechas, usar soft para eso me parece excesivamente pesado, recorta agilidad a la conceptulizacion, y lastra tiempos.

Respecto al template, reconozco que la idea de imitar una captura completa me emociono, el problema esta, en el uso que le podemos dar.
De cara a producir un documento técnico, unos prototipos con los que vas a trabajar con el resto del equipo de desarrollo, seguramente sea GENIAL, estos chicos navegan con firefox y capturan con screenGrab! , hablan el idioma
Ahora, para presentar la solución a un cliente de cara a validar un diseño de interacción, puede tener ciertas dificultades.
Los prototipos requieren de un nivel de abstracción elevado, por eso creo que interesa que lo que muestras se parezca lo máximo posible a la realidad, (wwff le recomienda el uso de Prototipos hi-fi en sus presentaciones), enmarcar con la ventana del navegador creo que puede ser de ayuda, crea una pauta común, reduce el umbral de extrañeza, hace que lo que muestras se parezca a lo que ya conocen.

La solucción que puede con todo, hacer protos html con este template y lo tendras todo.

Si la audiencia, intuitivamente puede responder a la pregunta “¿que es eso?” el discurso pude ser más fluido y centrado en las pautas de interacción.

La verdad, creo que lo mejor que puedes hacer si prototipas con Visio es hacerte una recopilación de stencil, darles unas vueltas y customizarte tu propia colección.
Al final,yo con los stencil y las pantillas, tengo la misma sensación que con las cajas de las crayolas, me gusta mi orden.
El que no haya una pauta de prototipado, hace que la tarea sea un ejerció de prueba-error.
Pero si logras generar una metodología tus diseñadores y tus desarrolladores-front te quedran mucho más.

Referencias:

The Interaction Designer´s nail Gun

Ahora que mi lista profesional favorita se dedica a plantearse nuevos referentes, todos ellos muy interesantes, yo vengo presentar a alguien que no necesita ser presentado. El bueno de Henrik

En el numero de hoy, pantallas como las que capturas, y patrones como hechos a mano. Este hombre se merece tener un club.

Si quieres deslumbrar con tus prototipos, no dejes de visitar su sección about visio. Con prácticos tutóriales y bellas imágenes. (more…)