Using the Ribbon Bar elements already in GUI Design Studio, our new design library, application template and prototype sample make it easier for you to get started quickly.

1. Ribbon Library

The Ribbon Library contains:

• 15 common ribbon groups: Clipboard, Document Views, Editing, Font, Illustrations, Links, Pages, Page Setup, Paragraph, Sort, Styles, Symbols, Tables, Window and Zoom
• 3 pre-configured ribbons that use the groups: Home, Insert and View
• An application window, menu and quick access drop-down
• Various grids for colour selectors and generic item selections
• Other popups including a page size and symbol selector
   

Once you’ve added these to your design projects you can edit and expand them as necessary for your own application.

2. Ribbon Application Template

The Ribbon Application Template, for GUI Design Studio v4 Professional edition, provides you with an instant starting point for a ribbon bar application:

• 3 ribbon tabs with associated drop-downs in their own component design files, ready for editing: Home, Insert and View
• A main application window hooked up to the menu and ribbon tabs

3. “Wordsmith” Sample

The “Wordsmith” sample prototype application, also available from our Design Gallery, is a tribute to Microsoft Word.

Initially built from the Ribbon Application Template, it expands on the existing ribbon tabs and adds 3 new context sensitive tabs for “Picture Tools” and “Table Tools”.

A scrolling Document design demonstrates how to activate the context tabs when objects are selected within the document and also highlight those objects with a bounding box.

Note 1: GUI Design Studio v4 Express edition users can open and run this sample prototype, and explore the various tabs and drop-downs. However, it makes use of Professional edition features to activate context tabs and selection boxes, so these will be permanently visible.

Note 2: GUI Design Studio v3 users can also open this sample and get a similar experience to v4 Express users. However, the sample makes use of many Ribbon Library components and icons and the sample/library paths changed with v4. To view and edit the sample project in all its glory, you’ll need to install (unzip) the Ribbon Library to a new “Libraries” folder instead of the usual “Samples” folder:

   C:\Program Files\GUI Design Studio\Libraries\

Use them in your own ribbon design projects!

We’d love to hear your feedback so let us know what you think of these new Ribbon resources and how you get on with using them in your own projects.

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.

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!

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.

People often talk about “Throwaway Prototypes” versus “Evolutionary Prototypes” and it’s very important to understand the difference and exactly what type you are creating before you begin.

Throwaway Prototypes

A Throwaway Prototype, as the name suggests, forms no part of the final application. Its purpose is to prove (or disprove) a design and get approval for actual implementation.

It can be produced using any quick and dirty technique and the quality can even be quite poor, so long as it satisfies the requirements of identifying what’s right about a design, what’s wrong and what’s missing.

Because of the speed at which Throwaway Prototypes can be put together and changed (usually on-the-fly), they encourage feedback and continual revision until the design is about right.

Because the effort required to produce them is relatively small, there’s less ‘attachment’ to a design and therefore very little reluctance to change. However, you do need to be careful that you don’t end up in an endless cycle of analysis and revision without making any development progress at all!

Evolutionary Prototypes

In contrast, Evolutionary Prototypes are intended, right from the start, to eventually evolve into the final, delivered application (or system) through incremental developments and changes. In one sense, this seems like a great idea because each increment is getting you closer to a delivery and progress is clearly being made.

However, there are many risks involved in this approach. Because it involves implementation of the system itself, the coding has to be of production quality from the start. The idea of ‘cleaning it up later’ is a very bad one since this will never happen in practice, leading to potential problems and instability later on. But this conflicts with one of the key benefits of being able to create prototypes quickly. Also, because of the effort that’s gone into it, there can become too much attachment to the implementation which leads to a resistance to change.

Not only that, it’s very difficult to see the ‘bigger picture’ with an evolutionary prototype because you can only see, and therefore review, the parts that have been implemented and it’s very difficult to compare different versions or approaches to a given design.

There’s another potential problem with evolutionary prototypes. Sometimes you’ll already know what technology you’ll be using but sometimes you will be free to choose what’s best for the application. By creating an evolutionary prototype you will be committing to an implementation too early when a more suitable technology or component set might become apparent later on once the requirements of the application are better understood.

In the last part of this article we’ll discuss different methods and tools for generating prototypes.

Prototyping in the software industry is not so common but the benefits are just as compelling.

There are two main types of software prototype: functional prototypes and user interface prototypes.

Functional Prototypes

Functional prototypes are nearly always technical in nature and their purpose is to test whether an idea or design is actually feasible using a given technology. For example, whether a particular system might be able to handle 100,000 transactions a second or whether it’s really possible to perform a content match on thousands of data records in real time as a user types in a search query.

