Digital Interface Prototyping

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.

Limitations of Wireframe Software
However, the world is not just brilliant with digital interface prototyping. Although the prototypes are available in a digital format, theoretically allowing to share and interact on the concepts, many wireframing tools lack useful collaboration features. But given the fact that life in an agency circles around projects with different internal and freelance team members and sometimes several locations, (online) collaboration becomes more and more important.

Also the fast and steady technical invention of new web and interface controls (just imagine how Apple’s iPhone has influenced user behavior in the web), make it hard for the interface design tool providers to keep pace with development of the latest controls and a natural lag until these controls find its way into the wireframing applications is imminent.

But imagining the funny fact that these new and behavior breaking controls also have been developed and tested with interface design tools like the ones described here, the future looks bright for digital interface prototyping.

So we only can recommend testing these interface design tools since they all offer free trial periods of some kind. As a good example of what’s state of the art in the field, we have listed a completely web-based wireframing software with many interesting real-time collaboration features in the resources box.

Pidoco – Wireframe Software, interface design software and GUI Prototyping Tool. A GUI Design Interface Software for clickable Wireframes! Wireframe creating and GUI prototyping tool. Fast wireframe creating and remote website usability testing lead to an improved conversion!

This entry was posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Gui Prototyping, Interface Design and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>