Category — Wireframe Tools

Coming from a web design background we all know that usability is an important factor for the user adoption of a website or web application. But I think, these issues should nowadays be rather hygiene factors and good businesses should focus on the overall user experience, since this is what gets people talking and what multiplies success. But let’s take a look at the usability first.

Components of Designing Usability

Usability Design spans several dimensions we want browse though briefly, which are: taxonomy, interaction design, visual design, user feedback and content.

Taxonomy: focuses on the consistent classification of content, navigation and user orientation. Does the user know where she is at all times? Does she have ways to navigate to different areas of the website and is it clear by which clicks the user can complete a task (e.g. find something)?

Interaction Design: takes care of a consistent use of UI patterns and site components and aims to minimize the learning curve and to increase accuracy and efficiency of a task. Good interaction design ensures an always comprehensible user interaction and reduces frustration on the side of the user.

Visual Design: is aimed at optimizing the visual communication between user and website (or website’s content). Visual design communicates the underlying site’s structure to the user, pointing out relevant information or interaction artifacts at the appropriate time in the process. On a more general basis this manifests in graphic design standards (aka. style guides) and branding guidelines for a website.

Content: reminds you that even if you have perfect navigation and high usability, it all doesn’t help, when there is no relevant content. And relevant means a) there is everything, users want (including help sections and support pages) and b) that the provided content does match the expectations and is helpful.

In a heuristic evaluation, experts are sometimes ‘overly critical’ and provide only feedback on the problematic aspects of the interface, as this usability method really focuses on mistakes and not on overall feedback (positive and negative).

Although experienced in the field of (interface) design, your ‘experts’ need to have at least some experience with heuristic evaluation and must consider things like having the appropriate target audience in mind when judging the design of your site or interface.

And, of course, this is a purely qualitative usability method and can only provide a guide line based on usability best practices but does not substitute (rather complement) quantitative user tracking when the project is finally in use.

Conclusion about the Usability Method Heuristic Evaluation

Heuristic evaluations are the perfect usability method for testing and reviewing design concepts in a very early stage of a project (e.g. on a wireframe basis). Thus the feedback comes at the right time (before detailed design or even programming has started), still being possible to be considered in the next design phase. And with a heuristic evaluation you collect a lot of helpful insights to create customer centric design with rather limited effort.

Readings and Recommendations

To perfectly enable heuristic evaluations in an early stage of your project, interfaces should be sketched with a wireframing tool. Some of them even have the technical solution integrated to conduct heuristic evaluations remote via internet. Just google for things like “usability wireframe tool” .

For the usability method ‘heuristic evaluation’ a few usability experts gather around an interface prototype or website and evaluate whether each page and control follows established usability guidelines or usability patterns. Compared to the usability method ‘expert review’, where the expert’s feedback is rather open, in a heuristic evaluation the usability check is based on a list of established usability design patterns (aka. heuristics).

How to conduct a Heuristic Evaluation

In a heuristic evaluation, usually around 3 usability experts, which are in the best case specialists from the field of human computer interaction (HCI), but in the more common case fellow designer with an avocation in usability and user centered design, judge all elements on a website/interface, the structure and workflows, write down notes and prioritize them by impact on the overall user experience. The result is a usability report that presents an actionable check list of aspects to be solved by severity – sometimes even altered by alternative design solutions.

Advantages of a Heuristic Evaluation compared to other Usability Methods

If you are a web designer or information architect, you will probably know your peers and can easily gather 3 friends to review your site in a heuristic evaluation, checking with the latest usability patterns. This makes it rather cost effective, since you can in turn provide feedback in a heuristic evaluation for their screen designs.

As there is no installation or tech setup required, it is easy to implement too and a heuristic evaluation can be obtained early on in the design and planning process. Applying heuristic evaluations and reviewing conformity to established guidelines in the early stage of prototyping keeps your project within budget and avoids re-designing of already detailed screenshots or even re-programming of code.

With such a heuristic evaluation, studies have shown that around 90% of all usability bugs on a website can be traced.

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.

Through prefab screen elements (e.g. radio buttons, links, navigation items, controls etc.) information architects 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.

The pidoco° screens design software consists of three main modules 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.
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 use cases, 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

Through prefab stencils (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.

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 developers team and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!

Our conclusion of wireframing software: It’s got the look and feel of pen and paper, 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.

Through prefab interface elements (e.g. radio buttons, links, navigation items, controls etc.) information architects 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 only matter at a later stage of the project.