GUI Prototyping: How And What For?

How you can use prototyping in software development and how you can choose proper tool for that

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 a 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. ?rogrammers
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 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 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 an interactive model of the software in order to show
future users how the program interface is running. Prototyping
technologies can be possible solution for problems above. One of its
advantages is 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.

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

Than, lot's 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 is 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 so that 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:

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).

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.

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...

Comments and Discussions

I tried your GUI Machine. After 15 minutes of experimenting I was finally able to put a dropdown menu under a File menu item. I literally can do that faster in Visual Studio. Sorry, but your claims for ease of use have not been born out in my case. I tried the user manual early on, but it was all in Russian.

Then, I'm not programmer, I'm manager. But I communicate with the user, I know their wishes and requirements and I should do a prototype. I can't use Visual Studio, I don't know how to write code, so I need prototyping tool. So GUI Machine is great tool for me.

At last, you need to spend a couple of days to study GUI Machine and then you can create prototype faster than write code in visual studio