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

For the people who are into screen design, Rapid Paper Prototyping is an old hat! But ever considered doing screen prototyping on screen?

With pidoco’s web-based prototyping software, screen designers and web developers can save valuable time, optimize communication within the team and build better usability for the WWW.
Rapid Paper Prototyping has already been known to be the solution to get a screen design started. The basic concepts of the layout will be put on paper and discussed within the team. This design will then be put through a refinement process by incorporating feedback from colleagues or even clients. This paper-built screen will eventually act as a rough guide for the whole project – from start to finish. Some interface designers even use these very limited paper prototypes for performing usability tests. Retrieving usability errors in the prototyping phase can save a lot of time, since later changes in the so called ‘finished’ web project are minimized.

Anyway, there are some drawbacks to Rapid Paper Prototyping.  Paper prototypes are only scanned to add to the project documentation and also difficult to share between team-members. Scanning paper prototypes and making them ‘clickable’ for testing use cases is also a time consuming task as we all know!

That is why many screen designers create their prototypes directly in MS PowerPoint or MS Visio and have them distributed to the relevant sources. True, that way one can share the sketches more effectively but it is not really more interactive than copying a piece of paper handing it to other stake holders. The digital sketches 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 paragraphs. Again, more time and effort has to be invested to get the message across.

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

When you conduct an affinity diagramming workshop, make sure the group of participants is smaller than 7 or 8, since it is almost impossible to keep everyone focused (depending on the amount of data the affinity diagramming workshop might even take two sessions) and when working in turns participants must bring some patience until all other members have finished.

Note: When there is a lot of data in a non printable format, ask the participants of your affinity diagramming session to write things down on stick notes, so you split the workload.

After preparing the information and getting the users on board, the next step in affinity diagramming is to put the notes on the whiteboard (or wall), grouping similar content in the same area (do not label it yet). When certain groups of your affinity diagram get too ‘fuzzy’, it might be useful to split a group in various aspects (sub groups) so that you keep the data sets consistent.

When you do the affinity diagramming alone, it might also be usable to work digitally (like with MS Excel or mind mapping tools), but when team work is required, it has proven more effective to work offline with pen and paper.

At some time you will have arranged all sticky notes in groups and may do a quick review of your affinity diagram to make sure everybody agrees on the grouping results. For later processing of the data, now it might be useful to name the groups making them identifiable (or when the data sets represent areas on a website, think about appropriate navigation topics or headlines).

What you get from Affinity Diagramming?

Independent of the data, the purpose and the group of participants, affinity diagramming is a simple and cost effective usability method for extracting and grouping ideas from qualitative data and for obtaining consensus on how information should be structured.

It’s not a secret that Google’s success (or at last the fast adoption rate) has been accelerated through an exceptional example of simplicity and user centered design on their search page (homepage). Almost every user centered design expert I know agrees on the well and consequently implemented user centric approach. So apparently they have done something right!

The more astonishing it is how Google messed it up as soon as you leave the homepage! What is shown on the results pages, is still acceptable, although you could enrich the user experience much more through additional filter options, previews etc. But let’s get on and try to dig deep into Google’s website and find out how far Google took the user centered design approach!

Ever changing (or even disappearing) navigation elements, constantly changing page layouts, giving no clue to users where to click next, … couldn’t be much worse from a user centered design perspective! And after neglecting all existing usability patterns, on some pages their only focus is the ‘sign me up’ button, not providing any information concerning a service without registering beforehand – is that user friendly? As I said, with that approach Google disregards almost every usability pattern for web design but it sadly seems that they can afford it!

They allocated 200% effort on the homepage, but very little on the other pages and the site’s overall structure, it seems. But the funny thing about the usability gap between homepage and all other pages is that a lot of companies still do the exact same thing! They test and optimize the homepage (and may be the checkout process) various times and with a more or less user centered design approach (okay, I think, they really focus on conversion, not on users), but forget everything that’s in the middle!

Collaborative software solutions aim to transform the way ideas, documents and rich media are shared from distributed locations in order to enable more effective team collaboration. In other words: these tools help you to communicate better, off-site and with many visual support tools thus reducing travelling and meeting expenses immensely. The latest web-based solutions even enable teams to access important data (or tools) from any location as long as they have internet access and a web browser.

But in addition to the web 2.0 ‘usual suspects’ like slideshare, mindmeister and all the millions of web conferencing tools, we found a new interesting collaboration tool especially for interface designers and media agencies: Pidoco’s wireframing and media collaboration tool (www.pidoco.com).

