Rapid Prototype Blog

Posts Tagged ‘wireframe’

Wireframes & prototypes didn´t use to be a priority  for IT professionals. But as the IT industry develops, it becomes essential to build websites or apps on solid foundations. Here comes a non-exhaustive list of why we should all be using wireframes and prototypes more often.

We speak different languages

Imagine an English developer having to explain a future website to his client, a chinese businessman… I think this speaks for itself. But we don´t need get to such extremes, the very same word can have different meanings for people that speak the same language. But simply because they have different backgrounds they won´t intend the same things behind a common concept.

We need to visual the future product

An image is worth a 1000 words! This is actually why we wireframe in the first place (and incidentally, reading all the specs doc of a future website is a pain, I wonder how many actually do it). Even if it´s only a sketchy wireframe, at least everybody sees where is what and how it looks like.

Clear up your ideas

Get things clear! Wireframes and prototypes help you to organise and share your idea avoiding misunderstanding. You´ll see what´s possible and what´s not.

Save time (it´s quick)

Because with a prototype in hands, you know what to expect as a final outpout. Hence prototyping will save you time during development and avoids rework being done too. A prototype is also quickly shared & commented among collegues and you can apply ongoing changes to it so you see in real-time what´s being done.

… and money (it´s cheap)

Time is money, everybody knows it! Whether it´s on conception, design or development, saving time most certainly means less man-month! Plus, the whole point of a prototype is to save time, so it´s usually developed using cheaper & easier technologies than the one that will be used for the final product.

Anyone can do it

No need to be a high-profile developer to do a prototype. Actually, it´s quite the opposite. If you want to build a good user interface, you might want to ask a UX designer, or designer to build what usually a simple HTML prototype. Moreover, with high-fidelity prototyping softwares, everybody can create fully functional prototypes without a single line of coding.

Run user testing before development

This is probably the main advantage of prototyping! Prototyping the UI of a website or an app lets you carry out user tests before developing the final thing. This is also a big difference between functional prototypes and static wireframes, as the latest doesn’t allow you to do this.

All in all, although wireframes are very useful when it comes to define and analyse a website or an application, these arguments shows that it´s best to prototype. Prototyping will “fluidifies” all processes of any IT project, from design to development and testing. With RIA & dynamic websites the need for prototyping will be increasingly present.

Find More Prototype Ui Articles

An essential element of the web design process, web prototyping is technically a an overview model of a web site, creating a the backbone, called as wireframe, by using just the simple pen and paper to draw simple flow charts of how the web site come and go, or by using prototyping software to collate and produce the overview of a planned site.

On the process of prototyping a web site, static wireframe of the whole site is created, usually in black and white design, with all the major navigation links present to represent the flow within the web site. Web prototypes can show the overview of how the browser will interact and feel with the structure, work flow, content and functionality of the web site.

During prototyping of the web site, browsers can test your site and provide feedbacks. This process is divided into alpha and beta testing. This system allows the developers or designers to make any changes before fully deploying the web site for use, which guarantees the browser for best interaction possible.

Web site prototyping has numerous advantages, such as attaining easier coordination between the developers, designers and the client involved in the project;, identifying technical flaws during work process, website’s overview and projected flow and feel could be easily estimated and be cleaned from error and link dead ends, and make clients to participate actively within the project by total collaboration and suggestion making at the work process.

However, in complex sites, such as social networks and other websites that has complicated hierarchies, basic web prototyping tools will not be enough to handle the interrelationships of links and other elements. Changes will be painstakingly done if not implemented dynamically in the web site prototype. So, using a custom build web prototyping tool tailor-fit for the site will work best.

All in all, web site prototyping saves time, money and effort, which are essential in creating and developing an efficient web site. Changes within the web site are quick, easy, and inexpensive during the prototyping phase of the project, because complex coding is not needed yet at the time being.

Find More Alpha Prototypes Articles

Hi,

I’m currently prototyping a the user interface and content of a web page. Before changing the actual pages on our servers I wanted to prototype a wireframe of the web pages. Currently, I have been using DENIM, but its horrible. Horrible. Garbage. Trash. Unbelievably non-intuitive, it makes Microsoft look like geniuses. What else is out there that is free?

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.

