For customers using version 4.0 of GUI Design Studio, simply install the new version and your existing licenses will continue to work. Be sure to install the correct Professional or Express edition though!

New Element Grouping in v4.1

This has been a long-standing request from users so we’re pleased to introduce element grouping into version 4.1. This will become an essential feature for creating more complex custom elements.

Grouped elements form a unit so that selecting and moving one element within the group will move them all together. Elements within a group can still be individually selected to resize them and change their properties and grouping does not affect parent/child relationships.

First select all of the elements you want to group together, then use the new “Group Elements” command on the right-click context menu (Ctrl+G hotkey):

You can also add elements into an existing group using this command. The “Ungroup Elements” command (Ctrl+Shift+G) will remove all selected elements from their respective groups.

Once grouped, selecting any of the elements within the group will display a dashed group box around all elements in the group and they will move as one for the following operations:

• Drag and drop moving of elements
• Keyboard moving of elements
• Alignment and multiple selection ‘group’ alignment
• Spacing elements evenly
• Swap element positions
• Send to Back / Bring to Front

Other Changes in v4.1

1. When duplicating designs, there is now a prompt to save changes to the original first if it is open in the editor and has been modified.
2. “Web Page Part” elements now only show their design-time border on the design where they actually exist. The border no longer shows up on Components containing the Web Page Part or on exported images.
3. Viewer Preferences changed to remove designer-only options.
4. (Pro edition only) Text substitution has been extended to practically all element text allowing a wider range of effects and realism.
5. (Pro edition only) Conditional Content panels now refresh their content on selection changes within List Boxes and Trees made using the keyboard as well as the mouse. This allows keyboard navigation to be used within a list to change the contents of a panel based on the selected item.

Bug Fixes in v4.1

1. Navigating to Thumbnail Components could ‘catch’ elements within the extended, full bounds of the Component. In some cases, this might result in extra elements appearing unexpectedly in the screen being navigated to. In other cases, involving Conditional Content panels navigating to the Thumbnail, this could set up an infinite navigation loop, resulting in a crash. This bug has now been fixed.
2. Entering design and/or element notes then switching back and forth between design document tabs could result in a crash in some instances. This behaviour does not appear to have been present prior to V4.0 and has now been fixed.
3. Notes fields will now only accept text pasted from the clipboard. Previously, it was tantilisingly possible to paste in images and OLE objects which appeared initially but were not saved or maintained in any way. Maybe this will be allowed in the future.
4. Copying and pasting Thumbnail Components now maintains correct positioning instead of placing them all at the mouse cursor location.
5. Copying and pasting sets of Radio Buttons now correctly maintains their selection group states.
6. Minor drawing fixes made to Vista style Edit Boxes when a custom border colour is chosen to allow it to blend into the background more easily. The auto navigation ‘o’ symbol on buttons also fixed for certain situations.
7. Issues related to scrolling component regions have been fixed.
8. Certain navigations involving multiple Tab Bars being switched in and out, especially using Conditional Content panels (Pro edition only), could result in multiple Tab Bars and panels being active and visible on top of each other at the same time. A fix has been made but it’s possible this may result in new unexpected behaviour, though none has been found yet.
9. (Pro edition only) Conditional expressions now correctly accept sub-variables using dot (‘.’) notation. For example, “MyListBox.index”.
10. (Pro edition only) When editing Project Variables (creating project-level sets of data variables), entering a blank variable value then selecting different variables in the list resulted in unexpected behaviour and crashing in some cases. This has now been fixed.

This is also a really useful way of sharing your designs. If you work in a team, or in an organisation that creates multiple products, you can share complete designs, templates of multi-page design patterns or individual components. Not only does this help save lots of time, it also promotes consistency and best practice in your designs.

What’s been missing is an easy way for you to get access to design libraries and to share your own.

So we’ve just launched www.guidesignpatterns.com where you can download libraries, templates, samples and patterns, and make your own contributions to the community. So, even if you work on your own, you’ll be able to benefit from the work of others and to share your work with them.

Our aim for this site is to build up an extensive resource of common design patterns and elements to help you create your prototypes as quickly as possible.

Contributing your own designs is as easy as sending an email. To help structure and search the database of samples there are some simple guidelines to follow in submitting your work. Things like how to set the right tags and what files to attach.

To help you download and make use of the designs on the site, we’ve prepared three posts to take you through the process for libraries, templates and samples.

There’s also a helpful link within GUI Design Studio to go straight to the set of available libraries from the “New Project” dialog:

And there’s another link within the template browser to take you to the templates on the site:

