Justinmind Blog

It’s a very common scenario: you created a wireframe using Justinmind Prototyper, and then need to give it  a more sophisticated design. So you have to change all the menu’s properties, all the background colors, etc. Before, you had to do it manually, but now, its over.

Let’s see magic happening. See these three titles? Let’s change them to something different.

Select them all using ctrl + click.

We go to the properties panel, down.

Let’s change their color to white. Note that you can change simultaneously any properties, like size, typeface, background. You fancy it.

They’re all white now. May sound simple (and it is), but it’s a new feature for Justinmind Prototyper 2.6, and it’s very handful.

One of the main uses for hi-fi simulations is usability testing. With a prototype, you can test all user interactions, gather data and then have the modifications and comments to your clients and all team involved in the project. For this, you need to have a hi-fi wireframe made with Justinmind Prototyper and record users’ reactions, comments and notes.

Several UX designers use complete prototype to simulate a website or software experience, and even with the use of real data to make it work just like it was a programmed piece of software. This saves time and teamwork, and may also improve coding quality, since it generates a better documented process.

Why should you test your functional wireframes

Dana Chisnell has a great article about when you should record usability sessions. It involves what you will and may do with testing, which kinds of results you should expect and even legal issues. It’s a great material.

Sometimes you have a very clear opinion about your idea, but the final users don’t understand. It may seem obvious for those involved in the project, but not for everyone. And they are the ones who will use and buy what you’re working in. So, testing may help you prevent mistakes and huge errors.

But what if your testing shows you’ve got to change a lot of things? Imagine the countless hours of work lost? And the other ones you’ll need to put into the project? This can be avoided using functional wireframes.

How should you do usability tests

