Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Wireframes y prototipos
Experiencia de usuario
04/1/2012
|
Daniel Torres Burriel
Llevo unas semanas dándole vueltas a este post. No sabía cómo iniciarlo, y he decidido abrir el iA Writer y ponerme a escribir, y a ver lo que sale.
La cosa es que desde que estuve preparando el curso de Técnicas de Arquitectura de la Información de UX Learn, me planteé la siguiente cuestión: estoy utilizando sin ningún criterio los términos «prototipos» y «wireframes». Y algo me decía que algo estaba haciendo mal, o diciendo mal.
Así las cosas, en una conversación con mi colega Roberto Abizanda (contraten sus servicios como coacher tecnológico para directivos porque es un crack en el tema) surgió el tema de si hay o debería haber diferencias de concepto cuando hablamos tanto de wireframes como de prototipos. Y en la conversación llegamos a la siguiente conclusión:
- Llamaremos wireframes a los planos, a los dibujos de las pantallas resultantes de la conceptualización. Planas, sin posibilidad de interacción. Podrán ser plasmados en soporte papel o en soporte digital.
- Llamaremos prototipos a las series de wireframes enlazados entre sí, en los que la interacción esté definida, contemplada y pueda ser experimentada. Podrán ser plasmados sólo en soporte digital.
Y con esa reflexión he ido modificando mi lenguaje, y adaptando la nomenclatura metodológica para establecer tres partes diferenciadas cuando estoy plasmando el trabajo de conceptualización de un proyecto:
- Sketching, para dibujar todo el sitio web, los procesos y las relaciones entre pantallas (sólo papel).
- Wireframing, para dibujar con un cierto nivel de detalle las pantallas, sus esbozos de contenido, las llamadas a la acción y en general la disposición física de los elementos (papel o digital).
- Prototipado, para diseñar y ejecutar la interacción entre las pantallas que componen los procesos (sólo digital).
Es una reflexión en voz alta, que no tiene otro ánimo que compartirlo con quien haya llegado leyendo hasta aquí. Y si a partir de ahora surge el debate, estupendo.
También puedes leer:
- ¿Por qué insisto tanto con los prototipos?
- Prototipos y wireframes en proyectos de UX
- Herramientas para hacer prototipos en 2021
- Herramientas online para hacer prototipos
Artículo actualizado en marzo de 2022
En Torresburriel Estudio apoyamos el rediseño de tu producto digital, con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.
Ya hacía falta aclarar un poco los conceptos. Creo que la mayoría los hemos usado de forma aleatoria sin pensar en sus diferencias.
Empiezo con una acédota de una profesora de cálculo, que ante la diversidad en los libros de texto sobre los términos asíntota y asníntona, decidió llamarlas, para que quedase claro en clase, «asíntota hacia arriba» y «asíntota hacia abajo» para que todos tuviésemos claro visualmente a qué nos referíamos cuando estábamos en clase o exámenes.
Hablando de wireframes, prototipos y sketching… yo también coincido contigo: hay confusión con los términos y ahora que hay tantas «voces autorizadas» con infinidad de documentación en libros y post, uno no tiene claro casi nada, aunque más o menos sepamos a qué se refiere.
Conclusión: más que los términos empleados (que puede resultar confuso), al final lo que te va a tocar explicar quieras o no son las fases de tu trabajo. Ahí quedará todo claro para las dos partes.
Por cierto, tengo mis dudas si aceptar sólo prototipos digitales. ¿No recuerdas el famoso vídeo artístico del prototipo interactivo en papel?
😛
Buenas
Para mi la utilizacion de los distintos conceptos esta mas desligada del soporte en que se presentan y mas relacionada con su proposito.
Sketches o bocetos sirven para generar y refinar las ideas del disegno. Hacen referencia a toda la pagina o a elementos concretos de interaccion y pueden ser tan detallados como queramos (normalmente hacia las ultimas iteraciones de la solucion). El soporte suele ser papel pero tambien puede ser digital (tablets).
Las wireframes sirven para fijar la idea anterior. Son basicamente documentacion para el cliente o la direccion. En proyectos «in house» en los que otros equipos (dev, disegno grafico) han participado desde el principio son practicamente innecesarios y bocetos detallados junto con los requerimientos funcionales hacen su papel. Su soporte es normalmente digital (Visio, presentacion, pdf…).
Los prototipos son una representacion mas de la solucion pero con funcionalidad e interaccion agnadida. Son el contrapunto «dinamico» a las anteriores presentaciones, mas estaticas. Se usan no solo para dar una representacion mas cohesionada del sistema sino como vehiculo para tests de usuarios. Pueden ser tanto en papel, como en forma de wireframes conectadas o programadas en el lenguaje de la aplicacion final.
Como resumen una hoja de papel con un disegno puede ser un boceto si estas con un compagnero discutiendo soluciones, un wireframe si la estas presentando a los responsables del proyecto o un prototipo si la usas para hacer un test. Una vez mas, la terminologia depende del proposito.
«Me gusta» este post porque nos aclara las ideas a las personas que tocamos este tema aunque sea tangencialmente. Ya podemos hablar con propiedad 😀
http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/ en este enlace y en este http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups comparto una buena idea de lo que es sketching y coincido con el autor del post al igual que con el prototipado, pero en wireframes tenemos varios tipos, desde low fidelity wireframes hasta los high fidelity que vienen a ser casi el sitio final… aqui una idea de lo que son los wireframes http://smashinghub.com/wireframes-web-design-and-10-tools-to-create-wireframes.htm hay otro concepto menos conocido que es a la vez util y que lo uso mucho que es el moodboard http://www.webdesignerdepot.com/2008/12/why-mood-boards-matter/ y que no hay que perder de vista espero haber colaborado con la informacion que se señala en este post. saludos!
Me parece muy interesante este post y me gusta que una persona referente en el tema comparta en voz alta sus dudas, inquietudes o llamemoslo como quieras.La verdad que yo también lo utilizaba de forma indiscriminada los dos conceptos. Lanzo una pregunta..entonces que se entiende por EBOARD?Salut!
Como ya ha comentado alguien, creo que es un error introducir en la definición el soporte o el medio con el que se realiza el diseño (papel o digital). Eso es la forma de realizarlo (que para mí, en todos los casos puede ser en papel o en digital).
Como complemento, un buen artículo de Olga Carreras del año 2008 en el que ya intentó poner orden en todas estas definiciones: http://olgacarreras.blogspot.com/2007/02/wireframes.html
Sergio: la idea de hacer una diferenciación respecto del soporte está basada en que la interacción que define a los prototipos es ciertamente complicada de plasmar en un soporte que no sea digital.
Completamente de acuerdo. Yo los utilizo de la misma manera.
Me ha gustado mucho este post, porque a veces nos olvidamos de lo importante que es tener bien claras las bases, porque a partir de ahí se construye todo.
Yo soy bastante fan de revisar siempre lo obvio, lo básico, porque creo que siempre es lo más olvidado.
Comparto la orientación del post, pero me pregunto si podríamos situar al mockup en medio. Es decir, visualmente es superior al wireframe, ya que es una maqueta fiel en look&feel al resultado final, pero puede no tener interacción, con lo que podemos tener un mockup sin tener un prototipo, que estaría definido precisamente por tener interacción. ¿O es el mockup un concepto chorra que hay que cargarse?
Ahí lo dejo
Un saludo,
Ricardo
Enhorabuena. Habéis llegado, tu coacher tecnologico y tu, a «definir» conceptos establecidos desde hace décadas, que de haber tenido alguna formación en la materia tendríais más que trillados a estas alturas.
Hola zapato. Gracias por tu comentario en cualquier caso. Aquí voy contando lo que sé, ni más ni menos.
Conocimientos bastante pobres por lo que veo, para estar impartiendo seminarios, cursos y conferencias a cambio de remuneración.
Zapato, ¿sabes cómo podrías opinar al respecto con un poco más de conocimiento de causa? 🙂 Estaremos encantados de tenerte por aquí. ¿Vienes?
Muy bueno el post así como todos los demás que brindas aquí a base de toda tu experiencia en el campo, te felicito grandemente.
Eh leído siempre estos temas ya que soy diseñador web y siempre han recomendado el libro máster «arquitectura de la información para la web» si la del oso polar, hoy en día No los encuentro en español en las grandes tiendas online de España o de países de Sudamérica – se agotaron – y quería por tu experiencia me recomiendes otro libro en español así como el oso polar que también me sirva de igual.
saludos.