views:

92

answers:

4

Hi gang,

In my organization, developing rough UI layouts is part of the role of the business user during the requirements phase. I'm interested in finding a resource or collection of resources to assist the Biz in getting UI prototypes together to add to requirements documents.

So far, I've discovered http://wufoo.com/ to quickly mock up forms, but that's it.

Where can users get a tutorial on how to design reports and other UI components? What resources like wufoo are out there to help them easily mock up reports and other screens?

Keep in mind that Visio/Excel/MSPaint are the tools they're currently using, and they are complaining that they're too difficult or time-consuming. The users really just don't like doing this work, but App Dev insists they do it. What I want is something easy and hopefully even fun. It also should probably be free if there is to be any hope of acceptance.

Thanks in advance!

+2  A: 

Be careful with asking the user to design a rough UI layout. User interface design is a difficult and often under appreciated skill that takes a tremendous amount of work to get right. Even if the users have a clear understanding of what they want the user interface to do, they probably don't know the best way to represent that using existing controls and modern ui patterns. On top of that, they probably have little idea of what limitations your controller has or even what can be implemented in your framework or language. The end result is your user feeling very frustrated.

Instead, gather functional requirements and then build a very simple (rough looking) mockup using best practices and commonly accepted UI patterns. Then, have your user look over the mockup and make changes from there.

That said, I would highly recommend balsamiq mockups for early prototypes or rough UI layouts:

http://www.balsamiq.com/products/mockups

It allows anyone, even inexperienced users, to create a rough prototype of a user interface. Furthermore, it does not allow you to focus on the fine details, which turns out to be helpful.

Incidentally, another good resource is pen and paper (see lecture 9 notes in the link below). You can always scan in your designs to check them into version control, etc.

The MIT OCW UI Design Course is a great primer:

http://ocw.mit.edu/OcwWeb/Electrical-Engineering-and-Computer-Science/6-831Fall-2004/CourseHome/

It may be be a good idea to only recommend certain lectures as needed.

Robert Venables
Agreed, asking users to develop even some parts of the UI is a bad idea. They are not trained to design software, so they are stuck with what they are used to which quite probably does not include the best solution for this case.Collecting user input from mockups yields much better results.
Makis
There's nothing I can do about the process. I don't like it and the users don't like it, either. I'm just trying to get better tools to make the process less painful.
Chris McCall
A: 

I'd also be very careful of mocking up in too great detail. Sketching with a Sharpie is perhaps the easiest and most meaningful tool I've ever used. 37signals uses that technique to develop an idea of what should appear on a page, and they've been pretty successful with business users. But, as novatrust said, it's better for designers to stick to designing and businessmen to stick with business. Most people don't know what they don't know.

arbales
+1  A: 

There also is Balsamiq Mockups. I had great success with this tool, as its results look like hand drawn and therefore do not create too high of user expectations. There are versions of the tool for Windows and Mac, and there will be a web version, and it can be integrated in Confluence, Jira, XWiki, and FogBugz.

Ralph Rickenbach
I've used Balsamiq - quick ramp up, easy to use, good results (which reinforce usage)
meade
+1  A: 

I've asked a related question a few days ago. When collecting requirements from users, specially for non-technical users, it is better to use low-fidelity mockup. But if you need to put the design into document, using higher-fidelity wireframe will be better. As I know, ForeUI is the only tool that allow switching the fidelities of the same design, and it can create interaction as well, I'm convinced.