By Eric DI POL, translated by Noémie Pagan and Alex Luna from justinmind.com. This is the second part of an user review we found at Eric’s site, and we found so interesting we decided to publish here in English, and also answer some of Eric’s questions. All this was done with author’s consent. We added a few comments, for feedback and to clarify some points.

Click here to see the first post of this series.

Eric words start here:

Justinmind Server

Also called Factory Server. JustInMind Server is a single storage place where you can publish, comment and share your prototypes with your clients with your Internet browser.

Besides sharing and commenting your wireframes, the great use of JustInMind Server is revealed when you connect to a real database and utilize real data! If I’m not wrong, you could, if we use my previous example of the product sheet, use the real data in the database to show in our wireframes the “real” result!

NOTE FROM JUSTINMIND: You’re not wrong, Eric. Using real data is an intended use, and we think it’s a really powerful feature of our soft.

JustInMind Server also allows you to manage a user list and give them different access rights. Finally, it allows you to upload several different versions of your prototypes (automatic versioning management) and do a roll back if necessary.

See Factory Server Video.

Thanks to Factory Server, you can connect to a Database to utilize their data in a wireframe.

And other good surprises:

• Automatic generation of a sitemap, connected to the pages previously created;
• Visual management of the status of the pages (finished, still working…);
• Keyboard shortcuts;
• Possibility to import and read pdf or swf into wireframes;
• etc…

to see more details, see the other 12 available videos. (Note from Justinmind: we’ve added some more since Eric’s review).

HOWEVER, SOME DRAWBACKS…

Even though Axure is very potent, its interface is quite simple. Part of Axure’s interface is similar to JustInMind Prototyper’s, but as the software allows doing more things, the interface gets more complicated: additional tabs, additional contextual menus, sometimes it can be easy to get lost between various screens. Moreover, sometimes the logic isn’t easy to understand (passing from one screen to another to finish an action…)
In my opinion, Event Management Screen is not very intuitive, is a little less “eloquent” than Axure’s. To fully use it, it may be necessary to invest some time learning how to use it well. In my case, for example, I haven’t already understood how to pass variables between pages or how to create an element in different states (Axure’s “states” are called “Layered box” in JustInMind Prototyper).

EVALUATION CRITERIA

1. First uses
In the beginning, JustInMind Prototyper is not easy to use to a newbie. Even though you can recognize some automate actions you were doing on Axure, you’ll have some complex learning to utilize JustInMind Prototypes full power. Learning can last for some time, especially if you want to test all the possibilities it offers (and there’s a lot) and define the format of the functional specifications.

2. Rapid prototyping
It’s possible to go rapidly with JustInMind Prototyper. You can easily create pages and links with HTML elements. It is possible, but a shame, because you’ll loose all the other possibilities it offers you. Use Masters and/or Templates, create your process to simulate the different scenarios, fulfilling requirements… You won’t use all that, and that’s a pity.

3. File Swapping / Collaborative work

This function is not directly generated by JustInMind Prototyper, you have to use Factory Server. This server allows sharing your document with several registered users and gives you the opportunity to comment it. To an optimal use of the comments that you want to modify and evolve, there is the versioning method.

NOTE FROM JUSTINMIND: Using Justinmind Prototyper 2.6, you can also generate HTML and share your work. Also, there’s an OnDemand Service, currently on Beta, in which users can share prototypes online, using your browser.

4. Export options

JustInMind Prototyper doesn’t allow you to export your wireframes to HTML and you need to install the (free) viewer. That can be solved with Factory Server. After installing it, users can see the wireframes in their browsers without more hassle.

Even tough, I think both possibilities (the free viewer and the Server) are a cutback to the development of the software. Since it’s a paid program, I think that this is a pity not to be able to see it directly in a browser.

NOTE FROM JUSTINMIND: Eric tested a beta version, without HTML generation, but since it was a very demanded feature, we added it to our 2.6 version. Yes, you’ll be able to generate your code from JustInMind Prototyper, just as you asked.

5. Elements interactivity

There isn’t any problem about this: hyperlinks, conditions, image maps, completing forms… Sure, it’s interactive! To be very attention-driven, I’d say that I don’t know if you can relate a different link to each element of a droplist, but… the most important things about interactivity are all there.

6. Screen / Print adapted Wireframes

The only things adapted to printing are Word specifications. Everything else is screen sized. .doc is the definitive format.

7. Cost

Just a little bit more expensive than Axure for a single license ($690 for JustInMind Prototyper vs. $589 for Axure RP Pro), the price isn’t the same when we talk about 5 licenses ($ 4 290). See prices.
If price is a very important criterion, and you want to buy several licenses, it won’t be convenient… However, if you’re looking for a specialized and a high-quality-tool, it’s worth its price.

