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.

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!

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

In the highly competitive smart phone market, a new breed of phones based on Google Android are doing just that, going head-to-head with the Apple iPhone.

Whether or not you’re interested in smart phone technology, this video, comparing the new HTC Hero with the iPhone 3GS (courtesy of PhoneDog.com), contains a great example of taking a specific user profile and creating a targeted user experience for them.

In many respects, the two phones are similar, but see how the folks developing the HTC Sense UI have focussed their efforts on provding a far superior interface for people who need to communicate through email and social media. This is a very specific (and growing) target market and a key distinction for HTC when the Hero lags behind the much more mature iPhone in many other areas.

Parts 2 and 3 of the review are less interesting from a user interface design and usability point of view as these are more concerned with performance and comparison of like-for-like application features.

However, it’s worth watching Part 2 from around the 7 minute mark for another great example of how the HTC keyboard interface and the spell checking facility has some really well thought out advantages over that of the iPhone.

From a hardware usability perspective, it’s interesting to note how the ‘chin’ of the HTC Hero causes the device to flip up when it’s placed on a flat surface and the buttons are pressed. This may have become an issue for early users because newer versions seem to have dispensed with the chin and adopted the more streamlined, flat form factor.

It happens to me all the time!

The usual way to do this involves creating (or finding) a bit of space somewhere, moving one bunch of elements and controls into the space, shuffling all the other elements around and then closing up the space again. It can be a bit of a hassle sometimes.

Even a simple task of exchanging the positions of two elements can be fiddly when you need to get them properly aligned in their new places and they’re in each other’s way.

So we created the “Swap Element Positions” feature in GUI Design Studio v3.1 to address this common need and save a ton of time and fiddling about.

It’s easiest to demonstrate with this contrived dialog example but the technique is equally suitable for panels and icons in toolbars, on Web pages and anywhere else you need to quickly re-arrange things.

To swap the Middle and Bottom control groups, the 2 Group Boxes are selected (in any order) and after applying the “Swap Element Positions” command (Alt+S), this is what happens:

All of the control elements within the groups have also been moved. Crucially, though, the positions of the Group Boxes themselves have been adjusted to take account of the difference in heights of the groups. Job done in two steps and about 3 seconds!

But what happens to the Middle group when we want to swap the Top and Bottom groups?

As you can see, the groups have all been correctly re-arranged to take account of all the height differences and what lies between the elements being swapped. The same rules apply for horizontal re-arrangement and combinations of the two.

In some cases, you might need to use the feature a few times to ‘bubble-sort’ your elements for the ordering you need but even this will be much faster than manual re-arrangement.

It won’t solve every case but it’s a very handy tool to have at your side and, if things do go wrong, there’s always the Undo command that will leave you no worse off than having to do it manually anyway.

Let us know how you get on with the “Swap Element Positions” feature and if you find cases that don’t work for you, send them to support and we’ll see if we can improve the feature.

You may have noticed our new Website redesign and, while we’ve been planning a lot of new product developments, we’ve realised that we didn’t release nearly enough versions of GUI Design Studio in the year as we’d intended. we aim to fix that!

So we’re taking a different approach for 2009. Our new plan is to make a new release of GUI Design Studio roughly once every month so that you can benefit from all the latest updates sooner or upgrade whenever it’s convenient.

With this new, incremental development plan, you’ll be seeing regular small improvements with major new features thrown in, every once in a while, as they get completed.

I don’t want to reveal too much detail at this stage about the biggest new features we have planned (you’ll find out about them in due course) but, to give you a taster, here’s a few of the things we’ll be looking at:

• The interactive capabilities of the prototypes will be expanded in a big way, including better support for business logic with enhanced scenarios. So many of you have been requesting this. It’s a very exciting feature and will let you explore a much wider range of designs with much less effort.
  .
• There’ll be further export and documentation options to give you the flexibility you’ve been asking for and helping you take designs to the next stage.
  .
• Better layout tools will help you make adjustments more easily, mockup interfaces even faster and provide further prototyping capabilities.
  .
• We want to increase your productivity with new features and support to help get you started on projects and designs faster. One part of this will be the long-awaited release of a series of training videos. Another part will be the release of user interface design pattern libraries that will demonstrate good practices and get you started more quickly and easily. We’ve been talking to customers about these for over two years so you’ll be glad to know we’re finally getting on with them!
  .

Our goal has always been to ‘help you produce software that better meets users’ needs’. Keep sending us your suggestions and feedback to let us know what’s really important to you and help shape the tool for everyone.

We’ll certainly be keeping busy in 2009 and we wish you a very happy and productive year!

You can now gain early access to 3.0 through our Beta Program but first, here’s a few details about the new version:

• With version 3.0, GUI Design Studio has now fully embraced Windows Vista. It was already Vista compatible but all of the elements have now been re-styled to provide the Vista look and feel in addition to the existing XP, NT (Classic) and Outline styles.

  

  These are not separate elements, of course. You can change the style at any time to see what your designs will look like on different Windows platforms or to show an “unfinished mockup” look for review purposes.

• We’ve had so many requests from customers for Ribbon Bar elements that we’ve added full support for this type of interface. Now you can create designs that follow the Microsoft Office 2007 style or just experiment to see what works best for your application by comparing a Ribbon Bar design with a more traditional menus and toolbars design.

  Here’s a sneak peak at a Ribbon Bar design created in Beta 2 (available soon):

  

• For Web Application designs we’ve added a new feature to make rollover effects easy. Although rollovers were possible before, it was tricky to get them right and maintain the correct navigation behaviour. Now they’re simple to do and very flexible. This will be available soon in Beta 2.

• If you’ve struggled to get tabbed interfaces to simulate properly in earlier versions of GUI Design Studio or just found them tricky then you’ll like the changes in version 3.0. We’ve listened to all of the feedback from customers and now made them really simple to create.

• These are just a few of the 20+ enhancements and fixes in the new version.

Upgrades

If you’re a customer wondering about upgrading from your current version or if you need to purchase GUI Design Studio before the new release becomes available then don’t worry because version 3.0 will be a free upgrade for all customers.

About the beta program…

We’re currently putting the finishing touches onto version 3.0 and although the feature list has been nailed down now, there’s still time to influence the final release.

If you’d like to get an early peak at version 3.0 and provide us with feedback to ensure we’ve covered everything we need to, then you’ll want to get on the beta program now.

With thousands of users, we won’t be able to accept everyone so places will be limited. Act now to secure your place and click this link to join the Beta Program!

We look forward to hearing from you.

Each featured design is described with a video walkthough of the prototype in action so you can see how the different features can help you with your designs. We decided to keep the videos silent (for now) because we know how annoying audio can be in an office environment.

The project file for each design is also available for download so you can try out the prototype for yourself and have a look at how the individual design files have been put together. You’ll need the free GUI Design Viewer application for that and there’s a handy download link for it on every page of the Gallery.

Take a look now by visiting http://www.carettasoftware.com/gallery/ and let us know what you think.

Instead of putting up lots of static screenshots, we’re going to experiment with video clips to show what each design prototype can do.

There’ll also be full descriptions and download links for the design files so that you can try out the prototypes for yourself using the free GUI Design Viewer.