We’ve started the ball rolling by adding an updated Web Widgets Library and some other templates and samples. We’ll be adding lots more in the next few weeks, so you may want to follow the RSS feed, or bookmark the home page.

We look forward to seeing some of your useful patterns on the site too.

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!

The new features are grouped around interactivity and element and design sharing. They enable you to build more realistic and interactive prototypes and to share or reuse individual elements or whole design templates with ease.

New editions

GUI Design Studio is now available in two different editions.

GUI Design Studio Express provides the prototyping functionality that was in v3, but focussed on individuals without the need to share projects and generate specification documentation.

GUI Design Studio Professional builds on v3, adding new interactivity and design sharing features, and is better suited to those working on larger projects, in teams, or on multiple designs.

All projects created in one edition will run in the other, or in the free viewer, except that the enhanced interactivity features in the Professional edition (see below) are not available in the Express edition. You can compare the two editions here.

Prototypes get more interactive (Pro edition only)

As your user interface design develops, everyone involved starts to focus on the details of interactivity. What process does the user need to go through to achieve certain tasks, how many button presses, how much navigation, is it clear and obvious, can they make simple mistakes?

All of these questions, and more, need to be considered in developing and refining a good UI and they cannot be addressed easily in a simple mock-up.

GUI Design Studio v4 introduces a range of new features to enhance the realism of your prototype, allowing you to model UI behaviour that depends upon decisions or input that the user has provided. 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.

This variable can 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, provide a default value, 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.

With project-level presets, it becomes even easier to repeatedly test or demonstrate different scenarios.

Handling Radio Buttons

Radio Buttons can be grouped so that they can act in unison.

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

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.

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.

Creating and sharing libraries of designs and elements

Custom Elements

Any folder (and its sub-folders) within the Project tree can be made into a Custom Element Folder. The folder icon then changes to indicate its new status.

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 original Custom Element will no longer affect the new design.

That means you can then modify it 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 Libraries

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…

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

Templates (Pro edition only)

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

Download and Upgrade

You can download a 30-day trial of v4.0 here (either edition) and install it along side any existing version that you might be using.

Upgrading from an earlier version

GUI Design Studio version 4.0 is fully compatible with projects and files created in earlier versions but, of course, if you modify your projects to use the new interactive features of 4.0 Professional (such as Conditional Content Panels) then these will be ignored when re-opened in earlier versions.

If you want to experiment with the 4.0 features before committing to upgrading then it’s best to work from a copy of your project or create a backup first.

Purchasing

If you purchased version 3 on or after 1 December 2009 then we will be sending you a new v4 license key for each license you bought at that time, free of charge.

Otherwise, you can buy new licenses or low cost upgrades here. And look out for our special March promotional discount!

Tell us what you want!

As always, we welcome all your feedback and suggestions so that we can create the tools and features you want to use. We’re already working on prioritizing the current list for the next string of releases!

Please leave a comment to let us know how you get on and what you think of the latest release.

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!

When we started designing this feature, we looked around for examples of different calendars in desktop and web applications. We found a wide range of different designs; some with one month, some with 3 or 4, some highlighting “today”, others highlighting a particular day or a range of days. Of course, each application had quite a different visual design to its calendars as well.

In the past, we’ve tried to simplify elements and minimize the number of settings and options they have but, with this new element, we felt we had to provide for the increasing demand on design flexibility.

The problem, as all of you designers of great user interfaces will know, is that with flexibility comes complexity. We didn’t want to give you a tool which is hard to learn or slow to use because it has so many options and special cases, but we did want to give you a tool which will let you create the calendar design you need, quickly and simply.

That was the aim.

We’ve ended up with eleven different areas or labels. There is the Main Control background to the element, the Title Box, an optional Week Numbers column, a Week Day Names and Weekend Names title row (weekends don’t have to be different from week days, but they can if you like).

Then there are the Week Days and Weekends that appear in the calendar body. You can choose to display the Trailing Days in a month (these are the days from the previous month that make up the first week of the current month, and the days of the next month which complete the final week).

Finally there are the specially highlighted days; Today Highlight, Selected Day and (because selected days can be in the trailing period) the Selected Trailing.

Each of these needs a colour for the background (Fill), the Border and the Text. That is 33 different colours!

Here’s what the ‘Colours’ property panel looks like:

And that’s before we even start talking about the options to specify what parts of the calendar should be included, cell sizes and spacing and various other controls.

Actually, we could have gone further. While trying to replicate some of the designs we came across, we found the need for even finer control over some of the colour and layout parameters.  But there comes a point when you need to say ‘enough is enough’ and compromise between total flexibility and usability.