NOTE FROM JUSTINMIND: Eric noticed a mistake of ours when explaining our pricing. We have arranged that and explained in our website.

Single user licenses cost $690, and we have bulk discounts for them. They’re designed for single installations on a computer. Besides, we have floating (or concurrent) licenses, that can be shared by users within a network.

CONCLUSION

JustInMind Prototyper is a very good surprise ! It’s a complete software that has taken some advantages of its elder brother, Axure, and has improved its functionalities.
Some may be a little disappointed by the learning curve and miss Axure’s efficiency, but JustInMind Prototyper’s complexity comes together with the extraordinary possibilities of the tool. Those starting on prototyping, it’s not for you. JustInMind Prototyper is for Information Architects who want to create thorough wireframes and generate Business Analysts’ envy. Those who will learn to use it, will have a fantastic tool to simulate the functionalities of interactive applications.

Widget Libraries: prototyping easier than ever.

We’re launching a very useful new feature: Widget Libraries. With them, it’ll be easier to include pre-designed icons, templates, html and flash codes.

With pre-made libraries, you can wireframe even faster. To warp speed now.

You don’t have to create a login screen every time you do a mockup. Nor OpenID banners. Even a Flickr Badge, if it’s what you want to insert. Now, you can reuse the widgets, download from our website, or even share yours with other creators.

Create a 2-column layout? Just drag and drop, and adjust the size. Headers, links, collapsable regions or breadcrumbs? The hard work is already done. You can also save your most used fields (like a login or a shopping cart) and reinsert on another project with just a few clicks.

HTML Wireframe Generation

Now, you can generate HTML of your prototype with just a simple click , sending this to your clients, sharing with colleagues and simplifying work. This was a request from several users, and we’re glad to announce it as a new feature of our new Justinmind Prototyper 2.6 version.

Mini-screens on the right side

A great usability improvement, now the Screen Panel shows a mini-view of your screen, so it’s easier to know where you are linking to, and facilitating work. You’ll never wonder again where you are pointing at.

Conditional navigation

Now you can add conditions to you navigation flow in your Events panel. It’s easier to create login screens, simulate password errors, or any kind of navigation that’s based on different conditions.

It’s just another new feature that can easily be added with Justinmind Prototyper 2.6

Change common properties in selected widgets

Do you want to change the colours of ALL buttons at once? Increase font size for all titles? Now, by just selecting them all, you can change de properties with just a few clicks.

Work with full screen

Another improvement for the designers, you can also edit the objects while working on full screen. Just click on the icon and voila.

Improved Colour-picker

Now the colour-picker shows the current selected colour, helping (a lot) when you’re trying to select that tiny little blue dot. Neat usability asked by our users.

Hooray! It’s online.  Officially launched, as you can see on our home, download directly the brand new, tested and approved Justinmind Prototyper 2.6 for both PC and Mac. After months of coding, beta testing and preparation, we’re ready to deliver you our renewed flagship product. Now, it’s even easier to design and develop wireframes and prototypes for web, desktop and mobile applications

Click here to download both PC and Mac versions.

Among the new features are:

• Widget libraries
• HTML Wireframe Generation
• Mini-screens on the right side
• Conditional navigation
• Change common properties in selected widgets
• Work with full screen
• Improved Colour-picker

Tomorrow, I’ll do another post with detailed explanation about the new features.

The interface is clearer, and easier to use the drag and drop functions. With this new release you can simulate interactive mockups, even with real data, before starting the project development.

See some tips and tricks on our published tutorials, or wait for the new ones this week:

Tutorial 01: from wireframe to prototype

Tutorial 02:How to create a form using JustInMind Prototyper step by step

Tutorial 03: Filtering data and hiding elements with JustInMind Prototyper

Tutorial 04: Creating a comment form and simulating a comment with real data

By Eric DI POL, translated by Noémie Pagan and Alex Luna from justinmind.com. This is an user review we found at Eric’s site, and we found so interesting we decided to publish here in English, and also answer some of Eric’s questions. All this was done with author’s consent.

Eric’s words start here:

As you know, prototyping is one of my interests. After some articles about some offline tools (Powerpoint, Visio, Axure, Omnigraffle, Acrobat, Fireworks) and other online tools, (Gliffy, Jumpchart, Balsamiq, Protoshare and Pencil), I have just tested JustInMind Prototyper, and it didn’t disappoint me.

PRESENTATION

JustInMind is a Barcelona (Spain) based company that develops JustInMind Prototyper, a tool to prototype and simulate applications.