This completely web-based tool helps interaction designers to communicate the work-flow concepts and specs (as interactive interface mockups) of a new website to developers, customers and other stake holders in the extended project team. All communication takes place online (just a web browser is needed) and all team members can collaborate in real-time (or asynchronously) on the same wireframes, tracking and influencing the different stages of development. What makes it special for screen designers; it’s not just collaboration, but also a great wireframing and usability testing tool. It basically transfers the idea of rapid paper prototyping to the web and adds a lot of helpful testing, communication and collaboration features.

Visual collaboration tools like this really help us project managers keeping our teams on track and reduce communication cost across boundaries – boundaries in the head, location and language. Because a picture says more than a thousand words!

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 modules enable interface designers to new ways to work with higher efficiency, leaving more time for the creative process that really counts.

Wireframing and Real-time Collaboration

The pidoco° wireframe software consists of three main entities which complement each other perfectly. Together, they enhance 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 web concept, 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.

Last week I found a really great source and funny pictures (remember the Masters of the Universe with He-Man and his companions?) about 10 usability crimes not to be committed on any web project.

If you spot these on one of your sites, go fast and fix it! Although these are rather basics, you still find them often on the web (with companies of any size). You can read the complete article here (please note: the “click here” example is one of the crimes he mentioned, but I just couldn’t resist )

By the way, the article is by Chris Spooner, an independent designer maintaining several design related blogs with news, stories and tutorials – definitely a source visiting more often: blog.spoongraphics.co.uk

To get a preview of what to expect, here are Chris’s 10 most awful web design crimes:

Crime 1: Form labels that aren’t associated to form input fields
Crime 2: A logo that doesn’t link to the homepage
Crime 3: Not specifying a visited link state
Crime 4: Not indicating an active form field
Crime 5: An image without an <alt> description
Crime 6: A background image without a background color
Crime 7: Using long boring passages of content
Crime 8: Underlining stuff that isn’t a link
Crime 9: Telling people to click here
Crime 10: Using justified text

PS: Here is the original article: 10 Usability Crimes You Really Shouldn’t Commit

Ever thought why websites of public services and local authorities are most of the time so way behind common usability standards and widely used UX patterns? The US government apparently wondered about the same thing and hands on as the Americans are (even in public services) put up a service website with free usability resources on the web.

Actually it is addressed to ‘for government web designers’, but in any case it’s a nice source for designers and web developers somewhat new to the field of user centered design. Besides the explanation of some usability methods, templates and articles, on www.usability.gov you will find a complete 20 MB ‘Usability Guidelines’ eBook (www.usability.gov/guidelines/) for download with much useful information on the following topics:

-    Design Process and Evaluation
-    Optimizing the User Experience
-    Accessibility
-    Hardware and Software
-    The Homepage
-    Page Layout
-    Navigation
-    Scrolling and Paging
-    Headings, Titles, and Labels
-    Links
-    Text Appearance
-    Lists
-    Screen-based Controls (Widgets)
-    Graphics, Images, and Multimedia
-    Writing Web Content
-    Content Organization
-    Search
-    Usability Testing

May be to the UX professionals with lots and lots of hands on experience in the field it might be old news, but nevertheless it’s a nice overview dealing with many important aspects of usability, user experience (UX), user centered design and usability testing. And this resource is even more astonishing considering it’s a government’s website and completely free!
Well done, US government!

For the people who are into screen design, Rapid Paper Prototyping is old school! But ever considered doing screen prototyping on screen?

With pidoco’s web-based wireframe tool, interaction designers and screen developers can save valuable time, enhance the creative process and build better usability for the web.

Rapid Paper Prototyping has already been established as THE way to get a web-application started. Rapid Paper Prototyping is about sketching ideas with pen and paper to be shared and iterated within the team. This basic screen concept will then be put through a refinement process by incorporating feedback from clients, test users and colleagues. This paper prototype will eventually act as a roadmap for the whole project – from start to finish. Some screen-designers even use these very limited paper prototypes for performing usability tests. Revealing usability issues in the prototyping phase can save a lot of time and budget, since later changes in the so called ‘finished’ web application are minimized.

However, there are disadvantages of Rapid Paper Prototyping.  Prototypes are only scanned to add to the project repository and also difficult to share between team-members. Scanning paper prototypes and making them ‘clickable’ 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 sketches directly in MS PowerPoint or MS Visio and have them distributed to the relevant sources. True, that way one can share the screens more effectively but it is not really more dynamic than duplicating 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 paragraphs. Again, more time and effort has to be invested to get the message across.

The Pidoco GmbH has picked this problem and made it their mission to tackle it by providing a easy web-based interface design software.

Through prefab stencils (e.g. radio buttons, links, navigation items, controls etc.) interface designers can create clickable and animated web or software interfaces in no time. 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.