Click here to Skip to main content
Click here to Skip to main content

GUI Prototyping: How And What For?

, 5 May 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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:

  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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rustem Gaifutdinov
Product Manager Alee Software
Russian Federation Russian Federation
Rustem Gaifutdinov, Saint Petersburg, Russia
 
Job: GUI Machine product manager at Alee Software company. GUI Machine (gui-machine.com) is a software design and prototyping tool.
 
Education: graduated from Saint Petersburg Electrotechnical University "LETI" (ETU) from the Faculty of Computing Technologies and Informatics. Specialty: Information Systems and Technology.
 
Hobby: football and snowboarding.
Follow on   Twitter

Comments and Discussions

 
QuestionNot easy to use PinmemberHezek1ah7-May-12 15:29 
AnswerRe: Not easy to use PinmemberRustem Gaifutdinov8-May-12 9:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141022.2 | Last Updated 5 May 2012
Article Copyright 2012 by Rustem Gaifutdinov
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid