Rapid Prototype Blog

Posts Tagged ‘Justinmind’

We suggest some basic designing steps to increase speed and facilitate the creation of your wireframe:

1 – Use some sort of grid. For example, 960 framework. This is very commonly used by developers, and give some sense of proportion to your project. It may also help the coders further on. There’s a template of 960 framework on Justinmind’s blog.

Most designers have their own rule of thumb to dispose objects on a blank page. You can also create your templates and import guidelines from your company, client, etc.

2 – Create containers for your objects: headers, navbars, buttons, etc. Just drag them and drop them where they’ll stay. It’s going to help you further on.

Containers can be invisible, too. They help, for example, to hide everything at a click, or to replace content for other content.

3 – When you have everything on its right place, create a template and move your objects there. Then, you can start creating your pages and adding content.

Templates can be very useful when you need to create several similar pages. You put the structure there and it’ll be repeated in every screen you want. You can define which template to use in a determined screen by right-click and defining Properties.

4 – The objects that appear very frequently can be masters or be created directly on the template if they appear on all pages. For example, if you’re creating a website that has the navbar and header on all pages, you can create it on the template and only insert the links once.

Masters can appear anywhere on your screen and change position, while templates are fixed. Another advantage of Masters is that they can be broken in objects, and edited (for example, if you want this specific object to be green, but equal to others in every other aspect).

5 – Create your links by dragging the objects to the pages, or vice-versa.

Bidirectional linking can really help your project. Drop your screens over the links, or the links on the screens in your Screen Panel.

6 – Optional, just for the designer: Change objects properties to match your layout. We recommend inserting the images at the end, to reduce memory usage while working. This will transform your low-fi wireframe: in an interactive mockup.

It’s better to first put the content inside the project, define what goes where, and then create the look. You can also replace containers for images, logos, pictures or special visual effects. It is also possible to embed HTML snippets and code.

The requirements editor

The requirements editor is composed of four main parts or functional groups: the search box, the actions toolbar, the requirements list and the requirement details. The default view of the requirements editor contains a list of all the requirements of the wireframe. The list display the properties code, version, name, type, author, last modification date and related component. If a requirement has more than one version, only the last is displayed.

Bind text requirements to wireframe elements

You can find a requeriments pane below the canvas of the “User Interface” section. This pane provides the tools to bind requirements to wireframe elements. In order to bind a requirement to a wireframe element you can use one of the following methods:

Create a requirement and drag and drop the requirement to the wireframe element. Select the wireframe element and then create the new requirement.

Advanced features of text requirements

Requirement versions.Existing requirement versions can not and must not be modified. Thus, any changes to a requirement lead to a new version being created. Once you have made some changes to the properties of a requirement, you must click the “New Version” button to save these changes as a new version in the current requirement. Changes can not be saved in the current version. To use an old requirement version as active version, select it in the list and click “Activate” in the requirement details zone.

Display a wireframe element from a requirement.Click on the “View Element” button to jump to the related element of the particular requirement, opening the pertinent editor and displaying the element.

Specifications document generation

Justinmind Prototyper generates Microsoft Word documents containing relevant information about the wireframe. Moreover, one may easily create a template in Microsoft Word to fully customize and adapt the documents outputted by the Justinmind Prototyper.

Before any software or website project, it’s vital to test and verify if what’s done is exactly what was initially designed. Practice says that is better to prevent than to fix, so many UX designers nowadays are developing techniques to test and prevent errors using wireframes and prototypes.

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.

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.

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.

Have you ever created an early project plan, or a simple wireframe — maybe to get approval for the project — only to find it unworkable when you started tracking progress? With the right start, you can ensure that the plan you create at the beginning of your project is an effective management tool throughout the project.

The first step is to understand all the requirements. In this stage, you’ll need to gather everyone involved in conceptualizing what’s going to be done, and write that down. You can draw a simple wireframe and sketches of the final project too.

Business Analysts and Project Managers are vital for this, and also Key Users, to understand what they need and want from the final product. We recommend a team of 5 people maximum, to avoid empty discussion and eternal meetings.

They’ll get together and write the first list of requirements needed, as much detailed as it can be. The Requirements list will be a briefing of the project, for developers, designers and coders.

Understanding the audience

The users of the projects must be studied. The usage, too. How people will use it is very important and can decide the success or fail of any development project. It is very important that your project is useful and severs a purpose for your selected audience.

