Interactive Prototyping with GUI Machine

In previous episodes ...

In previous articles of the cycle, we described in detail the process of finding the prototyping tool suitable for us and the history of creating our own tool - the GUI Machine.

Now it's time to talk in more detail about what we did. In order not to waste precious time of the reader, I’ll proceed to the description of the prototype GUI Machine tool, its functionality and capabilities without slowing down and lyrical digressions.

The article will be interesting not only to those who are already familiar with the tool and want to learn more about it, but also to those who are actively searching for the prototyping tool and conducting their comparative analysis.
')

Summary

Name: GUI Machine
Year of birth: 2009
Release date: January 24, 2011
Place of birth: St. Petersburg, Russia
Organization: Alee Software
Prof. vocation: a tool for dynamic prototyping.
Prof. skills: creating interactive prototypes of complex desktop and web applications without writing code
Environment: Windows, Mac OS, Linux
Foreign analogues: Axure RP, GUI Design Studio, MS Expression Blend
Domestic analogues: none
Personal qualities: simplicity, functional fullness, intuitiveness, high speed and ease of prototyping.
Knowledge of languages: Russian and English
About me: I was born in a successful IT company, I am constantly replenishing new functionality, improving and getting rid of errors. Ambitious, I have ambitious plans. The future revolutionary of the world of software development.
Contact: www.guimachine.ru

First meeting

To begin with, I consider it necessary to briefly describe the purpose of the application, the tasks to be solved, the specialization and present the application interface.

So, GUI Machine is a tool for creating interactive prototypes of desktop (desktop) and web applications — a definition that speaks for itself. Such prototypes allow us to describe both the appearance, the graphical interface, and the behavior, the interface logic of the system being developed. The prototypes created in the GUI Machine are characterized by high accuracy, detail, visual accuracy and, in terms of their proximity to the final system, belong to the High-fidelity class of prototypes. As examples, I suggest watching video presentations of prototypes created in the GUI Machine:

Prototype of the CRM system web interface:


The prototype of the corporate portal Alee Software:


Prototyping in the GUI Machine does not require any special knowledge and skills, does not require writing code. Thus, the tool is intended not only, and not even so much to developers, as to analysts, project managers, designers, technical writers, usability specialists, who directly communicate with the customer / future user and most fully and accurately represent their requirements and wishes, which subsequently will be implemented in the prototype with minimal loss of relevant information.

As a result, in addition to the TOR, the developer will receive a working prototype of the system being developed, which will allow clarifying, specifying ambiguous or ambiguous requirements and significantly reducing the likelihood of misinterpretation of requirements. Accordingly, the likelihood that the system that fully meets the customer’s requirements and fully satisfies it will be implemented the first time or with the minimum number of rework will be significantly increased. Fewer development iterations — less time and money spent. In addition, you should not forget about a satisfied customer, whose increased loyalty is not the least important factor. This is just one of the options for using prototypes, but not the only one.

However, the benefits of prototyping were written, spoken, argued more than once or twice, so I will not bother the reader with further arguments on the topic, but go on to describing the GUI Machine interface.

GUI Machine Interface

The GUI Machine workspace is organized to help focus on creating and editing program interfaces.



In the upper part of the application window there is a menu made in Ribbon style, which provides quick access to the most popular operations and settings. Below in the center is the prototype editing area, on which interface screens are created from various components and assembled. Under the editing area, the project root pages are shown. Left and right are the main working panels: Components, Layers, Object Properties, Templates and History . All panels can be collapsed, hidden along the edges of the editing area, resized (both in height and in width), moved and closed. The menu can also be collapsed, leaving only one top line. Thus, you can customize the look of the application "by yourself" and free up the maximum amount of space for the prototype editing area for more convenient and enjoyable work. You can quickly hide all panels using the keyboard shortcut Ctrl + H.



Also, panel management is available from the Utilities tab and frames of the upper horizontal menu of the application:



