Prototipado: wireframes, mockups y prototipos
Articles,  Blog

Prototipado: wireframes, mockups y prototipos


hola mi nombre es olga carrera soy consultora en experiencia de usuario especializada en usabilidad accesibilidad y arquitectura de información y en este vídeo os voy a explicar la importancia de prototipar una aplicación web antes de comenzar a implementarla ya recomendar los recursos que os ayuden a plantear con éxito nuestros propios prototipos soy la autora del blog usable y accesible donde comparto la experiencia y los conocimientos que vivo acumulando desde que comencé a participar en desarrollos web en el año 99 antes de empezar estas son las direcciones de mi blog y de mi web en las que puedes encontrar información sobre mí y sobre mi trabajo así como artículos y recursos relacionados con la experiencia de usuario podéis contactar conmigo a través de mi web o de mi cuenta de twitter la responsabilidad de un arquitecto de información es tal y como la explica james garrett en su conocido libro los elementos de la experiencia de usuario identificar los objetivos del proyecto y las necesidades de los usuarios especificar las funcionalidades y requerimientos de la aplicación web definir y diseñar los sistemas de navegación organización etiquetado y búsqueda y finalmente realizar el prototipado de la aplicación que es lo que vamos a tratar en este vídeo nuestra responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar la información de manera efectiva de la misma manera que un arquitecto realiza los planos y la maqueta del edificio antes de que éste comienza a construirse los arquitectos de información nos valemos de la diagramación y el prototipado para especificar cuál será la organización estructura navegación y funcionamiento de la aplicación web es decir al igual que ellos realizamos planos y maquetas del sitio antes de que éste comienza a construirse los planos son diagramas de organización y funcionamiento y se suelen denominar group print diagramas de contenido flujo o mapa web será una constante a lo largo del vídeo que os indique los diferentes nombres que recibe un mismo tipo de diagramación o maqueta por diferentes autores los denominan de diferente manera y no es una terminología que esté claramente asentada todavía a la hora de realizar la diagramación de una aplicación web lo más importante es que sea comprensible y refleje con claridad la estructura el flujo de navegación y la relación entre los elementos existen diferentes propuestas para realizar la diagramación de una aplicación web un vocabulario muy utilizado y que os recomiendo conocer es el vocabulario visual para describir arquitectura de información y diseño de interacción de james garnett uno de cuyos libros recomendaba anteriormente la red es un destacado arquitecto de información muy conocido también por acuñar el término hayas en el año 2005 el diagrama que veis en pantalla es un ejemplo de diagramación de garrett de la aplicación web yahoo mail en su artículo podréis descargar librerías para aplicar su vocabulario con diferentes aplicaciones como powerpoint o vision pero como he dicho no es la única propuesta que existe lo más importante es que la diagramación sea clara y comprensible y por ello es muy recomendable incluir una leyenda con los símbolos utilizados además de estos libros os recomiendo el artículo la diagramación en la arquitectura de información de ronda león en el que recopila diferentes propuestas de vocabularios entre ellos el suyo propio las maquetas son diagramas de presentación cuyo objetivo es crear una referencia visual de la estructura organización e interacción a nivel de página vamos a ver que hay diferentes tipos y que distinguimos entre prototipos de baja fidelidad y alta fidelidad en ningún caso se debe incluir diseño gráfico en un prototipo que se realiza en etapas posteriores y que es algo que es importante aclararle al cliente cuando se le presenta el prototipo no se deben utilizar colores algo los estrictamente necesarios y por ello usamos hamás de grises los prototipos de baja fidelidad son dibujos estáticos hablamos de skating cuando realizamos bocetos de forma rápida informal con lápiz y papel para transmitir una idea o concepto con rapidez y claridad es una técnica muy útil en las entrevistas iniciales con el cliente para comunicar conceptos proponerle alternativas a un problema durante un brainstorming o las reuniones internas con el equipo de trabajo antes de comenzar un prototipo más elaborado es conveniente comenzar con este tipo de bocetos para trabajar ágilmente con varias ideas ir esquematizando las páginas y definiendo las diferentes zonas de las mismas os recomiendo como libro de referencia sketch y news espn es débil bastón con where frame es más elaborado incluye el inventariado de contenido es decir qué contenido debe estar presente en cada página los elementos de la misma como cabeceras enlaces listas formularios etcétera el etiquetado de los vínculos o de los títulos el layout es decir la ubicación colocación y agrupación de los elementos de la página así como la estrategia de navegación y la priorización de contenidos dentro de la misma web frame asimismo debería incluir el comportamiento mediante notas asociadas a los elementos para indicar cómo deben mostrarse o para definir su comportamiento funcional cuando tenemos una secuencia where frames hablamos de un storyboard los prototipos funcionales son prototipos de alta fidelidad también llamados a menudo maquetas como caps que permiten detallar el proceso interactivo de una o varias tareas son prototipos o maquetas dinámicas normalmente en html que simulan o tienen implementadas partes del sistema final a desarrollar como observamos en este ejemplo nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente las necesidades de los usuarios los requisitos del proyecto y la arquitectura de información de la aplicación web os recomiendo la lectura de mi artículo arquitectura de información fundamentos y el libro arquitectura de información en entornos web de mario pérez montoro gutiérrez la importancia de prototipar una aplicación antes de comenzar el diseño gráfico y su implementación es vital en primer lugar el equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual el cliente además ve y comprende como sea la aplicación mucho mejor que si se ofrece descrita en un documento el prototipado evita malentendidos entre el proveedor y el cliente o incluso entre los propios miembros del equipo ayuda a especificar los requerimientos a detectar inconsistencias o falta de funcionalidad y se convierte en un complemento de gran valor en el análisis en segundo lugar el prototipo se modifica con facilidad y rapidez se evitan así modificaciones posteriores mucho más costosas cuando la aplicación ya se está implementando de modo que se reducen costes y tiempos y en tercer lugar también permite realizar pruebas de usabilidad como test con usuarios en etapas tempranas del proyecto de este modo se detectan y solucionan los problemas antes de comenzar su implementación y el resultado son aplicaciones web más fáciles de entender de usar y que se ajustan mejor a las necesidades de los usuarios mi experiencia me dice que los beneficios de prototipar una aplicación web justifican con creces el tiempo que se invierte en él pues se reduce en gran medida el tiempo de desarrollo posterior y aumenta considerablemente la calidad del resultado y la satisfacción del cliente y el usuario final además de las referencias que os he ido dando a lo largo del vídeo os recomiendo mi artículo were frames donde se incluyen referencias de interés entre las que os recomiendo el artículo prototipado de la fundación sidar y el blog were frames donde encontraréis ejemplos plantillas herramientas y otros recursos también puede ser útil el glosario de usabilidad y accesibilidad para consultar aspectos terminológicos aquí tenéis también otras dos presentaciones sobre el prototipado que os pueden ser de utilidad y dónde podéis ver más ejemplos para terminar me gustaría daros cinco consejos básicos para realizar un buen prototipo y que se resumen en sencillez y claridad hazlo en blanco y negro representa los tamaños y proporciones de los bloques de contenido ten en cuenta las pautas de usabilidad y accesibilidad y sobre todo diseña para tus usuarios en resumen en este vídeo hemos hablado de la importancia de prototipar una aplicación web antes de realizar su diseño gráfico o comenzar su implementación y como a su vez el prototipado no debe comenzarse sin haber decidido primero los objetivos del sitio las necesidades de los usuarios los requisitos del proyecto y la arquitectura de información de la aplicación web hemos visto que se distingue entre planos y maquetas los planos o brooklyn’s diagramas de contenido flujo o mapa web sirven para mostrar la estructura de la aplicación y su flujo de navegación por su parte las maquetas son diagramas de presentación cuyo objetivo es crear una referencia visual de la estructura organización e interacción a nivel de página hemos visto también que se distingue entre prototipos de baja fidelidad que son estáticos y prototipos de alta fidelidad que son dinámicos hemos recomendado comenzar con un sketch es decir un boceto rápido informal con lápiz y papel y después un word frame representará con más detalle la aplicación incluyendo notas asociadas a los elementos sobre cómo se deben mostrar o su comportamiento funcional por último los prototipos funcionales son maquetas dinámicas normalmente en html que simulan o tienen implementadas partes del sistema final a desarrollar hemos visto que la terminología es muy variada y no siempre unívoca pues todavía no está claramente asentada y por ello al consultar la bibliografía y las referencias os recomiendo que no os centres en aspectos terminológicos sino las recomendaciones para realizar buenos diagramas y prototipos de vuestras aplicaciones web recuerda que el curso introducción al desarrollo web está disponible en la dirección de web punto es muchas gracias por tu atención

