5. Prototipado

PROTOTIPADO
Grau en Enginyeria Informàtica
Interacció Persona-Ordinador
Toni Granollers
Prototyping is a great opportunity to
broaden your scope –explore larger
issues of site purpose, understanding,
and user preferences.
Toni Allen
Sr. Usability Researcher and Analyst
El Curso de Interacción Persona-Ordenador ha sido realizado
por Toni Granollers bajo la licencia Creative Commons
Reconocimiento-NoComercial 4.0 Internacional License.

Getting creative with your testing strategy in the Prototyping stage
of any project can have big payoffs. Even if you think you don’t
have anything in-hand that can be tested,
could mean
. (We’re gunning for great!)
http://www.usertesting.com/blog/2014/01/03/creative-ways-to-prototype-your-way-to-
success/?utm_source=rss&utm_medium=rss&utm_campaign=creative-ways-to-prototype-your-way-to-
success&utm_reader=feedly
Técnicas de Prototipado - GEInformàtica, IPO 2 / 83

Breve descripción
• En el contexto de la disciplina
IPO iterar hacia la
consecución de una meta es
fundamental
• Los prototipos constituyen una
herramienta imprescindible
para conseguirlo.
• En esta asignatura
• entenderemos el concepto de
prototipado en el contexto del
diseño de sistemas interactivos
• conoceremos las diferentes
técnicas
http://www.smashingmagazine.co
m/2010/06/16/design-better-
faster-with-rapid-prototyping
Fail often, fail soon
and fail cheap

• El objetivo principal de este módulo es que el alumno
conozca el concepto, la importancia y la finalidad de
realizar prototipos para implementar aplicaciones
interactivas.
• Conocer, además, las principales técnicas de
realización de prototipos y ver ejemplos.
Objetivos

Modelo de proceso
Diseño centrado en el usuario
http://www.grihotools.udl.cat/mpiua/fases-mpiua/prototipado

Prototipado
• No podemos hacer una implementación a gran escala a partir del
diseño inicial de la interfaz
• Para poder realizar evaluaciones de la usabilidad en las etapas
iniciales necesitamos prototipos
• Son documentos, diseños o sistemas que simulan o
tienen implementadas partes del sistema final
• Es una herramienta muy útil para hacer participar al usuario
en el desarrollo y poder evaluar el producto ya en las primeras
fases del desarrollo
http://www.grihotools.udl.cat/mpiua/fases-
mpiua/prototipado

Prototipado
¿Qué es un prototipo?
• Un prototipo es una implementación parcial pero
concreta del diseño de un sistema. Los prototipos
pueden ser creados para explorar muchas
cuestiones acerca del sistema durante el desarrollo
del mismo.
• Y, un prototipo de una interfaz de usuario es un
prototipo realizado con la finalidad de explorar
los aspectos interactivos del sistema (Rosson &
Carroll, 2002), incluyendo la usabilidad, la
accesibilidad y/o la funcionalidad del mismo.
http://www.grihotools.udl.cat/mpiua/fases-
mpiua/prototipado

Prototipos
Razones de su uso
• En las aproximaciones de DCU los prototipos constituyen mucho
más que simples demostraciones del producto; se utilizan para
recoger las impresiones del usuario para repercutirlas en el
diseño de la interfaz
[ISO 13407, Pág. 9]
• Los prototipos responden cuestiones y dan soporte a los
diseñadores a la hora de escoger entre varias alternativas.
• Es más, sirven para una gran variedad de propósitos como por
ejemplo para probar la fiabilidad técnica de una idea, clarificar
requisitos que quedaron “imprecisos”, ver como responde con el
resto de la aplicación, etc.