Here you can hide or display the panels (one by one or all together), fix their position, turn off the display of their titles.

Components

The Components panel is the main working tool for building interfaces, containing many different components. The tool is designed to add objects to the editing area. The panel contains 4 sets of components: Standard, Extended, Shapes, Vaadin . In addition to its standard view (tree of components with names), the panel has an alternative compact representation:



You can change the way components are displayed by right-clicking inside the panel.

Standard Components

A set of standard components used in building any interface: buttons (commanding and regular), panels (normal, tabbed panel, split-panel), text labels, fields and areas, checkbox, radio button, lists (drop-down and normal), wood, table, window, menu, popup menu and others.
Almost all components of the set are native components of the operating system. This means that the appearance and behavior of the components is inherited, borrowed from the operating system on which the prototype is running in view mode.


All standard components can also be found on the Standard tab of the upper horizontal application menu:



The figure below shows a window running in Windows 7 in view mode, containing standard components:



And now the same window, but running on Mac OS:



and on Linux:



The set, in addition to the usual interface elements, also includes layouts - dynamic and static - the objects on which any interface created in the GUI Machine is based. They determine the specifics of work in the GUI Machine.

Static layout

The static layout is the most familiar to the overwhelming number of users. In fact, it is a container that can contain several arbitrarily located objects. Its static nature lies in the fact that the size and position of all the contained objects are rigidly fixed and cannot be changed in the viewing mode. Prototypes based on static layouts can be created very quickly. The main purpose of such prototypes is to create screenshots (I threw it up - I started it - I took it off - I closed it), because their degree of dynamism is low.



The left side of the figure shows a static layout on the editing area containing several objects. In the fifth part - the same layout, but launched into view. The viewing window is intentionally stretched vertically in order to show the “static” nature of this layout: when the window is resized, the position and size of the contained objects remain unchanged.

When working with a static layout, I recommend using guide lines or alignment tools located on the Utilities tab and frames of the upper horizontal menu of the application. Otherwise, it is quite difficult to position objects exactly and beautifully inside a static layout.



The set of tools presented in the figure makes it possible to horizontally and vertically align the position of several objects selected in the editing area, to level their width and height, to arrange them sequentially in the required order at specified intervals.

Dynamic layout

If a fully interactive and dynamic prototype is required, then it should be created on the basis of dynamic layouts. This object is a container that can be divided into several cells, thus forming a kind of interface framework. The objects inserted into the dynamic layout are placed strictly along the cells (the size of the inserted object will be changed to the size of the cell / cells). If you change the size of the window launched in the view mode, the position and size of the objects inserted into the layout will also be changed. Working with dynamic layouts is somewhat more difficult, it is necessary to spend some time studying its behavior (10 minutes with documentation), however, with a certain dexterity, working with it does not cause any difficulties or inconveniences.



Also, as in the previous figure, here the layout view window is intentionally stretched. When resizing a window, the position and size of some objects also changed. It depends on the type of the cell of the layout in which this or that object is located (there are 3 types of them).

Placeholder

In addition to the layouts, the Placeholder component is knocked out of a line of standard interface elements. As its name says, it is an object that occupies a specific place on the prototype and stores a link to another object. When launching the prototype in viewing mode, the placeholder will be automatically replaced by the object to which it refers.

Extended components

The set of extended components contains non-standard interface components (such as Google Map, Roll-up Panel, Check Box List) and components designed exclusively for creating complex, non-trivial actions (for example, Timer, Audio Player). , "Communication object"). The latter are not interface elements and cannot be inserted into any of the layouts.


Like the standard, extended components can also be found on the Advanced tab of the upper horizontal menu of the application:



The figure below shows the window launched in the view mode, which contains components from the extended set (of course, only those that are interface elements).

Vaadin Web Components

