Justinmind Blog

Wireframes, documents, sketches… companies and programmers use different methods to convey the look & feel of a future website or app. But the “big picture” is hard to imagine with just a document or a mere sketch, and this often ends up in communication problems, delays or even the project being cancelled.

But this realm is changing quickly. Indeed, there are now new tools available that offer to create, visualize and simulate the final user interface of a future app without coding.

Background
For a long time, web design and app creation used different ways to create and adjust requirements and design, trying to look as much as possible to the actual final design. At first, simple tools like pen and paper were enough to show a general idea of an app, using arrows and all type of diagrams to reflect interactions and the information architecture. But at the same time as apps were becoming more interactive, the systems to represent these future apps also grew in complexity.

From wireframe to prototype
With the help of Photoshop or even PowerPoint, some were able to create visual images with detailed specifications. These were the late mockups. And only then did they add interactivity.
However with the coming of the web 2.0, interactivity and data dynamism became an essential part of the design process. Content generated through database and RIA now requires more interactive wireframes and prototypes. From content to user actions and interactions (login, edit, delete), the user experience has to be thought thoroughly and the look and feel has to be as close to reality as possible. Moreover, apps and websites have to be thought and develop for a wide range of terminals, from PC, to Mac, iPhone and iPad… Mockups and static wireframes are not enough anymore.
Hence new applications appeared to help interaction designer to build the best user experience possible.

Advantages of prototypes
The benefits of using this kind of apps are pretty obvious as the scope of users grows steadily and offers get more sophisticated. Indeed, the benefits are many:
- Save time in the development process, simplifying the revision process and integrating final users in the process, thus ensuring the right use of the final product.
- Save money during the elaboration of the app up to 30%.
- Early detection of issues and limitations thus easing changes in requirements and specifications.
- Better definition of user requirements. This tools offer the possibility to carry out user tests using the interactive prototype as if it was the real thing.
- Better communication between all developers and non-IT literate Business professionals all along the production process so that everybody can work in-sync.
- Remote user tests to insure the best user experience before even developing the final app.
- Visualization of changes and keep track of the design evolution all along the production process.
- Match business rules with user experience.

A changing realm
According to a study by the Standish Group in 2009, only 32% of application development projects end successfully (on time, with the required features and without extra cost in the budget). The investigation also shows that 44% experience delays, extra cost or fewer features than planned. The other 24% are cancelled projects. These data shows the increasing importance of having well-planned project before hand.
Now innovation in the field of prototyping changes the way IT projects are carried out.

Justinmind is an active member of the brand new IxDA Barcelona. IxDA Barcelona is the local chapter of the IxDA. The new association will organize events on UX design and serves as a platform for discussion and news for everything related to interaction design, UX design and usability in the Barcelona area.

The new born association will organise its first event in Barcelona on June the 17th with Rich Radka from Node as the guest speaker.

The event will take place in the Dusk Bar, calle Merce 23, metro Jaume 1 at 7p.m. Follow IxDa Barcelona on Twitter or LinkedIn.

IxDA BArcelona first event

Wireframes are all but a clear notion in the web design world. When it comes to the design process of any IT project, several notions comes into mind like wireframe, design, sketches, prototypes. After reading an article on sketches and wireframes in UXmatters, I thought it’d be a good idea to put these blurry notions back in their current context of new technologies… hence methodologies.

At a time when technologies (web2.0) and devices (mobiles, tablets…) are exploding, wireframes, design and prototype are merging together slowly but surely. But first let’s have a look at these blurry notions and see how they are coming together in the creative process.

Wireframing the design

A wireframe is often understood as the first step into designing a future app or website. It usually consists of a rough sketch, usually hand-drawn, of the user interface. Its main purpose is to throw out ideas and design “directions”. Hence, it has to be “fluid” and disposable to be changed quickly. A wireframes is a team work by definition. Everyone has to be invited to provoke ideas and directions. It primarily focuses on communicating concepts and structure. Thus it doesn’t include details as these are left to design.

Designing the app and its interactions

