A wireframe is a visual representation of the projected content of a graphical user interface that allow designers to test, refine and adjust software user interfaces to improve user experience and functionality. They are particularly useful in the collaborative process as they ensure that stakeholders can keep track of a project’s workflow. Special wireframe tools or wireframe software can support this process effectively. Wireframes come in either two main guises: low fidelity or high fidelity. In this blog I shall explore both types and their usefulness for user interface design, and more:

What are low fidelity wireframes?

Low-fidelity wireframes are wireframes that focus on the essentials of a user interface: layout, structure, Information Architecture – not design! Low fidelity wireframes evolved onto computer screens from rapid paper prototyping wireframes which emerged in the mid 1980s to become a popular Blue Chip company tool by the mid 1990s. Rapid paper prototyping involved the creation of rough drawings (sometimes drawn by hand) of graphical user interfaces as prototypes of software applications to visualize and test usability.

What are the main benefits of low fidelity wireframes?

1. Time: Eschewing many cosmetic factors, low fidelity wireframes are faster to create and thus allow you to quickly tackle fundamental issues regarding the usability of your interface. Suggestions and refinements can, also, quickly be incorporated into software prototypes for further fine tuning.

[Read more →]

But even if screen designs have already been made in some high-fidelity graphics software (e.g. InDesign, 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 feedback process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!

Everybody who is into screen design, Rapid Paper Prototyping is old school! But ever considered doing screen design on screen?

With pidoco’s web-based prototyping software, designers and software developers can save valuable time, enhance the creative process and build better usability for the internet.

Rapid Paper Prototyping has already been established as THE way to get a website started. Rapid Paper Prototyping is about sketching ideas with pen and paper to be discussed within the team. This prototype will then go through an iterative design process by integrating feedback from different stake holders. This paper screen will eventually act as a guideline for the whole project – from beginning to the end (but is there a real end?). Some screen-designers even use these very limited paper prototypes for performing usability tests. Retrieving usability errors before programming can save a lot of time, since later alterations in the so called ‘finished’ website are minimized.

However, there are disadvantages of Rapid Paper Prototyping.  Prototypes are not easy to add to the document servers and also difficult to share between team-members. Scanning paper prototypes and making them ‘clickable’ for web testing is also a time consuming task as we all know!

That is why many interface design executives create their wireframes directly in MS PowerPoint or MS Visio and have them send to the relevant sources. True, that way one can share the designs more effectively but it is not really more interactive than making copies of a piece of paper handing it to the team. The prototypes still do not show the real capabilities for test user excitement:  links, dynamic menus and combo-boxes etc. cannot be reproduced effectively and need to be explained individually in long text. Again, more time and effort has to be invested to get the message across.

pidoco° has selected this problem and made it their task to tackle it by providing a easy web-based interface design software.

The pidoco° screens design software consists of three main components which complement each other perfectly. They speed up the interface design process and optimize the general workflow in all stages of user centered 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 clickable wireframes, just use the clickable wireframes to perform a one-on-one 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.

Wireframe, or web wireframe, is a straightforward visual guide utilized in interface design to advocate the configuration of an interface and interactions between its pages. It is a skeleton adaptation of a website that represents navigational ideas and page substance. Wireframe is a collection of cross-linked pages that works similar to a useful prototype of the ultimate or final website minus the graphics or artwork. It frequently has just vague text contents and it regularly goes together with a tree diagram or table-chart of the website. It does not allow for visual design or page layout. Usually, wireframes are finished before any artwork is formed.

Wireframing a website has many benefits. It lets the advancement of changes of a layout to continue stability throughout the site. This is a significant part of the preliminary development phase since it generates user expectations and aids to build up understanding of and know-how with the site.

Another benefit is by creating a collection of wireframes for a certain project, it becomes an opportunity to correspond with stakeholders and clients. The wireframing process will eventually become some sort of a stable base where one can contemplate changes, vary user channels, and recent conditions. Wireframes are normally being used by the information architect and the information designer as a gathering of the intellects and as firm working documents where one can institute the language, substance, and makeup of connections users will be having in that particular site or project.

[Read more →]

Our conclusion of wireframing software: It’s got the look and feel of pen and paper, but adds interactivity (making wireframes animated) and enhances developing speed through re-usable elements and layers. Many (real-time) collaboration components enable interface designers to new ways to work with higher efficiency, leaving more time for the creative process that really counts.

On almost every website, you can select data from a given pool of options. The Yahoo! Design Patterns show you the best practices for different contexts of selection. The date picker is just as represented as the picture carousel which you can see nowadays in almost every online shop (now you know why).

Yahoo! Design Pattern – Rich Interaction

This is a nice one! These design patterns show you how users can interact with your site by using dynamic and animated effects. But not only do the Yahoo! Design Patterns show you what dynamic patterns exist, but also how you get users to use them really and manage the right level of effects without creating an overkill.

Yahoo! Design Pattern – Social

Web 2.0 is everywhere and what has been so special a few years ago, is today rather common practice on many websites – without being labeled 2.0. The Yahoo! Design Patterns tell you a lot about the core principals of social media and interaction among your users. These social design best practices deal with patterns attached to people (e.g. identity, reputation and presence) but also to objects for rating content and sharing stuff what they like, thus making social interaction work.

Thumbs up for the Yahoo! Design Patterns Library

What started out as an internal Yahoo! project is now a strong and powerful source for designing usability. These design patterns are not limited to what the Yahoo! people did and still do on their site, but they are a guideline for all the web designers out there. Of course, the design pattern library contains examples on how Yahoo! uses these patterns. But consider these design patterns more like a concept outline and not a copy paste solution. Two tab navigations can have the same core concept, with completely different designs – thus enabling designers to take these design patterns to create something great, something beautiful AND usable!

A lot of web designers I worked with so far, tried to reinvent the wheel every time faced with a new web project, creating really beautiful and arty stuff – nobody could use on first sight (but I have to admit, the stuff looked really nice!). But nice isn’t the task here, usable is what we want and need!

Re-arranging learned patterns, controls and site structures, some designers might say, is boring, limited and not innovative at all! On the contrary I say! It is probably much more challenging, using the very same controls users know and still creating innovative design.
For that reason I am a great fan of the Yahoo! Design Patterns library. The Yahoo! Design Patterns are a collection of usability patterns or usability best practices for what they categorized as: page layout, navigation, selection, rich interaction and social.
Yahoo! presents more than 50 individual design best practices and tells you exactly when to use them and what problem you will solve with that! Here is what you will find in the different
categories:
Yahoo! Design Pattern – Page Layout

In this design pattern category you will find best practices for page grids and general page layouts, keeping consistency over the whole site, delivering a cohesive user and brand experience. With a standardized grid (wireframe grid) you keep the site comprehensible for the user while maintaining flexibility for integrating all sorts of dynamic and individual content.
Yahoo! Design Pattern – Navigation

This Yahoo! Design Pattern category solves the most important problem on a website: finding the right stuff! These design patterns present best practices for all sorts of navigation challenges, filter options, pagination, navigation tabs and bars etc.

With a user survey you try to find out how your software, application or web site is most likely to be used by your target audience or a special segment of users. The usability method of posting user surveys on your website is a powerful tool to find out what other analytics tools cannot deliver. When a quantitative analytics tool tells you everything about what people did on your website or interface, a user survey tells you the hidden secrets about user motivation, feelings and the why people using your website or interface.

You post all kinds of questions (by letter, email, online) to get an idea about stuff that you cannot trace or observe technically (e.g. ask about features that do not exist yet), but which you need to know for making your product evenmore customer centric.

What should I ask in a User Survey

With the internet it is easy to carry out user surveys with hundreds and thousands of users, presenting qualitative and/or quantitative data for decision making. But what should you ask your target audience? Well, what do you want to know? Depending on your goals, the questions will and can be quite different. But compared to many other usability methods, user surveys can give you answers about stuff that is hard to find out through tracking and observing user behavior (e.g. feature requests, expectations etc.).

Everybody who is into screen design, Rapid Paper Prototyping is an old hat! But ever considered doing screen design on screen?

With pidoco’s web-based prototyping software, interaction designers and web developers can save valuable time, enhance the creative process and build better interfaces for the internet.
Rapid Paper Prototyping has already been established as THE way to get a GUI started. The basic concepts of the layout will be put on paper and  shared and iterated within the team. This prototype will then go through an iterative design process by implementing feedback from different stake holders. This paper screen will at last act as a rough guide for the whole project – from start to finish. Some screen-designers even use these paper sketches for running usability tests. Revealing usability issues in an early stage of development can save a lot of time, since later alterations in the so called ‘finished’ web project are minimized.

Anyway, there are several drawbacks to Rapid Paper Prototyping.  Paper prototypes are difficult to add to the document servers and also difficult to share between team-members. 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 prototypes directly in MS PowerPoint or InDesign and have them distributed to the relevant sources. True, that way one can share the data more effectively but it is not really more interactive than copying a piece of paper handing it to the team. The digital sketches still do not show the real capabilities for test user excitement:  links, dynamic menus and buttons etc. cannot be reproduced effectively and need to be explained individually in long specs. Again, more time and effort has to be invested to get the message across.

pidoco° has spotted this problem and made it their task to tackle it by providing a simple web-based interface design software.

Wireframing and Real-time Collaboration

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

Interactive 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 wireframes, just use the digital prototypes 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.