The set of Vaadin web components, in contrast to the standard set, is non-native, platform-independent — it looks and works the same on any operating system.
It includes the most popular and frequently used components, duplicating components from the standard set, and 2 more complex, non-standard components: Date picker and Calendar .


As you guessed, the Vaadin components are also duplicated on the Vaadin tab of the top horizontal menu of the application:



The figure below shows a window running in view mode containing the Vaadin web components:

Figures

A set of simple (square, circle, rectangle, oval, rhombus) and complex (polygon) geometric shapes to create your own non-standard controls or windows of irregular shape. Naturally, platform-independent.


Shapes can also be found on the Shapes tab of the top horizontal menu of the application:



The figure below shows a window running in view mode containing all the figures.

Object Properties

For each component in the GUI Machine, we tried to “bring it out” and make the maximum number of its properties changeable. This allows you to customize, modify, customize any object.

All properties of objects are divided into 3 groups: type properties, standard properties, properties for the editor .

The first group includes properties that are characteristic only of objects of this particular type (in the figure, the properties of a window, an object of type JWindow). The set of properties for an object of another type (for example, for a button — an object of type JButton) will be different.

The set of standard properties is the same for objects of any type and includes general properties applicable to many objects: tooltip text (hover tooltip), hover cursor, display settings and transparency, scrollbar settings (scrolls). However, part of the properties of this group is blocked for some objects (as in the figure).

The property group for the editor contains properties that affect the appearance and behavior of the object exclusively on the editing area. When running a prototype in view, the state of these properties does not matter. The first two properties of this group — the object type and object ID — are blocked for all objects and are for information only.

The GUI Machine allows you to change the properties of several objects of the same type at once, selected in the editing area.

Some of the most popular and frequently encountered properties of objects responsible for formatting and positioning text content are also presented on the Edit tab of the upper horizontal menu of the application:



In order to make it possible to create your own, unlike any control (custom control), some objects have the C design property. When this property is disabled, the standard object visualization is completely disabled, but its behavior is preserved. It remains only to apply to this object a previously prepared image or form. So you can get, for example, a non-standard button or a non-standard form window.

HTML editor

Almost all properties of objects with textual content can be edited in the embedded HTML editor. To start it, you need to click on the small button to the right of the text property:



The HTML editor allows both editing text in a visual editor and directly writing HTML code.



The HTML editor, as you understand, greatly expands the possibilities for customizing objects. Oddly enough, most of the prototyping tools lack this functionality.

Editors for complex objects

Most of the complex objects — a table, a tree, a tab panel, a normal and a drop-down list, a normal and pop-up menu, a list of checkboxes — the properties on the corresponding panel are not enough to change and customize their appearance and content. Therefore, separate editors for each of the listed objects are built into the GUI Machine. To launch them, click on the value of the first property of the objects:



As an example, below is a description of the table editor:



As can be seen from the figure above, it is possible to edit both the table header and its contents. In both cases, the text can be edited in an HTML editor. For table cells, it is proposed to select the type that determines their contents. Of course, it is possible to add, delete and move rows and columns of the table.

For other complex objects there are similar editors with their own set of operations.

Default object properties

Usually objects of the same type (for example, buttons) in the interface or prototype are decorated in the same style. In order not to need to stylize each object added to the interface again and again, it is possible to set object properties by default once. After that, when adding an object to a region, it will be designed as specified in these properties by default. The default properties of objects can be set on the last tab of the application settings:

Layers

The Layers panel displays all objects on the current page of the project. The default view is tree. An object is a child of another object; if the first one is inserted into the second, it is located inside it. An object is a parent to another object if the first one contains the second one.

According to this principle of layering all interfaces are built in the GUI Machine. Thanks to him, the objects are tightly tied to each other. This allows, for example, moving the parent object along with all children, which is very, very convenient.