You can learn a lot in a variety of different
areas when building out a prototype:
• Learning about the PROBLEM
• What do we now know about what we’re trying to design for?
• How did building the prototype change our perceptions of how to solve the problem?
• What parts of the problem are easily solved?
• What parts of the problem remain big challenges?
• Learning about our USERS
• What new things do we now understand about our users?
• What new questions do we have about them?
• What will be easy for users to do with our design?
• What might still be messy for them to accomplish?
• Learning about the MATERIALS
• What will be easy to implement?
• What will be a challenge to pull off well?
• What new skills do we have to master to get the best design?
• Learning about POTENTIAL SOLUTIONS
• What design alternatives are there?
• Which of those alternatives provide the best outcomes?
• Why do the less appealing outcomes fail the design?
• What elements might be useful design patterns going forward?

Prototipo
Clasificación
• Baja-fidelidad
• Son rápidos, baratos y
diseñados para obtener
información del usuario lo
mas pronto posible
• Alta-fidelidad
• Los prototipos de alta
fidelidad son más costosos
e implican generalmente
programación aunque son
más aproximados al diseño
final
http://www.smashingmagazine.com/2010/06/1
6/design-better-faster-with-rapid-prototyping

Ventajas Inconvenientes
Costes desarrollo bajos Limitado para la corrección de errores
Rápida creación
Especificaciones poco detalladas (para pasar a
codificación)
Fácilidad cambios: Cualquiera puede
realizar cambios
Dirigido por el evaluador
Evaluación múltiples conceptos de
diseño
Su utilidad disminuye cuando los requisitos
estan bien establecidos
Útil para el diseño general de interfaces Navegación y flujo de aciones limitadas
Auto-sensación de prueba Pruebas sin “respuesta real”
Funcionalidad de tareas completa Elevados costes de desarrollo
Completamente interactivo Requieren mucho tiempo de implementación
Dirigido por el usuario Mayor dificultad de cambiar
Navegabilidad Cambios solo realizables por el “autor”
Aspecto semejante al producto final
Crea falsas expectativas de “producto casi
finalizado”
Puede servir como especificación Menor efectividada para recoger requisitos
Puedes servir como herramienta de
marketing (demostraciones de ventas)
BAJA
fidelidad
ALTA
fidelidad

Vertical prototype
Scenario
Horizontal prototype
Full
interface
Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press.
• Prototipos verticales
• Incluye una parte de las funcionalidades
• Sirve para realizar evaluaciones más verídicas
• Prototipos horizontales
• Interfaz completa sin funcionalidades subyacentes
• Simulación: No se puede realizar trabajo real
• Escenarios
Prototipo
Clasificación

Fases: Lifecycle definition
Define: bussiness goals, roles and use cases
scenarios/low-fi prototypes
Key users/stakeholders validate scenarios/low-fi prototypes
Hi-fi prototypes (screens, interactions, data behaviour)
Key users/stakeholders validate Hi-fi prototypes

Bocetos (sketching)
• Los bocetos son
maneras de representar
primeras ideas.
• Se usan en la etapas más iniciales del diseño, a menudo
antes incluso de determinar muchos aspectos del análisis
de requisitos, con la finalidad de recoger las primeras
impresiones del espacio de trabajo de la interacción.
http://www.grihotools.udl.cat/mpiua/
bocetos-sketching

Bocetos (sketching)
bocetos-sketching

Prototyping toolkit of a UX practitioner
http://uxdesign.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support-participatory-design

Bocetos (sketching)
http://www.alistapart.com/articles/sketching-the-visual-thinking-power-tool
bocetos-sketching

Bocetos (sketching)
http://www.adaptivepath.com/ideas/d031009 http://www.smashingmagazine.com/2010/03/04/sketch-question
http://youtu.be/iVFTBj_BYy0
bocetos-sketching

http://taehok.com/night/?page_id=64

Prototipo de papel
• Este tipo de prototipo se basa en la
utilización de papel, tijeras, lápiz o
instrumentos que se puedan utilizar para
describir un diseño en un papel.
• Este sistema nos permite
una gran velocidad y flexibilidad.
Objetivo
no es probar o verificar la estética del
diseño,
sino que se trata de verificar las ideas
interactivas.
prototipos-de-papel-paper-
prototyping

Prototipo de papel
prototyping

www.paperprototyping.com
http://blogs.msdn.com/b/jensenh/archive/2006/01/06/510069.aspx
book review
http://www.uxmatters.com/mt/archives/2
006/05/book-review-paper-prototyping.php
we continually iterate
and improve based on
our usability feedback
loop