JustInMind Prototyper is available for Mac (OS X Leopard) and PC (Windows XP / Vista). I have tested JustInMind Prototyper for PC version 2.6 (still not released yet, actual version is 2.5). It still have some bugs but the program is globally stable.

This is a presentation video that gives an overview of the tools capabilities.

INTERFACE PRESENTATION

JustInMind Prototyper’s inferface is quite complete because it allows working on four elements and each element has its own tab in the main navigation screen:

• “User Interface” tab for wireframes ;
• “Functional scenarios” tab for processes ;
• “Comments” tab for comments ;
• “Requirements” tab to specify, in particular, the Business Rules of the application.

JustInMind Prototyper’s interface is somewhat similar to Axure’s.

If you have ever used Axure RP Pro, then you will probably recognise the content of the “User Interface” tab because the interface is quite similar:

• on your left, HTML components and Masters ;
• central screen, creation / edition of elements;
• on your right, notes and comments.

Finally, the search engine, upwards on the left, is very practical and allows you to find again any element on your pages.

JUSTINMIND PROTOTYPER, A VERY SERIOUS CHALLENGER TO AXURE RP PRO

Just like Axure, thanks to JustInMind Prototyper, you can create wireframes and generate functional specifications in Word format. It has a good library of pre-defined HTML components and also uses the very useful principles of Masters and Templates.

But, in other details, goes far beyond Axure.

For example, with JustInMind Prototyper, you can define requirements related to pages, specify them and use real data, for example when you connect it to a database.

Functional Scenarios

Unlike Axure, processes’ definition is related to the interfaces, it has a direct relation with your pages. Here you have a login model:

• In the “User Interface” tab, you create the “Identification” (login), “alter-id error” pages (“login error”) and “ok id” (login ok).
• In the “Functional Scenarios” screen, you create the “login process” action; drag your 3 pages to the central zone, adding the correspondent actions and decisions.
• Then, you connect the process to the corresponding pages, and you have a case management (correct/incorrect login), that allows you to simulate the precise behaviour of the application.

See functional scenarios video.

Requirements

Since wireframes can’t describe application behaviour completely on their own, JIM Prototyper adds Business Requirements (or “Business Rules”) to the functional specifications. Unlike Axure, JustInMind Prototyper integrates writing these requirements (“requirements” tab).

You can write the requirements one by one while prototyping, or write all of them altogether at the end, connecting them to HTML elements with a simple drag and drop.

JustInMind Prototyper allows a versioning system, with an historical list of modifications, where you can also define test cases and insert comments. Of course, when you export your specifications to Word format, you can define if these elements show up on the final document.

See requirements video.

Requirements screen allows you to define all Business Rules that the wireframe can’t have or explain.

The Data Masters

It’s a data base you can define, create, read, modify, cancel or search.

With data masters, you can, for instance, dynamically generate a product sheet. After deciding which kind of data it contains (product name, reference, price, brand), JustInMind Prototyper automatically generates the screens that allow you to do CRUD (Create / Read / Update / Delete) in this product sheet.

So, you can simulate creating / modifying / deleting / searching your products with the “Data Grids”, with the data you have inserted. You only have to format your pages, that simple. In addition, you can export / import these data in CSV format.

Better to see the video than listening to my large speech

NOTE FROM JUSTINMIND: we did not alter in any way Eric’s text, not even when he mentioned our competitors. We have another post with more comments, and there we answer some of Eric’s doubts and comment a little bit more about our 2.6 soon-to-be released version.

Today, we’ll show you how to simulate a comment form from a blog or a forum, using a datagrid to show the input data, and hiding the unused fields.

This tutorial was recorded on JustInMind Prototyper 2.6 for Mac, which I’m testing and is about to be the release version. I used a 2 year old MacBook, running Mac Os X Leopard and an external monitor, to have a bigger screen. Yesterday’s video was done on a PC, and the tutorial file was the same, and all the data imported from one system to another without any problems.

First of all, we’ll have to create the layout fields. We’ll need two containers and a link. The link can be created with the new widget Link, which is available on your version 2.6.

Starting - Click to enlarge

The link is just a blue text that changes when you click. Later on, we’ll add one more function.

Then we create the two other boxes. They’ll be hidden, because we don’t need them until someone clicks on it.

You click on the hidden Property.

Hidden Button

And the image will be signalled as hidden by this symbol.

Hidden Symbol

We have to create a Data Master, with four important fields: Name, Email, URL and Comment. If you need more information about Data Masters, we have another tutorial here.

Create a new datamaster

For each kind of form field, we choose a data type. Depending on which data you want, you can use money, numbers, checkboxes, etc.

