Will Web For Food

Es posible que en más de una ocasión hayas oído la palabra “prototipo” referida a la web.

Los prototipos son una de las herramientas que más comúnmente se emplean en el diseño de interfaces.

La finalidad de este articulo no es concienciarte de la importancia de emplear prototipos en tus proyectos, aunque su empleo es vital, y beneficia a  todos los implicados en el desarrollo de un producto web, sino reflexionar sobre un uso más eficiente de ellos.

Hay algunos aspectos controvertidos entorno a los prototipos, como por ejemplo como debemos referirnos a ellos o que herramienta es la más indicada para su realización. Pero esto tampoco es el objetivo de este post.

El protitipado se han integrado en el ciclo de producción como una tarea más, justo  después de la toma de requisitos y antes de la linea gráfica, y a veces no se tiene en cuenta sus capacidades  para lograr distintos objetivos .

Los prototipos se pueden  emplear como herramienta para pensar y explorar soluciones de diseño de estructuras y de interacción, como herramienta de comunicación  con un cliente o como herramienta de investigación con usuarios, con el fin de contrastar algún aspecto.

Por lo que parece razonable pensar que no podemos decir lo mismo y de la misma forma a audiencias distintas con necesidades distintas.

Esto nos permite hablar de 4 dimensiones o funciones de los prototipos.

• Definición del producto. El prototipo debe permitirnos explorar problemas del diseño del producto, identificar estos problemas, y permitirnos decidir cual es la mejor forma de resolverlos. Además debe servirnos para resolver las preguntas relativas a los usuarios y a la forma en la que emplearan el producto.

• Desarrollo del Look and Feel, los prototipos ayudan al desarrollo del(a) Look and Feel, consistencia estilistica y de experiencia, dando al diseñador (y a contenidos) ciertas indicaciones sobre el espíritu del producto. Es importante que el LOOK  y el FEEL estén alineados y tengan el mismo tono. Sino, puedes lograr un “perro-gato”

• Desarrollo, los prototipos ayudan al desarrollo del producto, sirviendo de referencia y guía, permitiendo que las soluciones sean constantes y uniformes, y evitando la necesidad de generar nuevas posibles opciones.

• Gestión con el Cliente. Ayudan a la gestión del cliente. Ya que permiten establecer pactos sobre el futuro, este es uno de los principales puntos por los que se integra el prototipado en los proyectos, y a la vez es uno de los principales focos de problemas. Habitualmente en cualquier referencia se indicara que prototipar es una buena estrategia por que permite reducir los costes de gestión de los cambios. Lo que ya no he visto, es como se relaciona esta idea con el “eXtreme management”.

Esta situación creo que se debe a que hay poca  “cultura del wireframe” en las organizaciones, no se entiende totalmente su potencia e importancia, se planifica como una tarea de desarrollo cuando es una tarea de conceptuación.

Además la planificación no siempre conlleva  un enfoque táctico de la situación, lo que dificulta que se pueda aprovechar todo el potencial.

Referencias:

• Para saber más sobre wireframes.
• Otras cuestiones sobre los wireframes.

Interaction design patterns is a solution to recurring interaction design problems. Interaction design patterns are efficiently solving recurring design problems, so you can use the patterns solution to design your site, without reinventing the wheel.

A pattern is made with one or more components. A component represents chunks of visual design and code.

When there are several patterns and then are being organised , we call this a patterns library.

You may think that if you always use patterns the whole website will look the same. But a patterns library perhaps then can be used as a take-away ideas.

References.

• Welie interaction design patterns.
• Ui patterns.
• Pattern tap.
• Yahoo design patterns.
• Design patterns of Brian Christiansen.

Extra Ball:

• 20 websites to help you master user interface desing.

The design technique of persona is useful in the design of successful products. This tool lets you align the needs and expectations of the product of all those involved in development. They are involved both the coreteam of product, also stakeholders and hippos. In addition to using characters prevents deviations of the goals of product design.

