Download Justinmind Prototyper Tutorials PDF

TitleJustinmind Prototyper Tutorials
File Size1.2 MB
Total Pages50
Table of Contents
                            Tutorial
Table of Contents
Introduction
Starting Work
	Defining the Contents of a Screen
	Importing external content
	Interactive screen components
	Links
	Browsing through your prototype
	Sharing your prototype
Dynamic Content
	Tabs
	Dynamic Forms
	Conditions
	Variables
	Templates
	Masters
	Templates or Masters?
	Widgets Libraries
	Simulate Drag and Drop
		Simple Drag and Drop
		Drag Events
		Actions
	Effects and Animations
		Fade
		Slide
		Swipe Gesture
	Design Patterns
		Changing the value of a text dynamically
		Tooltip
		Videos from YouTube and Google Maps
		Scroll Bars
		Conditional Drop-Downs
		Jump between input fields using the Tab key
Simulating Data
	Read Data
	Write Data
	Dynamic Data Lists
		Create a Data Master
		Simulate Searches
		Paginating Data Grids
	Forms
		Create
		Edit Form
		Delete Form
		Completing a form with the data from a line on a list
		Shopping Cart
Scrolling and Push Content
	Scroll Bars
	Push Content
Scenarios to Validate
                        
Document Text Contents
Page 2

Justimind Prototyper – Tutorial






- 2 -

Table of Contents

Table of Contents ...................................................................................................................... - 2 -

Introduction ................................................................................................................................ - 5 -

Starting Work ............................................................................................................................. - 6 -

Defining the Contents of a Screen ......................................................................................... - 8 -

Working with the screens ................................................................................................... - 9 -

Importing external content ................................................................................................... - 10 -

Interactive screen components ............................................................................................ - 11 -

Links ..................................................................................................................................... - 11 -

Browsing through your prototype ......................................................................................... - 12 -

Interactive Mockups ............................................................................................................. - 12 -

Sharing your prototype ........................................................................................................ - 14 -

Dynamic Content ..................................................................................................................... - 15 -

Tabs ..................................................................................................................................... - 15 -

Dynamic Forms .................................................................................................................... - 16 -

Conditions ............................................................................................................................ - 19 -

Variables .............................................................................................................................. - 20 -

Templates ............................................................................................................................ - 22 -

Masters ................................................................................................................................ - 23 -

Templates or Masters? ........................................................................................................ - 24 -

Widgets Libraries ................................................................................................................. - 24 -

Simulate Drag and Drop ...................................................................................................... - 24 -

Simple Drag and Drop ...................................................................................................... - 24 -

Drag Events ..................................................................................................................... - 25 -

Actions .............................................................................................................................. - 25 -

Page 25

Justimind Prototyper – Tutorial






- 25 -

The 'on drag started', 'on drag' and 'on drag stop' events lets you add interactions at each state

of the drag and drop. These events can be easily combined with 'move' and 'insert into' actions

to prototype a wide range of drag and drop interactions.

The simplest case is to make any widget in your screen 'draggable'. That will make the widget

move when the user drags it in simulation. To do so you just have to select the widget and

select the 'on drag' event. Then push the 'add interaction' button and press ok with the default

settings. That will create a 'on drag' -> 'move with cursor' interaction. Then push the simulate

button and drag the widget wherever you want to.

The 'drop' case is defined using the 'on drag stop' event. Choose this event in the same widget

you defined the drag interaction. Then push the 'add interaction' button. There select the action

you want to execute when the widget is dropped. You can even constrain the 'on drag stop'

execution to be triggered if you drop the widget on top of one of the other widgets in the

screens. To do so just select the destination widget in the 'When drop on' option next to the 'Add

condition' button.

Drag Events

 On Drag Started: Occurs when the drag begins

 On Drag: Occurs as the widget is dragged

 On Drag Stop: Occurs when the drag ends

Actions

 Move: This action moves a widget to a certain position in the screen. The movement

position can be defined in two different ways:

 To position: 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'.

 By offset: Use this option if you want to move the selected widget by an offset defined

in pixels.

 With cursor: Use the move action combined with a 'on Drag' event in order to move a

widget around the screen according to the mouse movement. A movement constraint

can also be defined.

 To drag start position: This option can be only combined with the 'on Drag' or 'on

Drag Stop' events in order to move the selected widget to its initial position when the

drag action started.

Page 26

Justimind Prototyper – Tutorial






- 26 -

 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. Widgets which

can be used as target containers for this action are dynamic panels, table cells or the

entire screen. There is only one restriction for this action: container widgets cannot be

inserted into any of their children widgets.

 On Drag Stop: Occurs when the drag ends

