Category — Clickable Wireframes

What are high fidelity wireframes?

In part two of this blog we shall have a closer look at high fidelity and other kinds of wireframes. Although sharing many of the same advantages with low-fidelity wireframes, a distinction between the two is that a high-fidelity wireframe is closer in design to the true representation of the final user interface. This is because high fidelity wireframes usually have slick and polished design features, even going as far as simulating an application’s work flow. Despite this high fidelity wireframes remain prototypes and usually require a lot of time investment to create which can be costly.

What are the benefits of high fidelity wireframes?

High fidelity wireframes usually are used in addition to and after low fidelity wireframes have been used to resolve the most impactful and fundamental usability or interface design problems of an application. Being eye-catching, high fidelity wireframes can be used to impress clients who have to sign off on a concept quickly. A high fidelity wireframe in this case would intuitively be faster for users to understand simply by glancing at them, leaving less room for misinterpretation. This is advantageous when designing complex user interfaces with lots of interactivity. In terms of your development team, high-fidelity wireframes allow you to collectively bring an interface to life. This helps in keeping a project’s budget manageable further satisfying clients.

What are medium fidelity wireframes?

It is worth noting that some people make the distinction of adding a third category; medium-fidelity wireframes which lie somewhere in between high and low fidelity wireframes. These are especially useful in larger projects when interface design fundamentals have been worked out, but more optically detailed representations are needed for pitches, presentations etc…

[Read more →]

The pidoco° screens design software consists of three main entities which complement each other perfectly. They speed up the interface design process and optimize the general workflow in all stages of interactive web design.

Clickable wireframes are quickly sketched with the Prototype Creator (just by drag&drop) and can later easily be shared and reviewed by colleagues, test users or clients. If there is need for even more in-depth feedback on individual aspects of the concept sketches, just use the digital prototypes to perform a plug&play remote usability test where moderator and test user are connected remotely by a shared screen and an integrated phone. All modules are aimed to increase productivity of the interface design process and ease communication within the team.

