Version 4 has some fantastic new features in which help you get a working prototype in the hands of your users and engineers even faster.

Extended interaction functionality means your user interfaces can be even more realistic than ever with working with data values, conditional content and business rules driving navigation. Custom Elements and Templates let you and your colleagues share your work on multiple projects with ease.

We have some great new features planned for later in the year that will be available free of charge to v4 license holders.

Now is a great time to take advantage of the powerful prototyping features that GUI Design Studio provides, and if you’re an existing user, we’re sure you’ll want to upgrade.

But here is a little incentive…

If you purchase a new license or upgrade from a fully licensed copy of v3 by 31 March 2010, we’ll give you a 25% discount!

Here are the facts:

If you’ve been keeping up to date with V3 you’ll know that we’ve released some great features in the last 12 months including the huge Calendar element just last month, so keeping up to date makes sense.

To take advantage of this offer, simply visit the buy page and use coupon code V4-2TKAW8 on the order form, and your 25% discount will automatically be applied. But you’ll need to buy before the end of the month to qualify!

They’re simple but they can make a big difference to your productivity by cutting out a huge amount of repetitive work, keeping consistency with house styles and helping you to create designs faster.

Custom Elements

Any folder within the Project tree can be assigned to be a Custom Element Folder. The folder icon then changes to indicate its new status. This is also applied to all of its sub-folders.

Now, you can create Custom Element designs within the folder and any existing GUI design that you want to be used as a Custom Element can be dragged into it.

A Custom Element design can be as complex as you like, from a single pre-styled element to an entire form full of controls. You can still edit this design just by double clicking on it, so it’s easy to update and maintain.

When you drag a Custom Element design onto another design, the whole content is copied across as if you’d added the elements individually. At this stage, changes to the Custom Element will no longer affect the new design. That means you can then modify the copy in your design to suit the particular circumstances, changing the style, size and layout, and adding in specific information relevant to its context.

Custom element folders can be created in any project but they really come into their own when creating library projects full of reusable designs that you can link into your working projects.  These can contain house-styled elements, time-saving common groups of elements or entire design patterns.

Compared to Components…

You might be wondering how they compare to the existing Components feature. Custom Elements are different from Components (also known as Masters) which remain linked to the original design. If you change the original Component design, each instance of use in your project will also change.

Although you can use overrides to change certain properties of elements within a Component instance, you can’t change their size or layout. They act as a single unit.

Among other things, Components are good for headers and footers on web pages, reusable panels and common dialogs; areas that you need to be consistent between many designs. They’re also very good for breaking your design into more managebale chunks, often with self-contained behaviour.

In comparison, Custom Elements are good for common patterns in your design that will most likely need to be customised for each use.

What if you want to add a Component to a design as a Custom Element? Well, you could put it into a Custom Element Folder first (perhaps as a copy), but there is no need. You can just hold down the CTRL key as you drag and drop it into your design and it will be added as a Custom Element instead.

Simple!

Templates

Templates are a great way to start a whole project from a consistent pattern. Maybe you always like to have your projects set up with a particular set of pages, or with some standard elements that you always include. You could start with a copy of your last project, but a Template is a neater way to achieve it.

Templates may also be inserted into an existing project so they can be used for creating complex, reusable design patterns that are beyond the single design restriction of Custom Elements.

A Template includes all GUI files and their contents, so loading a single template could set up lots of files, ready for you to dive straight into the design work.

Like Custom Elements, Templates are copied when they are loaded, so changing the original Template file will not change the projects that are based upon it. They provide a basis for you to edit and extend.

You can create a Template from your whole project, only the designs in the currently selected folder, or just the current design file. That makes it easy to turn what you’re working on into a Template for reuse in another project.

You can name the Template, categorize it, and choose to attach a representative screenshot to make it easy to find later. The new facility to export images from a running prototype can help here but if you don’t provide a screenshot, one will be generated automatically.

When you create a Template, it becomes available for immediate use within all projects. No library project linking is required.

Templates and Libraries Online

We’re in the process of setting up a new community site to publish and share Templates and Libraries containing reusable Components, Custom Elements and Design Patterns.

We’ve been waiting a long time to do this but with these new features in GUI Design Studio 4.0, it now makes more sense. The links are already in the software and the new site will go live soon. Stay tuned!

Version 4 of GUI Design Studio represents a big move forward. The big areas of new features are Interactivity on Controls, Templates and Custom Elements.

In this post you’ll get an overview of the new Interaction features with suggestions on how you might use them (screenshots are subject to change before final release). You’ll also see how to get free access to beta versions of the software before the final release next month.