These actions can be also executed with other events such as 'on click' or 'on mouse over'.

Effects and Animations

This tutorial will show you how to add fade and slide effects in your software prototypes.

Justinmind Prototyper provides several techniques for adding animation to a prototype. These

include fade in/out and slide effects. In this tutorial, we'll closely examine each of the effects,

revealing all of the mechanisms Prototyper has for providing visual feedback to the user.

The effects configuration is located inside the hide/show action in the events dialog. An effect

can be associated to a hide or show action. So that if a fade effect is defined in a hide action

that will simulate a fade out.

Fade

This option allows you to adjust the opacity of elements in simulation. The fade will last the time

specified in 'Lenght' input. If you want to simulate a 'fade out' effect you have to select the

hide/show action, then select the hide option and pick the 'fade' effect. You can define a 'fade in'

effect the same way but choosing 'show' instead of 'hide'.

Slide

The slide effect animates the height and width of the matched widgets. Durations are given in

milliseconds and specified in the lengh input; higher values indicate slower animations, not

faster ones. You can add this type of effect to a hide or show action. You can define the

direction for the slide effect using the 'side' select list. This 'side' refers to where the widget will

slide in or out. So if you define a 'hide'+'slide left' action that will hide the widget towards the left.

If you select a 'show' instead, the widget will appear from the left.

Swipe Gesture

You want to simulate the swipe gesture in your mobile app prototype? It's so easy. Select the

widget you want to 'swipe', then add an 'on drag start' -> 'hide + slide' interaction and that's it!

Page 49

Justimind Prototyper – Tutorial






- 49 -

Scrolling and Push Content

When the dynamic content exceeds the space we created for it, it is possible that it will overlap

other elements close to it. To avoid this, you can use the scroll bars or the “push” feature.

Scroll Bars

The properties of dynamic panels include vertical and horizontal scroll bars. When they are

activated, you will see that they update automatically each time you insert content in their layer.

For example, drag a rectangle component inside so that part of it lies outside the panel area: it

will activate by itself without you doing anything This is a very useful option when you want the

data grids to show a lot of lines and paginating is not convenient

Push Content

This is the second option. Observe the distribution properties of a dynamic panel: if the vertical

distribution is activated, the elements in this panel will be displayed one beneath the other. If

any of them are not currently visible, the ones behind it will take up their space.

 Take a dynamic panels component to the canvas.

 Re-size it so that it takes up most of the available space.

 Create a Data Master and drag a data grid inside the dynamic panel.

 Move another dynamic panel inside the first one so that it is below the data grid.

 Within this second panel, put any screen component (a text, for example).

 Add a button in the row of the data table and click on Add Interaction (Events tab).

 Push the Data Master action Delete button and drag the row to the delete expression.

 Open the Data Master and enter a few examples of instances.

 Click on Simulate.

By pressing the button you created, the row is deleted in the data grid and the text below takes

up the space that is freed up. Use this same concept with the events Show/Hide or with panels

containing layers of different sizes.

Page 50

Justimind Prototyper – Tutorial






- 50 -

Scenarios to Validate

Justinmind Prototyper offers a system that allows you to define navigation flows in a

conceptual manner. We will call these flows “Scenarios” and you can work with them in the

Scenarios tab, located next to the User Interface.

To create one, click on the “+” button located in the right-hand panel. All the ones that the

prototype contains will appear here. Opening one is as simple as double-clicking on its name. In

fact, the operation of the scenario editor and the distribution of information are very similar to

that of the screens.

On the left you have a list of shapes or components that you can drag to the scenario. More

specifically, you can move Screens, Decisions or Actions. You can also move screens created

in the User Interface using the list located under the shapes list. Join the ones you moved with

the arrow tool in the toolbar. Click on it and you will see how the cursor adopts the shape of an

arrow. When you drag a shape on top of another with this tool selected, it creates an arrow

linking the two and draws a navigation flow.

You can begin to define a prototype creating different navigation scenarios and then create a

simulation that will adjust to them from the User Interface tab. Each time you create a screen

whose name coincides with that of a Screen shape in a scenario, you will see a preview instead

of an icon.

Note: if you click on the right button of the mouse on a Screen type shape in a scenario,

you will create an equivalent screen in the simulation.

When two Screen type shapes are linked by an arrow and both are actual screens in the

simulation, a warning symbol will emerge. This indicates that there is no event in the first screen

to cause the navigation described by the arrow. If you add one and return to the scenario, you

will see that the warning symbol has disappeared.

When you export the contents of a prototype to MS Word, all the information relating to the

scenarios will be included.

Similer Documents