User Guide - Temple MIS

[Pages:124]User Guide

Justimind Prototyper ? User Guide

Table of Contents

Introduction................................................................................................................................... 4 Prototyping Environment ............................................................................................................. 5 Getting Started............................................................................................................................. 6

Drawing Screens....................................................................................................................... 7 Your First Interactive Protoype.................................................................................................. 8 Annotations............................................................................................................................... 8 Publish Online........................................................................................................................... 8 Creating Prototypes.................................................................................................................... 10 Workspace.............................................................................................................................. 10 Adding Content to Screens..................................................................................................... 30 Arranging Widgets.................................................................................................................. 30 Guides and Grid...................................................................................................................... 32 Widgets...................................................................................................................................... 34 Static widgets.......................................................................................................................... 34 Shapes.................................................................................................................................... 37 Input widgets........................................................................................................................... 39 Selection widgets.................................................................................................................... 42 Navigation widgets.................................................................................................................. 45 Data Grids............................................................................................................................... 49 Web widgets........................................................................................................................... 51 Styles and Formatting................................................................................................................. 53 Formatting............................................................................................................................... 53 Default Styles.......................................................................................................................... 57 Copy Styles............................................................................................................................. 58 Events and Interactions.............................................................................................................. 59

2

Justimind Prototyper ? User Guide

Events Panel........................................................................................................................... 59 Links....................................................................................................................................... 62 Interactive images................................................................................................................... 63 User Events............................................................................................................................ 64 Actions.................................................................................................................................... 65 Simulated rules and conditions............................................................................................... 77 Data Simulation.......................................................................................................................... 79 Importing Real Data................................................................................................................ 79 Expression Builder Overview.................................................................................................. 80 Smartphones and SAP............................................................................................................. 106 Reuse....................................................................................................................................... 106 Templates............................................................................................................................. 106 Masters................................................................................................................................. 109 Custom widget libraries......................................................................................................... 111 Import and Export Prototypes...............................................................................................113 Publish Online.......................................................................................................................... 115 Export to HTML........................................................................................................................ 117 Include/Exclude comments................................................................................................... 117 Optimize code....................................................................................................................... 117 Scenarios.................................................................................................................................. 118 Creating Scenarios............................................................................................................... 118 Validating Prototypes............................................................................................................ 119 Keyboard Shortcuts.................................................................................................................. 120 Additional Help......................................................................................................................... 124

3

Justimind Prototyper ? User Guide

Introduction

Justinmind Prototyper is a quick prototyping tool that allows you to create interactive and accurate simulations of the applications you need. With Justinmind Prototyper, you can easily incorporate any corporate image to your prototypes, export them in HTML format to demonstrate them on-line or automatically generate all of the documentation in an Open Office or MS Word file. And without requiring programming knowledge or a single line of code.

No Programming. Justinmind Prototyper is an intuitive tool. All that's required is to drag the components or interactions you need from the palettes to the work area.

Instantaneous Simulations. With one click on the Simulate button, you will see the prototype of your application in action. No waiting.

Documentation automatically generated. If you wish, your prototype comes with all the necessary documentation; Justinmind Prototyper generates this documentation for you; you only have to decide which format you want.

Exportable in HTML format. Without any effort, so that your customers or users can see how it works on-line and give their opinion. Use it right from the beginning of your projects for total assurance, saving you rework costs and any inconvenience to your customers, and allowing you to create applications with easy usability.

Moreover, if you publish your prototypes in Justinmind Usernote, your customers can share their remarks on-line in a collaborative effort. Follow their comments as if they were conversation threads in a forum, and take advantage of their feedback; if you do it on a prototype, you won't have to do it later on the application. Remember that Justinmind Usernote integrates the leading online testing tools on the market.

4

Prototyping Environment

5

Justimind Prototyper ? User Guide

Getting Started

