Rapid Prototyping 2 of 3: Digital Prototyping Video Lecture | Rapid Prototyping for Entrepreneurs: Build a Quick Demo - Software Testing

my name is Chris Conover and I'm a UX
Engineer at Google and my name is partic
and I'm a designer at Google if you're
interested in turning your ideas into a
real experience running on an actual
device then this video is for you this
is the second part in our series on
prototyping mostly Maryam talked about
sketching and paper prototyping in this
video we're going to talk about digital
prototyping digital prototyping is the
process of exploring an idea by building
an interactive experience explaining
abstract ideas and words can be tough
by creating an interactive design
artifact that other people can
experience themselves your ideas become
real digital prototypes are very helpful
when you're pitching an idea trying to
explain the design detail to an engineer
or running your user studies to validate
your designs best of all they don't
require you to know how to code which
makes it fast and easy to explore many
different ideas you know in a way
digital prototypes are a lot like
building models that architects create
an architect creates a model because it
gives their client idea of what the
finished building will look like without
hiring a construction crew and breaking
ground we use digital prototypes to
build experiences that look and behave
like the final app without using costly
engineering time over the last few years
we've seen a lot of new digital
prototyping tools enter the market they
each have their own unique set of
features and priorities some tools focus
on helping you build out the basic flow
of your app while others are more geared
towards exploring small interactions
today we're going to take a closer look
at two of these tools and see how they
can be applied to our work to give some
background our team is working on a
fictional ecommerce app and has produced
sketches and mocks showing the different
screens these artifacts had given the
team a pretty good idea of what we're
trying to build but we wanted to have
something that could be shown to
stakeholders or use to test with users I
created a digital prototype to
demonstrate the basic flow of our
e-commerce app
as you can see we have the homescreen of
our e-commerce app and I can do things
like scroll through the product feed to
go shopping and I can come up here and
look at this carousel of different
products and I can horizontally scroll
and I see this clock here let's say I
want to look into this clock and find
out more about it I can simply tap this
card and we'll transition to the product
detail page where we have a description
about what the product is and we can
also take the action to add it to our
cart so by tapping this Bab button we'll
get a toast here that confirms that this
Swiss railway clock has been added to my
cart and I can go back to the home
screen so to make this prototype
I use a tool called principle I'd like
to show you a few of the features that
made it easy to create it don't worry
about understanding everything I'm doing
this isn't meant to be a tutorial but
rather to expose you to the
possibilities of this tool so here we
are in sketch and we can see we have the
static versions of our designs now we
can import them into principle by
switching over to principle and clicking
the import button and now you see that
the designs we had in sketch are now
present in principle this is really
great because each design object that we
had control over in sketch is now
available inside a principle so you can
see inside the layer list we have access
to all these different cards and
different content pieces we notice in
the preview that we can't scroll
anything so the first step to making
this prototype feel a bit more real is
to add the ability to scroll the way I
do this is I'll click the content group
which is just this section right here
and under the vertical drop-down I'll
simply select scroll so now when we head
over to our preview window you'll notice
that we can scroll the content
vertically and we can apply the same
kind of thinking to this card carousel
here which we want to scroll
horizontally so we'll select the card
carousel and then under the horizontal
drop-down we'll switch it from static to
scroll so as you can see when I make
that change it updates my preview
automatically and so now we can test out
scrolling so we can scroll down and now
we can also scroll across
so our prototypes starting to feel a
little more real because we have
scrolling enabled but now we need to
figure out a way to get from this
initial screen to the product detail
page so we're going to talk about how to
add at Apple target that transitions to
a new screen so what we'll do first is
we'll select the card that we want to
make tap Abul and in this case we're
going to select our clock and then we
can click this little lightning bolt and
it'll show us a list of events that we
can listen to and we just want a basic
tap so when you tap this card it will
transition to the next screen
so this artboard is our detail page so
I'm dragging and then I'll just release
and we'll have a basic transition so now
let's try this out when I scroll down
and scroll over and then I click the
clock you'll notice that it
automatically switches to this new view
and it did a nice little transition of
the clock graphic to go up and this all
happen automatically which is a really
nice feature of principle so now that
we've created one tap target let's go
ahead and do another one to make it
possible to add this product to our card
so again I'll select this Add to Cart
button or fab and I'll click the
lightening bolt again and then I can
again choose tap and I'll just drag it
to the next artboard and what this will
do is it will make us transition to the
screen where this confirmation toast
here will appear so when we test this
out I can click this button and now the
toast appears and this confirmation is
great but the last thing we need to do
is make it disappear so for it to feel
realistic it needs to come into view
tell the user that they've successfully
added the item to their cart and then it
should disappear so here we are on our
page and when we click this you'll see
that the toast comes up and then it
disappears so the way we're doing that
is we can add an automatic transition to
the art board right here Auto and when
it's done animating it will switch back
to the previous state and if we click on
this transition up here we can see in
our animation panel that we can control
the duration of the toast using this
property here and so what we can do is
we can make this longer
and when we go back and test this out
you'll notice that it takes a little
while for it to like come up and it's a
slower transition so to fix that we'll
just drag it back to where we had it at
about a third of a second and we can see
that it animates in and then it animates
out and the way we have it pause on that
screen is we have this other animation
drawn out to two seconds I just want to
point out that as I'm making these
changes in here on this app and using
the preview it's also updating live on
my phone at the same time so if I again
shorten this duration here we'll notice
that it also works on the phone I can
set that back and there it is so with a
little work we're able to quickly get a
feel for how our app will work and have
an artifact that can be used to test
with users or communicate transition
ideas with other members of the team
we've only scratched the surface of what
principle can do so if any of this seems
useful to you I would encourage you to
visit w-w-w com to learn more there are
many other prototyping tools that can be
used to achieve similar results in our
next video my colleague parte quill
demonstrate prototyping and interaction
using a tool called form as you've seen
Chris created a basic prototype of
navigating through our e-commerce app
and adding an item to the cart using
Chris's prototype made the team question
if there might be a more efficient way
of adding an item to the cart without
navigating to the product detail page to
begin my exploration I start off by
working with the screens we had and
thinking about how we could incorporate
this feature I want to create something
more interactive and gestural since
we're working on mobile my initial
thought was to open sketch and design
the flow of this interaction there but
it's hard to convey motion gestures and
the overall experience of this
interaction in a static format since the
scope of this work is narrow and gesture
based I decided to use form to create an
interactive prototype form is a node
based prototyping tool for iOS and Mac
here's the home page of the e-commerce
app you can tap and hold on a card to
make it draggable then you can drag it
over the cart icon to add it to the cart
once you let go the carousel
top shifts over indicating that the
radio card has been added to the cart
this prototype clearly communicates my
design to others form also lets me share
this with anyone by simply shaking the
device let's take a look at how you
would build something like this you
start by connecting a series of patches
together to create functioning
prototypes patches are a little chunks
of logic that can be connected together
a patch can take in a value through its
inputs and then output the modified
value for example let's take a look at
how panning the radio card works
starting from left we have the pan
gesture which is connected to my radio
card image I use this patch to add the
ability to pan things around the gesture
outputs the X&Y pan which correspond to
the position of the touch on the screen
so to move the card let's say on the
x-axis I take the x pan out put put it
through a spring patch which animates
the value and then input that value into
the x position of the image patch since
I want the card to follow the position
of my touch that's a quick overview of
form if you're interested in learning
more check out the tutorials at our LT
Wacom today we took a brief look at two
digital prototyping tools but there are
many more out there
I urge you to try out several to find
the one that fits into your workflow
don't miss the next part of our series
where you'll learn about native
prototyping