Se muestran los artículos pertenecientes al tema Prototipado.
I love skecth
¿Y quién no amaría hacer prototipos y borradores con está pantalla táctil y esa interfaz?
ILoveSketch de Seok-Hyung Bae visto en Vimeo.
Ejemplo de prototipado en papel
Qué mejor manera de explicar un método para realizar test de usuario sobre prototipos creados manualmente con lápiz y papel que poner un vídeo. El prototipado en papel es bastante artesanal, se usan papeles doblados, pegamento, imaginación y algo de maña para darles la parte de interacción, aunque el resultado es bastante bueno y rápido.
Como ejemplo, este vídeo donde vemos un test de usuario para el servicio de webmail de Daum construído con tecnología ajax.
Actualización: Si antes hablo de prototipado en papel, antes lo hace Dani Torres Burriel, indicándonos un repositorio de plantillas en PDF tanto para creación de wireframes como storyboards. E incluso se pueden comprar en cuadernos.
De las entrevistas a la creación de Personajes y Escenarios
En este artículo D-Lib Magazine nos presentan de una manera sencilla y rápida la metodología para la creación de Personajes (personas) y escenarios a partir de las entrevistas realizadas a 20 personas para la creación de una herramienta para un campus universitario. Una lectura recomendada para ir ententiendo la complejidad de esta técnica.
Vía HC-Net
Más librerías de stencils para Omnigraffle
Ayer recomendaba una nueva librería de stencils para Axure, y hoy lo hago otra vez para Omnigraffle, la herramienta de prototipado por excelencia del mundo Mac.
En graffletopia además de las librerías de User Interface, hay otras categorías como arquitectura, mapas o macintosh (por si hacéis otros prototipos que no sean de aplicaciones :).
Librería de stencils para Axure
Se acaba de crear la primera librería de stencils de interfaz para Axure, uno de los programas de prototipado más famosos junto con Microsoft Visio y Omnigraffle y el emergente Balsamiq Mockups. Los stencils incluídos pueden verse en una página HTML antes de ser descargados. De momento no son muchos, pero seguramente más que suficientes para agilizar el trabajo a más de uno.
Mi sincera enhorabuena y agradecimiento a Loren Baxter, la persona que se ha encargado de la creación de esta librería.
Herramientas de prototipado: Imanes
Para aquellos que prefieren empezar sobre algo que no sea el PC, que prototipar en papel les resulta engorroso y lo llenan todo de goma de borrar, y que sienten que les falta algo. Os descubro, vía guui.com, el prototipado mediante imanes.
Utilizando una pizarra metálica (esas blancas donde escribimos con rotulador) podemos crear interfaces con los kits de imanes que nos recomiendan. Desde luego una curiosa opción bastante rápida además. Incluso podemos escribir dentro de los elementos y volver a borrar. Lo podemos conseguir desde:
Review Balsamiq Mockups
Gracias a Peldi, el creador de esta genial aplicación, he tenido la oportunidad de probar la versión completa de Balsamiq Mockups y tengo que decir que dentro de su espacio es una herramienta de prototipado sencillmente genial. ¿A qué me refiero con "su espacio"? Pues a que al igual que los gadgets que usamos o al igual que otras herramientas hemos de saber para qué y cuándo han de ser usadas. Para eso nada mejor que conocer aquello que define esta aplicación.
Principales características de Balsamiq Mockups:
- Es una herramienta muy ligera y con pocos requirimientos (ideal para ultraportátiles o equipos poco potentes)
- Únicamente sirve para realizar prototipos de páginas y aplicaciones web (para aquellos a los que les sobra el 70% de Visio)
- Es mu ágil (eso es una ventaja en ocasiones, si pensamos hacer un prototipo de 50 pantallas probablemente no sea nuestra herramienta)
- Puede ser ideal para hacer algo rápido delante de un cliente (al igual que el lapiz y el papel)
Teniendo en cuenta estas particularidades, tenemos una herramienta muy barata que puede servirnos en más de una ocasión. Reconozco que lo poco que la he probado me ha resultado extremadamente rápido y ágil trabajar con ella, la facilidad para acceder a la sobresaliente galería de elementos todos ellos perfectamente ordenados, producen una enorme satisfacción.
Sé que Peldi anda trabajando en mejoras de la aplicación como la opción de añadir/insertar imágenes, así que seguiremos atentos a las nuevas versiones.
Por cierto, esta herramienta funciona sobre Adobe AIR.
Prototipar con Balsamiq Mockups y Pencil Project
Recojo el testigo que ayer me pasó Javier Babuglia para probar la herramienta de prototipado de bajo nivel Balsamiq Mockups y de paso aprovecho para comentar también el Pencil Project.
Ambas herramientas son muy similares en cuanto a funcionalidades. Son muy simples de usar. Con lo justo. Con lo que necesitamos la mayoría de las veces.
En el caso de Pencil Project tenemos la opción de ejecutarlo en el escritorio o instalarlo como una extensión de Firefox 3. De las dos herramientas es probablemente la que menos elementos de interface nos ofrece pero a cambio gestiona muy bien el tema de las hojas e incluso permite crear background pages que en proyectos con muchas pantallas se puede agradecer.
Balsamiq Mockups puede ejecutarse en web o instalado a través de la plataforma Adobe AIR (después de un módico pago de 79$). Contiene gran cantidad de figuras para crear nuestras pantallas, todas ellas con un aire muy de andar por casa, pero en realidad muy potente. Además tiene muy bien resulto la manera de posicionar los elementos mediante unas guías automáticas que sólo aparecen al arrastrar los elementos. He solicitado la versión completa de escritorio y prometo una revisión más a fondo cuando la tenga.
Ambas herramientas exportan el resultado en formato PNG lo que nos permitirá por ejemplo modificarlas después con Adobe Fireworks para completarlas.
Resumiendo: Cualquiera de las dos herramientas pueden sacarnos de un apuro, pero para un uso más continuado recomiendo el uso de Balsamiq Mockups, por que dentro de su simplicidad nos aporta una potencia que nos vendrá muy bien en el día a día.
Quedo pendiente de recibir una licencia de Mockups para hacer una revisión más a fondo del producto.
Wireframe, Blueprint, Prototipo, Mock Up...
A través de un recordatorio de Itákora recupero un post de la genial Olga Carreras en la que explica y define la terminología usada en el mundo de la arquitectura de la información cuando se realizan diagramas, así aclara entre lo que es un Wireframe, un Blueprint, un Prototipo, un Mock Up,...
El prototipado ya sea de baja (wireframe, storyboard) o de alta fidelidad (maqueta o mock up) es una herramienta indispensable en cualquier desarrollo web que hagamos y desde elclerigo! siempre he defendido e impulsado su uso, en especial el de los wireframes por las múltiples ventajas que ofrecen y la facilidad con la que nos permiten trabajar.
Espero que la aclaración de Olga os sirva a muchos para acercaros más a la creación y uso de los prototipos.
Prototipado en HTML
Comentaba el otro día el interesante post de jcorrea sobre el prototipado en papel aunque centrándome más en la parte del uso de Fireworks como herramienta de creación de wireframes. Pues hoy entro a valorar la parte del prototipado en HTML porque me ha tocado de lleno sufrir una de sus consecuencias.
Jorge hacía mención a un post de la gente de 37Signals, y está claro que aunque siempre tratemos de aprender de la experiencia de las grandes y más importantes empresas del mercado para mejorar profesionalemente, es mucho más importante ser capaces de sacar nuestras propias conclusiones a lo que leemos y aplicarlo a nuestro entorno profesional. Por eso la gente de 37Signals, quizás intentando conseguir cierta repercusión a través de la polémica, se hayan aventurado con este post del que nosotros tenemos que sacar algunas conclusiones. Aquí están las mías:
- Ellos no dicen que prescindan del prototipado en papel, sólo que pasan de este al HTML, saltando el paso del diseño en Photoshop. we usually go right from a quick paper sketch to HTML/CSS
- Esto no vale siempre, hay clientes que siguen prefiriendo el pantallazo de Photoshop, algo plano antes de pasar a algo más interactivo.
- Si no estamos seguros de acertar con la línea gráfica o el cliente no es de confianza, estamos obligados a no saltarnos ese paso. O tendremos mucho más trabajo.
- Una maqueta en HTML+CSS+Javascript es muy espectacular, al cliente le entra por los ojos rápidamente y nos puede ayudar a la hora de "vendérsela".
Como siempre que alguien me da a elegir entre más de dos opciones, la respuesta es "depende". No podemos aferrarnos siempre a lo mismo, en cada proyecto y con cada cliente deberemos ser capaces de dar solución a un problema de la manera más óptima. Tener el conocimiento de las diferentes formas de afrontar un proyecto nos proporcionará el estar preparados ante cualquier reto que se nos presente.
Prototipos en papel de Vimeo, Twitter, Flickr,...
En el blog deeplinking publicaron hace ya algún tiempo bocetos/prototipos en papel de algunas de las nuevas aplicaciones más importantes de la web como Twitter, Flickr Places o Vimeo, destaca en especial la enorme galería que los chicos de Vimeo tienen colgada en Flickr, así como la versión original de Twitter (stat.us)
Prototipado en papel:
Los prototipos de papel son una forma de crear una imagen palpable de lo que será una futura aplicación o sitio web. Su creación y manipulación es rápida y elástica y permite a los usuarios imaginarse lo que será la futura aplicación en funcionamiento sin interferencias de tipo:
Técnico: plataformas, utilización de elementos multimedia como Flash...
Gráfico: colores, maquetación , tipografía que en muchas ocasiones desvían el centro de la discusión hacia asuntos cuya importancia es muy relativa en el proceso inicial. Según el conocimiento del interlocutor con el promotor del proyecto web, nos podemos encontrar debatiendo sobre el tono de verde de una pantalla, (secundario), frente a lo principal: secciones, datos necesarios, utilización futura del producto. Como símil con la "vida real", como discutir acerca de la pintura de un coche, cuando ni siquiera sabemos cómo va a ser.
(Alzado. Prototipos de papel. 14-01-2003)
Fireworks como herramienta de prototipado
He leido en el blog de Jorge Correa su visión sobre el prototipado directamente en XHTML+CSS, pero sobre todo da una buena impresión sobre el prototipado en Fireworks y cómo es la herramienta perfecta para ello. Separando así Photoshop para retoque fotográfico, Illustrator/Freehand para vectores y Fireworks para todo lo demás. En su día además ya comenté que existen multitud de recursos disponibles para Fireworks, así que cada vez tenemos menos excusas para usarlo.
En mi caso no puedo ser muy objetivo respecto al uso de Fireworks porque para mí siempre ha sido la herramienta perfecta, me permite hacer todo lo que quiero sin las complejidades de otras herramientas de Adobe y con la sencillez que un "inculto" del diseño gráfico necesita.
Con Jorge comparto los miedos al prototipado en XHTML+CSS sobre todo porque lo estoy viviendo actualmente. Un cambio de requerimientos en papel puede suponer un par de minutos al igual que en Visio/Omnigraffle/Fireworks, pero en HTML puede suponer 2 minutos o 2 horas o 2 días, aunque este análisis requiere de más tiempo y de un post dedicado exclusivamente a ello
.
Librería de Stencils Yahoo! (Visio, OmniGraffle, PNG,...)
Gracias al blog de Yusef Hassan, he llegado a este repositorio de stencils de Yahoo para prototipado. Muy completo, se puede descargar para varias aplicaciones y en distintos formatos: Visio, OmniGraffle, PDF, PNG y SVG.
Lo veo realmente útil ya que incluye elementos muy actuales como carruseles de imágenes, pantallas de móvil, elementos de interacción del iPhone, controles como sliders o sistemas de paginación.
Ya están los stencils puestos en mi Visio : )
Paleta para prototipos en OmniGraffle
Ahora que en mi día a día laboral me peleo con Mac, estoy haciendo una pequeña recopilación de herramientas y utilidades que puedan ayudarme con mi trabajo. Sin duda alguna a la hora de prototipar me decanto por OmniGraffle y el nuevo Adobe FireWorks CS3. Para el primero acabo de encontrar una muy buena paleta con formas (shapes) para el prototipado de baja definición.
Además tiene paletas para el Visio y alguna plantilla para Photoshop ideal para aquellos que usan el framework Blueprint CSS.
Cómo crear prototipos interactivos en PDF's desde Visio
Tirando de un post de Caitlin Gannon, hago una libre traducción de su artículo "How to create an interactive PDF prototype in Visio".
Si has tratado de explicar el diseño de un sitio mediante papel, sabes el valor de presentarlo en una versión interactiva con hipervínculos. Los usuarios de Visio saben que es muy sencillo crear un prototipo interactivo en HTML a partir de un set de wireframes (Archivo>Guardar como Página Web), pero para mí, el mayor inconveniente es que el prototipo no se puede transportar. Necesito una manera de comunicar los diseños por email, y no hay ninguna manera de que esté enviando un montón de archivos HTML y GIF a la gente (o un link a una página, dado que no todo el mundo tiene acceso a la red).
1. Crear hipervínculos en las páginas de primer plano, no en las de fondo - y usar los stencils del documento para gestionar las modificaciones
Es una practica habitual cuando se crean wireframes en Visio colocar los elementos standard de las páginas - cabecera, pie de página, navegación - en una página de fondo (background), así esos elementos se repetiran en cada página de primer plano (foreground). De cualquier manera, cuando publicas un PDF, Visio no crea hipervínculos de las capas de fondo. Para poder tener prototipos interactivos en PDF estos tienen que estar en las paginas de primer plano. Esto significa que para una distribución de página standard, todos los elementos de navegación tienen que estar en cada página del wireframe. Se podrían copiar y pegar los elementos de navegación en cada página, pero eso supondría un mantenimiento bestial. En vez de eso, usa los stencils del documento.
Funcionan así:
- Crea un panel de navegación, usando una forma distinta para cada link. Por ejemplo, para crear 5 pestañas en la parte superior de la página, construye cada pestaña en un bloque de texto separado.
- Para añadir hipervínculos, pulsa CTRL+K para abrir el cuadro de diálogo de hipervínculos. Después de la subdirección (no de la dirección), pincha Examinar y encuentra la página de tu wireframe sobre la que quieres hacer el vínculo. (O introduce la URL). Pincha OK.
- Repite 1 y 2 todo lo necesario. Una vez que esté hecha el área de navegación, agrúpala (selecciona todos los elementos, y presiona Shift+CTRL+G).
- Abre los Stencil del documento: Archivo>Formas>Mostrar lápices del Documento
- Arrastra los elementos agrupados de navegación al panel de Stencils.
- Haz clic derecho sobre el grupo de elementos y renómbralos (por ejemplo "NavBar")
- En cada una de las páginas de tu wireframe, arrastra este elemento sobre la página de primer plano y colócalo en su posición.
- Si necesitas hacer cambios al grupo de navegación, haz clic derecho sobre el stencil del documento y selecciona Edición maestra>Edición de forma maestra. Cualquier cambio que hagas se actualizará automáticamente en todas las páginas.
Para que los hipervínculos del PDF funcionen, usa el menú de PDF en Visio (Adobe PDF>Convertir a Adobe PDF). Por alguna razón, si usas Archivo>Imprimir y eliges Adobe PDF como impresora, los hipervínculos en el PDF no funcionan.
El resultado final tendrá hipervínculos funcionando en cada página. Para cambiar los estados de los botones o crear otros elementos interactivos, necesitarás editar el archivos en Acrobat (evita este paso hasta que estés seguro de que el archivo está acabado, porque si rehaces el PDF desde Visio los cambios en Acrobat se habrá perdido)
3. LLévalo al siguiente nivel
Y esto es todo. Espero que a alguien le sirva este artículo tanto como a mí.
Recursos para prototipado
Una serie de muy buenos recursos para prototipado, incluyendo muchos pinceles, plantillas y ejemplos. Organizado en artículos a modo de pequeños tutoriales.
Todo ello en: GUUUI.com : The Interaction Designer’s CoffeBreak
Además viene aderezado con artículos semanales.
Prototipado ágil con Powerpoint 2007
Acabo de descubrir un toolkit de Microsoft para poder crear prototipos ágiles con PowerPoint 2007. Puede que sea una buena opción a la hora de crear con cierta rapidez e inmediatez estructuras y presentárselas al cliente.
Si consigo un Office 2007 lo probaré.
Idealista.com, no me lo quito de la cabeza
Ando estos días en pleno proceso de creación de wireframes del sitio web de una nueva red inmobiliaria, y estoy teniendo un serio problema: no consigo quitarme a Idealista de la cabeza. Idealista es en estos momentos el mayor portal inmobiliario de España, con más de 230.000 anuncios (a 25 de Febrero) y más de 300.000 usuarios subscritos a su boletín de noticias. No tengo datos de sus visitas (1 millón mensuales según un artículo de ElPais.com 18/11/2007), pero viendo el número de anuncios, nos podemos hacer una idea aproximada de su tamaño. Por si esto no fuera suficiente, durante hace mucho tiempo sigo las andanzas de este portal a través del blog de su CEO, Jesús Encinar, en donde además de hablar del sector inmobiliario tiene la buena y sana costumbre de comentar los rediseños y mejoras del portal.
Supongo que todo ese material ha influido enormemente en mi subconsciente hasta el punto de considerar el buscador de inmuebles de Idealista como el mejor de su sector, ya que con únicamente dos clics (o tres) estaremos buscando un piso. Sin necesidad de rellenar ni un solo dato. A parte, las tres cajas seguidas, hacen muy pequeña la distancia entre los clics, mostrando todos los textos que el usuario desconoce, aumentando el área de clickado, y haciéndolo navegable mediante teclado; es un claro ejemplo de muy buen Diseño Centrado en el Usuario.
Durante estos días, me he centrado en crear un buscador, cuya interacción sea lo más intuitiva y simple posible. Que no requiera de casi ningún esfuerzo por parte del usuario para poder buscar el piso de sus sueños, y lo malo es que a pesar de luchar con todas mis fuerzas siempre termino en el mismo diseño. El diseño de Idealista. Intuyo que lo más fácil en este caso sería copiar el buscador. No reinventar la rueda. Ya lo dijo alguien: "Aplaudo que se rescate lo que funciona y comparto la idea de que no hay que reinventar la rueda; pero siento que tenemos la responsabilidad no de copiar lo bueno, sino de mejorarlo.".
Veo realmente complicado el poder mejorarlo, pero voy a seguir intentándolo, aunque tengo la extraña sensación de que terminaré usando el "copy&paste method" y escribiendo un mail de disculpa y agradecimiento al equipo de Idealista.
.