• La técnica del prototipado de
papel consiste en dibujar en
un papel, a diferentes niveles
estéticos, las interfaces que se
van a probar y valorar.
• Los diferentes estados de la
interfaz se van dibujando en
hojas separadas y mediante
un proceso de ordenación
permite que el usuario final
interactúe con este material
simulando el funcionamiento
del sistema.
Prototipo de papel.
Ejemplo Check-in hotel
prototyping

Protipo de papel.
Ejemplo Incidències urbanes (IPO 12-13)

Windows Phone design process
1
concept
3
interaction
structure
2 4
visual
5
http://dev.windowsphone.com/en-us/design/process

• Nos situaremos en un escenario de uso de futuro en
el que el diseñador actúa como coordinador.
• El prototipo será analizado por un posible usuario
que intentará realizar algunas de las tareas a
diseñar.
• En voz alta se irán realizando las interacciones y le
iremos cambiando las hojas de papel en función de
las interacciones que vaya realizando.
Prototipo en papel. Uso

Prototipo de papel. Ventajas (1/2)
• Los problemas (funcionales y de usabilidad) pueden ser
descubiertos en una etapa muy temprana del proceso
de diseño, antes de haberlos codificado.
• Favorece la comunicación entre equipo de
diseño/desarrollo, los usuarios y los implicados.
• Favorece también la participación de todos los
miembros de los equipos multidisciplinarios
proporcionando un soporte comunicativo entre las
diferentes disciplinas.
• Son muy rápidos de construir y refinar, lo cual permite
realizar rápidas iteraciones de diseño.
• Los recursos consumidos son mínimos (materiales muy
básicos) y económicos.

