GUI Prototyping: How And What For?

Introduction

Programmer vs User

The situations of misunderstanding between software developers and users occur rather often. The user wants to get an effective tool able to solve his problems, but in most cases he doesn't have even the slightest idea of how programmers work. Programmers can hardly imagine the tasks users have to deal with.

What seems brilliantly realized to the programmer, at the same time can be extremely uncomfortable for the user. Programmers very often don't pay any attention to the things that users consider as obvious. Are there any possible ways to get over the misunderstanding between users and programmers?

Internal War

Software development and websites creation is a complicated process. Different people, who are engaged in it, think different – programmers, designers, managers... Each of them has a concrete task: the programmer codes, the designer cares for the visual design, the manager contacts with clients. Is it possible to make all these people understand each other?

Lost in Translation

When working on distributed projects, the misunderstanding can be caused not only by professional problems. It can also be a problem of communication between people, because of culture, language and behavioral barriers. This way, most of the customer's ideas and wishes are not successfully realized on the first attempt.

Prototyping - So Useful

Solve Communication Problems

Prototyping is a process of creation of an interactive model of the software in order to show future users how the program interface is running. Prototyping technologies can be a possible solution for problems above. One of its advantages is the possibility to get an immediate feedback from the users. The developer can take into consideration all users' remarks on the early stages of work when all changes can be made without causing serious losses. Prototyping makes the dialog between all the participants of development process more actual and make their cooperation more effective.

Improve the GUI with the User

The goals of prototyping are not limited by solving communication problems. One of the most important tasks is improving user interface quality. Graphical user interfaces (GUI) should be user-friendly, adapted for certain needs of certain organization and customized in line with other enterprise information systems. Otherwise, the user will spend much more time on training how to deal with the new program and proceed some easy pattern tasks; may be he will not use all its functions to the full extent.

When using prototyping technologies, the user transforms from passive consumer to active participant of software development process. Before the system development (on design step) he can easily visualize all his wishes and ideas. Than he can come up to developers with the prototype, showing what the future system should look like and how it should work.

Even if the user is not involved in prototyping, anyway he can have a strong hold over creation of prototypes and final interfaces. As a result, he will get an easy-to-use system, which covers all his needs. Major distribution of prototyping will necessarily lead to the global improvement of user interface quality.

Reduce Development Time

Prototyping is essential not only for users, but also for developers. Firstly, prototyping helps to reduce projecr risks and create the system satisfying customer's needs and requirements. Secondly, prototyping helps to increase the customer's loyalty. Thirdly, it can reduce overall time on developing the whole system.

The figure below shows the comparison of two styles of development.

The upper diagram shows the development process without prototyping. In this case, development starts when the requirements specification is defined and approved. Often, the customer is not fully satisfied with the result; the whole time spent on additional work is much greater than time of development itself.

The lower diagram represents development process including prototyping. In this case, the design takes more time and development delays. But when the development is based not only on requirements specification, but also on the detailed prototype, the system will more satisfy customer's needs and will not require serious corrections. The overall time on developing system will surely reduce.

Key Features of Prototyping Tools

Easy-to-Use

To implement prototyping easily and effective in software development process, a specialized tool is required. On the one hand, prototyping is a very complicated process; on the other hand, most users involved are not technically advanced. That's why the prototyping tool should be powerful and easy-to-use at the same time. It must allow users with no special knowledge and skills (like programming) to create prototypes of any complexity.

There is a great number of prototyping tools in the software market, designed for solving various problems: from making mockups to creating high fidelity interactive prototypes. It seems that having such a wide choice, specialists can easily choose the one proper instrument. But upon further acquaintance with offered software, problem of choice looks like more difficult.

Not Only for Web

Most existing prototyping tools are great for web applications and sites, but aren't suitable for desktop applications.

Visualization

Then, lots of tools can create simple mockups, as mentioned above. They, of course, can be really helpful in some situations. But what shall be done if you need to create detailed and attractive prototypes? Here, we come to another important factor of choosing software - prototypes fidelity. The analysis shows that not all but just a few offered software have proper tool kits, including so-called native components (i.e., stylized to a particular operating system). So, very few tools can produce really nice and functional prototypes.

Interactivity

The prototype should be interactive and dynamic, that are the two main prototype characteristics. The visual appearance of the software can be designed in any graphics editor. But prototype should demonstrate not only interface design, but system functions and interface logic. When creating “live” and really dynamic prototype, specialists face number of problems: for example, many existing tools don't even allow to connect interfaces. That's why they can be used in a very limited number of cases. Many other tools, called “interactive”, have a very narrow set of events and actions which are not enough to build a lively dynamic prototype.

Cross-platform

The list of critical and slight problems of prototyping tools can be continued. We have also found out that there are no many cross-platform (i.e., able to work under different operating systems) prototyping tools. Nowadays, when many organizations switch over to Linux, it is really very important.

Our Own Prototyping Tool

Taken into consideration all the problems described, we decided to create our own prototyping tool and called it GUI Machine. It can produce fully interactive high-fidelity prototypes of desktop and web applications without coding.

Now

We did all our best to avoid most of the problems mentioned above. Now GUI Machine has the following features:

• It is easy-to-use. You don't need special skills and knowledge (for example, programming) to begin working with GUI Machine.
• It is functional and allows to create detailed interactive prototypes of any size, complexity and detalization.
• It is universal – easily used for prototyping as well as desktop and web applications.
• It is cross-platform and can run under Windows, Linux or MacOS.
• It is handy. We included some additional useful tools into GUI Machine to make its using more comfortable and effective. You export prototypes into a launchable application that you can run on any computer without installing GUI Machine. Another tool allows to create screenshots of all prototype windows. One more useful tool is the simple graphic editor which helps you easily modify icons and any other images. The tool I like most is Pixel Grabber, capturing the color of any pixel on the screen.

Then

We must say without false modesty that our plans for future are really great. We decided to turn our prototyping tool into a software design environment. We are passing from interface design to system design. What should be done:

1. We are going to create our own UML modeling tool and integrate it with GUI Machine. (UML was selected as practically common standard for software design).
2. We are also going to make the integration of the UML model and the prototype. That's why we are working upon our UML add-in, the so-called UML-profile.
3. We are going to learn how to generate the program code basing of prototype and UML model.

Then GUI Machine will be able to create fully-fledged applications, using generated code, prototype and UML-model. It seems to be revolution in software development - the users will be able to create applications without programming! Does it seem incredible to you? Time will show...

Examples of Prototypes

• CRM system prototype
• Web-portal prototype
• Windows 7 folder prototype
• File download window prototype

History

• 5^th May, 2012: Initial version