I spend a lot of time talking about user experience in software applications with my clients and their customers. It is becoming more and more the case that an engaging user experience that really is a critical success factor for any software publisher. Today, software applications have to work on multiple platforms with the same sense of purpose and achieving the same kinds of tasks, or at least the variation of the task that is appropriate for the device being used. It is just is not as simple anymore as writing a Windows Forms application and delivering it to a desktop. The world Todays most effective applications are built for cross platform deployment, be it by the web as simple web applications, or using a framework to allow their deployment on a variety of platforms. Examples of such frameworks are Adobe Air, and to a lesser extent Flash, Microsoft Silverlight, and to a narrower extent WPF, and then there is always Java. Some platforms like Mac OS X have unique idiosyncrasies like WebKit to deal with, and indeed different rules for different classes of devices. Yet other platforms have proprietary and unique requirements which may have to be dealt with. One thing that consistently comes up in these discussions is prototyping. People like to see and touch the application you have in mind for them. Getting early feedback can only help with end-user adoption of the software because you are able to iron out and address any wrinkles in the software workflow that you might have reasonably thought were fine but on real use turn out to be inappropriate. Consequently, it is a great idea to test your proposed user experience and workflows even before a line of code is written. Catch-22? No, not really. There are a number of tools that you might choose to help. In this article I am going to compare two of them - Microsoft Expression 3 and EaSynth ForeUI 2.

System Requirements

These are very different requirements. They imply a very different design point. Not surprisingly you get very different results.

Expression Blend 3 has a tough learning curve. You have to watch the tutorials to make any sense of it. The tool is very technical and has powerful options, but it is overwhelming at first. Once you get into it however, you can build nice wireframe applications using a theme like design called a Sketchflow. The advantage of Sketchflow according to Microsoft is that they can avoid the production look of the application without the feeling that it is too late to change it - resulting in better workflows and better applications. The guiding principle is that you should be showing user experiences early and getting feedback before bolting in the application logic. An advantage of Expression Blend is that you can save and open your projects right in Visual Studio to add the application logic. In theory it is possible to round trip from Expression to Visual Studio and back so that user experience designers can change look and feel without breaking code. In practise I found this hard to achieve without a lot of time spend making sure I had exactly the right components of Microsoft’s Application Lifecycle Management toolset installed and working in perfect harmony. This is not as easy as it should be.

ForeUI is easy to start with, but actually it too has a learning curve and I found myself watching tutorials for it before I could get productive. It is less complex initially. Lets compare Expression’s top ten features according to Microsoft with Fore UI.

Comparing Expression Blend 3 with ForeUI 2

Yes, these tools are different. Expression Blend is designed to be used in a development environment in a corporation with designers and developers working on projects. Fore UI is designed to be used by designers building simulations and writing documentation of requirements for developers. Fore UI however, is easy to use, and get great results with. It is certainly worth checking it out especially if you, like me, outsource your development and need to give your development team good mock up screens and working models which can serve as the design for your software.

Sketchflow versus Fore UI theme switching.

Expression Blend Sketchflow

Sketchflow is undoubtedly powerful. An application drawn using Sketchflow can be directly loaded into Visual Studio and have code added. Ostensibly this saves time and ensures the designers wishes are implemented in code.

Reviewing applications with end users using Sketchflow provides the opportunity for feedback unconstrained by the feeling that the application user interface is etched in stone.

To be honest I found it to be over complex. I dont really honestly care enough about the round tripping to make it worthwhile. Instead I found this to be overhead that got in the way of me producing great results.

Each time I wanted to do something complex in Expression Blend my skill with the software was not sufficient to make it happen. It took me a long long time to build a prototype.

Fore UI themes

Fore UI themes are easy to use. You simply choose a theme from the status bar and the objects you have used are redrawn using that theme. This simplicity hides a lot of power. I like being able to see what my app would look like on Windows 7, XP, Mac OS X and hand drawn for my documentation. These three screen shots were taken of the same application with just a theme change. I liked this a lot!

It took me seconds to build a screen mockup of what I wanted from the built in library of objects. I then set about adding functionality to show the application workflow and found that it was very easy from the properties editor to access and adjust everything. For me, this was much easier than the Visual Studio like properties editor in Expression Blend - I was just more productive because I was comprehending more.

Interactive Prototyping

Both Expression and ForeUI help you build interactive prototypes. Expression is harder to use here because you have to get into it as far as understanding the relationships between pages and the commands for navigation via the outline. ForeUI is easier here - the master page model is easy to understand, and the hierarchy of pages is more straightforward. Expression is more powerful but I think for me it misses the point. I need a lower learning curve and quick productivity - Fore UI gives that to me.

Export

ForeUI export to DHTML is its best kept secret. You can then load the resulting code into your favourite tool and edit it. All the workflows became JavaSCRIPT and the exported DHTML can be run in your browser. This is pretty neat. So far I have not used ForeUI right through to building a product but this is the obvious next step and the product is evolving quickly so I hope the export part gets better and better in future releases.

Expression, because it produces projects that are compatible with Visual Studio, has great capabilities for the use of the code in real projects. For Visual Studio users is may be a better choice.

Conclusion

For me, a product manager who needs to quickly mock up screens for documentation, and to test out ideas for software products Fore UI is the almost perfect entry level tool. I like that it runs most everywhere - even in your browser as a Java applet. It means I can share my concepts with Mac and PC and Linux users alike and nobody is out of the loop. It also means I can show a Mac audience a Mac UI and a Windows Audience a Windows UI - these things sometimes matter and it is nice to avoid the issue. I will continue to use Fore UI and let you know how it goes.