The context menu of the panel allows you to display its alternative view - a list of layers. In this variant, the hierarchy of objects is not displayed, but a list of layers from the highest to the lowest is shown. Each layer corresponds to one object. Here the concept of layers is used in the classical sense: the object of the uppermost layer (with the largest number) is displayed on top of the other, the lowermost layer (with the number 0) - behind other objects.

The tool allows you to change the layers of objects and, thereby, ensures their correct location in the interface.


Tools for working with layers are also available on the Edit tab of the upper horizontal menu of the application:

Templates

Template - pre-prepared layout of frequently used objects. The use of templates significantly speeds up and facilitates prototype design, especially in the case when different prototype interfaces contain similar objects or interface parts:
It is possible to create templates of 3 types:

• simple - a separate object template;
• Composite - object template with all child objects, contents in it (for example, the whole interface);
• interactive - interface template with predefined actions.

Using the tool, you can create your own library of customized objects, workpieces, frames, entire interfaces. Moreover, it is possible to transfer sets of templates to another GUI Machine user, or, on the contrary, set other templates for themselves.

The created templates are stored in the / templates / data folder of the GUI Machine installation directory. To transfer the created templates to another user, simply copy the contents of the templates folder to the GUI Machine installation directory on his computer.

Story

For completeness, it remains to submit the last panel - History .

This tool, I think, does not need a detailed description. With it you can return to any previous state of the project file.

Every time you perform any operation in the project, a new entry is added to the history list. The number of stored list entries is a custom value. If the specified number is exceeded, the earliest entries will be deleted. History lists are stored separately for each project page. You can display the date and time of the operation in the list, as well as highlight individual records in color.

Editing area

The description of the main working panels is completed - the case remains small - to introduce the functionality of the editing area.

Its purpose is clear without explanation: it directly builds interfaces from individual objects. For more convenient and productive work, the editing area has a number of settings: background color and area size, grid type (large, small, or both) and its dimension (pixels, centimeters, millimeters or inches). Some of them can be found in the application settings:



Other settings are located on the Utilities tab and frames of the upper horizontal menu of the application:



The tools of this set, in addition to setting the area itself, allow you to change the display options for objects located on it (show or not show the area and size of objects, the depth of their nesting in the layouts, the actions between them), and guide lines. You can also display or hide the side navigation bars, which display icons of objects in accordance with their location on the area.

The editing area with the above settings will look like this:

"Liven up" interfaces

After getting acquainted with the GUI Machine interface and the features of building interfaces in it, the reader will probably have a question: how to make the interfaces “live”, clickable, interactive? The answer is: simple, and now you see for yourself.

In the text above, the notion of “action” has already flashed a couple of times - this is the basis, the elixir for animating the interfaces. Speaking in a more formal language, an action is a mechanism for specifying the reaction of one object (action object) to an event that occurred with another object (event object). Creating any action in the GUI Machine comes down to a few simple steps:

1. First you need to decide on the event object and the action object. To make the right choice, you need to remember the order of the mechanism: when performing a given operation on an event object, the specified operation on the action object will be performed.
2. Then you need to select an event object on the editing area, call its context menu (right-click), select Add action . After that, you need to click on the action object. In the figure below, the event object is the checkbox (checkbox), and the action object is the window:
   
3. The action creation window will open:
   
   
   
   Here, you need to select, firstly, the event (in the example - changing the selection state of the checkbox) and its parameters (state selected ), secondly, the action ( opening / closing the window ) and its parameters (open the window in the center of the screen, do not allow open the window beyond the edges of the screen).
4. Done. Click the Create Action button.

Thus, the following action was created: when you select the check box, a window will open in the center of the screen. To check, you can start the viewing window (the one on the left) and select the checkbox in it. A second window will open. As I promised, it's simple.

In the same way, any actions are created in the GUI Machine. The list of possible events and actions for different components is different and quite impressive. Among them are both simple and quite complex. Together they allow you to create fully interactive prototypes, to simulate the work of a real program or site, to describe the non-trivial functionality of the designed system.