Because, the persona´s technical should be mandatory in all development.
Although, sometimes you can find difficulties to personas be accepted.

The difficulties may come from the nature of the persona because they are abstractions, although based on real data, but do not represent an real users with name and a surname, but the persona have it. (For more information about the technique see Persona y scenarios. A methodology introduction (SP))

This feature makes that sometimes arise opinions about the appropriateness of the use of persona, and there are doubts about its pragmatism over the use of real users, which may seem more logical in principle, but as we shall see below that it is less efficient .

The personas are part of the tactic of development, while potential customers are a strategic element of the product.

The main idea is that the persona do not represent a particular user as such, but are composed of many of the personas of potential users. To these characteristics we call “variables”.
The personas are abstractions, but are based on data.
Do not you have to invent, there is a preliminary analysis and investigation. Otherwise you will not do.

We should not confuse “everybody can use it” in terms of usability with “everybody want use it” in marketing terms. Sometimes the discussions about the appropriateness of the use of personas is thinking about how to influence marketing. And that is also wrong.

There may be a relationship between personas and real users, but is not a direct relationship between personas and users or customers, but the personas are related by the users through the product variables.

A persona is composed of variables, a more variable´s personas it reasonable to assume that there will be a smaller number of real users that fit the character. This is one of the reasons why the characters are used. Greatly simplify the process by allowing us to work with multiple variables at once. It also keeps the user selection and recruitment, which can be extremely complex for some variables.

This relationship is representative of one of the factors that you can not establish a direct relationship. Since more detailed level of the least number of personas that fit real people in them.
This also explains why the convenience of designing the product for the principal persona.
Could almost say that when a persona is well developed, should not allow us to identify a specific individual, but should remind us of many traits.

Therefore one might think that knowing the variables, we could save the job of developing personas. But on the design variables in a ungroup the persona were difficult to establish use cases, which diminishes the efficiency process. The human we are better able to establish empathic relationships when we reach the place of another “person” (though it is imaginary) that when we do it directly from the variables.

Let’s see this implemented in a classic example of characters taken from the Paper,Personas, Participatory Design and Product Development:An Infrastructure for Engagement of Grudin and Pruitt.

This paper defines a persona with a high degree of detail. For example “Patrick” is defined in 21 different variables, if the possibility of a potential user has an attribute that is either is 50%, about 21 variables as a result gives us a 0.000047% of real people who fit as Patrick has defined, which for a population like the U.S. at 2009 is 146 real people.

This is calculated as follows:

(0.5) ^21 *100%= 0.000047%

(306,711,000*0.000047)/100= 146

Now, if we define to allow team Patrick and establish a relationship with him that the product is designed with “Patrick in the mind” design decisions will be more constant and consistent throughout the process, that if link to a list of variables that can be interpreted differently by different teams of agents.
It also seems easier and cheaper to find people that use “user type” meeting with the desired characteristics, and implications in the design process.

Conclusion

• The personas are a design tool that allows the goals of the product remain constant, making products more consistent. This is the purpose of the technique, and you should not forgotten .
• You can not expect to link users with the personas in a linear fashion, why not have the same kind, the comparisons should be set on variables where necessary. Here is where I believe that this error of Chapman and Milham, who in his paper “The Personas´ New Clothes:Methodological and Practical Arguments against a Popular Method” with an argument based on the calculations outlined above indicate that the technique is wrong because personas can not connect with real users.
• And if you replace the potential users (customers) by characters is a mistake, that the target will see significantly reduced to dangerous levels and lack of business sense.
• Recently the technique has been tested on the personas design of a product that reduces discovering the shortcomings identified through usability heuristic analysis between 2 and 4 times less when using the technique of characters.

References:

• WAI Site UCD User Personas
• Nice Research on Persona Effectiveness
• Personas template in Visio