Prototipo de papel. Ventajas (2/2)
• Psicológicamente es beneficioso para los usuarios:
• Resulta tan familiar para los usuarios que sin dudarlo intervienen
en las modificaciones del diseño.
• El usuario, que es consciente de la facilidad y el bajo coste del
prototipo, no se siente cohibido de proponer cualquier cambio.
• Resulta menos intimidante que un ordenador (ayuda a superar el
fenómeno conocido como tecnofobia (Weil and Rosen, 1997).
• El tiempo dedicado al proceso de codificación es cero.
• No están sujetos a restricciones impuestas por la
tecnología –arquitectura del sistema, la base de datos, el
ancho de banda, el sistema operativo–, y a pesar de ello
ayuda al equipo a anticipar problemas y decisiones
derivadas de la tecnología

Prototipo de papel. Inconvenientes
• Por su simplicidad, los prototipos de papel no sirven para
realizar evaluaciones detalladas del diseño.
• No puede simular la respuesta del sistema.
• A la hora de evaluarlo es fácil que se den por supuestas
cosas que realmente no están en el prototipo.
• La construcción de los prototipos de papel parece tan evidente
que a menudo se menosprecian aspectos importantes
• como que el prototipo se asemeje al máximo en tamaño y forma al
dispositivo para el cual estamos realizando –cuanto más realista
resulte el prototipo mejor será el feedback de los usuarios– el
prototipo, lo cual suele llevar a rediseños posteriores que inutilizan los
ya realizados.

Prototipo de papel
http://www.alistapart.com/articles/paperprototyping

Prototipo de papel. Tools
http://www.gridbooks.ca
http://konigi.com/tools/overview
http://www.raincreativelab.com/paperbrowser
• http://www.henkwijnholds.com/files/conce
pt7_a4_sketching_paper_v01.pdf
• http://fullofdesign.com/uploads/iphone_n
otepad_vertical.pdf

Prototipo de papel. Uso.
Nielsen Norman Group Training Video:
Paper Prototyping: A How-To Training Video
http://www.nngroup.com/reports/prototyping
http://www.grihotools.udl.cat/mpiua/recursos

Prototipo de papel. Uso.
http://vimeo.com/20179865

Maquetas digitales
detailled images
• Las maquetas digitales son representaciones de calidad
en formato digital que normalmente llenan el espacio que
hay entre el prototipo de papel y la versión definitiva de
una interfaz o parte ella.
maquetas-digitales

Maquetas digitales (detailled images)

Mapa (o storyboard) navegacional
Also WHITEBOARDING
http://www.grihotools.udl.cat/m
piua/mapastoryboard-
navegacional-whiteboarding

Font: http://blog.invisionapp.com/how-to-design-your-design-team

Wireframes
• Wireframes (o blueprints): guía visual que representa
el esqueleto de las interfaces del sistema interactivo
que estamos diseñando
• carece de características de detalle como el estilo
tipográfico, el color o los gráficos:
• “what a screen does, not what it looks like”
• suele iniciarse con un prototipo de baja fidelidad que
fácilmente evoluciona hasta prototipos de (casi) alta
fidelidad
• conecta la estructura de la arquitectura de la información
a la superficie, o sea, al diseño visual de la interfaz
wireframes

Wireframes
• Se centran en:
• El tipo de información que se muestra
• La gama de funciones disponibles
• Las prioridades de la información y las funcionalidades
• Las forma de visualizar ciertos tipos de información
• El efecto de representar diferentes escenarios de
interacción en la interfaz
• Tienen 3 objetivos simples, la clara presentación
de:
• Los grupos principales de información
• La información del layout/estructura
• La visualización principal y la descripción de las interacciones de
la UI
wireframes

Wireframes http://www.grihotools.udl.cat/mpiua/
wireframes

Wireframes
A detailed web page wireframeA digital skeletal wireframe
wireframes

Sketching ≠ Wireframing
http://uxmovement.com/wireframes/w
hy-its-important-to-sketch-before-you-
wireframe

Wireframes. Links de interés
• Three stages of making wireframes
• https://medium.com/brandymints-
blog/6e3a1c3f00ba
• From Wireframes to Code
• Part 1:
http://www.uxmatters.com/mt/archives/2010/
12/from-wireframes-to-code-part-i.php
• Part 2:
http://www.uxmatters.com/mt/archives/2011/
02/from-wireframes-to-code-part-ii.php
• WordPress wireframes:
http://wpdotorg.files.wordpress.com/2008/10/wf
-dashboard_v002_093008jw.pdf
• Web Site Wireframes – Samples,
Examples:
http://www.fatpurple.com/2010/03/04/web-site-
wireframes-samples-examples
• http://wireframes.linowski.ca
Wireframe toolkit para hacer
wireframes con powerpoint
en el campus virtual

(some) Wireframing tools
https://moqups.com
http://uxpin.com
https://gomockingbird.com
http://www.invisionapp.com

Mobile wireframing example http://getlaunch.com

Responsive Design wireframing
FONT: http://support.balsamiq.com/customer/portal/articles/615901

Reflexiones sobre el término “wireframe”
• http://www.torresburriel.com/weblog/2012/01/04/wirefram
es-y-prototipos
• http://olgacarreras.blogspot.com/2007/02/wireframes.html
• http://en.wikipedia.org/wiki/Website_wireframe#cite_note-
brown_168-3

Prototipado incremental y evolutivo

Prototipado incremental y evolutivo
Stage 1: Framework Drawing Stage 2: Framework Wireframing
Stage 3: Detailed Visual Design
http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1
Stage 4: Extending Fireworks
To Create iOS Prototypes
http://unitid.nl/2011/03/touch-application-prototypes-tap-
for-iphone-and-ipad-using-adobe-fireworks

En mi caso, utilizo una tableta
(wacom) para operar los
distintos softwares por
comodidad y precisión, y
apenas la uso para dibujar.
Pero sin duda, a la hora de
hacer los primeros bocetos de
cualquier proyecto, nada
mejor que el papel.
Personalmente, el hecho de
abandonar la pantalla por unos
momentos, estimula mucho
más el flujo de ideas y me
siento menos cohibido a la
hora de equivocarme. En
definitiva, de eso se trata.
Equivocarse mucho al principio
para después valorar,
comparar y encarrilar el buen
camino.
Mucha gente es incapaz de ponerse en situación con los
prototipados. Ellos esperan ver un diseño acabado. Creo que ese es
el motivo de por qué en muchos proyectos hay que empezar
aportando prototipos que en realidad son propuestas de diseño. He
visto esto en muchas ocasiones y siempre me ha sorprendido ver
como la reunión de presentación derivaba en comentarios sobre
gustos de colores, y demás ... sin dedicar ni un minuto a cuestiones
de funcionalidad y usabilidad.
Luego, claro está, aparecían los problemas.
En mi experiencia personal los prototipos de baja
fidelidad me ayudaron mucho en la comunicación y
la colaboración entres las diferentes personas del
mismo equipo y también de otros equipos como lo
de IT (casi siempre un equipo complicado en la
comunicación). Con estos prototipos conseguí hacer
partícipe estas personas en una fase muy temprana del
proyecto, añadiendo los contrastes en una fase posterior
y viendo disminuir los cambios en la fase final.
Marzo 2015
56 / 83

Prototipo de software
prototipos-software

Prototipo de software. Vilars R.A.
iTunes
Barcino 3D
Ajuntament de
Barcelona, nov-2014

Prototipo de software. Ejemplo
Incidències urbanes (IPO 12-13)

A mi la herramienta me ha parecido muy útil pues es
muy facil prever con ella problemas en la interacción
con el usuario y "ver" cuando son necesarias
pantallas de soporte (pantallas de error, mensajes
después de ejecutar una acción, pantallas que
enlazan una función con otra...)
Por otro lado, aunque me ha resultado fácil de
utilizar, si que creo que no es tan sencilla como
invisionapp. Aunque no es necesario saber código, si
que lo es saber como funcionan las funciones de
lógica básica, por ejemplo para filtrar datos de los
data masters.
Personalmente, me ha dejado alucinada. He
disfrutado mucho aprendiendo el programa y viendo
las inmensas posibilidades que tiene. Como
inconveniente le veo que al presentarle un
prototipo tan "realista" a un cliente es más
que probable que piense que el proyecto
está prácticamente terminado, y eso puede
ser un problema. Aún así... se trata de ir
haciendo pedagogía ;)
Marzo 2015

