GUI Prototyping Tools

Special purpose UI prototyping tools, like the ones listed on C2 Wiki, offer a convenient blend of usability and flexibility. I have tried some of these tools. I was looking for something that –

  • doesn’t become unwieldy when used to prototype a large and complex GUI
  • allows me to use my own screenshots/images/icons
  • allows me to modify the prototype without making it a hair-pulling experience.
  • can prototype all aspects and artifacts of modern web and desktop interfaces, specially –
    • tree controls  – you will be surprised how many prototyping tools don’t have this. Pencil, I am looking at you 🙂
    • tabbed panels  – can you position your tabs at the bottom ? on the right edge ?
    • film strips
    • ribbons
    • NavBars

The one that met all these requirements and more (and blew me away) is Balsamiq Mockup.
 Disclaimer : I requested and received a complimentary license from Balsamiq.

[youtube]zLysy3IPfFI[/youtube]

  • Balsamiq Mockup’s usability is what attracted me at first and then it was just a series of surprises, one after another.
  • You can click on the widget “legend” to toggle aspects of the widget on and off. Very slick !
  • You can link (aspects of) widgets to other mockups. This allows you to build some interactivity into your prototype. Very cool !
  • You can clone a mockup with a button click – to prototype a transition.
  • I could use my own images/screenshots and sketch them (basically,  applies a sketch transformation on the image) !!! If you think that sketchy look of the prototypes looks unfinished, you should read this.

Here are some things I wish I could have in Balsamiq –

  • name (and search for) individual widgets in my mockup
  • select multiple widgets by dragging over an area
  • auto-group when dropped on containers (or other widgets)
  • stretching container stretches everything in it, I wish I could have some control over it
  • register my own mockups as library widgets
  • zoom in and out

Just to be thorough, here are some other approaches I have used in the past –

  • Using a RAD tool like VisualStudio is great way to prototype. You have to be very proficient, like a GUI developer 😉 , with the tool of your choice. Otherwise, it is can be an excruciatingly slow approach. The best part of this approach is that the interactions can be prototyped seemlessly and some of the feasibility doubts can be cleared early on. The problem with this approach is that the prototype can be mistaken as the actual product and the effort /scheduling expectations of the stakeholders can become hard to manage. Read Joel Spolsky’s brilliant observations on The Iceberg Secret, Revealed. Also, when the prototype looks like a finished product, type of feedback you receive is usually not strategic, it is narrower. Read more about this on Creating Passionate Users article.
  • When you have an existing UI (perhaps from a 3rd-party library’s demos) that can become the basis for your new UI, it makes sense to use screenshots of your existing UI and modify them using image editors like Paint.NET or Photoshop or even MS Paint. It is a quick way to produce a prototype but the expected changes to the prototype must be minimal. Otherwise, you will find yourself spending long hours with your image editor.
  • General purpose drawing programs, like dia and Visio, can be used to create UI prototypes. With these type of tools, you will probably need to work with building blocks that are a bit too granular, although you may be able to procure widgets/stencils for some of these tools to make things easier. These tools have a some learning curve and less than fluid usability.

Create Games From Scratch

My 18 month old son woke me up at 4 in the morning. I got him to go back to sleep, but … and here I am writing.

A few weeks ago, I downloaded Scratch from M.I.T’s website. Scratch is a programming language for kids. You drag/drop and (literally) snap together programming constructs to create games. Within a couple of minutes, I had a diver chasing a ball bouncing around on the screen.

I showed it to my 5 year old son and he watched as I “changed the game” and had the ball chase the mouse cursor and the diver chase the ball. He sat down with me and asked me if I could make it a dog chasing the ball instead. Sure! Then we started customizing further. Make it run faster .. Yeah! Let’s turn him into Clifford – The Big Red Dog … Can he bark ? Sure. Let’s turn it into a basket ball .. I want it red, blue, yellow, … Let’s make a basket ball hoop and have Clifford play basketball … Sure.

It was a quite productive pair programming session 🙂 . No TDD yet – he is too young for that kind of stuff 🙂 .