People are not equal, and not everyone use software or websites the way you do. It’s important to step on the users’ shoes and understand their thinking, needs and values. After all, they are the ones who’ll use it.

This is why we recommend to have key users involved in the planning phase, and, if it may be, future or potential users.

Creating killer content

It is very important to think about what really interests people and how will they react to what you are offering them. Earning peoples’ attention is normally a one timer: if they don’t get interested in the first time, it’s probable they won’t be a second one. So, think about your users and amuse them.

Designing for human beings – help people

Some people just cannot focus enough on design, on thinking how form and function interact and how people interact with them. There are several unconscious and sub-conscious elements that can change users’ perceptions about a website or a program, and simply helping them find the specific button, or understanding how the program works, or even simpler: having the application have a pretty look. The design can improve a lot with the use of wireframes. Nowadays, there’s no excuse for having a poor looking app.

Technology – it cannot be possibly done

We all know the story of the beetle that cannot fly, according to aerodynamic laws. However, sometimes project fail because someone thinks that creating something is possible, or can be easily done, but actually takes too many work hours or too many people involved or some technology that’s not currently available to all. So, it’s very important to plan everything and discuss with technicians and experts to understand what’s going to be done.

Project Management – following the plan

Even when we get a map, sometimes we get lost. Why? Because somewhere during the travel, we forgot to keep track of where we were. This is to show how important it is to control the evolution, the iteration cycles, the steps and accomplishments. They’ll avoid the feeling of being completely lost, of not knowing where you are and how you got there in the first place.

Every project plan has some elements in common. Before starting to create the prototypes, drawing wireframes or hiring coders, it’s important to:

Define what you will do Divide it in small tasks Define who’ll do each part Assign an amount of time to each one of them (start and finish dates) Create a way of measuring progress Register tasks finishing dates Tasks needed before a given task begins Create a timeline Assign someone to control and manage everyone’s activity

Avoid failing the project by careful planning

There are several reasons why projects fail, and most of them can be avoided by careful planning.

Not enough time or money: Without proper scheduling and budget control, it’s easy to have a project dismissed due to lack of resources. Besides, even when they not fail, the final project can be sloppy, with bugs or dysfunctional if this kind of planning fail. That’s why it’s very important to have everything that’s needed clear on every team member’s mind before starting.

Poor communication: A client asks for a simple website, and then wants to add functionality that’s hard to implement; the designer makes a wireframe awful to code; the coders say it’s impossible, but it isn’t. Everyone saw that situation sometime, and most of the time it’s a problem of communication. Websites and software can be pretty complex sometimes, and words aren’t very specific to describe them, or jargon can be very hard to understand for non-technical people. It’s important to always speak clearly and make sure that everyone understands what’s being expected and required from them.

Inadequate testing: Most of the time, due to problems in timing. Since launch date is so close, people decide to simply launch it, and then fix the errors. Sometimes it works (as Google Beta apps do), but others they fail miserably. Testing should be done, and it’s even more crucial for first time launches.

Lack of quality: Those come often from time management problems. Not enough time to test, to guarantee that everything is just as it should be, so we’ll correct everything as the problems come. Sometimes works, sometimes it’s a trainwreck.

All of those problems should be avoided with careful planning.

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

Advantages of this method

Avoid re-work: changes and modifications can be very hard on your team, and can cause stress, discussions and drain of time and resources. With the changes done during prototyping stage, the project can be coded in one single stage. Avoid software bugs: one of the main causes for bugs is that when some component is changed, affects other parts unknowingly, so avoiding modifications can prevent software errors. Control of modifications and versions: With Justinmind Prototyper’s Requirements Manager, it’s easy to know who suggested each modification, when, and in which iteration, thus keeping a register of those changes, and who is responsible for what. Documentation: Justinmind Prototyper generates documentation in several formats: docs for registry and control, HTML for sharing among partners and for testing/presentation, CSV for data, etc. This way, your information can always be editable and shareable. Clear communication: With a prototype, it’s easier to explain an idea, how it works and how it should be coded; avoiding the famous misunderstandings that sometimes can hinder a project. Besides, it’s drag and drop intuitive philosophy makes prototype creation easy for any person, even though they have no coding/programming skills.

Throughout this guide, you’ll understand how a project can be done with Justinmind Prototyper.

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 wireframe, you’ll be able to reduce costs and time expenses, improving work quality.

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