Think of your project as a unity. That is why big projects need to use the same font, sizes, colours, styles, etc. Hi-fi wireframes can use widgets and templates to maintain consistency. There are several advantages for projects:

1. The users will know they didn’t leave the site/program. The appearance guarantees that.

Remember your favourite website? You know you’re using it even though you don’t read the content. Why? Because it looks like the other pages you’ve seen. That’s design consistency.

2. Smaller learning curve for final users.

When users learn what your sidebar is for, they expect it always to be there, and its functionality not to change. They learn how to use a website. So, having all the features in the same place and with the same consistency is important.

3. Less work for collaborators, who don’t have to think about design issues.

We all know someone who cannot decide which typography to use, colours, sizes, etc. They can be great coding, or writing, or even correcting things, but don’t necessarily like or are very capable doing design thinking. So, why not let them just do their job, without the pressure to create something beautiful? If they have the templates and the design done, their work will simply be better.

4. Time saver

If you can avoid re-creating repetitive tasks, you’ll finish your project beforehand. So, try to plan ahead the objects, details and features that can be re-used and re-inserted in a sort of framework.

What to do to maintain consistency in a wireframe project?

1 – Create the templates first.

The backgrounds must be done, and everyone involved should know how to use them. That way, nobody will insert a huge image where it won’t fit.

2 – Define design properties like fonts, colour palettes and sizes throughout the document, and pass the instructions to everyone.

Visual guidelines are preferred, with examples.

3 – Create masters and widgets for users, with constant objects.

Logos, buttons, icons, all things that will be used on your project can be inserted into a Widget Library, and you can share them with all your users. Explain them where to find it.

What to avoid when creating consistency?

1 – Don’t create strict rules that destroy creativity.

Even though rules exist, sometimes they can be broken. Even design ones. Don’t break rules every time, but, sometimes it will be the touch of a genius to break them. That’s innovation. If one of your co-workers or even yourself come through a situation where a pre-defined rule is going to be broken, but the project depends on it, break it. So, don’t be the “this-is-not-as-the-manual-says” guy, because everybody will hate you.

2 – Don’t try to invent new rules for the obvious

Internet users are used to links in blue. If you put links the same colour of your normal text, it’s very probable users won’t like or will ignore some links.

3 – Create widgets and templates that will be used only once.

The main reason why we re-use repetitive code and tasks is because they’re repetitive. If you have an innovative use for a wireframe, but won’t never, ever use it again, you don’t need to waste time creating models.

After defining which pages are going to be created and what they’ll contain, we start the wireframing process. This means start drawing the objects that will be present on the pages, without much attention to detail.

Lo-fi and hi-fi wireframes

A few years ago, web wireframes where mostly done with pen and paper, and later, with presentation software. These wireframes did not contain all rich details of interaction and graphics, but where meant to give an idea of what was going on. Most of them didn’t have colours, images or other detail. They’re called low fidelity wireframes, as they were just simple skeletons of the website.

Later, with the evolution of the market, there came a series of authoring tools that allowed the creation of wireframes that had the look and feel of the final version. This way, the clients, and even the less internet literate ones, could understand perfectly what was going on and what was the final result. These are called high fidelity wireframes, and sometimes, prototypes, because can have a level of simulation that looks almost like the final product.

Things to have in mind while drawing wireframes

Reading pattern: We’re used to read from right to left. People that read in other languages often read from left to right. It is important to understand the movement of the eyes, and that we tend to give more importance to what’s on the left, and top of the page. Fitts’s Law: It is easier to the eye to target a bigger object. Let’s try to increase the size of the things we want our users to see. Reassurance: It’s important to reassure the user is in the place he wants to be. Inform him that he’s in the right sector of the page (using breadcrumbs, colour or any other visual aid). Related information: If you’re designing a travel agency site, put the names of the cities in one size, the description text in other, but group them together. Don’t mix different content and wait for the users (or the search engine) to sort them. If you can simplify, always do it.

Think about the users, always

Don’t ever create a website the way you would like, but the way the users of it will like. Ask them, do focus groups, question and create polls. User’s feedback should always be welcome and heard.

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.