I was relieved that I didn’t loose his attention while I was “programming”. Now, my son does have a pretty long attention span for his age, but a lot of credit goes to the designers of Scratch. The entire “artwork” was created within the Scratch application and the “programming” was just a pure joy for my son. And we were just “scratching” the surface there. Explore the possibilities here.

You can download the game here : Clifford-ball.sb. Be careful, sometimes the dog turns upside down. There are some bugs to be fixed 🙂 . Where is the debugger ?

RIA with Silverlight and WCF – Los Angeles .NET Developers Group

 

I will be attending Jason Beres’ “RIA with Silverlight and WCF” lecture on Saturday the 4th. Check-out the details here : Los Angeles .NET Developers Group. Let me know If you are planning to be there. It will be a great opportunity to meet.

Job Opening – Windows GUI Developer

We have a 3-4 month contract position open for a Windows GUI Developer in our group at Calabasas, California:

  • 2+ years experience developing C++/C# Windows thick-client applications
  • Expert in GUI development on Windows
  • Expert in Object Oriented Analysis and Design (OOA/OOD)
  • Deep understanding of client-server software development
  • Experience in multithreading, and thread synchronization
  • Excellent communication skills (written and verbal)
  • Highly organized and detail oriented
  • BSCS/BSEE or equivalent

If you are interested, contact me. The position is available now.

ReSharper vs CodeRush + Refactor Pro

I have been playing with JetBrains ReSharper (version 4.1) and DevExpress CodeRush + Refactor! Pro (version 3.2.2) lately. I wanted to decide on which one to go with. Here are some notes –

R# = ReSharper
CodeRush = CodeRush + Refactor! Pro

  • R# seems to be better for refactoring, because it does not assume that I follow a rigid work flow when writing code. For example, I don’t always decide on the class hierarchies upfront. I do discover them as I write code. So, when I discover that I need to extract a base class from the class I am working on, I can do so with R#. I couldn’t find a way to do extract a base/super class with CodeRush.
  • In R#, I can create an overloaded constructor using “Change Signature” refactoring (Ctrl+R, S). I couldn’t find a way to do this in CodeRush. CodeRush does allow me to create overloaded methods.

However, comparisons that only focus on how many refactorings each tool can do are not very important to me. After all, it should be easy for the individual missing refactorings to be implemented in the subsequent releases of these tools. I want to know which one is a better investment in the long run. The investment is not just a couple of hundred dollars, it is going to be an investment of time too.

  • R# “finds” Types as you try to use them and adds references and “using” directives from other projects in your solution. You will not believe how useful this is! You don’t have to interrupt your train of thought to go add references and “using” directives. CodeRush doesn’t do that.
  • I found R# “Create From Usage” feature incredibly useful with TDD. This feature will be available in Visual Studio 2010. They are calling it “Consume-First Development”.
  • R# has keyboard shortcuts for individual refactorings. All refactorings are accessible from ALT+ENTER or ALT+R. Again, R# helps you keep focused on the code you are writing.  In CodeRush, individual refactorings don’t have keyboard shortcuts.
  • R# allows me to specify exactly what to include when doing ExtractXXX refactorings. CodeRush doesn’t.
  • R# seems to know what I want to do. For example, when I discover that an existing class would be a good starting point to write the class I am thinking about and copy-paste the class and attempt to rename it, CodeRush renames both classes. R# renames the one you intend to rename.
  • R# introduces much less friction when running unit tests. It is possible to add unit-testing add-ins to Visual Studio and access similar functionality, but the way unit-testing is integrated into R#, it is much more conducive to TDD.
  • Collapse a class region. Now try to do a refactoring on this class, like “Rename file to match type” etc. In CodeRush, you will not be able to do it because the three-dot glyph will not be displayed when the class is collapsed.
  • CodeRush keeps getting in my way by automatically writing over as I type. It expands its “smart templates” when you press space. Guess what! That is how I separate words in my sentences – by pressing space. It gets quite annoying. I wish I could turn it off.

As you have probably guessed by now, I think ReSharper is a better fit for me.

Here is a list of some other comparisons, covering aspects and features of these products I haven’t mentioned here that might be important to you. Some of these concluded in favor of CodeRush. Keep in mind that some of the following articles are a couple of years old.