The technique of personas, identifying the reasons for use, expectations and success of a design. It is a very useful tool, that helps us think needs a single person and not a group, although the character represents a whole is significant and needs, making products more efficient.
The use of “personas” is included in the methodology of user-centred design (UCD), and if you are using in your designs help define a more efficient structure, functionality and navigation. It will also be useful to discuss aspects of design and product promotion.

The technique of “persons” works better if integrated into a research strategy, as an ethnographic analysis, a focus group or market research, as this technique is not a single method. So before you start make sure you have enough information to define your “personas”.

And if you want to start using it already, here you can download this template for personas. (341kb zip).

The template is in Visio format and consists of a template for the document stencil of the elements and a collection of photos 50’sy some style today, all editable to suit your needs. And the legendary macro copy page, so your job easier.

Click on the image for enlarge.

References:

• Introduction to the methodology of personas

La técnica del prototipado aplicado al desarrollo de productos web tiene muchas utilidades y aplicaciones, ya que permite que se pueda verificar los requerimientos del producto antes de que se inicie su desarrollo. Permite fijar presentaciones en las que se puede solicitar la aprobación de la maqueta del producto a los interlocutores del cliente o del equipo de desarrollo, así como: especificar el contenido, planificar las fases del desarrollo o detectar errores de diseño antes de iniciar el proceso de producción.

Esta técnica se puede realizar con distintas herramientas, desde un papel y un bolígrafo a programas informáticos especializados para ello.

Periódicamente desde las listas profesionales se retoma el debate sobre la conveniencia o no conveniencia de una herramienta frente a otra. Este artículo no pretende zanjar estos debates, solo establecer una compartida respecto a  las herramientas actuales dedicadas a generar prototipos interactivos.

Las herramientas que he seleccionado para analizar son: Axure, Balsamiq, FlairBuilder, Iplotz, Irise, Justinmind y SmatDraw.

He seleccionado esta lista en base a dos criterios, uno, todas son herramientas especializadas en diagramas, que además estado viendo citadas con más frecuencia en listas especializadas en UX, revistas, twiters o blogs y dos, son a las que he tenido acceso y un mínimo de experiencia superior a una semana.

Axure RP Pro 5.5

http://www.axure.com

Es una herramienta muy interesante, resulta un tanto compleja ya que se basa en la  siguiente idea “define elementos” que luego puedes reutilizar en las tareas de prototipado. Esta forma de trabajo hace que resulte un poco menos intuitiva que el resto de herramientas evaluadas ya que implica una planificación previa del trabajo. Como contrapartida permite automatizar la mayoría de las tareas, ya que si se cumplimentan toda la información durante el proceso de prototipado, el documento funcional se puede generar automáticamente (más o menos).

Otro aspecto interesante es que integra un modulo de control de versiones que permite distribuir tareas y gestionar proyectos dentro de un equipo.

Si la finalidad de tus prototipos es realizar una maqueta operativa de la solución, (por ejemplo, test previo al desarrollo del código) Axure también es una buena opción para lograrlo, resulta complejo resolver interacciones que implican más de tres cambios en la misma interacción.
De momento solo disponible para windows, aunque se rumorea que próximamente habrá version para mac. Existen librerías muy interesantes para  Axure, además de las que puedes crear tu mismo para tus necesidades, además de una activa comunidad y muchos tutoriales para aprender. La versión de evaluación dura 30 días y la licencia para un puesto cuesta 589 USD.

Balsamiq Mockups for Desktop 1.6.1

http://www.balsamiq.com

Es la next big thing del wireframing, con una historia detrás que hace que automáticamente nos caiga bien, ingeniero que se va de una gran corporación a lograr sus sueño.

Tiene un marcado estilo gráfico que le da a los prototipos un aspecto muy “a mano” y parece estar muy orientada a la conceptulización de pantallas más que a pruebas funcionales.
Existen librerías de elementos de interfaz, pero su integración con la herramienta resultan un poco toscos, aunque existen elementos para prácticamente cualquier necesidad.

Para usos centralizados, la herramienta parece que se integra fácilmente en un wiki, con lo que los proyectos se puedes realizar y seguir desde ahí.