To test a functional mockup, you need to follow several steps. It’s not hard, and it’s a much documented procedure. There’s a great article from Microsoft that explains how to define tasks, how many people you need, how to facilitate, moderate and record. (http://msdn.microsoft.com/en-us/magazine/dd920305.aspx)

Usability testing is very important, and we believe Justinmind Prototyper can  be a great help to everyone involved in the activity.

Tools for testing: what you should use

There are plenty of options for recording screen, mouse track and users’ faces with a camera. Some solutions were listed in one of our blog posts for recording screen and mouse movements. You can use some camera recording software like Silverback (mac only) for record faces and audio. Then, you’ll have plenty of data to analyse.

The folks at Boxes and Arrows wrote a great review of software necessary to record and track usability testing. You can check it out here.

If you want more information about high fidelity wireframes and website prototyping, subscribe to Justinmind’s blog feed or drop us a line on twitter.

LAFI has just agreed to become our partner in France. From now on, Justinmind Prototyper, Ondemand and all other products will be finely represented by this great platform for distribution.

During the last few months, we’ve been receiving a lot of visitors and new users from France, so we hope this will become a great step for us.

For more information about Justinmind’s partners, visit our website.

@robwolfenden asked me on twitter about how to create a widget on Justinmind Prototyper. Because of the limitation of 140 characters, I’m going to create a quick tutorial.

For example, let’s create a button that changes color when the mouse passes over it. It’s a simple conditional trick, but very common in most website menus, and very helpful to users.

Create a button

We could create several buttons, and repeat the commands to make them highlight navigation, but Widgets can simplify the problem.

A widget won't be a button anymore

It will be light gray, but we want it to be dark when the mouse passes over.

Creating a new event

We go to the Events Panel, down there, click on the + wheel, and add a new event. In this case, it will be OnMouseOver – Change Style – Background – Color Light gray. Click done.

Drag and Drop to create a widget

Drag it to the My Widgets Panel (the second option on the Screen Components, on your left). Justinmind Prototyper will ask the name you want for the widget, and an icon to represent it. Since it’s just a quick tutorial, we won’t chose any.

Your new widget

This is the recently created widget. Just drag it to your wireframe and it’s done.

Drag and drop!

Now, you can modify the widgets any way you like it. Rename the buttons, or share it with other co-workers. On Justinmind’s widget wireframe library, you can download some more examples.

To download the file I used for this tutorial, just click on quicktour-widgets-drag-n-drop.

Any more doubts, just shoot it.

Everyone nowadays seem to have an idea of a mashup, wants to create some service that joins two web services, an API, embed widgets or something like that. You can wireframe, test and simulate this using Justinmind Prototyper.

Since version 2.6, it allows you to put a snippet of HTML code into your project, just like it was a normal webpage. For example, the <object> code, to embed YouTube videos. With copy and paste, drag and drop, and you have your video inserted in a page.

A wireframe with embedded objects has a better look and feel, will be just as if it was the finished website,  generating users’ reactions closer to the real ones. You won’t have to explain the mechanics of a paper-based usability test, and will have much more data to base your decisions on.

Remote testing

You can embed analytics code, or recording software snippets, so it may allow you to track an OnDemand prototype, live, hosted on our servers, for online remote testing.

This way, users view your simulation using just their browsers, and you’ll be able to see all data related, just like a real website.

Visit our post about recording software and our post about usability testing to find the software you can embed on our code.

Reducing size of wireframe files with server-hosted images

If you need to send your wireframe to other workers, or clients, but don’t want a big file, you can embed the images you have hosted in any server, just like a website or a newsletter, and so your file will be much smaller. This can also be used for images that you use very often, such as your logo. So you won’t have to search in your computer. You can have your mockup images in the cloud.

This could be a great resource for big software or portals projects, and also if you have several versions of the same content.

Enrich your project presentation

You no longer need to put a black box and say it’s a YouTube video. Just embed the video there, and if someone clicks, it’ll run. This works in all simulations, including Justinmind Viewer.

Have your mockups and wireframes finished as if they’re the final products. That’s the best way to test and have data you can really trust on.

If you want more information about high fidelity wireframes and website prototyping, subscribe to Justinmind’s blog feed or drop us a line on twitter.

Sometimes we are questioned about why someone should do a prototype of an app or a website instead of already building it. It sounds like working twice, doing a wireframe and then doing the real project, but in fact it may save you time. When you go directly to your prototype, all the changes will be done by all the team: designer, programmer, copywriter, business analysts, everyone involved. If you prototype before involving everyone deeply in the project, you can save your team a lot of time and energy.

Using Justinmind Prototyper, the information architect can create the website structure and annotate it, the user interface can create the wireframe, the designer can make it have a look and feel and the programmer can make all interactions, movements and data show. All of them could be able to do their part using Prototyper, without much fuss and work. It’s drag and drop, and by learning some basic commands and tricks, even a no-programmer can create some advanced navigation interactions.

Dividing the wireframe work
It’s easier to collaborate when everyone uses the same software and the same interface. By sharing files, no-one will be working on old files, will loose requirements or comments, and everyone may be able to do what they’re best doing.

Using concurrent licensing, a company can have literally several people working on the same project all over the world, sharing, collaborating and creating a great product.

Joining the work together
After everything’s done, the project will be a single file. It may be presented to the client, the boss, or tested with final users, just like it was a real one. The changes, modifications and requirements can be directly added by users, using Justinmind Viewer tool, Automatically Generated HTML or Justinmind OnDemand service, and the team will have all them available with some clicks. So, all modification can be registered.

After approval
That’s when you generate your documentation, with instructions to everyone involved about project requirements, steps to follow and everything required to make things really work. It’s much easier to draft and change something on a prototype and only code the final version.

Next version
Besides all this process, Justinmind Prototyper’s requirements management also controls versioning, helping business analysts to know which version and which changes correspond to which piece of software.

If you want more information about high fidelity wireframes and website prototyping, subscribe to Justinmind’s blog feed or drop us a line on twitter.

The folks at Justinmind Labs are already thinking about new features for a future Justinmind Prototyper 3.0. Your favourite wireframing and prototyping tool will have another bunch of functionalities that will improve your UX design and your project management even more, and yet, there is still time for suggestions and opinions. Drop us a line for suggestions.

If you didn’t try version 2.6, you can download it on our web site. For more information about the features of current version, visit our blog.

What we’re testing right now

These are the features we intend to have on Justinmind Prototyper 3.0:

Expression Builder with Drag and Drop.

Most users think that building conditionals is complicated, feels like programming, so they don’t use one of the most powerful tools of the program. Now, it’s just some clicks away. You can create a login form, and it will only work if you type the right password. Or the error message if the checkbox isn’t checked. Now there’s no excuse for not having animation and perfect simulation on your wireframe.

Conditionals, math operations, most of the interactions that used to be programmed on sites and software now can be simulated just with clicks. Now, to an almost perfect hi-fi wireframe simulation.

Simulation of events in Templates and Masters.

Besides the improvement of the latest version, the new one will have simulated events inside the Masters and Templates.

And more…

Justinmind Labs is still researching among our current and future users. We want to know what is more important to have in our software, and better understand their needs.

Do you have a suggestion for a new feature?

Send us an email. Drop a line on twitter. Visit our blog. We’re open to suggestions, and always willing to improve the software.

Designers can be very perfectionists with their projects’ images, but it doesn’t apply to all professionals involved in webdesigning. Sometimes other people are involved and they have to do changes in the project even though having less visual training. So several users of Justinmind Prototyper 2.5 asked us for a new feature which was implemented on 2.6: Widget Libraries.

With them, you can create images that are somehow constant on your projects, such as your portal’s header, a typical search widget, or anything else you might want, and share it from project to project.

Let’s say, for example, that a lead designer created the main layout of the site, and several other people are working on the other pages, which includes content, but the buttons, boxes, colours and everything else will be much alike. They will be able to copy the widgets and wireframe with the original layout, change the texts, but won’t need to redraw all the buttons, boxes or effects.

Widget Libraries on Justinmind Prototyper 2.6

In Justinmind Prototyper 2.5 you had some embedded widgets, like links, html code or layered boxes, but now this goes even further. You can create the whole style of the site. H1 are Verdana, 18, bold, H2 Garamond 12 italic, buttons are green, rounded, and bullets are whatever you may like. And the user will only drag and drop all them and have it there.

In the Screen Components, where the normal widgets are, you can on the top, you have the My Widgets panel. There are three buttons:

-          Create group of widgets. For example, Hotel X Website, with all layout widgets of the project.

-          Import widgets, which allow you to copy the widgets made by another user.

-          Export widgets, which allow you to export your widgets to another user.

Advantages of Widget Libraries

Time Saver

For those who create similar projects frequently, it’s a huge time saver. You can create frameworks for your prototypes, and have them all there. Besides, we will add and share widgets with our users on our website.

Consistency and Quality Control

The designer’s job is to create the images and widgets, and the other users (UX, AI, Copywriters, Programmers) just have to drag and drop them, guaranteeing that the whole project will look fine and consistent.

Widget Libraries were request from several users, and we found it will be very useful for all the professionals that use Justinmind Prototyper.

If you want more information about high fidelity wireframes and website prototyping, subscribe to Justinmind’s blog feed or drop us a line on twitter.

Why make a prototype if you can’t share it? No reason at all, so Justinmind Labs is currently testing a new product: On Demand Service. Using this, you’ll be able to upload a prototype made with Justinmind Prototyper and share with clients and colleagues. Then, they’ll be able to:

• Annotate wireframes
• edit / add / complete software requirements
• specify new features / interactions / details
• do usability testing, and fix problems before coding

This way, you can just send an invitation mail and have everybody involved in the project aware of what’s going on. With our Requirements tool, you’ll have all the changes and modifications listed neatly, organized, and will never loose track of what to do and what’s been done again. This way, we hope OnDemand service helps you get some more free time, because you deserve.

Testing your high fidelity mockups is going to be even easier. On Demand Service allows anyone with a browser to preview, comment and annotate a prototype, without installing any kind of software or plugin. It’s simple like sending an email or a doc file or a jpg file. The wireframe is hosted on our servers, backuped and all. No more desperate phone calls from your clients because they can’t open the file, and what’s worse, changes or lost pitches because someone didn’t understand the wireframe based on bad specifications.

All the versions and modifications are controlled, so if you have your 2.6 version about to launch (as we did last week), you can still be working on future versions, and know which part of the project belong where.

Also, you can use Justinmind OnDemand for remote usability testing. Imagine simulating a shopping website, with real data, images and embedded video, and recording user’s reactions, when they’re on their own homes? We hope several websites could improve their wireframes with more testing. You can use some software to record user’s reactions, mouse and video. Look at this post we have about recording user’s reaction with Justinmind and third-part software.

Justinmind OnDemand is a service based on our Justinmind Server product, but it doesn’t require the user to have a server on which the program will run, neither storage or bandwidth. It’s all on us. For more information about how to do usability testing using Justinmind Server, visit this post on our blog about Justinmind Server.

We plan to openly launch it on the second semester, and if you’re already using Justinmind Prototyper, you can already join in!

If you liked this article, follow our blog’s feed or follow us on twitter.

Tenth Planet Technologies has just signed a partnership with Justinmind to distribute our software in India. Besides, they’ll train, support and give consulting. We are glad to work with them and also share their enthusiasm about Indian market.

Their list of achievements is impressive, and also their view of what drives the company, which is very inspiring.