GUI Design and Software Prototyping

Thanks to those that took part in this little bit of fun, both on the blog and by email.

The correct answer to the film is of course “Harvey“, made in 1950 and starring James Stewart. It’s a wonderful film that you really must see!

The odd one out in the cast list was Mary Chase who wrote the original stage play and also the screenplay for the film (with Oscar Brodney).

And the winner is… Kevin Murray with an amazingly quick answer. Ian Summers was a very close runner up being pipped at the post by just a few minutes. Well done to both of you!

We’d like to think that such fast and accurate answers came from your encyclopedic knowledge of great films and nothing at all to do with the use of Internet search engines or online film databases ;-). Congratulations however you got there!

Whether you managed to answer the competition or not, I hope you managed to take a look at the Outlook-alike design example from the last post. If you just look at the video you’ll get some idea of what GUI Design Studio can do with your user interface designs.

If you download the distribution file (and Viewer) then you can also try out the application simulation, have a look at how the project was put together and maybe get some tips for your own design projects.

Following last week’s launch of GUI Design Studio version 2.2, we’ve had quite a few questions about what it’s really capable of and maybe you’ve been wondering about that yourself.

We figured the best way to answer that was by way of an example prototype design. The trouble was, we didn’t have anything big enough or suitable enough in-house and we certainly can’t share any of our customers’ designs.

So we set ourselves a challenge. What could we put together quickly as a good example? Not a simple 5-screen demo, but a fully fledged application. It needed to have real-world appeal and be the type of application that’s familiar to as many of you as possible.

The answer was staring us in the face… Microsoft Outlook!

What would it take to create a design of that magnitude and how easy would it be to do? We wanted to find out so we gave a single designer just 3 days to create an example project from scratch using no other resources than a basic GUI Design Studio installation.

Rather than invent some hypothetical example along the same lines, we decided to create a Microsoft Outlook-alike design. That way, we could at least eliminate some of the creative thinking time :-). It’s not a complete clone of course. We’ve taken the essense of the design, changed quite a few things and left a bunch of stuff out.

Here’s one of the screen designs… does it look at all familiar?

You can see a short video walkthrough of the final result in the Gallery where you can download the project (and the free Viewer) for examination, and read the project notes.

3 days wasn’t quite enough time to complete the project but our designer managed to accomplish a great deal:

• 5 application modes (mail, calendar, contacts, tasks, goals)
   
• Multiple sub-modes within most modes
   
• Task bars
   
• Popup screens
   
• Structured report (table) views with expanding and contracting groups of rows
   
• Mode-dependent toolbars and menu overrides:

• Extra icons, quickly created on-the-fly where necessary using the integrated Icon Express editor.
   
• It also turned into a good example of project structure with independent sub-systems and component designs. These were worked on individually then assembled into the final prototype. The sub-sytems can be viewed and tested independently making the whole project much easier to manage.

Here’s what our designer had to say about the experience…

“I was surprised at how much of the application design I managed to create in such a short period of time.

You can’t see it from the final video but the design was built up in stages, starting from an outline and gradually filling in the details. Initially, all the modes looked the same with just different title text and no content. Then, one by one, I worked on each mode and added features.

I love the ability to work in this way, making incremental changes to the design to flesh it out and being able to jump from one area to another to make tweaks.

At each stage, we looked at the design to see what needed further detail and clarification. During the process, many questions popped up like ‘what’s missing?’, ‘what’s this bit for?’, ‘how would we do such-and-such?’ and ‘does the flow work well?’.

I don’t know how long it would take for a developer to create a prototype to this level but, most of the time, it took me just a few minutes to duplicate screens and make changes.

I’m itching to get back on the project and expand on the bits I didn’t have time to complete!”

Competition for Fun

Just for fun, we have a competition for you. Within the prototype there’s a classic film cast list. If you can name the film, post your answer as a comment on this blog or email it to us. If anyone gets it right, we’ll announce the winner next week.

For extra brownie points, one of the cast members is not actually an actor. Who is it and what is their connection to the film?

Have your questions answered

Here’s the short video walkthrough link again.

If you have any questions about the example (anything at all), then post a comment here or email Support. And remember to post your answer to the “spot the film” competition!
 

Let me quickly explain the terms here. Fidelity refers to the level of detail, accuracy or coverage of a prototype. It can relate to functionality but most people use the term in relation to visual appearance and that’s what I’ll be referring to here.

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!
 

Caretta Software GUI Design Studio version 2.2 is now available for immediate download. If you’ve already tried it then check your email today for download instructions otherwise you can request a trial.

In the last post I mentioned the new fonts support in 2.2. You can see from this screenshot that the Typeface picker has a useful history feature that places recent selections near the top.

This also includes active fonts in open documents so that you can easily maintain a consistent look. There’s also a Quick Pick field to grab not only a recent typeface but also the size and attributes too!

I also mentioned the International language support. We put a lot of effort into getting this right and ensuring that our file formats remained completely compatible.

To serve as an example, we’ve created a contact information dialog that’s been translated into Russian and Hebrew.

The Russian version is fairly typical of user interface translation projects where subtle layout changes are required to adjust for the differing text lengths.

The Hebrew version was more of a challenge. Not only were there text size differences but the whole design needed to be flipped horizontally for right-to-left reading.

Fortunately, GUI Design Studio 2.2 includes full mirroring support that correctly reverses frame window caption bars and places scroll bars and combo drop-down arrows, etc. on the left where they belong instead of the right.

You can take a look at the example and download the designs from our International Dialog Gallery Page.

Next time, I’ll have something to say about wireframe mockups.

GUI Design Studio version 2.2 will be released next Tuesday (10 October 2006). It’s a little later than we’d initially planned but we wanted to make sure it was well tested and as robust as possible before release.

With so many users finding new ways to use the tool, we encountered a few behavioural hiccups with certain aspects of component design usage that needed to be fixed, particularly when you start layering component storyboards within each other!

Version 2.2 now fully supports International language text on designs. If you need to design for a right-to-left language such as Arabic or Hebrew, right-alignment and full mirroring is supported for all appropriate elements. We’ll post some examples of this next week.

The most notable new feature is the ability to use any font for all text based elements. In addition, the new default font preference, when used in conjunction with the look and feel preferences, opens up an interesting way to switch between the ‘final’ look of a design and a ‘wireframe mockup’. There are new sections in the User Manual to explain all of this.

With some further minor fixes and tweaks, version 2.2 has been significant in creating an even more robust platform for new feature development.

Comments welcome!