Además Balsamiq  tiene un montón de guiños simpáticos, como “i need inspiration”, aunque también te puede sacar de quicio si no has licenciado tu copia.

No me gusta que los elementos  de interfaz no se puedan customizar a tus necesidades.
Si la finalidad de tus prototipos es definir pantallas de una forma rápida y visualmente potente, Balsamiq es una buena opción.

Esta herramienta corre sobre AIR y tiene dos versiones, una en entorno web y otra para escritorio. Se comercializa en dos modos de uso, uno gratuito que presenta ciertas limitaciones, y otro licenciado a 75 USD.

FlairBuilder Desktop

http://www.flairbuilder.com

Es una herramienta de escritorio que corre sobre AIR, aunque tiene una demo online que te permite testarla sin tenerte que descargar nada.

Los elementos de interfaz visualmente me han resultado un poco flojos, y echo  en falta un titulo de los elementos, o una vista en la que  se muestre elemento y titulo, por que la iconografía seleccionada no resulta clara.

Tiene una funcionalidad que debería ser obligatoria para todas las herramientas, captar pantallazos directamente. Además integra los players de los principales portales de vídeo, y eso siempre queda resulton en la maqueta.

Esta herramienta es una de las candidatas a herramienta de rápido prototipado, y esta emparentada con Balsamiq e Iplotz, aunque es un pelin más cara.

Además, esta herramienta parece ser el resultado de desarrollo heroico, por lo que tiene un merito especial.
Su precio, 95 USD.

Iplotz 1.5

http://iplotz.com

Esta herramienta  funciona en web y es una mezcla en Axure y Balsamiq. Tiene un estilo gráfico “a mano” similar a Balsamiq, y una disposición de controles y una lógica similar a Axure.

Es la herramienta que más orientada esta a la conceptulizacion de las páginas y gestión de las tareas y trabajo centralizado, ya que permite tanto desarrollar el prototipado como gestionar asignar tiempos a las tareas.
La sensación que me deja es la de querer ser una herramienta “seria-simpática”.

Si tu tarea de prototipado tiene mucho de gestión, eres el responsable de un equipo y requieres un seguimiento de tiempos muy ajustados, Iplotz es tu herramienta.

Tiene aspectos muy interesantes, como la publicación del prototipo en url y el servicio de almacenaje de proyectos. Problemas, es restringida respecto a los elementos que forman los componentes, la versión de prueba te permite solamente 1 proyecto de 5 paginas, por 15 USD. tienes un mes de herramienta con 1 GB de almacenamiento e ilimitados proyectos y paginas. También hay versión de escritorio por 75 USD.

iRise Professional Edition

http://www.irise.com

Es una herramienta de alto alcance, ya que no solo esta especializada en prototipos, sino a toda la batería de tareas afines. Ya que esta especializada para detallar requisitos, escenarios, workflows, y definición funcional.  Los prototipos que genera están orientados a maquetas navegables y a presentaciones. A favor tiene que resulta sumamente completa, y que si trabajas en proyectos grandes con un alto número de perfiles distintos puede resultar muy útil emplear iRise  como marco de trabajo, la funcionalidad de control de modificaciones sencillamente te hará una persona más feliz. En contra, que obliga a un estilo gráfico limitado, que aunque resulta elegante, es parco, no se pueden usar librerías de elementos  y los elementos de interfaz no se pueden customizar.

Tiene una lógica de publicación que permite lanzar los prototipos como documento html, lo que puede ser muy útil para generar maquetas sin tener que tirar una sola línea de código.

El trial dura 30 días, pero te tienes que registrar y la empresa hace seguimiento de quien ha solicitado una prueba para recoger tu feedback, y el precio para la licencia es de 6.995 USD.

Justinmind Prototyper 2.5

http://www.justinmind.com