There are a few concepts the user must be familiar with in order to fully understand this user's guide, so before proceeding any further we'd like to clarify the terms. Key concepts A prototype is a representation of a software program that includes only a few aspects of the eventual application and resembles it up to some degree and whose purpose is to illustrate how that application is to look and behave to get an impression of its capabilities and shortcomings. It may also be referred to as mock-up or wireframe. The user interface is the collection of all the visual components that make up an application's screen and that have a graphical representation on it. It also comprises meta data on these elements such as their layout disposition or their behaviour patterns under certain events. A screen is a group of visual components gathered into a canvas or editing area. It may also be referred to as page and is browsed at once. A functional scenario is a graph of application components that represent the application's general behaviour such as its navigability or its processing. A comment is a user's written remark often related to an added piece of information on an element of a prototype. It may also be referred to as annotation. Starting the application To start the Justinmind Prototyper? you just need to go to the installation folder (or any shortcut you may have chosen to create in the operating system menu/desktop) and double click on the icon. After that, a start-up image with a loading progress bar displays for a short time, right before the actual application interface comes up. If it is the first time you start the application or if you have not disabled the functionality in the File > Preferences menu, a welcome window which displays shortcuts for the most common tasks prompts. This window offers a handful of options to quickly start off with the program.

6

Justimind Prototyper ? User Guide

Drawing Screens

From the components palette, drag and drop the item you want in the canvas. Once inside the canvas, you can re-size and move it to fit in your design. To move it, select it and drag it to the desired destination; you can also push it with the arrow keys (holding down the CAPS key will speed it up). To help you debug your design, you also have the following instruments:

The automatic alignment system (blue guidelines).

The grid (see Mesh).

The Rules.

The Guides. To position them, click on the rules and drag them to the desired place. To delete them, simply select them and press the "delete" key.

There is a toolbar related to the work area, between the lower part of the canvas and the properties view. The two text fields indicate a reference resolution: you can change it by directly editing these values. The zoom indicator is on the right side: magnify or reduce the size by using this drop-down menu.

The elements on the screen keep a certain order of depth between them. You can see the order in which they are arranged in the Content of the current screen. Thus, the highest ones block out the ones below them. To change this order, right click the item (or select it in the content view) and select the Sort option of your choice.

The Image component allows you to see which parts of the screen will be taken up by images. Or you can replace these pictures with real images by selecting a file from the Properties view.

Create more screens in your prototype by clicking the "+" button on top of the list of screens.

Rename it by right clicking it. Select Edit from the context menu.

If you want to delete one, right click it and click Delete.

And, to edit the content of an inactive screen, double-click it from the list of screens. Its content is then loaded onto the canvas where you can easily change it.

Justinmind Prototyper allows you to copy and paste screen components within the same screen or onto other screens. You can use the options in the Edit menu or the usual keyboard shortcuts of "Ctrl+C" (copy) and "Ctrl+V" (paste). To duplicate elements, drag them to the desired position by holding down the "Ctrl" key or with "CTRL + D" (Mac keyboard shortcuts are different).

Remember: Whatever action you do, you can undo it or redo it from the Edit menu.

7

Justimind Prototyper ? User Guide

Your First Interactive Protoype

To convert a text in your prototype into a link, mark it with a specific style (for example, the classic blue color and underlined) and drag it to the screen you want it linked to in the list of screens. It is linked automatically. Thus, by activating the simulation mode, you can interact with the defined components and navigate through the different screens.

If want to allow only part of the text to be clicked on, place an Image Map over it and then drag it to the screen you choose to generate the link. The Image Map is not displayed when you click the Simulate button but the area it occupies is still interactive.

You can also move the menu elements and nodes of the tree to other screens. Just drag them onto the screen you choose (if you do the opposite, the results are the same).

Finally click on the simulate button at the top right of the canvas to see your prototype in action.

Remember: Any element dragged into a screen links the active screen to the assigned one.

Annotations

With Justinmind Prototyper, you can add comments to your wireframes and website prototypes in a click.

You can write notes and observations straight on the prototype's screens and even on its components.

To add a note on one of the components, just right click on the component and choose "add comment".

In the comment tab, you'll find everything you need to organize, search and filter all the annotations of your website prototype. And if you're using Usernote, you can even import external comments to Justinmind Prototyper so you can keep on improving your application prototype. These comments will be automatically linked to the wireframe's components.

Publish Online

At Justinmind, we think that a web prototype is the best communication tool between customers/users and the software development team. If you have an application prototype at the start of a project and it is as close as possible to the final application, the user can be involved from the beginning, giving his opinion and validating it: the more key people get involved, the more successful the project will be as a whole, reducing the number of final adjustments made on the application and not on the prototype.

With Justinmind Usernote. All authorized key users can access your prototypes on the Internet. They can collaborate by testing and commenting on them from their browser. Also, all their

8

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download