Prototipado – Ignacio Buenhombre

Clases, software y consejos varios sobre como abordar un proyecto

Básicamente prototipar es hacer los planos de una casa. Ver cómo vamos a meter las cosas dentro de una casa, qué espacio ocupan y cómo

  • A. Situal todos los elementos en su sitio
  • B. Saber cómo se va a circular

No hay prototipo bueno ni malo, todo depende de lo que definas con tu cliente, y si a él le vale.

TIPOS DE PROTOTIPADO (que realmente hay dos)

Baja fidelidad: Ultrasimple, pero tiene cosas muy positivas. Idea rápida, baratos, útil con clientes no entienda un árbol de contenido, utilizar herramientas ágiles, cualquier cosa que nos permita correr (la preferida de Ignacio para estas cosas es powerpoint :) ). Luego cuando nos metamos a hacer cosas este primer boceto variará, lo importante es que aclara incertidumbres. Ideal para nosotros ahora. La idea es que la discusión se centre en el contenido y no en el diseño.

Alta fidelidad: Puede ser poco más que uno de baja fidelidad o puede ser diseño final.
Precisión del prototipo:

  1. Software como fireworks o ilustrator nos permiten tener un control hasta el píxel de lo que estamos planteando. Otros programas como axure inciden en la velocidad e creación de prototipos a través de bibliotecas y patrones prediseñados (ponerse a hacer un prototipo muy al detalle con a
  2. Es importante saber la calidad del diseñador gráfico que nos acompaña a la hora de prototipar. Si tienes un buen diseñador detrás, puedes bajar la definición de tu trabajo. Pero al final en la práctica se dedica a colorear y arrastra todo aquello que no hayas definido.
  3. Los prototipos detallados son más caros de crear, utilízalos cuando el cliente aprecie el valor que supone. «Y tú dices en ese momento ¿por qué no lo haría con axure?»
  4. Los prototipos muy precisos permiten diseñar desde el contenido, trabajar mucho sobre la importancia gráfica de cada uno de los elementos de la página

PATRONES Y BIBLIOTECAS

  1. La utilización de patrones prediseñados nos permite ganar velocidad y mejora mucho la consistencia de las soluciones que hagamos. (Más difícil pasarse en la diversidad e botones, tipos de letra etc)
  2. Permiten trabajar en quipos grandes ya que se equiparna soluciones
  3. Rebajan mucho la necesidad de «pensar». Para bien y para mal.
  4. Pueden bajar nustro valor como diseñadores «lo puede hacer cualquiera». Hay siempre una tentación subyacente (axcure, balsamic…) de acabar siendo un «reponedor de módulos». Simplemente ser consciente de ello.
  5. Encaja muy bien con la filosofía de programación web (factorización, componentización,…)

CONTENIDO REAL VS. CONTENIDO SIMULADO

  • Trabajar con contenido real nos permite detectar problemas de diseño. Proporciones de las fotos, longitudes de tectos…
  • Nos permite diesñar desde el contenido
  • Ayuda a reducir la incertidumbre porque obligas al cliente a definir qué contenidos va a poner en cada sitio. Evita el «ya lo haremos».
  • Como riesgo, puede suponer un mantenimiento duro porque te pidan que todo vaya con contenidos. Debemos utilizar contenidos reales sólo para aquellos lugares donde tenga sentido.
  • El uso de contenidos reales a la vez produce ruido en las discusiones con clientes, que a veces se focalizan en el contenido en vez de en el diseño

PROTOTIPOS NAVEGABLES O NO

  1. Permiten al cliente conocer de forma casi perfecta cómo se va a navegar la web .
  2. Son caros de mantener, a medida que avanzamos en el proyecto los cambios son más dramáticos.
  3. Nos acercan en percepción del cliente al departamento de tecnología, dejamos de ser diseñadores para ser proveedores de maquetas navegables. A Ignacio esto no le gusta nada,
  4. «En principio» nos pueden servir para testear. Aunque hay un sesgo brutal, pero algo se hace

¿CÓMO LO HACEMOS?
Recomendaciones previas: no somos Mariscal, estamos dando soluciones a problemas. Sobretodo al principio que copiemos «como cabrones», en el sentido de explorar cómo ha resuelto otro un tema similar.

  1. Cualquier herramienta vale mientras sirva para definir de acuerdo a tu cliente o a las personas con las que trabajas. (A FUEGO)
  2. Si utilizas software, que sea siempre vectorial.
  3. Es más importante la flexibilidad a la hora de cambiar que las posibilidades gráficas del programa.

Herramientas
Papel –> KILOS

Fireworks:
Gran precisión gráfica («te puedes volver loco»)
Se pueden gestionar bibliotecas con símbolos que nos permitan aumentar la productividad
Pensado para grandes proyectos
Inestable (tiene mucho peligro el cabrón «se espera, se agazapa y cuando llevas una hora sin guardar…)
Si tu diseñador también trabaja con fireworks es un «golazo».
—> Desde fireworks no te recomiendo que hagas nada navegable. Te deja hacer un poco de todo, un poco de photoshop, un poco de ilusrator.. etc.

Axure:

  • Herramienta muy productiva que permite hacer prototipos navegables con cierta facilidad
  • Su fuerza está en reaprovechar
  • Da mayor responsabilidad a tu diseñador, asegúrate que es bueno
  • Estable y ligero

–> Crea mucho código basura. Crea un árbol de contenidos muy claro.

Omnigraffle

  • Muy poca precisión gráfica. Prácticamente solo puedes establecer relaciones internas de tamaño
  • Ágil y productivo
  • Mucha librería gatuita
  • Estable y ligero
  • Hay que configurar bastante para exportar bien
  • No se puede hacer navegable

El gran problema del diseñador gráfico es que no se pone en el puesto del usuario. No nos está discutiendo cosas. En cambio tiran más hacia cosas como Dribbble al píxel.

Keynote / Powerpoint : A Ignacio cada vez

  • Muy poca precisión gráfica. Poco control sobre el tamaño real.
  • Ágil y productivo. Estable y ligero.
  • Fácil de exportar
  • Se puede hacer navegable, pero tienes que ser adicto al Redbull
  • El gran problema -> Cuidado, tu cliente puede saber más que tú de powerpoint y ponerse a tocar. Mandadlo siempre en .pdf!

TIPOS DE CLIENTES
(…)

COMO ENFRENTARSE
De lo grande a lo pequeño

NAVEGACIÓN Y ELEMENTOS COMUNES

El gran elemento de parir. ¿Cómo profundizo en los contenidos?

La navegación una vez aprobada por el cliente no se toca, por lo general siempre son cambios que acarrean mucho trabajo. Si se pone farruco el cliente no hay más remedio, pues habrá que hacerlo, pero idealmente evitarlo a cualquier precio. (MIERDAZA)

UTILIZA SIEMPRE UN GRID:

  • Ordena el espacio que utilizas
  • Te ayuda a generar orden de manera natural tan solo

SIMPLIFICA LOS ESPACIOS

  • Apoyándote en el grid
  • El uso de móviles lleva a estructuras cada vez más simple
    En la realidad cuanto más simple, más potente es el diseño y mejor se entiende

DISEÑO DE LA INFORMACIÓN

Estructurala información de tus prototipos

BIEN PERO ¿POR DÓNDE EMPIEZO?

Hazte una jerarquía de títulos y contenidos que te sirva como referencia. Cíñete a su uso hasta que tengas solocado todo el contenido.
Ejemplo: una pequeña librería de header, hiperlinks, tamaños de foto. Hacerse con el «set» y forzarse a utilizarlo.

LO IMPORTANTE MÁS GRANDE

Subir un punto, destacar con un color.

Ejemplo: en MuniMadrid crearon una retícula que se iba ampliando a medida que se navegaba hacia abajo.

[…]

Ahora vamos a hacer una matriz de tipos de clientes y qué herramientas serían más recomendables con cada uno.

Tipos de cliente:

  • Start-up: Máxima definición, pocos prototipos. Nos concentramos en dónde te doy valor y efectivamente no tienes uqe hacer muchos esfuerzos. Lo bueno es que tienen mucho de su parte y te dan ejemplos de otras webs. Por lo general no tienen mucha pasta. «Si yo te hago un prototipo navegable eso cuesta mucha pasta que puedes usar en otras cosas». Los primerizos lo quieren montar pero no tienen ni puta idea, y en los prototipos les tienes que hacer casi acompañamiento.
  • Star-up pro: Con estos surgen cada vez más oportunidades de cobrar vía revenue. Valoras el curro y luego haces una valoración.
  • Alguien con decisión dentro de una gran empresa: Siempre te van a cambiar algo. Les tienes que poner señuelos para que te cambien lo que tú quieres. Sólo tienes que hacer
  • Un esbirro dentro de una gran empresa: Uno de los pocos casos donde se puede hacer algo navegable. Puede haber malos entendidos, que se enturbie la relación, el navegable te da más armas para el de arriba entienda qué está pasando.
  • PYME: Proyectos parados porque nadie escribe los textos, el prototipo puede ser una palanca para destapar eso. Mucho más difícil venderle cualquier cosa, la pasta es suya. «Nunca trabajes para gente que la gente es suya».
  • Administraciones públicas: Nunca va a haber ninguna colaboración. Siempre que propones algo nuevo el de la administración está pensando cuánto trabajo extra le va a suponer. Nunca nunca nunca trabajas con alguien con capacidad decisoria final. Prototipos sí, pero sólo para solventar problemas que tú tengas, una cosa que sea ágil, y luego directamente diseño final. Preguntar «tú qué crees que le puede gustar a tu jefe?». Para que te pasen los contenidos es mortal, te los pasan a última hora.
  • Empresas tecnológicas:
  • Tecnología: Ignacio les llama empresas tecnocéntricas. «Nosotoros vendemos tecnología». La jungla. Mucha información y todo aterrizadito. En cuanto dejas resquicios la cagan.
  • Gente con UX: Departamentos de usabilidad que son UX guardians, dan el marchamos. Alto índice de rotación. Los peores perfiles del sector UX, gracias a Dios empiezan a haber honrosas excepciones.
  • Periódico:

    Les puedes ayudar a enfocar sus ideas y hacer cosas de v

Recursos:
No existe nada todavía para prototipado táctil