Prototipado situacional
Escenarios
• Los escenarios no son propiamente prototipos, pero
pueden considerarse en cuanto a que principalmente
describen el contexto de uso
• Elementos
• Configuración (setting)
• Agentes o actores
• Diagrama de secuencia de acciones y eventos
• Tipos
• Escenario de tareas
• Es una descripción del mundo del usuario tal como existe ahora
• Escenario de futuro
• Es una descripción del mundo del usuario en un futuro
escenarios

Escenarios
• Una historia de ficción con representación de personajes, sucesos, productos y
entornos
• Ayuda al diseñador a explorar ideas y las ramificaciones de decisiones de diseño
en situaciones concretas.
• Es interesante pensar en diferentes escenarios para reflejar las diferentes
situaciones y puntos de vista diferentes.
Scenarios good examples:
http://www.uiaccess.com/accessucd/scenarios_eg.html

http://infodesign.com.au/wp-content/uploads/Scenarios.pdf
http://infodesign.com.au/usabilityresources/scenarios

Escenario: uso de lenguaje natural
• Las descripciones en lenguaje natural se realizan, cómo su
nombre indica, mediante una narración escrita de la situación que
queremos reflejar.
• Este tipo de narraciones suelen ser las que mejor sirven para
producir rápidamente escenarios que pueden ser probados por
usuarios.
• El principal problema es en la forma de describir la situación.
• ya vimos que el uso del lenguaje natural puede dar lugar a
• interpretaciones erróneas (Sutcliffe, 2002) o
• a descripciones demasiado largas que requieren demasiado esfuerzo
por parte de los usuarios.

Escenarios & Casos de uso
• Los casos de uso describen escenarios (de uso del sistema) a
partir de secuencias de interacciones entre el sistema y uno o
más actores, los cuales obtienen los resultados observables del
sistema (el cual es considerado como una caja negra).
• En esta notación los actores representan tanto a personas como
otros sistemas que interactúan con el sistema que se está
describiendo (Scheneider , 1998).