Clever use of the different colours and the various borders and spacing between the elements allows you to create an incredibly wide variety of calendar designs.

You’ll find a small gallery of some of the possible designs below. The top one’s from Windows XP but the rest of the examples are loosely based on calendar designs from around the Web, including Google and a range of examples highlighted in Antonio Lupetti’s blog post on “Beautiful datepickers and calendars for web developers”.

So, what do you think? Did we provide enough styling options, or too many?

We think we’ve got the balance just about right, but we’re happy to hear your opinion too. We’d also love to showcase your own beautiful calendar. If you have a design you’d like to share, or something to say about the new element, why not post a comment?

Enjoy your GUI Design Studio Calendars!

For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

Calendar Elements

With so many requests from users, we’ve finally added Calendar elements to the mix. This was essentially the last missing native Windows control and a common feature in a vast number of desktop and Web applications.

So why has it taken so long to appear? Well, that’s a very good question. Right from the start, with the version 1.0 release 5 years ago, we realized that calendar controls were important. But rather than create complex elements for every conceivable situation, the idea then was to provide basic building blocks from which other elements could be assembled.

The very first design samples library contained various calendar controls with different display options. We thought that this would be enough for simple mock-up purposes. Well, clearly, we were wrong! Creating calendar controls from scratch using text boxes and other elements is both tedious and time consuming, especially if you don’t want a design that’s stuck in 2005!

So we’ve pulled out all the stops to bring you a very flexible Calendar element that should suit most purposes. There are 2 variants to get you started: one in the “Lists, Trees and Tables” category that represents your standard Windows month calendar, and one in the “Web” category with some very different styling options.

Now it has to be said that there are a lot of property options for the Calendar. With all of the other elements, we’ve tried to cut back on options and minimize them wherever possible. But there’s an increasing demand for more flexibility and more styling options so that’s what we’ve provided here.

Option overload is an important topic for usability so we’ll be revisiting this in a future post with a collection of Calendar element designs. In the meantime, see what fancy Calendars you can create for yourself.

Other Changes in this 3.6 Release

• The “Window” menu now contains some very handy new commands to “Close All” design windows and to “Close Others” so that you can focus on just the design you’re working on.
• Thumbnail Components now have the same ability as regular Components to be redirected to different design files through their property settings. This can be hugely useful, especially when working on Web applications, when you want to change the target of a link without having to delete the old target then drag and drop the new target and hook it up again.
• There’s a new Preference option to Disable Subversion (SVN) support. GUI Design Studio normally detects folders that are under Subversion control and automatically handles them appropriately. However, all Subversion clients on a particular machine must be based on the same version libraries (version 1.6 in this case), otherwise the working copies will be incompatible. This option is for users who are unable to upgrade their Subversion clients from version 1.5 or earlier.
• There’s another Preference option to disable a change we made in version 3.5 to enhance the File Open/Save dialogs by switching to Thumbnail view for images where appropriate. It’s possible that this feature caused compatibility problems (though we’ve been unable to reproduce or confirm these) so the option is there to turn it off.

Bug Fixes

• Using the right mouse button to cancel a drag and drop operation from the Project file tree, Elements or Icons panel no longer activates the popup context menu.
• Custom Tree Icons (added in version 3.5) are now correctly saved to distribution .gdd files.
• Custom Tree Icons are now maintained properly when the Tree is within a Component and has its properties overridden. Previously, in that situation, the icons would revert to the defaults if the icons were within the project (application and other external icons were okay).
• Some of the automatic connection types were not behaving as intended and reverted to “Modal Popup” instead of the correct type. This has now been fixed.
• There’s also a few other minor fixes related to command keyboard shortcuts and annotation popup text spacing.

Download and Upgrade

Download GUI Design Studio version 3.6 now and install it over your existing version. If you have purchased a license, your existing key will continue to work.

Version 3.6 is fully compatible with projects and files created in earlier versions but certain features, such as the new Calendar elements, will not be recognized by earlier versions of the software so be careful if sharing projects with others who haven’t yet upgraded.

Leave a comment to let us know how you get on and what you think of the latest release. As always, we welcome your feedback and suggestions!

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.

The experts at UXmatters have done extensive research in this area and have a lot to say on the subject.

In an article, published earlier this week, they provide detailed answers to a question about Label Alignment in Long Forms.

And that article is essentially a follow up to their Label Placement in Forms article published over 3 years ago but still as relevant today as it was then.

Using eye tracking tests with users, they tested the time spent filling forms and, specifically, the eye saccades between labels and entry fields. This basically showed how much effort was required by the eyes to scan the form and by the brain to make sense of what it was seeing.