Developments

Examples of simple events are: clicking a button, receiving / losing focus on an object, changing the state of object selection, selecting a list item, selecting a table cell, selecting a pop-up menu item, selecting a tab, and selecting tree elements. The essence of them, I believe, is clear from their names and does not need additional explanation.

Of greater interest are complex events. For example, a mouse event on a part of an object. Suppose the interface has a control in the form of an image - clover:



Let it be required that when clicking on the upper lobe of a clover any action be performed.

We select our image as an event object, or some other object as an action object. In the dialog that opens, select Mouse Event . In the event settings, select the Click button . Check the box Defined event area and select the desired fragment of the picture:



Click Save Changes and check: launch the image into the view and click on the top lobe - the specified action will be performed (the window opens).

In addition to the above, there are several more complex interesting events: a timer event, receiving a message from the port and others.

Actions

The simple actions include the following: changing the text of an object, locking / unlocking an object, changing its visibility, opening / closing a window, and many others. Also, as in the consideration of events, without explanation, I will proceed to the description of complex actions.

The most interesting, useful and frequently used complex action is the Insert object into the layout . As its name says, this is an action of a dynamic layout. It allows you to insert a selected object or part of the interface into one or several cells of the layout on any event.

Suppose there is a dynamic layout (on the left side of the picture) with a button, by clicking on which a tab panel should be inserted into the two central cells of the layout (on the right side of the picture) along with all the contents.



We select a button as an event object and a dynamic layout as an action object.



In the right part of the dialog that opens, select the Insert object or cell clearing action, select the two central cells of the layout, select the object to insert (tab panel).

We press Save action and check: we launch the layout into view and press the button - the tab panel along with the contents will be inserted into the dynamic layout.

In addition to the described action, there is a mass of equally interesting complex actions.

View prototype

The tool for viewing prototypes can be called unique without hesitation.

Unlike other prototyping tools, in a GUI Machine, a prototype is launched into a view as a separate independent window. It can be collapsed and expanded, moved and resized - the behavior is exactly the same as that of any other independent window. This allows you to achieve the maximum effect of reality, to simulate the work of the program.

Another feature of the tool: you can view as a whole interface, and its parts, or even a single object. You can simultaneously view multiple interfaces - they will run in different windows.

To launch an object into view, select it and use one of the three launch methods: use the f5 key, use the View context menu item, or the button on the launch bar in the upper right corner of the application:



The presented tool also allows you to add objects to bookmarks for quick launch. If one of the bookmarks is selected in the drop-down list, then by clicking the button on the right, the bookmark will be launched, and not the object selected in the editing area.

In addition, using the tool, you can adjust the position of the object when it is launched into view:

Prototype export

The last thing I will introduce to you, but far from the last thing in the GUI Machine is the mechanism for exporting the prototype. It allows you to export (to blame, tautology) a prototype into an independent application, for launch of which neither the GUI Machine nor any other software is required. Thus, there is an opportunity to present the developed prototype, for example, on the customer's computer (if we are performers), which does not have the installed GUI Machine or the GUI Machine Viewer. Moreover, the exported prototype can work both on Windows and Linux (in the long run - and on Mac OS). The figure below shows the prototype export window:



The exported prototype is a folder with several subfolders and the designerviewer.exe executable file (or .sh, if the prototype was created for Linux), the launch of which leads to the launch of the prototype. To transfer a prototype to another machine, you need to send the entire folder.

PS

The article came out rather big, although I described far from everything that GUI Machine can do. For example, I didn’t touch on the useful utilities built into the application (there are a lot of them), didn’t present some interfaces (project settings, context menu in various situations), and, of course, described only a small part of the available actions, objects and their settings.
However, there are several options to become more familiar with the GUI Machine: download the demo version from our website, see more detailed information in the user manual or on the website or ask questions you are interested in here - I will be happy to answer.