Functional prototypes will always involve getting down and dirty with the code and trying to build a working version of something that can be tested to validate the idea.

User Interface Prototypes

User interface prototypes, on the other hand, are more about the presentation of concepts and ideas, and are therefore less technical and more accessible. Interface prototypes represent the front-end of an application or system; the part a user will actually see and interact with. In fact, in most cases, this is all the user is really interested in.

User interface mock-ups and prototypes allow both users and developers to understand the application before it’s built; to test its usability and ensure that all of the requirements are covered. All too often, software is built that has the most amazing functional engine, under the hood, that runs at lightning speed, but users hate it because they can’t understand how to use it. The user interface has just been hacked together rather than carefully thought through.

There are many different techniques for creating user interface prototypes, covering the full spectrum from using nothing more than pen and paper to the use of full-blown development tools. In-between there are more specialised tools, like GUI Design Studio, that are more suited to the job.

In the next part of this article we’ll talk about the difference between a “Throwaway Prototype” and an “Evolutionary Prototype”.

Here’s a quick summary of how to produce a scrolling region:

1. Create a large design.
2. Create your container design.
3. Drag and drop your large design onto your container design as a ‘component’.
4. Double-click the component to edit its properties, as follows:
   • Check the “Maintain size when component changes” option on the Style tab
   • Uncheck “Fixed Width” and “Fixed Height” on the Position tab
   • Set an arbitrary small size to make it easier to work with, say 300 for “Width” and “Height” (Position tab)
   • Hit “OK”
5. Resize the component to the actual desired size.

That’s it!

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.

So the lowest of the low-fidelity prototypes are very quick hand sketches while the highest are fully detailed, pixel perfect renditions.

The obvious advantages of low-fidelity prototypes are the speed at which they can be put together and therefore the low cost involved. After all, anyone can quickly scribble designs on a piece of paper.

But one of the things we hear discussed a lot is that prototypes, especially early ones, really have to be low-fidelity. They need to impress upon people that they are obviously mock-ups and not the real thing. Otherwise, if you use high-fidelity prototypes, you may encounter these negative consequences:

1. When trying to elicit feedback on a design, you find that people pick up on irrelevant details like the colours or the choice of image instead of the content and workflow.
    
2. They may be so WOW’d by the beauty of your design that they’re unable to provide constructive critisism or they may be reluctant to do so for fear of undoing all your hard work.
    
3. Stakeholders may think that the “product” looks so finished that they complain bitterly when they can’t see much “progress” after 6 months of development and implementation.

Of course there are many truths to this argument but, for the most part, it depends upon the target audience and their level of understanding of what the prototypes represent.

Project managers, analysts and developers will have no trouble at all in understanding the scope of a user interface prototype and, in may cases, a high-fidelity prototype will help to pinpoint areas of ‘over ambitious’ design that might take many months to implement when a simpler alternative will work just as well.

For everyone else, a straight-forward explanation of the scope of the prototype is usually enough. If the stakeholders really don’t get it then you may be in trouble further down the line!

The irony of point 3 is that although a low-fidelity prototype might be better in lowering expectations that the product will be “finished in no time at all”, higher managers and stakeholders don’t always respond well to them. They’re not impressed by the rough appearance and prefer to see nicely polished, fancy displays – something they can envisage as being a final product they or their customers can use.

With specialised tools like GUI Design Studio now available, high-fidelity prototypes are becoming much easier, faster and cheaper to produce and the once held advantages of low-fidelity prototypes are becoming insignificant.

As far as we know, our customers are all enjoying the ability to create high-fidelity prototypes and designs but we understand the need to use low-fidelity presentations on occassion.

That is why GUI Design Studio provides “Outline” display modes and the ability to easily change the overall font of a design to give it a more hand-drawn, rough and ready feel. And to be able to switch back to normal again.

Here’s our trusty dialog design example in all its XP glory:

And here it is again looking like a quickly drawn mockup after a couple of setting changes:

You can see a quick tutorial video (about 1 minute) of how this transformation took place here.

Of course, if you really want to, you can also work with paper sketches by scanning them in and incorporating them as images. Place navigation boxes over the buttons and other areas then link them together just like any other design element.

The most important thing with prototypes is to define exactly what their purpose is, then to create them with just the right amount of effort and functionality to convey enough information to obtain agreement on what needs to be implemented and what doesn’t.

So what are your experiences with low or high-fidelity prototypes? Do you agree or disagree with what’s been said here? Maybe you can’t see the point of creating prototypes at all?

Leave a comment and let us know your opinions!