Although I separated design from prototypes, these two processes often go hand in hand. After they have gone through different ideas and concepts, designers usually start designing their future website. But with the coming of the web 2.0 and the growing importance of functionalities, the design has to be functional and tested among users and on different devices (desktop, web, mobiles…) in order to be validated. Testing their design before implementing it is one of the reasons why more and more IT companies have started using functional prototypes.

Prototyping and the web 2.0

If wireframing is all about suggesting and exploring, Prototyping has a lot more to do with validation. Moreover, with the coming of the web 2.0 and new devices like mobiles and PC, the focus was put on interactions and dynamism. And apps have now to be crossplatform, taking into account a wide range of devices (mobiles, pocket PCs, tablets…). That’s why prototypes came into being as IT professionals realised that making changes to a final product was a lot longer and expensive than changing a inexpensive functional prototype. Very close from the final application, functional prototype are made to make the final user tests. From design to functionalities, Business rules and requirements, an application prototype has to include them all in order to get the validation and start the development process.

The agile method bringing them together

Now a days, apps are born and live in a very competitive world. In order to prepare them for success, the design and user experience processes have to be carefully orchestrated. So rather than separate all these processes, companies tend to merge them to get a more agile creative process. Some even go as far as using prototypes for both designing and developing processes in order carry out user tests, operating and visualising the changes that will have to be done on the fina

With the success of mobile devices like the iPhone and the iPad, the market of web and mobile applications is booming. With an increasing competing market, a well planned app is the key to success. It’s now important to anticipate everything from business plan, stakeholders to user experience and even clients, before you even start coding. Building a wireframe or a prototype can be the right answer to a successful project.

A wireframe to improve user experience

First and foremost, a wireframe can be used to improve the overall user experience of a future app. It is indeed a fundamental step to enhance, and often start off, an efficient interface. Some wireframes and prototypes can even integrate useful user testing tools to carry out user experience research. As the world of apps for mobiles and web becomes increasingly competitive, the best possible user experience is essential to the commercial success of a future app. UX design and user experience are why wireframes saw the light in the first place, however wireframes are now used for completely different reasons, primarily commercially driven.

Find stakeholders before developing

A wireframe or prototype can be very useful when you´re actively looking for investments to develop a project. Once a first wireframe or functional prototype is done, you can approach potential investors and stakeholders showing them a concrete draft of your project.

Promote your app with a wireframe

But wireframes can also be useful to simply promote an idea. At Justinmind, we have had concrete examples among our customers. A scientific used Justinmind Prototyper to create a functional prototype of a future innovation portal. He then took it to investors and even clients, looking for funding. Without any investment at first, he gathered enough funds to actually carry out his website, now online.

As we can see, wireframes can be used for a lot more reasons than just UX purposes. They can be extremely valuable to sell your future idea, and you don´t need a “first miss” to gather feedback and a “second version” to make changes.

Presenting a wireframe to clients became an essential requisite part of the design process. But wireframes started to be handed out to clients for clear contextual reasons and not just because you “had to”. With the coming of HTML prototypes, we’ll discuss here what questions you should ask yourself before starting the design process.

The importance of wireframe

Whether they’re just a couple of boxes sketched quickly on a paper or detailed drawings with real content, every project now includes a wireframe of some kind. They provide guidance for designer… that’s why they are called wireframe.

Some see wireframes as simple blueprints for the general layouts but the relevance of wireframes shouldn’t be underestimated. Despite their sketchy and basic looks, wireframes are guidelines that follow both designers and developers all through the creation process.

Why wireframe

In most cases wireframes can bring valuable insights before starting a design, like for:

-    forms
-    general layouts
-    news sites
-    when you lack of content

In most cases, wireframes are usually easily approved by clients as they lack visual context like non-content graphic elements. In such contexts, black and white wireframe helps to get a clear picture of how the final result will look like.

Why not to wireframe

However, a wireframe can’t convey important design components. Grey boxes and lorem ipsum content can’t communicate how colours and contrasts influence content, the visual impact  of brand design or the visual weight of graphics elements and the visual path created by colours, contrasts and components.