Data Master details screen (click to enlarge)

We then add all the fields we want to the Data Master, and check the buttons, so JustInMind Prototyper will generate automatically all the add/edit/view data screens.

More datamaster details (click to enlarge)

So, we’ll have a Data Master called Comments, with 4 fields.

Then, we create a form, using the input text. We create the layout as we want, can put a button (remember, from version 2.6 on, you have a button widget, just drag and drop on your screen and you’ll have it placed).

After that, we select all the form elements, and with a right-click, group them into form.

Look at this video to see how I connected the input places with the Data Master by dragging and dropping.

Then, we’ll have to configure the Submit Comment button and the Comment link. We want the comment box to appear when we click the link, and to disappear when we click on Submit Comment. Besides, we’ll have a Comment box to appear and the new data to be there. So, we’ll configure like this:

Comment link:

• Show Commenting Box -> Create a New Event. We choose the Hide/show option, tick the Show and click on the Commenting box to the preview.
• Show Comment Form -> the same steps above, but choosing the comment form.

Edit Hide and Show Events

Submit Comment

• Hide Commenting Box ->Same steps above, but option Hide
• Hide Comment Form
• Show Comment Box -> This will show the second box, which was hidden until now.
• Show Datagrid -> this is where the comments are stored.
• Execute action -> New Comments Action (Comments is the name of the datagrid. This will create a new line on the table).

To insert the datagrid on our project, we drag and drop it inside the container. It must be hidden, because will only be exhibited when we submit a comment.

This datagrid is very edited, not to be show just like a table. We don’t want to show people’s emails, although we’ll collect this data. Also, we have far more space for comments than for names. This way, we have to signal that the field comment is a textarea, not just a simple text.

This video shows the datagrid editing process.

First, I compressed the first line, because we don’t want it to be shown. Then, we transform the fields to be free arranged, so we can move the objects within. Then we change the editing, putting the name in bold and the website in italic. Note that any editions that you do on the first line will be repeated on the others.

After editing, we’ll test the process, to see if it works. Here’s the test.

Tell me if you have any problems doing this.

Ain’t it neat? Tomorrow we’ll post a tutorial teaching you how to create this:

And I’ll let the files here for you to download, if you want.

How to describe a website to a developer? How it’s going to work, all the steps, phases and requirements? With text? A simple wireframe that shows where things will be?

Sometimes, you need to show relations. What kind of information a box shows when a button gets clicked, and how that colour changes when the mouse goes over. All this must be in the final product, so it has to be planned, specified and coded. So, you have to put this kind of information on the final project.

In this case, a lo-fi wireframe is not enough. These wireframes work just as a map of the web, but for a bigger site, you’ll need to show the relations. So, the ideal solution is a high-fidelity screen mockup. A file that works just as if it was the real website, reacting and interacting with the user. That cannot be done with a simple drawing tool, neither with paper.

This  video shows a paper prototyping method. It is very common to test and simulate with someone pretending to be the computer, and changing the “screens” mannualy. But it can be very tiresome to do a test, or even to simulate several screens, and even though, some projects won’t be simulated.

JustInMind Prototyper is a solution for this. You can simulate with a hi-fi mockup almost any properties your final software/website could have. Clicking, data collecting, movement links, etc. This way, nobody will be confused, requirements could be easily specified, things could  be tested and the projects could be approved by the clients even before coding.

When everyone knows what they’re doing, and how things connect and interact, it’s easier to get the project done, and reach your goals. Using a hi-fi mockup, you’ll be able to reduce costs and time expenses, improving work quality.

Symptoms:

• Communication problems between team members.
• Lack of comprehension of project requirements.
• Several changes, discrepancies between versions, modifications throughout the development phases.

Use it when:

• Exploration of an end-to-end conceptual design is possible within a week
• You need to reduce the risk of further clients’ modifications requirements.
• You need to increase the understanding between different team members.
• Testing should be done, but you don’t have enough time to code and develop the entire application.
• You want to test different design/layouts/interface solutions.

Requirements:

• Skills to use – analysis, conceptual design, information architecture, user-experience, data architecture
• Things to produce – prototype, logical data model, storyboard, process map

Today I’ll show you some things you can’t do with a wireframe, neither with a mockup. We’ll work with Data Masters, and also, a neat trick to hide and show elements onscreen, using JustInMind Prototyper.

I guess you all know blip.fm, don’t you? There, you can search a huge song database and view results. See their site here.

Blank JustInMind Prototyper's screen

We’ll simulate this situation with JustInMind Prototyper. Firstly, we get a blank screen and put some visual elements that won’t be necessary in this tutorial.