New Interaction Features

When you show a user interface design to a prospective user they are going to want to understand what the design will be like to use. They will need to try out the types of operations that will be important to them, in their work, trying to achieve their objectives.

Sometimes you can get away with just a static mock-up. Adding click-through navigation to show workflow is better. But to really get a feel for the interaction and to explore different scenarios, you really need a full user interface prototype, not simply a mock-up. GUI Design Studio 4 now goes beyond the interaction features in version 3 and lets you do just that.

When you want to start to model UI behaviour that depends upon decisions or input that the user has provided you will need version 4 of GUI Design Studio. We’re providing a whole set of flexible tools to make it easy to do this and more.

Simple Variables

Interaction controls depend upon simple variables. You choose a name for your variable in the new Prototype tab of the Properties dialog and that variable is then assigned a value when you run the Prototype and interact with the element. Most elements can have an associated variable, even Trees and Ribbon Bars, and these variables can be shared among elements.

Now that you have a variable, you can use it to control other elements in various ways. For example, you could use it to insert a name that the user has entered into a piece of text, you could provide a default value in a text box, or you could drive a progress bar from other elements.

Variables are also tied into the Storyboard elements, as you can set up values from the new “Set Data” box. This allows you to reset variables in your UI to a particular set of values whilst running the Prototype. You might do this to simulate having different users, to reset the UI to its default value, or to jump to a particular state.

Handling Radio Buttons

Radio Buttons are slightly different, so we’ve extended their capabilities by allowing you to group them into a Selection Group so that they can act in unison. Adding new Radio Button options to an existing group is easy and you can remove erroneous ones too.

Keyboard Control

Now that your users can start to interact with the design in a far richer and more realistic way, they are going to want to navigate around it using the keyboard just as they will in the finished user interface. To do this you can click to gain focus on an element and use the Tab key to navigate around. The Spacebar changes the state of an element and the Enter key will “Close and Accept”, or the Escape key will “Close and Cancel”. Just like the real thing.

Control when to Show or Enable controls using conditions

Not only can you control the value and text in an element, you can also control when an element is enabled and when it is visible. That means that you can make additional controls appear or disappear depending upon which options the user has selected, or make sure that the next logical control is automatically enabled based on the user’s selection.

Conditional navigation in different scenarios

Of course, variables are firmly embedded in Scenarios and Conditional Navigation too. The Condition Box properties now include a “Condition” entry allowing you to control the flow of the user interface with more flexibility and clarity.

For example, you could set up conditional navigation to bring up a warning if the user tries to create a password of less than a particular number of characters, or to ask for confirmation of a destructive action if the user has set an option.

Wherever you need to test a condition or use the value of a variable, you can use a general expression to combine or process the values of your variables. A wide range of Boolean, binary, comparison, arithmetic, trigonometric and text operators and functions are included. We’ve even included constants for E and PI just in case you’re application is a little “circular”.

Conditional Content Panels

Conditional Panels (on the Storyboard panel) build on top of these conditions. Using a Conditions box, (like those in navigation scenarios), you can control what content appears within a particular area. In the example below, it controls whether a Log In panel is displayed or a Welcome panel depending upon whether the user has already pressed the “Log In” button.

The User Name also shows up on the Welcome panel when running the prototype, though it doesn’t show in design mode (as above). This example can also be easily extended to validate the User Name and Password.

Advanced Features

Once you’ve mastered the basics of interaction control you’ll be ready to start using the advanced features to prototype the behaviour of your UI in detail.

Text substitutions, for example, allow you to perform complex substitutions where text content, or a variable name and value, can be set from other variables. You can even combine multiple variables to build new ones; we’re calling these “translation variables”.

Whatever your application, we’re confident that you’ll find that these new interaction features make it much easier and quicker to build a more complete UI prototype, and still without writing a single line of code.

Get Free Access to version 4.0 through the Beta Program

We’re getting to the final stages of development for version 4.0 but there’s still room for tweaks, fixes and pointers on where to focus our efforts for samples, templates and documentation.

Note that, although we believe it to be stable, the software is in beta because it’s not yet ready for general release. If you are in the middle of a critical project, please don’t switch to the beta unless we advise you to do so. Also, be aware that version 4 features used on a project will obviously not work if you need to switch back to version 3.

We’re keen to have you on the program and to give you free access to these cool new interaction features. In return we’d like you to report bugs to us so that we can fix them before the release.

Click here to sign up for the Beta Program

We’ll continue with the GUI Design Studio 4.0 Preview in another post but that’s all for now!

Leave a comment to let us know your thoughts on version 4.