But because the purpose of a wireframe is so much intricate with design, it’s sometimes best to start with the design. In some cases, the client might not fully grasp the point of a wireframe, or simply doesn’t agree on the objectives you have set… and bad starts are never a good sign for a project. In these cases, it’s thus best to first agree upon a clear direction for the design and then start wireframing specific layouts.

Why Prototype

When the time comes to create the final design, what seemed logical at first might not fit the final output. Changes often have to be made as textures and images can influence relationships between elements.

And as time goes by, the further design moves away from functional requirements, the less effective becomes the wireframe. Inversely, a wireframe can also look dull and little attractive to a client when the actual design is actually very effective and impacting.

The alternative here is to create a quick HTML prototype of the future app. The prototype can integrate both a sketchy wireframe and a more final draft of design. Furthermore, the prototype is functional and some like those made with Justinmind Prototyper, even feature interactions and real data behaviour so that clients can test their future app before starting developing it.

Wireframes for information or promotion purposes lose their effectiveness, especially when it comes to questions of branding and images. You need the full design to assess the successful quality of the output. That’s why, in some cases, prototypes are more relevant than wireframes.

At the beginning of every project, all parties should assess the need to wireframe or rather to prototype, so that they can best serve the needs of the client.

According to UN´s last E-Government survey 2010, governments all over the world have made significant efforts to increase citizen participation and access to political affairs through the internet.

The survey states that during the last 2 years (the last survey dating back to 2008), E-participation has increased everywhere, even in least developed countries. Authors further argue that in the current context of world financial and economic crisis, governments can take advantage of new technologies like the internet to gain transparency by sharing freely their data bases with the public. Following the same idea, e-government can add significant agility to public services and bureaucracy, thus helping governments to respond and react more quickly.

The usability of governments´ applications is thus fundamental to increase the public access and participation. One way to achieve it could be to involve citizens (the final users) in the definition process, like when making wireframe or prototypes of apps.

Gathering user feedback on the usability of an app before its development is essential to its success, and this is probably even truer when it comes to online citizen participation. On the one hand, apps have to answer the needs of citizens. On the other hand, these programs have to be comprehensive and easy to use, so that users can understand what to do right away.

Involving citizens as users in the wireframing and prototyping process could thus benefit both citizens and governments. Publishing functional prototypes would let the very final users (citizens) test and comment a future app. The very citizens, the targeted audience, would be the ones defining and validating apps of their public institutions. This system would show a true e-democracy as institutions are supposed to be working for the people.

Communication between institutions and citizens would thus become more “agile” and the public would regain trust in political institutions, often seen as oblivious of the people´s reality. But more than just improving political participation and communication, the use of prototype would also increase productivity by avoiding long and expensive rework loads.

Now-a-days, a wireframe is essential to plan and prepare any IT project. Failing to plan development and design ensures a dramatic journey.
Wireframing a project is thus the key to a well-planned development and delivery. Wireframing appears right from the start, when you have the very first idea of an app. This article will give you tips & tricks to improve this essential process that is wireframe.

1) State a clear objective first
Once you´ve got a clear idea, the temptation to jump straight to the coding is high. The idea seems so easy at first you think start coding righ away? But IT projects are never that simple and you won´t wait long before a handful of problems (small & big) will get in the way.
A wireframe basically identifies all these issues. This will save you time and money because it´s easier to make changes on a paper wireframe or even on HTML prototype than to hundreds lines of code.
But the wireframing process doesn´t just avoid errors, changes or rework, it also helps to get a better understanding of the application. Visualizing a website wireframe or prototype triggers new ideas and raises questions.
Besides, a wireframe can be a blueprint from which designers, developers, architects and project managers can work from so that everybody is on the same page.

2) Pretty is good, functional is better
Wireframes are primarily about usability and functionalities. That´s why they come prior to the actual design. “Here you´ll have 3 buttons, a auto-validating form…” It´s about function, not form.
Some wireframe extremists even strip down wireframes to let nothing but functional elements (dropdowns, buttons, text area…) and purposely ignore any design so that everybody can focus on usability.