Just the simple wireframe. Click to enlarge

We have the space to put the search field, but we don’t put it there yet.

Then we need to create the Data. Let’s add a datamaster. Click on the + sign, right where the cursor points. We have to give it a name, and create the fields. We can use several kinds of fields, from emails, plain text, numbers, money, etc. For this example, we’ll use song name, artist and duration.

Data master configuration. Click to enlarge.

After creating it, notice you’ll have several other pages on you right Screens panel. They’re useful to add, edit or delete data on the form we created.

Let’s add some fake data, to show you how it will work.

Fake data. Click to enlarge.

Well, then let’s create the bottom part of the web. We’ll need some boxes with previously posted songs. We drag and drop a container, to have all the little boxes. We can make it without borders, or any design fancy you like, but let’s not mess with it right now.

The big container, full of smaller boxes

The important thing is this: because it’s a drag and drop software, by definition all elements you drop on the screen aren’t aligned in any way. They stay where you put them. But in this case, we’ll want this aligned. Inside the big container, everything must be aligned from top to bottom. In the properties menu, we select the second alignment button, and everything will be on top of other things.

Align objects button

Then we’ll add some more containers, for the elements. They have the width of the bigger container, so you’ll only see the horizontal lines. We’ll fill the ones below the first with fake data, just for simulation purposes.

The first one is special. Here, we’ll put the form, with the search result. In the object’s properties, we’ll mark the hidden option. This means when we first load the page, it will not be shown. Simulate it, and you’ll see the second rectangle there, but this one won’t be.

Hidden button

Inside it, we’ll drag and drop a data grid. A datagrid shows the content of a datamaster. We’ll arrange it to fit exactly inside the hidden rectangle, and we’ll also mark the hidden button, for it won’t be shown except when something happens.

The datagrid in the first container, the fake data on the others

With all the rectangles filled, let’s work the search form. We drag and drop from the List Components a Filter. This is a blue dashed rectangle. Let’s put it on our search bar, and put inside it the search form and button.

The filter rectangle, with a button and a search field.

We have to configure it. On the Filter properties, we’ll signal which datagrid it does filter. Note that it has a property which is not common: Datagrid. We’ll choose songs (which is the only datagrid we have, but you could have more than one in a given project).

Choosing a datagrid to manipulate data with the Filter tool

We then drag and drop a search from the field song from the Data Master Panel to the screen. I deleted the label song name, and created a button called Search Song, as you can see above.

This button is very special. It will have 3 actions: filter the datamaster, and show both the container and the filtered datagrid inside it.

So, let’s configure the button.

Going to the Events panel, we’ll add the 3 events. First, Filter song. When we add an event, we choose the instance (OnClick), and what it will do. Repeat for the three options.
OnClick – Show – and we select the container (for it will show the container)
OnClick – Show – datagrid
OnClick – Execute Action – Filter songs (here, it shows the datagrid’s name).

Configuring the events for your button

Please note that you have to select the option Show when configuring the event, because the default is Hide.

Simulate it. It will work like this:

So, did you like it?

Tags:

Wireframes

A wireframe (also “web wire frame”, “web wireframe”, “web wireframing”) is a basic visual guide used in interface design to suggest the structure of an interface and relationships between its pages. Typically, wireframes are completed before any artwork is developed. According to wikipedia.

These are examples of wireframes.

Plain Wireframe made with JustInMind Prototyper

They are useful to understand which things are going to be, sizes, patterns, structure, etc. They’re not the layout, the design of a site or software, but just the content.

Layered box. Click to enlarge

Mockup

A mockup is something more complex. It may include the design, colours, images, photos, etc. Sometimes, UX designers use moody boards, images that have colours, style, typography or any kind of visual reference for the client to approve. It gives you an idea of how it works, but may not be fully representative of how it’s going to be, and may generate some mistakes.

It looks like a website, but it’s static, you can’t click, input data or things like that.

It’s just a jpg file that looks like a web.

Prototype

A prototype simulates websites’ functionalities. For example, this video (link to youtube video of data simulation) simulates a search field, with fake data, and things happen when you click the button. It was made with JustInMind Prototyper to simulate how a real website should work, with events and transition. It can be used for a test, for showing how it will work to a client or co-workers.

Tomorrow, we’ll launch another tutorial, teaching you how to simulate a data search. I wireframed a music streaming site, and will show you how to create a real simulation of a user searching for some songs, and then showing on screen the result, based on a data master full of songs.

Besides, a neat trick to hide/show the search above the previously played songs.

This video shows you the working prototype. Tomorrow, how I’ve done it.