But even if screen designs have already been made in some hi-fi graphics software (e.g. Photoshop, pidoco° can add value to the process by bringing interactivity to static screens. Adding ‘click areas’ to the finished screenshots enhance the collaboration and interaction capabilities of a former static screenshot. Colleagues, clients and test users can now easily be integrated in the designs process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!

Introduction to Rapid Prototyping
In research, development and study, prototypes play an important role. These developed prototypes help to do testing prior to production and help to pinpoint the possible problems that are occurring due to the design faults. Earlier generating a prototype model was extremely costly process and also time taking. But with the aid of Computer Numerically Controlled (CNC) Machining, the speed at which a prototype is developed has increased. With Rapid Prototyping, this time period has even decreased from few days to a few hours.

Rapid Prototyping is an additive manufacturing process that generates a model of an object directly from a CAD model by building it in layers. For this computerized equipment are used that builds a three-dimensional model of a casting from a CAD drawing.

There are different forms of Rapid Prototyping available depending upon the needs. One can differentiate between them by the methods these systems employ to make the layers. Following are few of the main types of Rapid Prototyping:

Stereolithography (SLA)
Stereolithography uses UV ray to solidify liquid acrylic polymer layer by layer on a moving platform and after many layers, the prototype in the preferred form is formed. This process is carried on in a VAT, a device that is filling up with photocurable liquid acrylate polymer. Stereolithography is one of the most used forms of rapid prototyping because of accuracy (Tolerances= 0.0125mm), less time taken (depends upon the size and complication of the part) and where parts details are fine and their geometry is to difficult to machined.

[Read more →]

Through prefab website elements (e.g. radio buttons, links, navigation items, controls etc.) interface designers can create clickable and animated web or software interfaces within minutes. Without any programming skills, interface designers can focus on the web concept and use cases, site structures and the overall layout of the site, instead of getting lost in details that will later be overhauled anyway.

Software as a Service (SaaS) applications offer many advantages compared to traditional desktop-style applications. They include reduced upfront investments and roll-out costs for hardware, power supply, cabling and expensive software licenses, as well as lower ongoing maintenance costs like hardware maintenance, power and cooling, backup and policy management, archiving, security and updating of the software itself. Basically, SaaS applications free an organization from the effort necessary to create, develop and sustain the infrastructure, thereby freeing up resources for focusing on the core business.

Another key benefit of many SaaS applications is their ease of use. Since SaaS applications are often used in different ways than traditional applications, their user interface design often focuses more on usability than the GUIs found in traditional applications. Working from a mobile location or even accessing an application with a mobile device such as the iPhone or the iPad, for example, turns out to pose significant challenges and special requirements to the interface design of SaaS applications. (By the way, have you ever tried to use Pidoco’s rapid prototyping and wireframing software on your iPhone?) Hence, simpler screen designs, optimized workflows and a clean user interface make SaaS applications easier to work with on average. That not only increases productivity, but often reduces the need for expensive training and user support of a company’s workforce.

Some debate has focused on the question of whether in the long-run costs for software-as-a-service applications are lower than for traditional applications due to the ongoing subscription fees. Yet, thus far, it seems that these concerns have not been an obstacle to the growth of online applications such as the rapid prototyping software Pidoco offers for wireframes and interface design. In fact, the cost and time initially saved by not having to install and maintain SaaS applications by far seems to outweigh concerns on the subscriptions.

As a matter of fact, statistics by Gartner show that enterprise SaaS sales are expected to top $14.8 billion in 2012 and grew by 27% in 2008 alone. So despite all debate, there is quite some
potential in software as a service.
DreamSimplicity.com recently delivered a list of 10 SaaS companies to watch. It includes:

•    Coupa for spend management in big and small enterprises
•    MyOnlineToolbox, a construction estimate and invoice software
•    Gist for building strong relationships by connecting email inbox and web
•    Accept for idea and portfolio management in innovative industries
•    Apptio for IT financial management
•    Jobvite, a job recruitment software
•    Nextbio for knowledge management in research-based organizations
•    Sonian, a data management software
•    HealthHiway for patient data management and billing
•    and OptionEase for fair market value accounting and compliance.

Next to the usual suspects like Google Apps, Salesforce or Zoho, which all fall into the messaging, conferencing, collarobation or CRM group, this is a very nice compilation. I personally would add Pidoco to the list as well, not only because wireframes or rather wireframe tools are becoming so important these days, but also because interface design has never been more collaborative than with clickable wireframes by Pidoco. You can try it out at www.pidoco.com.

Developing user-centered software applications is a dynamic and iterative process of designing and testing. But given the fact that the drafted interface concepts might be overhauled anyway after testing, the trade-off between creating high-fidelity prototypes and investing as little time as possible in something that will be thrown away has to be made.
This trade-off really asks for a fast visualization method and therefore some clever designers and programmers invented Rapid Paper Prototyping. Quick and dirty interface prototypes are sketched with pen and paper to be tested (and re-designed) with all the limitations physical paper brings along.

But today, in the digital age, Rapid Paper Prototyping has grown up! The era of digital interface prototyping has begun. With digital wireframing tools you can create interface mockups by drag and drop from prefabricated stencils (elements like checkboxes, navigation bars etc.). Unlike paper, these digital interface prototypes are completely interactive with animated navigation, real type-in form fields and linking between all pages through buttons and text links.
Advantages of Wireframe Software

The advantages of such a wireframing software are obvious: through the interaction features you get a much better impression of how your concepts work with the user and whether all possible use cases have been considered. Findings from user tests can be applied easily since the interface sketches are not fixed forever on paper, but interchangeable with re-useable layers, stencils and link references. And those already mentioned prefabricated stencils accelerate the sketching of interface concepts even more.

Being digital or even completely web-based, some interface design tools also allow you to perform remote user testing through expert reviews and one-to-one user tests with shared screens and integrated audio/video communication. The test sessions with all annotations can be documented right within the tool (in case of the one-to-one test session they get recorded on-screen) and a specification can be exported as Word doc.

The pidoco° wireframe software consists of three main entities which complement each other perfectly. In combination, they accelerate the interface design process and optimize the general workflow in all stages of interactive web design.

Animated and interactive interfaces are quickly sketched with the Prototype Creator (just by drag&drop) and can later easily be shared and reviewed by colleagues, test users or clients. If there is need for even more in-depth feedback on individual aspects of the concept wireframes, just use the clickable wireframes to perform a easy to set up remote usability test where moderator and test user are connected remotely by a shared screen and an integrated phone. All modules are aimed to increase productivity of the interface design process and ease communication within the team.

When you are into interface design, Rapid Paper Prototyping is an old hat! But ever considered doing interface design on screen?

With pidoco’s web-based screen design software, interaction designers and screen developers can save valuable time, optimize communication within the team and build better interfaces for the internet.

Rapid Paper Prototyping has already been established as THE way to get a GUI started. Rapid Paper Prototyping is about sketching ideas with pen an paper to be shared and iterated within the team. This concept will then go through an ongoing, sometimes collaborative, design process by implementing feedback from different stake holders. This paper-built prototype will finally act as a roadmap for the whole project – from beginning to the end (but is there a real end?). Some screen-designers even use these basic sketches for running usability tests. Revealing usability issues before programming can save a lot of money, since later alterations in the so called ‘finished’ web app are minimized.

However, there are problems with Rapid Paper Prototyping.  Sketches on paper are only scanned to add to the project documentation and also difficult to collaborate on in larger teams. Transforming paper sketches into interactive, digital documents for getting the grip on how workflows are reproduced in the design is also a time consuming task as we all know!
That is why many companies create their wireframes directly in MS PowerPoint or InDesign and have them send to the relevant sources. True, that way one can share the data more effectively but it is not really more interactive than making copies of a piece of paper handing it to the team. The Visio-type static wireframes still do not show the real functionality:  links, dynamic menus and combo-boxes etc. cannot be reproduced effectively and need to be explained individually in long paragraphs. Again, more time and effort has to be invested to get the message across.

pidoco° has noticed this problem and made it their duty to tackle it by providing a fast web-based interface design software.

But even if screen designs have already been made in some hi-fi graphics software (e.g. Photoshop, pidoco° can add value to the work flows by bringing interactivity to static screens. Adding ‘click areas’ to the finished screenshots enhance the collaboration and interaction capabilities of a former static screenshot. Colleagues, clients and test users can now easily be integrated in the designs process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!