Here’s my interpretation of the results:

1. Placing labels above the entry field is preferable in most cases as users can view the label and input field at the same time. It’s important to leave space between each input field and the next label.
2. When placing labels to the left of fields, although left alignment allows a user to quickly scan down the list of entries, right alignment is much better as it keeps the label with the input field and greatly reduces eye movement and effort.
3. A caveat to right-aligned labels placed on the left is that it’s very important to try to keep them all to a similar length to avoid large areas of ragged whitespace. Shorter, concise labels are better but they must still make sense.
4. Bold text labels are almost always a bad idea. Users find them harder to read and they pull the focus away from the input fields. The increased time with bold compared to normal labels in the tests was surprisingly significant.
5. For long forms, placing labels above entry fields increases the length of the page so might not be such a good thing. Long forms can often be improved by grouping entries and group labels can also add visual confusion when labels are above fields.
6. These are not rules, they are guidelines. More important than any of this, especially for long forms, is to ensure that users can easily comprehend the form, that they scan easily and that users are only presented with requests for essential information so that they are not daunted by the form and are willing to complete it.

This is just a very brief summary and doesn’t do the detailed articles justice at all. I highly recommend that you read both articles. If you thought this was a mundane subject before, these articles and the huge number of comments they provoked will open your eyes and hopefully make you a better interface designer.

We are planning a complete revamp of element property editing in GUI Design Studio (among other things) so this has been vital information for us. I think there are improvements we can make everywhere in this area!

Here are the article links again:
Label Placement in Forms
Label Alignment in Long Forms

While functional prototypes always involve development tools (and associated skills), there are, essentially, four classes of tool for creating user interface prototypes:

1. Pen and Paper

It doesn’t get any more low tech than this, which is great because it means that absolutely anyone can take part in the design process. User interface designs can be hand drawn or pre-prepared stocks of user interface elements can be laid out on a page.

Paper sketches can be produced very quickly but making alterations to a design can be somewhat difficult leading to repeated effort if a design needs to be restarted from scratch. It’s often best to spend more time thinking before committing pen to paper.

In test and review situations, a human can act as the computer and present the effects of user actions on a design. It’s highly involved and may be time consuming to run user tests, but it can be very effective.

Of course, this isn’t necessarily restricted to paper. Many design sessions involve whiteboards instead of paper – anything that takes you away from the computer and into the undisputed realm of the ‘mock-up’. But any whiteboard design that needs to be ’saved’ will inevitably end up as a photo image and/or paper printout.

2. Drawing tools

Generic drawing tools can be used to mock-up user interfaces with the obvious advantages over pen and paper of being easier to edit, duplicate and distribute for review.

Many of the popular drawing tools (Microsoft Visio, The Omni Group’s OmniGraffle, etc.) have an increasing number of UI stencils available to them. However, many of these are based on graphic images that do not scale well.

Graphic editors (such as Adobe Photoshop) can also be used for creating interface mock-ups, from low fidelity wireframes to high fidelity pixel perfect renditions. This has been the preferred approach for many Web designers where the exact visual design of graphic elements is important. Expert knowledge of these tools is often required and producing designs quickly from scratch can be daunting.

However, with all of the generic drawing or graphics tools, what you end up with is a set of static screen designs but no easy way to communicate how the parts interact and the workflow between them. Although there are some documented techniques to get around these limitations, they take some skill and learning.

One approach is simply to take printouts of the screens and perform paper prototyping review sessions.

3. Development tools

Development tools have always been an option for the production of prototypes with Rapid Application Development (RAD) tools having earned some degree of popularity. The main benefit is being able to produce a fully working prototype that acts just like the real thing even if some of the actual functionality is being emulated with dummy data.

For evolutionary prototyping, this is the only way to go, but for throwaway prototyping, the additional time and skills involved and all of the disadvantages with regards to evolutionary prototypes, make this a fairly poor choice.

4. Specialised prototyping tools

Here’s where it gets more interesting. Combining the benefits of drawing tools and, in some cases, development tools, specialised prototyping tools (like GUI Design Studio) allow you to rapidly create software prototypes with features that allow the application interaction and workflow to be explored.

Because they are intended specifically for the design of user interfaces, they have dedicated functionality that is not necessarily found in the drawing tools but are as easy to use so they don’t require any specialised technical skills.

Many of these tools will allow designs to be easily annotated, shared for review and used to generate specification documentation.

Of course, I’m biased, but these are really the best type of tool to use for software prototyping.

Whatever approach you take, software prototyping can reap huge benefits in the production of your software projects and make them more likely to succeed.