Son los candidatos españoles, es una herramienta de escritorio con versión para las plataformas Win y Mac. Presenta unas características muy similares a Irise. Esta herramienta permite orientar al diseño de pantallas, al diseño de diagramas funcionales y a la documentación de contenidos y requisitos.

Las opciones de elementos que permiten los diagramas resultan limitadas, pero se pueden utilizar librerías, aunque no he logrado localizar librerías de terceros y las que facilita el fabricante al ser descargadas e instaladas dan algún problema.

Es muy interesante la funcionalidad que permite documentar cambios sobre la página del prototipo (odio esos correo en lo que se habla de algo sin decir donde esta). En contra, si se lo quieres enviar a un cliente, tu cliente debe instalarse un programa de visualización.

La versión licenciada para un puesto cuesta 690 USD.

ProtoShare

http://www.protoshare.com

La herramienta es web y el trial se debe vincular a un número de una tarjeta bancaria, yo solicite una prueba y me la facilitaron sin necesidad de detallar mis datos bancarios.

La herramienta es interesante, y tiene algunas opciones novedosas como la gestión de las prácticas SEO de contenidos desde la maqueta del prototipado y tiene un estilo grafico para los iconos del interfaz muy chulos.

Es la alternativa a Axure, ya que esta muy próxima en funcionalidades y prestaciones, aunque es muy superior respecto a las maquetas que genera, permitiendo vincular directamente la maqueta al track de GA. En contra, la herramienta tiene unas reacciones un poco lentas.

La web esta repleta de testimoniales un poco exagerados. La herramienta es un poco compleja, aunque si trabajas en entornos deslocalizado con ciclos de validación largos puede ser interesante.
La licencia individual cuesta 29 USD al mes con un 1Gb. de almacenaje, 2 licencias, 5 proyectos activos de cómo máximo 100 paginas  y 20 proyectos archivados.

SmartDraw 2009

http://www.smartdraw.com

Es una herramienta apabullante ya que no es una herramienta específicamente para el prototipado, sino de diagramación. Antes de empezar la evaluación ya me habían advertido que jugaba en otra liga. Aunque tiene dos templates especializados en diseño de software y diseño de paginas web.
La herramienta es de escritorio, y no permite integrar librerías.
La licencia de un año cuesta 197 USD.

Click en la imagen para ampliar.

¿Quien se ha quedado fuera de esta evaluación y  también son opciones interesantes?

Wireframesketcher

http://wireframesketcher.com

Tiene muy buena pinta, corre sobre eclipse, tiene un tutorial paso a paso de instalación y los resultados parecen muy “oldschool”. Rápida limpia y sencilla. Pero no encaja en la evaluación por que  tiene cualidades distintas a las otras herramientas analizadas. Las licencias de 1 a 4 puestos 75 USD, pero si quieres evaluar la herramienta, tienes un proyecto open-souce o trabajas para una ONG  te facilitan una licencia.

Pencil project

http://www.evolus.vn/Pencil/Home.html

Plugin para Firefox, parece muy sencillo si lo que necesitas es modelar pantallas sin complicarte la vida mucho, es gratuito.

Conclusiones:

#1 Me sorprende la cantidad de herramientas que aunque afirman estar diseñadas para el desarrollo de software no incluyen elementos básicos del desarrollo web, como es una ventana de navegador. Cierto que muchos de estos programas están definidos para generar prototipos navegables,  y que en el peor de los casos me puedo hacer un .gif con el marco del navegador, pero no costaba nada incluir la ventana como elemento, esto permite por ejemplo distribuir los prototipos en papel. Ademas que algunas herramienta no me permitan  usar librerías de elementos, es otra cosa que no me gusta.

#2 Cuando todas las herramientas se han desarrollado siguiendo los mismos “goal” de diseño, parece razonable que se logren herramientas muy similares. Asi, parece haber dos enfoques claros, las herramientas “cool” basadas en AIR, que son rápidas, fáciles y resultonas y las “súper” herramientas que son entornos en si misma y permiten definir requisitos, flujos, documento funcional, protos, hacer mockups navegables, que permiten hacerlo todo, pero su curva de aprendizaje es más pronunciada.

