Justinmind Blog

With new fashionable devices like the iPhone or the iPad, the mobile web has boomed. According to ComScore, global leader for analysing web trends and practices, the mobile web really exploded in the last 2 years. Between January 2008 and January 2009, the number of Americans accessing internet through mobile devices went from 36.8 to 63.2 millions. PC, mobiles or tablets website wireframes are more essential than ever.

The daily use of the mobile web has increased even faster as 22.4% of mobile users used a smartphone in 2009, against 10.8% in January 2008.

The study highlights another key point. The new use of applications on smartphones allowing users to get access to their social life online through Facebook and Twitter applications gave a real boost to the use of the mobile web.

The Nielson Norman Group carried out a serie of tests in July 2009 in order to assess the usability of webpages on mobile terminals. More then 20 sites were reviewed on 6 different devices. The results of the analysis highlight striking difference… not in favour of mobiles. According to the report, only 59% of mobile users completed the task they were asked to do, against 80% for traditional PC users.

Among the sites tested, some were specifically optimise for mobile terminals whereas other were tested in their original version for regular computer. This comes as no surprise : websites optimised for mobile get rated 20% higher for usability and navigation issues. Regarding usability, the smartphones are also rated better than traditional terminals. Results are particularly good for Apple’s iPhone that obtained a task completion rate of 75%, against 55% for other smartphones (and 38% for classic mobile phones).

For this particular study, several criterias were taken into account like the screen and keyboard size as well as the site architecture and bandwidth perfomances. « On most phones, the screen is too small. It’s hence not easy to open several windows at the same time. The keyboard typing is rather slow and hazardous » stated the study that encourage webmasters to develop their websites through website wireframes to create effective cross-browser, mobile versions of their websites.

Justinmind awarded highest Growth Company by Hit Barcelona

The next 16th and 17th of June will take place the Growth Company Showcase, an event that will bring together companies with major growing potential with invest funds of venture capital and international business angels.

Hit Barcelona invited Justinmind to the Growth Companies Showcase. The event will take place on the next 16th and 17th of June. It aims at connecting the most promising start-ups with prestigious venture capital funds and major international business angels.

This award as major growth company comes after Justinmind Innvate! 2010 award, judged as one of the most promising IT companies in the world.

These distinctions come as a reward for the development team and praise Justinmind products, seen as a revolution in application development as it lets users create high-fidelity dynamic prototypes without any coding. This kind of app is becoming increasingly essential as applications become more complex and expensive to develop. Justinmind Prototyper can be downloaded and tested for free at http://www.justinmind.com/downloads/wireframe_tool.

Justinmind Prototyper lets you prototype and test fully functional applications for Windows, Mac, web and mobile before developing them.

The Spanish Start-up Justinmind has developed Justinmind Prototyper, a product that allow users to test and validate apps before their development through the wireframing and prototyping of Web 2.0, SAP and mobile apps, among others.

The company is based in Barcelona but distributes its products worldwide. Coca-Cola, Orange, Banco de Sabadell, Bertelsmann and the Austrian Federal Government are just a few of its prestigious customers.

For more information, visit http://www.justinmind.com.

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.

Wireframes and user-centered design are still relatively new to e-learning apps.

In the last few years, technology has improved so much that new domains like education started using it and changed drastically. E-learning is still a newly born science that comes down to learning via information technology (IT). In the last few years, technology has allowed for more efficient and flexible delivery of course material. In parallel, the demand for online delivery of higher education courses continued to rise. Online courses provide more time and location flexibility than traditional education and it allows universities to expand their course offerings by expanding their virtual infrastructure.

Unfortunately in both corporate training and higher education institutions, user-centered design techniques like wireframes and task analysis are pretty uncommon in the creation process of e-learning apps.

E-learning usability is still new but surprisingly underrated. Yet the idea around improving e-learning apps usability or “learnability” is pretty straightforward. A system simple and easy to use will take the learners thinking off the system and onto the course material itself.

Usability testing usually offers an effective way to ensure an app actually works. This means that most people can make sense of it and use it without an extensive formation. Unfortunately carrying these tests is often expensive. That’s why many companies rely on previous analysis showing reliable principles. But here’s the catch: proven sets of principles of what “works” for online learning, based on research findings or industry best practices, don’t yet exist.

Design and usability standards like website wireframe that have proven their worthiness for e-commerce applications need to be changed substantially before being applied to e-learning-tools. Indeed, the 2 domains have completely different goals. Wireframing a site so that someone can book a flight with ease has not much, if anything, to do with wireframing an engaging online biology class. For Don Norman, a professor of computer science at Northwestern University, “Even though usability and learnability are slightly different, usability practices followed by the User Interface (UI) community can be easily applied to learnability.”

If e-learning practitioners were using usability testing, usability experts could then assess how testers handle learning tools or cope with lots of data without a teacher telling them what to do. Through the use of wireframes and functional prototypes, they will be able to test their app before its development, assessing how new students navigated virtual classrooms. “Many people think they can’t really afford usability,” argues Michael Korcuska, design director of DigitalThink, e-learning software development firm. “Unfortunately, the market doesn’t care about quality so much as price and speed improvements,” says Korcuska. “And until the market demands it, and is willing to pay, it won’t get it.”

But other usability experts like Mathieu Collet, interaction designer for SQLY Agency suggest there is a competitive advantage to designing the user-experience of e-learning websites”.

With the coming of the web2.0, recent developments in streaming video and interactive interfaces can make e-learning softwares potentially more dynamic, but also more complex. Therefore, e-learning apps should carefully take the user experience into account before starting any project.

User-centered designers have a real challenge ahead, both in proving to universities that usability is worth the money, time, and effort, and in developing e-learning usability standards that can be shared. But the stakes in game are worthwhile because a well-designed user experience makes the interface almost disappear, enabling users to concentrate on their work, exploration, or pleasure.

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.