3) Think about user experience, not layout
Everybody has used websites, so even if designing or programming one requires technical skills, drawing the experience you want to have can be done by literally anyone.

4) Who’s in Charge?
It´s essential to put someone in charge of the wireframe process. This (these) person(s) will be responsible to keep it up to date and to manage changes and feedback…

5) Everyone is involved
The first meeting might be for stakeholders only, but then it´s important to involve everybody in the process, from marketing to designers and developers or even users.

6) Put a deadline to the wireframe
If you want to keep a project moving, decide of a deadline for your deliverables and stick to it.

7) Avoid Designing
wireframes are focused on usability, not the way the app will finally look like. This focus on usability is there for a reason: it avoids distraction.

08) UI vs UX
a wireframe is about functionalities because for usability and accessibility reasons, apps should be thought first without interactions. Interaction can be prototyped in a second stage, through a HTML/JS.

9) Think about users
Most of the time, we´re too focus on the functional and we forget about the user experience. That´s why user tests are essential, even at early stages like wireframing or prototyping processes.

10) Like a website, organise your wireframe into sections
A website or an app is often organised in sections like products, user account and news. Follow the same division for your wireframe as it should be as close to the real navigation as possible.

11) Scenarios and “stories”
Web apps often rely on a number of processes, a more or less linear structure: log-in > buy > checkout, for instance. These processes can often be linear but sometimes users can choose  to skip a step or go through different paths. Number the pages in your document and label the action (and where it leads the user) on the page so that you can actually read the wireframe like a story.

12) Look for consistency
A consistent app is always helpful to users, developers and designers. Repetition of groups of elements can therefore be useful and clarify things to users.

13) Does it make sense
From business men, to marketers and designers, the final document should be easy to read… like a story. Try asking one person who has nothing to do with the project if they can understand it.

14) Include ads
For monetization purpose, many sites include advertising. Ads are functional and nort design, don´t forget to include them.

15) Include public and private page
Today, sites usually have an administration area to manage content or user profiles… These private pages may not be viewed by many but they are important enough to be included. These pages are for example extremely relevant to developers when time comes to design databases.

16) Fair amount of version
Make sure everybody involved have their say. A first wireframe should aim at gathering feedback, a second that shows this feedback was taken into account and a last one for the final polish.

17) Pick the right tools
Putting things on paper is often  a good way to start throwing ideas and concepts. However you should quickly turn to fast wireframing tools and prototypers as the project evolves.
Wireframing concepts is one thing but with RIA, dynamic websites and interactive apps, it´s becoming increasingly important to prototype the whole thing before getting your hand into development.

18) API & third-party components
If your website integrates API or other external web services like PayPal, it may influence the whole structure of your site. API are thus also important to take into account when wireframing.

I hope that this article covers most of the questions raised when dealing with wireframes and prototypes as to who should be involved, the right tools to use, how to approach it, and how the final output should look like.

What about your own tips to improve wireframe? Post them in comments!

Just when UX/IA designers were settling down in a cosy working method, drawing nice static wireframe, Information Architect´s game changed again with the coming of Rich Internet Applications (RIA).

Technologies tend to go faster than our design skills. Whether it´s AJAX, Flex, PHP… it became a challenge to improve the usability of these new applications. Wireframes and prototypes thus became increasingly important to rely on.

“Show, don´t tell”
For complex RIA, prototypes are definitely the best way to express the structure, flows and layout of information. However, if you have a tight schedule, it´s even better to start by “telling” the client a narrative wireframe and then quickly move to more functional prototypes.

Defining user behaviours
When wireframing RIA, a key step is to define “personas”, meaning all the types of user behaviours. In this context, improving usability usually means imagining different narrative according to personas, guiding users through tasks according to their needs and context.

