Surfing, I’ve found several blog entries and twits asking for software that helps people create wireframes or mockups. So, I’m going to explain why JustInMind Prototyper can be just the solution for your problems.
You can create simple wireframes, just to know where things are and show the client. The logo goes up, the navbar is better this or that way, etc.
Something like this one, just a skeleton of what the website or program is going to be. No design yet. But it’s hard to explain some functions to clients/co-workers, and also can be very difficult to text with final users.
So, you can use a mockup or a mood board. This one is a great example. It can be very helpful to approve projects, but it won’t prevent future changes. And sometimes, clients can be very confusing with what they approve and decide to change later.
But you also can create more complex mockups, that react according the the user. You click, the mockup screen changes. You fill a form, it learns the content and creates a specific site.
It is possible to prototype an entire website, showing clients or users everything your great idea is going to be, even before you start coding. This way, you can have all the changes in the project done before the coding phase, avoiding costs and reducing schedule time. Free time? We all need some, don’t we?
And now, test, approval and coding, because launching date is near!
Well, let’s start with our first JIM Prototyper Tutorial. We’ll do a series here, to try to show you what a powerful tool it can be, and what things you can do besides plain wireframes.
Doing a basic wireframe
This is like any wireframe software you know. You just have a skeleton of the structure of the site.
Plain Wireframe made with JustInMind Prototyper. Click to see in full view.
This is a plain wireframe. This was made dragging and dropping the black boxes which we’ll put images in and the text boxes. These are in the widgets panel, by your left. Their properties can be ajusted in the properties panel, below. Details such as colour, the rounded corners of some boxes and buttons (such as the search button), alignment, etc.
The level of detail is up to you. JIM gives you enough tools to let you almost recreate any design you want, and also you can import jpg, png files from Photoshop, Illustrator or any other design program.
Make it look and feel like a website
Wireframe with images. Click to enlarge.
Then we replace the boxes for the real images with the images tool. You can drop the images inside the boxes to have them at the same size, or resize at will. Note that I used a grid to help me have the same sizes.
The box on the right is not a banner. It’s a Flickr Badge made with HTML code. You can insert HTML such as that with the HTML widget on the left panel. So, when you simulate the prototype, you’ll have the same effect you should see on an actual website. Later, you’ll see that working on the final video.
The layered box: this you cannot do with paper
Next step is using the Layered Box. It’s like having three different layers on the same site, and three buttons to navigate between them.
Layered box. Click to enlarge
When you create a layered box, by default you have 3 layers, but you can create several others.
Details of a layered box with a Google Maps embbeded.
The three layers I created are called map, photos and messages. Now I have to create the navigation buttons that will make us go through the layers. So, I created three buttons, and put them on the left side of the rectangle. They’re called Where’s Alex, Photos of Alex and Leave a message to Alex. Now we need to teach JustInMind Prototyper how to shift through the layers.
Let’s click on Where’s Alex. The other buttons already have an icon over them, that indicates they will do an action. We’ll do the same to Where’s Alex.
Action with buttons
After selecting the button, we go to the Events panel, down, and click on the icon with the “+” sign. It will create another event.
We choose the trigger, which is “onClick”, the option Hide/Show, and we select the layered box. It will highlight the three layer’s selectors. We have to choose the first one, and choose the option Show on the radio button below. This means that when you click on the label Where’s Alex, it will show the first layer, called Map, where I’ve placed the embbeded html code for the map.
Click ok.
Repeat the operation for each button, linking them to their specific layers. You have it working.
How to do it
In this video, I add the funcion to the first button, and then simulate the prototype working.
Well, this is it. Hope you liked, and, of course, the comments are open to any doubts, suggestions, etc.
According to Wikipedia, “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.”
It is used to help maintain consistency within a site, because you have to specify a set of rules to all its pages, and as a way of communication between everyone involved, from developers to clients. It’s used to keep everyone speaking the same language, the same contents.
Usabilityfirst.com lists two kinds of wireframes, the static ones, mostly called wireframes or page schematics, and dynamic ones, also called prototypes. These act as functional pages, where you can go from one page to another, add content, or interact.
You can find several examples of wireframes on this Flickr group called I love wireframes, where I found this great example by pixelsebi.
It looks like a static page, but if he imported his graphics to a program such as JIM, he could’ve created a prototype that worked just as a programmed page.
When testing a software or a website, there are several ways of doing usability tests and recording user actions.
Having them recorded is important because:
You’ll have better arguments to base your changes and modifications.
You can see when/where your interface is failing.
You can calculate and create data about these mistakes.
So, when doing an usability test using a prototype done with JustInMind, what can you use?
ClickTale is an embbeded solution. Paid, you receive a code and insert it to your page. Of course, JustInMind has the possibility of inserting snippets of HTML, so they’ll work fine together. Their web says you can record every mouse movement your users make, so you can practically make an usability test from far away.
Crazy Egg is another example. With several plans, you can track clicks on several pages, and see how users react. It’s very similar to doing Google Analytics, but with more functionalities.
Clixpy is the solution I’m about to test on my personal blog (and maybe here, after theme change). It’s free, and supposedly gives all resources ClickTale does. So, we’ll have all reactions users do on our sites.
Presentations aren’t easy. They must look like you’re just chatting, but there’s a lot of thinking and work behind a good speech and some images. Think Steve Jobs. It’s not like anyone present like he does. And it’s not simple. But it looks like.
When you have a great idea, it’s a little like that too. You know how the website should be. You want it to do several things, to change others, and stuff that reacts with other objects on the page. But the client, or the boss, or someone, THEY JUST DON’T GET IT.
Simulate working software without programming
You’re a designer, and the programmer didn’t understand that tiny little detail and it makes a huge difference on the final product.
You’re a coder, and need to know what to code, before they start making design changes that will get you into trouble.
You’re a UX Designer, and need to test everything, but it takes too long and is very expensive to get it all tested.
That’s where JustInMind Prototyper comes in and makes a difference. It’s a powerful tool, and it has the superpower of simplifying things. It takes just a fraction of time to develop a full functioning prototype, so everybody involved on the project can see, understand, approve and start working on the real, final version.
In this post from boagworld, they tell us 7 great reasons why we should do wireframes. They don’t use any software to prototype, so their process requires more imagination from all the team, but it’s because they don’t know our product.
The main advantages of prototyping with JustInMind Prototyper compared to just doing a wireframe are:
You get full functionality. You click, go to another page. You fill the form, you can get the data and use it. You can get video working, or any other effect.
Team work made easy. With requirements linked to objects, and comments registered and exported to CSV files, you can always have every move, change or opinion there, just as you work, along with all software versions.
Get the client to work with you. Using our Server, you can show the client the prototype just as if it was a working website or soft, even if he’s in other part of the world. You don’t have to explain, or trust his capabilities of imagining this white sheet of paper as a colourful website. What he sees is what he gets.
Testing. Ok, you can test a wireframe. Print several sheets of paper, and tell that old lady that it’s a website where she’ll buy her groceries. Or you can prototype it and she how she reacts to the real thing.
Cheaper projects. Testing done earlier, development just when everything’s approved, everybody working on the same version. Need to say more?
Prototype everything, and only code when approved
So, instead of coding a beta version, re-coding, changing the design twice and having to fix several tweaks, you can now prototype, change everything on JustInMind Prototyper and just having to do the hard work once.
Now you can save the cost of time, and energy, because we all hate redesigning and starting over, and fixing broken projects.
Start with wireframes, make a mockup, prototype, and then code
You only have to get to coding phase when everything’s approved. This way, you reduce time and costs. This is the basis of our project management technique, which will be explained here later.
One of the great advantages of using JustInMind Prototyper is doing collaborative work online. The Project Manager can be his office, the client in another town and the designers abroad. And they all will be able to view, annotate and share comments about it.
And the users?
Using JustinMind Server, the project can be made available online, and invited users can review the project, test it and comment, even before coding phase.
The project can be a perfectly functional prototype, with data behaviour and RIA events, just like the final software or website. (Click here and you’ll see a working one).
This prototype can have Google Analytics embedded, and look just like your new website or software. So, you can see how users react (even using those heat-maps Google Analytics provides), without even leaving your office.
It’s like launching your web before the development. After that you correct, and then you code.
After the prototype, what do I do?
You have the wireframe, the layout (or even more than one option), the data structure, but doesn’t know which one is better? Why not do the traditional A/B test?
* What if you had 3 site layouts working and could test among them?
With JustInMind Prototyper, you can create a fully functional prototype, simulating user interface, reaction and procedures. Get your prototype ready, find some users and just let them use your site or program.
You can do that online with our OnDemand service, or within your own server. Either way, you’ll have plenty of feedback.
* How can I record it?
You can use analytics, from any kind that inserts a HTML snippet. You can even insert video.
Analytics or a mouse/keyboard tracking system
There are several apps that allow you to track user’s reactions to your web. If they generate a HTML code, you can insert them on your prototype and track the users’ response. You can even use something like SilverBackto record and analyse their faces using the camera.
Tell us how you do it
Did you use JIM to create and test a prototype? Try it out, and tell us what you think.
If you’ve done anything like that, tell us.
If you want to reach us, leave a comment or drop us a line on twitter: @just_in_mind.
We at JustInMind started using the blog as a more personal approach to our soft users. This is a bidirectional way of contact, so we’re opening (even more) space for you here. We are looking forward to receive and publish nice mockups done with JIM Prototyper, or links, or comments, or even for you to say what you don’t like or would like to see different in other versions.
I’ve got everyone on the project at aiming distance, so feel free to say anything, because they’ll hear you.
If you want to reach us, leave a comment or drop us a line on twitter: @just_in_mind.
Justinmind, a wireframing-software development company, has shown Justinmind Prototyper (JP) new release (v2.5) in action at CeBIT 2009 Hannover Germany. Its stand was visited by around 2000 IT decision makers.
With this new concept product, Justinmind Prototyper (JP), IT specialists can design advanced wireframes and execute high-fidelity simulations of web, desktop and mobile applications. Justinmind Prototyper is released for Windows and MacOS.
The CeBIT technology fair in Hannover, Germany, may have been relatively quiet this year, but it was not a case with Justinmind presence. Justinmind stand at CeBIT 2009 was busy with UX designers, business analysts, product managers, technology executives , CIOs/IT managers and entrepreneurs.
Justinmind stall was showcasing Justinmind Prototyper, creating full functional wireframes and simulate them. In Justinmind booth, visitors could enjoy working on their own wireframes and even simulate the data behaviour and RIA (Rich Internet Applications) events. This fair has been also a great opportunity to launch the new widget libraries to simulate Web 2.0 ,Windows, Mac and iPhone applications.
The new release 2.5 of Justinmind Prototyper has been used to run all demos and can be downloaded from www.justinmind.com and all examples used in CeBIT can be found in Downloads/Examples section, inside Justinmind website.
Xavier Renom, Co-founder and Director at Justinmind, said: “Justinmind Prototyper is a good product to reduce costs in software development. Prototyping and simulating your software before start programming is the best way to avoid dramatic changes at the final stages of your projects and to reduce re-work. This fair is a very good place for demoing our products because there are not only IT specialists, there are also pre-sales managers who are potential users for our software, because with JP a sales team can check a new product release or a new software solution with their customers or potential users, before starting the developing process”.
CeBIT visitors has also tried the collaboration environment provided by Justinmind to test and annotate a functional web mock-up world wide with a web browser, and to communicate changes and new requirements with the web annotation system.
About CeBIT
CeBIT is the most important IT and online services fair worldwide More than 400,000 visitors came to CeBIT 2009 to generate new business. A marked increase in the trade visitor ratio however meant their expectations were often exceeded. The next CeBIT will be staged from 2 to 6 March 2010 in Hannover.
