Category — Wireframing Tools

Docs users can also chat in real time with collaborators as they evaluate spreadsheets, proposals, and other written projects. MindMeister specializes on online mind mapping and allows users to create, edit and share mind maps very easily and collaborate on them in real-time. Pidoco offers its users real-time collaboration possibilities as they create wireframe prototypes of planned user interfaces for web, desktop or mobile applications, including applications for the iPhone or iPad. Pidoco users are able to send collaborators links to their wireframes for editing and user experience feedback purposes and for conducting usability tests to improve the user experience of applications. These and other applications underscore the importance of web interfaces design that keeps in mind usability and time-effective functionality.

From the range of tools now starting to offer real-time collaboration capabilities, it is apparent that this modern form of team work is becoming increasingly important, especially as globalization, cross-border cooperation and outsourcing intensify. While real-time collaboration is useful in such general settings as creating text or spreadsheet documents, it can be seen from the examples above that many specialized areas are discovering the advantages of it. Web interface design, for example requires active engagement and feedback. In order for designers to stay competitive and relevant in the world of web development, they need to have the ability to collaborate with colleagues, clients and users in the fastest way possible. And similar arguments can be applied to many other fields where individuals and businesses try to be innovative in their processes in order to remain competitive.

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 →]

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

Have you ever thought about outsourcing some of your web developments? I did and it caused me a lot of headaches! Outsourcing services like Elance or RentACoder sound intriguing in the first place, and it seems that you get a lot of bang for your buck – in theory!

But the real experience looks quite different! As everybody knows in the web world, there is a lot of room for misunderstanding when it comes to getting the idea of a project across. Even if you design the most important screens in Photoshop so that the coder roughly knows how the style guide looks, there will always be stuff in a static screenshot that can be interpreted one way or the other.

And just telling the outsourcing provider to “get back to me when something is unclear” does not help. To the developer it is absolutely clear what to do and how – but he thinks like a coder thinks and probably not like the marketing person who was posting the web site job on the outsourcing platform.

In other words, a good project description (aka specification) and continuous communication is king in such an outsourcing project. Fine, but here another problem occurs: Ever tried to get your message across in plain English (e.g. via Skype), when your service provider just speaks Hindi or Russian and broken English? This can end in a real disaster (and in my case it did with some of the projects I outsourced through Elance).

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!

This is a tricky question. If you deal with future development of an existing site, it is obvious to ask your customer base. In all other cases, you are confronted with a sampling task. Getting the sample for a user survey right is a job for your statistician (if you have one) who knows his job, since the best survey questions mislead you when you ask the wrong people.

How should I post my Questions in a User Survey?

Considering the fact, that not only in a user survey the answer most often depends on how you pose your question (‘leading question, your honor’), you can again fall into many traps along the path. The question is also whether you want to get qualitative or quantitative results. With just a few users, you can post open questions, like: ‘What are you missing, when using our site?’, ‘Which feature do you love most and why?’ etc. Is it a quantitative user survey, you will trade inspiration from your users for statistically calculable results – the according question for the latter would rather be like: ‘Please rate this site in terms of performance on a scale between 1 and 7’.

My personal Conclusion about conducting User Surveys

User surveys are a complementary usability method to common analytics tools. You will find out more about the motivation and feelings of (potential) users and gather insights for creating great user experience. Unfortunately there is no ‘cook book’ on how to do it right and you simply need some experience. When it comes to quantitative analysis at least some statistical background (for sampling and analyzing the results afterwards) is helpful.
If you are more interested in methods and tools for the user centered design process, check out this wireframe software, and for those interested in digging deep into user surveys, check out this book.

Through prefab interface components (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 distract from the overall concept of the site.

Real-time Collaboration

But even if screen designs have already been made in some high-fidelity 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!

Digital beats Pen and Paper

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

But even if screen designs have already been made in some hi-fi graphics software (e.g. InDesign, pidoco° can add value to the design 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!