Will Web For Food

Las tareas de prototipado es una de las partes más visibles de las tareas de de Arquitecto de la Información ( el nombre profesional que engloba a la profesión es un buen motivo de reflexión… Ai, Diseñador de Internar, de Interacción, date una vuelta por las encuestas profesionales, apuesto a que no pensabas que podrías enfocar tu perfil a tantos roles … pero eso es otra historia.)

Teóricamente (enfoque usability.gob) primero Planeas lo que hay que hacer, luego Analizas el que, el como y el quien, luego Diseñas todo eso y luego Contrastas y Afinas.

Planeas>> Analizas>>> Diseñas>>>> Contrastas y Afinas

De estas 4 fases Prototipar seria un paso de Diseñas.

¿Como es posible que los protos tengan tanta visibilidad?

(el 66% (36% en HI) del tiempo total de los encuestados en upa 2005)

La técnica y la magia.

Como problema técnico el prototipado no me preocupa, cada uno tiene sus gustos y preferencias, (y no seré yo quien abra otro debate más sobre visio VS powerpoint ) y elige la herramienta en función de múltiples contextos.

Eso técnicamente, ahora teóricamente me parece un problema capital definir un estándar de prototipos, y como se llega a ellos.

“Planeas”, en este texto se debe leer como sinónimo de toma de requisitos, definición de audiencia, definición de parámetros de éxito, objetivos y kick-off, todo en una dimensión muy teórica, en la que no cuesta mucho tiempo nada , el mundo de las ideas, y de las expectativas.

“Analizas” es algo más terrenal. Hay que hablar de requisitos, si estos no se han fijado la fase anterior. Ya no hablas de audiencia en abstracto, empiezas a segmentar audiencias, orientas los objetivos, empiezas a definir las tareas, empiezas a plantearte escenarios y personajes, a identificar a tu audiencia con las tareas, y empiezas a hacer feliz a todo el ecosistema del desarrollo, (cliente, stakeholders, … ) dentro de lo posible.

Y “diseñas”. Aquí esta casi todo el grueso de las técnicas.
Ahora, hasta llegar aquí has hecho muchas cosas, que te pueden ahorrar muchos problemas.

Bienvenido al mundo real.

¿ Y todo esto es viable dentro de un proyecto real?

Bueno, pues hay días buenos y días no tan buenos, lo que si tengo claro es que empezar a pintar protos sin tener claro que se quiere lograr, convierte el día en un mal día.

El ejercicio de usabilista es complejo, de hecho, la relación con el sentido común y la practica profesional es algo que siempre me sorprende.No creo que esto que hacemos sea el resultado de un sentido común hiper desarrollado, esta claro que las tareas usabilisticas buscan hablar directamente en la lengua nativa de tu lógica, para que sea un interfaz comprensible, y que dependiendo del nivel de internacionalización deseado, este interfaz será más o menos común, a la mayoría de las estructuras mentales, (ya… ¿Cómo se hace esto? Eso lo contaremos en el episodio 2, ¿Análisis etnográficos?, ¿Bolas de cristal?, ¿Análisis Remotos? ¿Test A/B?).

De ahí, que no sea cuestión de “sentido común”, o de un único sentido, en términos de percepción, ni común, en términos de la mayoría, ya que no busco como lo haría la mayoría, sino, que lo pueda ENTENDER y ser INTELIGIBLE para la mayoría, aunque como usuario en ocasiones uso intuición.

Vale, ya hemos movido la usuabilidad del sentido común, a la compresión común del interfaz.

Siguiente cuestión, ¿Cómo puedo diseñar un interfaz comprensible?
Eso es “fácil”, casi todos los libros que hablan del tema enfocan el éxito del interfaz a lograr responder a las expectativas del usuario, (ya… claro, el “usuario”… “expectativas”…”éxito”…)

Ahí entra en juego el diseño de Escenarios y Personar, esta claro que no voy a poder responder a todas las necesidades,( y que debo de ser consciente de las limitaciones) por que no voy a poder definir todas las necesidades, pero bueno, si me quito lo gordo no vamos mal, y tengo, pongamos por ejemplo, a más del 80% de la audiencia contenta. (¿Audiencia? Episodio 3, esto es un blog amigos… poc a poc)

