How do you prototype your software UI?
What's your experience?
Could you please share with me?
Thanks in advance!
views:
254answers:
6You can use a GUI editor such as the one in the NetBeans IDE, the QtCreator IDE, or the Xcode IDE, to create a GUI mockup, without implementing handlers for all the GUI events. This GUI can then be evaluated, and possibly redesigned. Once the GUI looks as it should, then events can be properly handled.
Pen and paper or a whiteboard. Prefer mockups to be reasonably divorced from the final products look and feel. While discussing interactions and how many clicks it takes to get a job done it's very fast to change paper mock ups and its obvious to all concerned that this doesn't represent the final product being almost finished.
Years ago I was involved in a project where we produced a really detailed GUI mock up that even had some code behind it to simulate the flow of events. It was fantastic for getting the users of the software to give feedback and input. It was then an absolute nightmare for the project because we were constantly behind where the users expected us to be, after all they had already seen it pretty much working, right?
Worst of all, some of that throwaway code ended up being included in the released product and was a nightmare to maintain later (there wasn't much thought put into structuring it originally 'cos it was throwaway, then the user had seen the behavior and it became the de-facto implementation of the logic for a major piece of the system). Yuk.
I create html pages with Visual Studio. This could easily be Dreamweaver, FrontPage, NotePad++. To me this has the benefit of the CSS and html being nearly done by time I am finished with the mockup. Usually it is easier and more productive to do your prototype in the tool or technology you plan to create the deliverable in.
I have used a combination of tools to do UIs. If the static look and feel is what I am testing then I use a combination of paper and whiteboard sketches. These are quick to do and are easily thrown away once you start working on the more detailed designs. Like "Hamish Smith" said, you want some degree of separation between your mockups and final product.
When I want to test the interactivity of my designs, I have used paper mockups before, but I prefer to use PowerPoint which provides a better way for users to interact with the application than constantly having me show them the paper sketches of what page a button will take them to and how certain features work. I just set it up so clicking on the buttons or links on a PowerPoint slide takes you to the slide that corresponds to where that button would take you in the real application.
Currently I have been playing around with Microsoft's SketchFlow that is part of Expression Blend, and it is pretty impressive. I haven't played with it a lot though, so I am not yet aware of any limitations it may pose. Also, I tried Balsamiq and it seems like a good application too, but again I haven't used it enough to find its limitations. I want to make it clear though that I am only using them for Interactivity testing to replace PowerPoint, I still think that static mockups are best done with Paper and whiteboards.
I recently used a visio add-in at http://www.guuui.com/issues/02_07.php on a project. The project has 60 or so pages in it, this made drawing the screens pretty easy.