Narrative wireframe
When using a low-context medium like wireframes to illustrate dynamic information like RIA, it´s essential to narrate the information. In other words, it´s best to build stories to illustrate non-linear apps.

This low-context, narrative approach is actually a good way to introduce new ideas to clients. Presenting one dimension of information at a time allows clients to focus on one particular aspect of design, avoiding confusion and misunderstanding. The key here is to focus on general patterns and not details.

Prototyping interactions & dynamism
Once this foundation work is done, it´s important to move to high-context documents like functional prototypes. Designing applications and leaving out interactions or data dynamism is like forget the cheese in a cheese cake… That makes no sense! Dynamic functional prototypes are thus essential to fully grasp the purpose of the RIA and what it can achieve.

Prototyping the actual app is also important for the client to see and validate the final design and not just the information flow. Another advantage of prototypes in RIA is to witness on-going changes during the development process.

These two techniques of wireframing and prototyping, once brought together, can significantly improve the usability of complex dynamic applications or websites.

Hi everyone,

This short post just to let everybody know we´re offering free licenses to those of you who´d be willing to write and publish a review about our wireframing tool: Justinmind Prototyper 3.0!
Test it and review it, and we´ll give you a full perpetual license of the Enterprise Edition once you´ve published the review on your blog.

This is the second we’ll post here for JIM Prototyper. We’ll do a simple wireframe form, with real data, using the Data Master panel.

We’ll start with a blank screen.

Blank screen (click to enlarge)

Then we’ll create a Data Master.

Data Master Panel (click to enlarge)

JIM will open the Data Master Details screen. There, you can put all the fields you want in your form, even if some of those doesn’t appear initially. Then you choose what info you need. In this example, name, email, opt-in and comments. Note that you can choose any kind of data field you want. If it’s number, the form won’t accept text, and so on.

Data Master details screen (click to enlarge)

Then, we’ll click on the >> button, and all this data will be on our form. Click ok, and it’s done.

>> Button (click to enlarge)

We drag and drop the Data Master to the screen, and JIM will put all the data fields on our canvas. Simply as that, you have the form. But now, we want it to really work. Let’s create a button.

Creating a button (click to enlarge)

Just drag and drop any label, and configure it to look like a button. Change it’s properties to have rounded corners, colours, as you like. Since it’s a wireframe, we won’t put anything fancy right now.

Then, we select all the form’s items, including the button. With a right-click, we can group them into form.

Grouping into form (click to enlarge)

So, we tell JIM it’s a form that works together, including the Submit button. Right now, it’s just the wireframe of the form. But we need to simulate it, allowing the users to fill in real data and store it in our files. So, we click on the Submit button and edit it’s Events.

Submit Button's events (click to enlarge)

Let’s add an Event by clicking on the wheel with a green + symbol. It opens the Events Properties screen. We want our button to execute an action, creating a new contact item. So we choose Execute Action, and then the option New Contact Action (pretty easy, but this option only appears when you’re dealing with a Form Item).

Event Properties Screen (click to enlarge)

Click ok and you have a working button.

But it won’t do anything else, so our users won’t know if it happened. We know the button will do something because it has the wheel over it.

So we’ll create a thank you screen. Simply drag the Screen 2 on our Screens panel and drop it over the button. It will add another Event to the Submit button. So, when you click, it will store another user to the form and go to Screen 2.

On Click, submit data AND go to Screen 2 (click to enlarge)

For testing, let’s put a Thank you note on Screen 2, and test it.

Creating a Thank you note (click to enlarge)

This is how the whole process goes through. You can click and enlarge to see better:

So, after simulating, when we go to the viewlist of our Data Master called Contact, we’ll see 3 sample texts that JIM Prototyper creates automatically, and the test text I’ve added in the video.

Datagrid - how JIM saves your data

Here you see that the simulation records all input data, and you can use it later for other pages, forms, etc.

In the next tutorial, we’ll show you how to use these information on a page.

If you have any doubts or comments, drop a line via email to alex.luna@justindmin.com, twitter to @just_in_mind or comment the tutorial on our blog.

See you in the next one.