Storyboarding (un tipo de escenarios)
storyboarding
Ejemplo de storyboard actual y futuro

Storyboarding
storyboarding

Storyboarding
• Storyboarding your ideas helps make them clear to
everyone involved in the team.
• It lets you see where potential problems may arise and take
action early in the process to solve those problems.
• It also helps to articulate the story you want to tell early in the
project.
storyboarding
https://www.interaction-design.org/ux-
daily/483/ux-consistency-summary-
and-a-final-tip

Storyboarding
(Hypothetical situation: User needs to StopAuto-Refresh functionality )
storyboarding

• Rodar o grabar un vídeo permite
desarrollar un escenario el cual
gracias al uso de técnicas de pre
y de post-producción pueden
parecer reales funcionalidades y
sistemas que solo son ideas,
están en fase muy inicial o son
imposibles de realizar (tecnología
inexistente, lugares inalcanzables,
futuro ….
Videoprototyping
http://youtu.be/aL4QOmgzvak
http://youtu.be/5WL2CwnYJHY
el-video-como-prototipo

Videoprototyping
• Starfire, Sun Microsystems:
• In 1992, Bruce Tognazzini launched a project at Sun Microsystems
in an effort to both predict and guide the future of computing. It
drew together the talents of more than 100 engineers, designers,
futurists, and filmakers.
http://www.asktog.com/starfire/index.html
http://youtu.be/rESOIqRApFk
2004
future

what level fidelity to use in a project’s
design?
• The decision should be based on a cost-benefit analysis.
• Budget. How much time and money do you have available?
• Project Phase. Are you in a project phase that requires
detailed communication of a mature design?
• UI Interaction Complexity. Does the design have a complex
interaction that needs to be shown rather than described?
• UI Workflow Complexity. Does the design traverse a complex
workflow through which users can get lost?
• Responsive Design. Does your design need to respond fluidly
to changing form factors?
• Audience Sophistication. Will your audience have difficulty
understanding your designs?

Ejemplos
• The Future of Self-Service Banking (BBVA, 2010):
http://www.youtube.com/watch?v=x-DLQp9xb20&feature=related
• IKEA Concept Kitchen 2025: https://youtu.be/qD60cBQOABY
• The Guardian iPad edition: 'Put the newspaper on the
iPad‘:
• www.guardian.co.uk/media/gallery/2011/oct/13/guardian-ipad-edition-design-evolution
• http://www.currybet.net/cbet_blog/2011/10/guardian-ipad-app.php
el-video-como-prototipo

CONCLUSION: Prototyping pitfalls
1. Focus on the Deliverable, not on the Learning
2. Too Much Converging; Not Enough Diverging
3. Working in the Wrong Fidelity
4. Too Little Evaluating
5. Fixating On A Single Prototyping Tool
BY JARED M. SPOOL
https://www.uie.com/articles/pitfalls_prototyping

CONCLUSION: The goal in prototying
is not the artifact; it’s feedbak
• I recommend never using a prototype as the final GUI. This
is not prototyping. It is development. A prototype is a mockup
that serves to demonstrate some subset of the interactive
behavior, contextual layout, and visual design. If a project
needs to iterate on fully-developed versions of the GUI, then be
sure that the team doing so is not UX designers creating
“prototypes”, but a development team building the application.
[Garett Dworman, senior UX consultant, TecEd User Research and Design with expertise in
user research, information architecture, user-centered design and how people disseminate,
access, and consume information
March 10, 2014 http://usabilitygeek.com/when-to-prototype-when-to-wireframe-fidelity]
Artifact: it’s something you make as a way of
communicating with other stakeholders (clients,
other people on the design team users)

Resources
• 18 Great Examples of Sketched
UI Wireframes and Mockups
• 10 Excellent Tools for Creating
Web Design Wireframes
• Responsive Web Design
Templates and Frameworks
• Free Wireframing Kits, UI
Design Kits, PDFs and
Resources
• Interface Libraries 3: Wireframe
Like a Professional
• The iPad Web Design
& Development
Toolbox
• Presentación
Prototipado (Cadius,
2009)

Herramientas
• www.justinmind.com  (http://www.justinmind.com/tutorials)
• www.axure.com
• http://www.balsamiq.com
• http://www.microsoft.com/expression/products/SketchFlow_Overview.aspx
• http://www.invisionapp.com
• MS Visio
• http://imar.spaanjaars.com/535/sketch-and-prototype-tools-review-part-3-microsoft-office-visio-2010
• http://www.guuui.com/issues/02_07.php
• https://pidoco.com/en
• http://ixedit.com
• https://cacoo.com
• http://www.10screens.com
• http://www.mockuptiger.com
• http://www.fluidia.org
• http://www.omnigroup.com/products/omnigraffle (for Apple)
• https://gomockingbird.com/mockingbird (en navegador)
• Listados:
• http://c2.com/cgi/wiki?GuiPrototypingTools

+ Herramientas
• https://medium.com/@extremelyn/2014-the-year-of-
design-tools-3c449d771e62
• FREE
• https://marvelapp.com
• http://www.invisionapp.com
Puede servir para tomar los prototipos de papel (fotos) y añadirles la
interactividad
Serviría también como sustituto de MS Visio. Se diseñan las pantallas
con alguna herramienta, se suben a un proyecto y es configura la
interacción
• www.proto.io

Design Principles for Wireframing
(& for prototyping in general)
• SET EXPECTATIONS - NOT JUST GOALS
• START WITH USERS - AND THEIR NEEDS
• THINK HOW, NOT WHAT
• START SIMPLE, STAY SIMPLE
• DON’T CONFUSE CHANGE WITH
IMPROVEMENT
• EVERYTHING HAS A MEANING
• BE CONSISTENT, NOT UNIFORM
• LOW-FIDELITY DOESN’T MEAN
UNREALISTIC
• EXPERIMENT & COLLABORATE QUICKLY
• YOUR DESIGNS WILL GET BUILT (a great
design can be a terrible solution)
• SHIPPED IS BETTER THAN PERFECT
http://www.onextrapixel.com/2014/06/12/design-principles-for-wireframing/

Bibliografía bàsica
Sketching User Experiences: Getting
the Design Right and the Right Design
Bill Buxton (2007)
Paper Prototyping: The Fast and Easy
Way to Design and Refine User
Interfaces
Carolyn Snyder (2003)
http://www.effectiveprototyping.com
http://www.effectiveprototyping.com/ep_excel.shtml
http://www.effectiveprototyping.com/ep_swmakers.shtml

Documentos complementarios
• Evaluación de herramientas para prototipado de
sistemas interactivos. TFC ETIG 2010:
• http://www.recercat.cat/handle/2072/209099
• Técnicas de Prototipado (documento complementario.pdf
adjunto al final de estas transparencias)
• Presentación Olga
Carreras
• Prototipado: wireframes,
mockups y prototipos:
• http://www.youtube.com/watch?v=vJrEbO5
0kxA&feature=youtu.be

Links
• Agile approach to iPhone Design: papper
prototyping+user testing
• http://www.slideshare.net/ginsburgdesign/an-agile-approach-to-
iphone-design-paper-prototyping-user-
testing?src=related_normal&rel=2289300
• Visualizing the User Experience:
• http://www.slideshare.net/grantrobinson/visualising-the-user-
experience-2261349
• http://uxmovement.com/category/wireframes

El Curso de Interacción Persona-Ordenador ha sido realizado por Toni
Granollers bajo la licencia Creative Commons Reconocimiento-
NoComercial 4.0 Internacional License.
El Factor Humano - GEInformàtica, IPO 84 / 110

5. Prototipado

Más contenido relacionado

La actualidad más candente (20)

Destacado (17)

Similar a 5. Prototipado (20)

Más de DCU_MPIUA (20)

Último (20)

5. Prototipado

Notas del editor