El pensar en Escenarios y Personas me ayuda a enriquecer y a robustecer el interfaz, por que me obliga a hacerlo polimórfico a las distintas necesites.

(¿Necesidades? Que sea “encontrable”, desde el diseño de la url, hasta como se relación con los buscadores, por donde llegan las visitas, ¿qué buscan?, como responde el site. [Capa SEO/SEM] Los contenidos, ¿como se estructuran?, ¿como son?, ¿que llevan, de que se componen?, ¿quien los construye?, ¿de donde vienen?, ¿a donde llevan al usuario?, ¿que “calidad” tienen?, ¿responden a las cuestiones que han generado las búsquedas?,[ Capa AI] si hay una marca (siempre la hay …) ¿habla en el mismo tono todos los elementos?, ¿somos coherentes todos?, ¿todo encaja?, ¿el nivel de seducción y comunicación esta equilibrado?, ¿la palabrería corporativa excede el nivel?,¿la comunicación visual resulta creíble, esta en consonancia con las estructuras?, ¿Qué hacen los demás en situaciones similares?, ¿existe algún convencionalismo de facto para ello?…[Capa de Diseño de Interacción]

(vale, que se podría discutir que va donde… enfoque Garrett)

Esta claro que son muchas preguntas, que requieren un poco de reflexión, más que de sentido común, por eso pienso, luego, prototipo.

Upa es el acrónimo de Usability Profesional Asociation, y periódicamente viene realizando un estudio ómnibus sobre distintos aspectos de la profesión.

Es interesante dedicarle unos minutos al estudio.

Sobre un universo de 1.329 casos, lo primero que me llama la atención es la cantidad de cuestionarios de no son asociados (483 casos, el 36.3%)

Sacar de esto información para España no parece muy lógico (hay 5 españolitos en el estudio…) de hecho, en los comentarios agrupan Europa comunitaria con Asia y Suramérica, ( esta claro de que la segmentación busca un poco de significación … no por que sean homogenos).

Así que solo vale para hacerse una idea de lo que pasa por los países de habla inglesa.

La radiografía dice que la mayoría tenemos de 26 a 35 años, la mayoría somos licenciados y con tercer ciclo, de 2 a 7 años en el negocio, currando en grandes compañias, bajo el epígrafe de Usabilista (Usability Practitioner).

Me llama muchísimo la atención las prácticas profesionales que indica el estudio que se realizan.

• Prototipado Low el 76% de las tareas
• Prototipado Hi el 35% de las tareas

(Esto hay que investigarlo. Poco hi me parece…)

Del 50 % de las tareas que se realizan solo 4 son de las “técnicamente duras”(Apreciación subjetiva sobre fácil- difícil que no quiere molestar a nadie, es mi opinión)

lo cual es un poco extraño ya que la mayoría tiene formación especializada en el campo HCI, por lo que se me ocurren varias cosas, la peligrosa regla del sentido común sigue por ahí, la profesión es joven y aun no esta madura, la usabilidad es un recetario de cocina… comodín de la llamada, pero algo pasa.Es cuestión de ir a la pagina 5 del estudio y dedicarle un momento a ver que te parece.

Los datos de rango salarial supongo que sencillamente no son aplicables a España, pero si tienes deudas, te comento que la media esta en 75 mil Dollar Usa, un poco más si eres hombre ( 80 mil con 5- 7 años de experiencia) , un poco menos si eres mujer (72 mil con 5- 7 años de experiencia)

( lo de más-menos es apreciación subjetiva… y nada realista)

Usa, Uk y Alemania donde mejor esta el asunto salarial. ¿Problemas con el cambio?

¿Le has visto utilidad para tu vida a todo esto?Estas a tiempo de jugar en la edición de este año y saber como anda la profesion.

Referencias:

• El jefe de la UPA spain y gran profesional habla de ello
• El estudio 2005

Una de las cosas más útiles que tiene Visio, como herramienta de prototipado, es la posibilidad de crear macros desde el editor de Visual Basic.

Vale, de momento esto no resulta nada espectacular, así que veámoslo en la perspectiva de extremadamente vago (TM) *, donde realmente la idea no indica toda su capacidad.

Prototipado de un portal de ciertas dimensiones con múltiples paginas de nivel modular, donde las distributivas difieren en el tipo de módulos que presentan.

Vale, eso es la forma complicada de decir que el portal tiene muchas paginas que se parecen (por la estructura modular, y por la coherencia) pero que van cambiando en algunos detalles.

Bien ante esto podemos coger la pagina que se parece y copy+pastel, pero Visio no va a respetar las dimensiones y las pantallas te van a salta al hacer las transiciones de una pagina a otra.

Otra opción es reticular el fondo con guías y ajustar.

Y otra es emplear la Macro “Copy Page”.

¿Quieres probar?

Bien, ¿tienes Visio? , lo abres, creas un nuevo documento, vas a herramientas, vas a macros (Alt + F8) .

El sistema te va a presentar esta ventana, le pones nombre a la macro, se abre el Visual Basic y le cascas este chorro (OJO el editor inicia el documento con Sub “Titulo”()
End Sub. Elimínalo y pega la macro.)

Salvas y vuelves a Visio.Pinta algo y prueba.
Herramientas > Macros >Modulo 1> Nombre de la macro ( COPYPAGE)

Y ya esta. complícate la vida una vez, reaprovéchalo muchas.

AdvertenciaLas macros en ocasiones se emplean como transporte de software malicioso y/o virus.

Referencias:

• Por seguridad
• Mas seguridad
• En Welie
• Para sacarle chispas al visio

*La filosofía “extremadamente vago” en propiedad de Ale Muñoz, más info en su blog.

Si practicas Ia, estarás observando que algo ocurre ahí fuera. Que las prácticas se están especializando, y evolucionando. Que las startup de garaje traen la capa de Ux de serie.

A esto le llamamos New Wave of the Information Architecture o nwIA

Los procesos se están alejando del modelo de cascada en el ciclo de finalización, y cada vez se va más a un modelo en espiral evolucionado de la cascada. Con más puntos de contacto de las tareas de arquitectura, y ciclos de vida cada vez más largos para el producto, control y revisión, van, roí, minería, analíticas, rediseños incremental, estrategias internacionales, mutidioma, análisis etnológicos, jad, uems …

Nada es nuevo, pero verlo todo trabajando junto es bonito.

Si estas involucrado en nwIA los DDD, y los Sheter de técnicas pueden resultarte útiles.

En teoría un prototipo no debe presentar línea gráfica.

Correctisimo.

Tanto a nivel Low como Hi.

Pero la tiene. O más bien, es un ejercicio de comunicación visual, igual que lo va ser el diseño de línea gráfica.

Entonces ¿Cómo puedo decir que los prototipos no tienen línea gráfica?

Extricatemente, el prototipado de la solución web presentan un listado de funcionalidades, pero su ordenación y apariencia no es estricto, por ser estas cualidades, de la comunicación visual, por lo que se resuelven mediante la capa gráfica.

Y no obstante infiere y condiciona el diseño.

¿Cómo ocurre esto? Por que el prototipo habla un idioma muy próximo al diseño, (el asunto de que es diseño o diseño gráfico, es tema de nota, y la bibliografía es extensa.) pero que no es DISEÑO.

No es lo mismo este ejemplo de estructura ordenada para prototipo

que este otro ejemplo de elementos del prototipo no ordenado

Importante.

• Los prototipos son estructuras funcionales.
• La línea gráfica es algo más (MUCHO MÁS) que colores sobre los prototipos.
• Los prototipos y la línea gráfica comparten las funcionalidades, pero no necesariamente la ordenación en pantalla ni la modulación del espacio.
• No obstante por su naturaleza visual el prototipo requieren una ordenación en el espacio.
  Y las funcionalidades poseen ciertos niveles jerárquicos que condicionan esta ordenación, y que se deben mantener en el tratamiento gráfico.

Pero en ningún caso deberemos entender los prototipos como diseño sin color. Ya que no solo están sesgados en la ausencia de color, si no es toda la comunicación visual fruto de la interacción de la forma y el color.

y es que este prototipo pude dar lugar a muchas líneas gráficas.

Referencias:

• Sobre Diseño del Interfaz

Con la proximidad del inicio del nuevo curso, podíamos plantearnos la revisión de los planes de estudio para el 07/08.

A mi me gustaría que dentro de la carrera no reglada de hci se incluyera un curso de “Introducción al prototipado”.

Me parece una muy interesante materia, pero no he logrado aun concretar, por más que rebusco.

Y es que por un lado, parece que existe una importante cantidad de literatura respecto a “tecnologías aplicadas al prototipado” pero casi ninguna sobre que es prototipar.

Y además estas dos cosas (técnica y proceso) se usas como sinónimos, sin que ello sea del todo cierto.

Así, discutimos que herramienta resulta más conveniente e idónea frente a tal necesidad, cual no responde a determinada situación, sin abordar en que consiste el proceso de prototipo.

Bien, para los interesados en la las técnicas, ( you have so many tool!) hay varias interesantes referencias.

Un libro muy bonito y que hay que ojear de modo general es effective prototyping y que en la bibliografía recomendada de “tecnologías aplicadas al prototipado” se cita y recomienda. Y para el applepeople una referencia interesante es omni group.

Ahora, sobre el noble y antiguo arte del prototipado.

Yo desde mi humilde experiencia creo que de cara a integrar prototipos en la capa de diseño y presentación es conveniente que el prototipo trate una serie de puntos y los cumplimente.

1. Diseño estructural de la pantalla.(Que elementos configuran las pantallas, a máximo número de elementos, tu maquetador te lo agradecerá…) El prototipo propiamente dicho, tanto en un enfoque macro (hi-fi) como RAD, y tanto como para soluciones dinámicas con cms modulares, como para ese discreto promoweb de micropyme.
2. Diseño de interacción de la solución.(Como se comportan los elementos respecto a la interacción del usuario, concretando, como se produce la navegación, como se comportan los botones, como responden los formularios.)
3. Sitemap. (Donde va cada cosa dentro del site, y que relaciones presenta entre ellos, definimos aquí también los path de navegación, trasversal y horizontal, primaria y secundaria, recurrente.)

Si la documentación del prototipo cumple estos 3 puntos no debería presentar ningún problema, la idea generatriz para formular estos 3 puntos, es la de crear una documentación capaz de permitir desarrollar toda la aplicación, sin dirigir, ni obstaculizar el resto de disciplinas, (visión amplia del Hci = [Ai +InteractionDesign + Comunicación Visual + FrontBack]).

De este modo, con una documentación de prototipado e interacción completa, o completada, logramos que los prototipos por un lado estén contextualizados al producto, tanto a nivel funcional como gráfico, y puedan presentar un ciclo de vida mucho más amplio, reduciendo los costes de desarrollo.

El problema de todo esto reside en que no se suelen ver prototipos por ahí.
Yo no se como prototipas tu, con lo cual no puedo aprender. Y creo que esto debe ocurrir a nivel mundial.

Por eso, ver ejemplo podría ser de utilidad, pero claro eso no puede ser así de sencillo, esta suscrito a ciertos compromisos profesionales que hacen que los perfiles de los Ai sean sesgados.

¿A nadie le llama la atención que las listas profesionales de temas afines al desarrollo web se vean líneas de código, piezas gráficas, y que la comunidad ai resuelva sus dudas verbalizando?

Esta claro que yo tendría ahora que poner unos protos por aquí…

Y que la mesa, sea de madera de pino, o de estructuras tubulares de latón , no deja de ser mesa.

Referencias

• Datos al respecto
• Definición y reflexión
• Técnica con omnigraffle
• Sobre wireframes
• El saber universal sobre la cuestión
• Ejemplos de prototipo
• Glosario de terminos

Se acaba el cole y llega el verano …
A continuación mi lista de lecturas recomendadas para el verano y con la que no debería tener ningún problema para superar las “citas de septiembre”

No me hagas pensar
Steven Krug
Pearson Educación S.A. Madrid 2001
Isbn: 84-205-3252-5

Si solo puedes acceder a un libro, este es tu candidato, accesible a todos los niveles, muy fácil de leer, repleto de ejemplo que ayudan a recordar y asociar ideas, con sufriente profundidad como para que tengas claro de que va la usabilidad y puedas ejercerla.

Es una joya.

Si te ha gustado “No me hagas pensar” quizás te pueda interesar Psicología de los Objetos Cotidianos de Donald A. Norman y Angustia Informativa de Richard Saul Wurman.

Diseño Grafico, Creatividad y Comunicación
Fernando R. Contreras y Cesar San Nicolas Romera
Blur Ediciones S.L. Madrid 2001
Isbn: 84-607-3554-0

Un libro genial que logra contextualizar las tareas del día a día, tanto a nivel histórico, aclarando de donde venimos, como funcional.
Una buena referencia si tienes que comunicarte con otros miembros del equipo a la hora de ejecutar un interfaz de usuario.

Si te ha gustado “Diseño Grafico, Creatividad y Comunicación” quizás te pueda interesar La interaccion del color de Josef Albers, Diseño maquetación y composición de David Dabner y Sistemas reticulares de Kimberly Elam.

About FACE 2.0 The essential of interaction design
Alan Cooper y Robert Reimann
Wiley Publishing Inc Indianapolis 2003
Isbn: 0-7645-2641-3

Hay una versión 3.0 recientita que promete. Es una referencia básica a la hora de acercarse al diseño de interfaz, y que para mi forma parte del triunvirato de referencia oficial ( junto a Information Architecture & Designing Web Usability)
Pero también es la referencia más densa de las tres.

Si te ha gustado “About FACE 2.0” quizás te pueda interesar Universal Principles of Design de William Lidwell y Designing for interaction de Dan Saffer.
Listado Referencias Bibliograficas Hci version Pdf

Coja uno, es Gratis

El campo teórico de las disciplinas suele poseer una metodología, que en ocasiones, carece de contraste empírico. Con un diseño sobresaliente, bien documentado y que resulta difícil de extrapolar a las tareas de campo.

En el rincón opuesto, y por paralelismo se suele encontrar la situación contraria.
Las “técnicas de Guerra y Guerrilla” del dia-a-dia, con una metodología ligera, que resulta fácilmente adaptable a una realidad polimórfica y cambiante.

No obstante, y aunque esta introducción pueda dar la sensación de mundos alejados, ambos son facetas de una única realidad.

Dentro del hci/e resulta habitual el enfoque más macro y de largo alcance, con metodologías estructurados y concadenas. ( ejemplo, WaterFall Method), mientras que el hci/d sigue diseño de patrones.

Un punto intermedio puede resultar muy interesante. Para mi, el punto intermedio es lograr trasmitir y comunicar 2 cosas:

• el diseño de interacción y

• el prototipado del producto.

Flota como una mariposa, pica como una avispa.

El pie de pagina es uno de los principales elemento de una web, pero que por colocarse al final de un site, en muchas ocasiones, no se valora debidamente.

Seria difícil aceptar la adición de elementos en una cabecera, pero no se suele ser tan escrupuloso con la acumulación de elementos en los pies.

Seguramente, por que se contempla el diseño del site de forma vertical bidimensional (el pie no se ve sin scroll) y no en tres dimensiones ( el pie se ve en todas las páginas), ya que el pie, al ser un elemento estructural influye en la navegación constante, y es similar en numero de referencias totales en el site a la cabecera.

Funcionalmente, el pie, indica el final de los contenidos en página, aunque hay ejemplos que limitan esta función (uso del fooder tipo scipt.aculo.us) subordinando el convencionalismo de cierre al alarde técnico.

El pie debe procurar integrarse dentro del diseño y del estilo del site, y no servir como solución express o álbum de pegatinas.

Cuidando los pies se logran diseños más redondos.

Dando cabida a ciertos aspectos administrativos del site que nos interesa destacar (derechos/avisos/comercial), redundando información (contacto/accesibilidad),y/o regenerando la navegación (inicio/ir a …)

Estoy pensando en pies.