#3 Creo que en las herramientas testadas hay dos enfoques claramente definidos, los orientados a obtener html sin mucho lió y los orientados a definir casos de  uso, y me da la sensación de que unos se me quedan pequeños algunas veces y otros me viene muy grandes otras, no me logro decidir por una herramienta, y al final estas cosas se solucionan por  el precio.

#4 Hay poco análisis sobre las herramientas que empleamos o podemos emplear en nuestro desarrollo profesional, esto no ayuda a que mejoremos como profesión, si tienes experiencias u opiniones sobre las herramientas aquí citadas, apunta y dispara.

Referencias:

• Listado de herramientas y análisis de Dan Harrelson
• Evaluación  de 16 herramientas de prototipado
• Listado de herramientas de prototipado
• Comparativa de Fairbuilder respecto a Balsamiq e Iplootz
• Enlaces a recursos de prototipado muy interesante

Actualización:

• Balsamiq mockups 1.5. ejemplo y análisis

Ante un nuevo proyecto se pueden adoptar distintas formas de aproximación. A esto se le llama metodologías del diseño.

Estas metodologías se pueden emplear de forma unitaria o combinándolas entre si, para obtener un nuevo enfoque.
Se debe tener en cuenta que también influye el ámbito de aplicación, y las disciplinas implicadas en el proceso del proyecto.

A continuación un listado de las principales metodologías de diseño :

• Diseño Axiomático, cuando se emplean axiomas para tomar decisiones. Este enfoque se basa principalmente en las necesidades funcionales del cliente.

• Diseño Orientado al Uso, cuando el diseño se centra en las tareas asociadas al uso y sus objetivos. Este enfoque penaliza la usabilidad, ya que incrementa la curva de aprendizaje, pero logra solventar problemas complejos o de alta criticidad.

• Diseño Centrado en el Usuario (UCD User Center Design) que es la metodología de diseño  más habitual en el mundo del HCI. Este enfoque coloca  todas las necesidades, deseos y limitaciones del usuario como núcleo del proceso de diseño. Por lo cual esta metodología conlleva por definición investigación y análisis del usuario. Así mismo implica que el proyecto debe ser faseados para garantizar los resultados. Dentro del UCD hay metodologías especificas , como son KES (Kansei Engineering System) o  QFD (Quality Function Deployment).

• Enfoque Ascendente, que consiste en partir de un elemento o de las características individuales de los elementos para desarrollar la totalidad del producto. Este es el método empleado por Google en sus adds de productos.

• Enfoque descendente, consistente en generar el producto desconociendo los elementos que lo configuran, esta técnica se emplea para desarrollar por ejemplo templates  web.
• Pensamiento de diseño (Thinking design) es una metodología de resolución de problemas, y de detección y descubrimiento de nuevas oportunidades, se basa en un profundo conocimiento antropologico, en el intercambios de ideas entre equipos multidiciplinares y en los test. La gente de IDEO trabaja con este método.

Algunos principios que pueden resultar de ayuda a la hora de tomar decisiones son:

• Navaja de Ockham, consiste en eliminar los elementos innecesarios del diseño con el fin de obtener productos lo más sencillos posibles, de modo que se reduce la posibilidad de que existan incoherencias.

• Principio KISS (Keep It Short and Simple  o Keep it simple,stupid) se emplea cuando la sencillez es un objetivo del diseño. El principio Kiss no es en si mismo una metodología sino una estrategia de diseño y sigue el reduccionismo metodológico de Ockham.
• Timtowtdi, (There is more than one way to do it) hace referencia a que existen múltiples soluciones a un problema, es un principio muy popular en programación.

Aunque en ocasiones la imposición metodología forma parte del núcleo de la técnica, como en el caso del zen de Python.

Referencias:

• Cómo nacen los objetos
• Métodos de diseño
• Más estrategias de diseño
• Ideo Cards