Tools for creating a user interface prototypeI need to create a prototype of a user interface. I'm googling, and find "Axure RP", but it is very expensive for our company.
Another way for creating a user interface prototype is tools like Qt Designer, but it doesn't provide some cool functions and sometimes demand a bit of programming skills.
Do you know a freeware tool for my task for someone without any programming skills?
I like Balsamiq Mockups [1]. I like the fact that it uses a hand-drawn look. Too often you can get bogged down making a UI design look exactly like the real thing that you lose sight of the actual design process. With their design you can't make a mockup that looks like the real thing so you don't even try. I found that to be remarkably liberating.
[1] http://www.balsamiq.com/products/mockupsFor low-fidelity software UI prototypes paper, pen, pencil, some colour markers, post-it notes work the best.
These materials are cheap and widely available.
You can still make copies, scan or throw the prototypes away.
Paper prototypes can be made or modified promptly, in front of the users no matter what work settings are (as opposed to high-tech options that need laptop, power supply etc).
It is very flexible media and lets you express lots of information quickly. Specialised software limits you to whatever features are implemented, it will take you a while to become productive using it.
Paper is well understood by users: they are going to be less distracted by the novelty or coolness-factor of whatever software or other high-tech approach you would use instead, meaning better concentration on the actual task at hand. Additionally, because of this familiarity with the tool users are going to be able to actively contribute themselves. The benefits of a tool that both you and your users can share cannot be overstated.
Most people are not very good at sketching. Chances are your paper based prototype is going to look a bit messy, less polished and this is exactly how a prototype should be to make other people feel OK about their own inability to produce polished sketches or complex screenshots of finished UI. Feeling OK will encourage more active contribution and shift focus to interaction ideas and workflow, instead of perfecting presentation.
Paper is perfect for low-fidelity prototyping. It is easy to control how much detail is expressed, level of detailisation is kept in line with the needs. Other tools will often add unnecessary detail and distract the discussion from the more important aspects of the UI or might even give users false hints and lead them to false assumptions.
On many occasions you want to leave yourself lots of room for later manoeuvre and prevent users from "solutionising", after all being a UI designer more often than not you are better equipped to thoroughly design the UI details than other stakeholders. Using tools other than paper may lead to users insisting on using controls available within palette or familiar to them without explaining what the actual goal they are trying to achieve is. Sketching encourages users to explain their goals, talk their own sketches through.
As opposed to low-fidelity paper prototypes, any high-fidelity prototyping is best done using the target implementation platform, since in order to convey the higher level of detail a fair amount of coding is usually needed and eventually (speaking of software where design in one form or another constitutes biggest part of the overall development effort involved) your high-fidelity prototype becomes the UI itself. With high fidelity prototyping you need to have an easy succession path from prototype to UI. To re-iterate: if you after a high fidelity UI prototype use the actual target development platform.
Other important tools that you might find useful are sketching and diagraming skills and techniques:
Learning to draw stick figures [1]
"Rich pictures"
Conceptual UI diagrams (i.e. defining main task objects, links, functions etc)
As semi-facetious as ceejayoz's answer was, it is worth considering. There is a simple technique know as "paper prototyping" [1] which involves interactive, hand-written UI mockups. You use bits of paper to represent UI controls, windows, data tables, etc, and you ask the "user" to interact with it. Each time they press a button or whatever, you ("the machine") silently adds or removes bits of paper to simulate what the UI would do.
It's really easy, and surprisingly effective. The crucial thing is to not say anything to the user as they're trying it out - if they have to ask you a question, then your UI needs work.
[1] http://en.wikipedia.org/wiki/Paper_prototypingI use InkScape [1]. It isn't an specific GUI prototype tool, but a versatile (and freeware) vector draw program. Big plus for me is that it works with SVG files that are easily parsed or modified, also allows to create a basic "widget", create clones of it, modify the base widget and apply the modifications to these clones.
[1] http://www.inkscape.org/I would have to go with Balsamic Mockups [1]. Have just started using this and recommending it to friends/colleagues. Hand drawn look, so clients wont ask to change the font, or color.
[1] http://www.balsamiq.com/The Pencil [1] Firefox extension is also a nice tool for UI prototyping.
[1] http://www.evolus.vn/Pencil/We use Mockup Screens [1] at work ("Quick and Easy Screen Prototypes"). It's easy to alter screens and the scetches make clear that this is only a design.
The mockups are then included in a Word document containing the spec.
Mockupscreens is not free but really not expensive, as the pricing page [2] shows.
[1] http://www.mockupscreens.com/SketchFlow [1] is a user experience prototyping module implemented in Blend which is currently shipped only with Microsoft Expression Studio Ultimate Edition.
Features:
Introduction videos:
For UI prototyping, I still use Delphi and Visual Studio (Windows Forms or WPF), both available in a free version.
Edit: I overread your "no programming skills" condition. You won't need programming skills with these tools to design the prototype, but for anything fancy, you'll still need to write some code, be it some XAML for WPF or C#/Delphi code for the others.
You can, however, also try Microsoft Expression Blend [1], which will allow you to design WPF UIs with almost no programming skills. That one is not free though, unless you have an MSDN subscription.
[1] http://www.microsoft.com/expression/I recommend ForeUI [1] for UI prototyping. It provides different UI themes to cover all fidelity requirements, and it can define the interaction and run simulation in browser (just like Axure but ForeUI cost much lesser).
[1] http://www.foreui.com/You could use Balsamiq Mockups, it made a good impression on me. I usually just use Interface Builder though.
As well as the suggestions above, you may want to consider using Powerpoint. I've used it for mocking UI's, perticularly when you want to show some dynamic behaviour as a result of some action. With Powerpoint you can maintain that healthy level of abstraction from the real look of a UI, and just concentrate on its behaviour.
It's great for tasks where workflow is important, and you can also nicely annotate and add notes to particular bits of the UI that may be of particular note.
I reccomend paper and pencil for some initial ideas. OmniGraffle [1] produces some nice wireframes and is fairly cheap however it's for Mac OS. Alternatively just use an image editor.
[1] http://www.omnigroup.com/applications/OmniGraffle/Another tool is the freeware ExtJS GUI Designer [1]. It outputs JSON code for the ExtJS [2] JavaScript library and can be used to quickly put together forms (with all classic elements, plus date picker, color palette etc), panels (including tabs), grids, trees and layouts (accordion, card, column etc.).
[1] http://www.projectspace.nl/Mockingbird [1] is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.
[1] http://gomockingbird.comIf you need to create interactive prototype for your web application or website, check out App Sketcher [1]. It's not free but very reasonably priced.
App Sketcher allows you to use real web components (such as HTML elements, jQuery UI components etc.) in addition to images to quickly mock up the interface and define simple interactions (no coding involved). The prototype can then be run in browser with a single click. You can also export the optimized HTML/CSS/JavaScript code to share or host as wish.
[1] http://www.appsketcher.comDENIM [1] is free and it's aimed at sketching web page UIs. It runs on Windows, Unix and Mac OS X.
[1] http://dub.washington.edu/denim/For GUI prototypes that feel like coded prototypes, consider FlairBuilder [1]. Built on Adobe AIR and Flex, it provides a set of fully functional components with which you can create highly realistic simulation of software UI. No coding is needed, but the result are quite similar.
Soon, it will support more advanced conditional logic for behaviors, that is, different actions for user input events based on the current state of the components on page. Give it a try online at www.flairbuilder.com/demo [2]
Cheers, Cristian
[1] http://www.flairbuilder.comThe top 3 (low-cost) low-fidelity products here are Balsamiq, FlairBuilder and iPlotz. Each has strengths and weaknesses. Balsamiq is easy and expanding fast as its internals have been made pubic by the author as well as becoming popular due to the author being very open and responsive to his users. iPlotz has the better Project Management facilities, althoguht less powerful UI control/attributes. Flairbuilder is a bit more advanced (but still dead easy) as it ALSO produces functioning (well interactive) prototypes as it uses native controls. Its can do both high and low fidelity. Its a very personal choice - we use all 3, depending on which developers like which products :-). Try them all and find out.
Microsoft Paint !
Storyboard [1] allows direct import from photoshop, WYSIWYG development, scripting, and animation support. It is great for making a prototype and then moving direct to product.
[1] http://cranksoftware.com/products/crank_storyboard_suite.phpMicrosoft has a tool called SketchFlow [1]. It is especially nice if you are going to be developing a XAML application, as it can output some shell XAML from the prototype.
[1] http://www.microsoft.com/expression/products/Sketchflow_Overview.aspxLucidChart [1] works pretty well for simple mockups. The cool feature there is that they let you put on hotspots that you can click on to open and close "states", like dialog boxes. That way you can put together a really quick demo of how your app/website will feel when a user is looking at it, including the major moving parts and multiple pages. It's pretty slick.
[1] http://www.lucidchart.comI've only started using Inkscape [1] for diagramming but I can already see the potential for a variety of use cases, UI design being one of these.
If you can use one program to cover multiple bases you're going to do each of those things with greater efficiency and quality as you get used to how to use it.
I also found a slide deck on getting started in UI design with Inkscape [2].
The tools provided by Inkscape are low-level enough to not be restricted to one type of drawing. It also has great align and distribute functionality which will come in really handy for interface design. Plus it uses the SVG format which renders inside browsers and is stored in XML!
[1] http://inkscape.org/This tool [1] may be something that would help you. It's free regardless.
[1] http://visualwx.altervista.org/Agreeing with the paper-and-pencil suggestions; Post-It notes are your friend. Those with a bit more programming knowledge should not miss Bill Scott's ProtoScript, here:
Bill even provides a handy bookmarklet so you can start prototyping on top of existing pages, right there inside your browser.
I haven't used Adobe Fireworks [1] yet but it seems powerful and capable of creating sleek-looking websites and application interfaces. Can export CSS. Here is a feature list [2]. $300.
[1] http://www.adobe.com/products/fireworks/I've used Microsoft Excel for quick screen mock up work. Just highlight your boxes, use borders, set background colors, and type text. All that I really needed most of the time, and if your screen data is in a grid then you're almost there with a clean sheet.
You can use Dev Magic Fake to simulate the UI but of course it will need little development in the UI, for more information about Dev Magic Fake see the following link:
http://devmagicfake.codeplex.com/
Thanks
M.Radwan
Firstly, a good tool will pay itself back!
The prototype tool depends on the level you want the prototype to have and is related to what you want to test.
Very early in the design process you will probably use pen and paper to draw quick wireframes to discuss the structure, the placing and size of objects.
If you want to test usability aspects early in the design process, it is wise to use paper prototypes to simulate interacting with the design.
I can imagine you already own an adobe license to draw your interface. If you have Fireworks, I would recommend this tool as it enables you to create different states, reoccurring elements and clickable elements in your design. It is then very easy to change these elements in one place, without having to replace it everywhere. Easy click-through prototypes can be realized and exported to a web page.
Up until this level, no coding is needed.
If you want to test more advanced interactions, you will need to code this. You can use Flash or HTML/CSS/Javascript for this.
I just created a UI prototype in C# using visual studio.
I've also done it using photoshop/Paint.Net.
I've seen some really cool video that unfortunately I can't find right now that mocked a whole UI using bit of paper that were added/removed/moved about/ unfolded on a base piece of paper.
Our business analyst uses MS VISIO, and it seems to work well for him.
I have tried most of above mentioned tools, and for years now I'm using my own to create prototypes in minutes or even real-time in a meeting :-)
You can check it out at: http://MockupScreens.com
Creately [1]
It is unfortunately still in private beta but worth checking out.
[1] http://www.creately.comwww.axure.com Allows linking with use cases and can deliver something that looks like a running website without having to program.
Expression Blend Sketch flow
Its one of the powerful tool for UI prototyping. Its from microsoft and got many distinguishable features.
User your white board,Markers / Notebook & Pencils.
iRise is a wonderful tool to create prototypes.We can create datadriven(in memory) prototype with it.Download the 30 day trial from here
http://www.irise.com/resources/software_download.php
Sketch Lab [1]. It is a web app for this purpose.
Disclosure: I am the developer.
[1] http://www.sketchlabhq.com