how to add rich interactions to your prototype
TRANSCRIPT
HOW TO ADD RICH INTERACTIONS
TO YOUR PROTOTYPETutorial – Advanced
Rich Interactions
In Justinmind Prototyper,
you can define interactions
using the Events tab.
First all, establish what
action the user should
trigger and the event type.
01
CLICK ON“ADD ACTION”
02
Rich Interactions
Choose the user’s action from
the drop-down menu on the
top left side and click OK.
03
Rich Interactions
Then choose the type of
action you want to
execute and click OK.
Rich Interactions
Remember that you can assign more
than one action to a single component
For example, you can make a button have one reaction
when clicked and another reaction when the cursor moves over it.
The actions menu shows you which and how many actions
have been identified for each trigger.
04
Rich Interactions
A single user action can
trigger several actions in
sequence.
For example, you can
add another action that
runs after the previous.
CLICK ON THE GEAR ICON NEXT
TO “DO” AND SELECT
“ADD ACTION”
05
Rich Interactions
You can also add more
cases by clicking again
“Add Event” or clicking the
gear icon next to the type
of event and selecting
“Add interaction”.
Add Event
Add interaction
Rich Interactions
LIST OF ACTIONS
AVAILABLE
IN JUSTINMIND
Rich Interactions
Link to:
allows you to change the current screen for
the selected screen or for an Internet address
(URL). You can specify that the new screen
displays as a pop-up.
Change Style:
changes the properties of color, border, background, etc.
of a widget of the current screen.
Rich Interactions
Sow/Hide:
shows or hides existing content in the
current screen. You can also apply effects
to this action.
Set active panel:
Use this action on Dynamic Panels to change between
its tabs. To do this select a Tab of the Dynamic Panel
as the target of the action.
Rich Interactions
Set Value:
modifies the value of a label, the form field
or the variable as indicated by the user.
Select Value:
it is only valid on the selection fields of the input
form (drop-down menus, lists, checkbox groups, etc.)
and it selects the values entered by the user.
Rich Interactions
Pause:
waits for the time the user indicates before
running any action. If combined with others,
you can simulate animations; for example,
a progress bar.
Move:
This action moves a widget to a certain position in the
screen. The movement position can be defined in two
different ways:
Move To: Use this option if you want to move the selected
widget to a certain known position. The new position can
be defined as absolute in the screen or relative to the
widget that may contain the widget that is being moved
during simulation. To define the position as absolute, click
on the corresponding checkbox labeled ‘Absolute position’.
Move By: Use this option if you want to move the selected
widget by an offset defined in pixels.
Rich Interactions
Resize:
It changes the height or width of an element
dynamically. It’s specially made to prototype
liquid layouts.
Insert into:
This action inserts a specific widget into another
container widget. When a widget is inserted into a
container, its absolute position will remain the same if the
container has a free layout. Otherwise, the widget will be
inserted according to the container’s layout positioning
itself next to the closest container’s child
Rich Interactions
Data Master Action:
these are related to the simulation of dynamic
data lists and the functional forms.
Set focus on:
is used to give focus to an input field.
Rich Interactions
Scroll to:
scrolls the content to the specified element.
Enable/Disable input:
converts an input form field into editable or non-editable
Rich Interactions
Paginate data grid:
paginates a Data List
Rich Interactions
Click on the ‘Simulate’ button
to test interactions in your app
or web wireframe!
Justinmind Inc
225 Bush St. Fl. 12
San Francisco, CA 94104
www.justinmind.com
DOWNLOAD NOW
TRY IT NOW FOR FREE!Get the Justinmind editor and start prototyping