41 Comments

  • Charly Org

    Es muy agradable de ver y no se va mucho por las ramas. Enhorabuena por el gran video, bien explicado y muy util. Se agradece el resumen final que asienta lo visto en el video. Gracias!

  • Ignacio Porrini

    Hola Olga, muchísimas gracias por la clase. Como dijo un compañero, magistral!
    Me interesaba la arquitectura de la información antes, y ahora más teniendo claro sus fundamentos y su productividad al aplicarla.
    Gracias también por la cantidad de recursos, que aprovechare.

    Mi opinión como usuario uruguayo:
    La voz era muy clara y se entendía perfectamente pero el ritmo era muy rápido, a veces necesitaba escuchar dos veces o pausar para procesar (que no es problema).

    Saludos a todos
    Nacho

  • rafarmas ar

    Me muestra que los procesos son imprescindibles como imprescindibles es quitar algunos vicios que se van adoptando cuando se desarrolla un trabajo así. Me ha pasado que adopto acciones viciosas ya que los trabajos son urgentes o no exigen mucho, por lo que no llevo un orden y en el supuesto ahorro de tareas terminan siendo de baja calidad. .

  • rafarmas ar

    Nos ha mostrado las ventajas y beneficios del prototipado pero ¿Podria comentar sobre el mal que producen los vicios, para ser conscientes de los que no debemos hacer y que tenemos la creencia que así está bien? Gracias

  • Ivan Villamil

    Muy buen video, sigan asi… lo unico malo q le veo es que al final me estaba dando sueño (2 veces he visto el video y 2 veces me dio XD) NO DESFALLEZCAN EN ESTE PROYECTO 🙂

  • Ignacio Porrini

    Jajaja y ellos no tenían la opción de pausar jajajaj. Espero que hayas disfrutado.

    Si un día vuelves por Uruuguay, no estaría mal que te contactes con esta ong redesuy[punto]org , promueven los derechos de las personas con discapacidad, la accesibilidad y el diseño universal.

    Seguro sería muy valioso cualquier contacto con ellos, en Uruguay el campo de la accesibilidad web esta prácticamente en pañales.

    Saludos 🙂

  • iDESWEB UA

    Te aseguro que si tuviera los enlaces recogidos, organizados y en un formato exportable, lo haría… pero no, no los tengo.

  • Comunicación Menesteo

    Olga, qué maravilla haber descubierto esta plataforma de formación y haber descubierto tu blog y tu trabajo. Me está enriqueciendo mucho profesionalmente. Muchas gracias!!!

  • Emilio Correa

    Fantástico resumen!! Para mi el problema es la cultura chapucillas que impide dedicar tiempo y esfuerzo a esta parte crucial de un proyecto.  

  • Francisco Omar Avila Perez

    alguien sabe donde puedo descargar el libro de arquitectura de informacion en entorno web de mario perez?

  • M. Tonatiuh González

    Seria muy útil que agreguen los enlaces en la descripción del video o hacer una especie de link que te envíe a todos esos enlaces, pues a veces se utilizan URL muy raras.
    Gracias por los videos, son muy buenos.

  • Oscar Rdz.

    Excelente el conocimiento que nos compartes, pero el único problema es que parece que ha sido explicado por un robot, y eso no ayuda mucho a la comprensión o focalizar la atención del público ya que la voz se vuelve demasiado monótona y se podría decir vulgarmente que 'se pierde el hilo'.

  • Martin Hookeye

    aqui estan los links:
    http://nosolousabilidad.com/articulos/diagramacion.htm <—– imagen

    http://www.jmcquarrie.co.uk/2007/08/documenting-the-design-of-a-web-application-part-one-using-garretts-visual-vocabulary-to-document-the-information-architecture-2/ <—- imagen

    http://www.sccc.premiumdw.com/web202/interaction-design/ <—- imagen

    http://jjg.net/ia/visvocab/spanish.html <—- Vocabulario visual de James Jarret

    http://boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/ <— esquema (no funciona)

    http://jjg.net/ia/visvocab/ <—- "esquema"

    http://docstore.mik.ua/orelly/web2/infoarch/ch08_04.htm <— imagen

    http://nosolousabilidad.com/articulos/diagramacion.htm <—- articulo

    http://stopdesign.com/archive/2003/06/02/design-process.html <—–

    developertutorials.com/tutorials/php/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144 <——-

    http://billbuxton.com/ <——-

    http://olgacarreras.blogspot.mx/2011/07/arquitectura-de-informacion-fundamentos.htm l<——-

    OTRAS REFERENCIAS DE INTERES:

    Articulo "Wireframes" Olga Carreras:
    http://olgacarreras.blogspot.mx/2007/02/wireframes.html <——-

    Articulo "Prototipado" de fundacion Sidar:
    sidar.org/recur/desdi/traduc/es/visitable/maner/prototipado.htm <—- (no funciona)

    Blog "Wireframes":
    http://wireframes.linowski.ca/ <——-

    Glosario de usabilidad y accesibilidad:
    http://www.usableyaccesible.com/recurso_glosario.php <——-

    Presentacion "Wireframes for the wicked":
    http://www.slideshare.net/nickf/wireframes-for-the-wicked <——-

    Presentacion "Importance of Wireframes of Web Design":
    http://www.slideshare.net/hiteshmehta/importance-of-wireframe-in-web-design <——-

    http://jjg.net/elements/translations/elements_es.pdf <——-

  • runavictor

    Uahhh Olga en más de 9 minutos explicaste tu carrera de años, incluida especialización…Excelente…aprendí y me confirmo lo que decía uno de los grandes que no me acuerdo ahorita…el porque hacerlo tan difícil pal servidor era el futuro…Pero gracias confirmaste que Descartes no está descartado actualmente!!!.

  • Carlos Villegas

    Saludos desde Venezuela… Para mi que voy empezando de a poco con este tema, la informacion dada en este video es simplemente excelente.. gracias por compatir tus conocimientos!! Como decimos aca… Esta chevere!!

  • María del Pilar Rius Hernández

    Olga, buenísimo tu vídeo, me encanta el tema; ya voy a ver el curso. Tu Blog también me está ayudando mucho. Muchas gracias por compartir. Saludos desde México.

Leave a Reply

Your email address will not be published. Required fields are marked *