GUI Design Studio 4.0 Preview – Part 1: New Interaction

January 26th, 2010

Version 4.0 PreviewLater this week we’ll be releasing what’s probably the last of the 3.x versions of GUI Design Studio before version 4.0 is released in about 5 weeks time.

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.

Element Prototype Properties

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.

Radio Button Selection Group

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.

New Scenario Conditions

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.

Conditional Panel - Login Example

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.


Comments are closed.