|
Protyping Web Based User Interface
I've been asked to propose some UI design
for a dozen of screens for an application.
I've no web development experience.
Which tool can you recommend me for quickly putting
together a web base UI (with no code/logic behind)
it's just to put in a powerpoint presentation
Snacky
Friday, April 16, 2004
I've used PowerPoint itself to create some quite effective screen prototypes.
John Topley (www.johntopley.com)
Friday, April 16, 2004
John, yes but the UI won't have the feel of a web based application (ie FogBuz)
Snacky
Friday, April 16, 2004
For quick prototypes use a WYSIWYG HTML editor. Dreamweaver is what most use.
If the visual design and graphics are the top priority use Photoshop.
Jan Derk
Friday, April 16, 2004
Try to get by with actual HTML-prototypes. Whether you make them with Frontpage, Dreamweaver or Notepad doesn't really matter, choose whatever feels convenient.
If you make some flashy and cool looking prototypes with Exel-macros or whatever, your clients may not understand later on in the projects that all those nifty gimmicks may not be possible in HTML. Or that you just can not absolutely control how a web page looks in a browser.
Juha
Friday, April 16, 2004
"John, yes but the UI won't have the feel of a web based application (ie FogBuz)"
Well that rather depends on your skills and ingenuity with PowerPoint. Besides, I didn't see how you could put together a web-based UI when you stipulated that there was to be no code behind it and you acknowledged that you have no web development skills.
John Topley (www.johntopley.com)
Friday, April 16, 2004
http://www.cooper.com/content/why_cooper/the_process.asp
Interaction Architect
Friday, April 16, 2004
use something like dreamweaver.
However, like was discussed in another thread quite a while ago, the problem with realistic UI prototypes is that users then think the app is finished.
"I saw the screenshots you had two weeks ago. Why is the app still not finished??"
Tapiwa
Friday, April 16, 2004
PowerPoint is good if you're more focused on the information architecture. PhotoShop if it's more graphics. I try to stay away from HTML because using HTML gives the client the impression that you're further along than you actually are. I would frequently get comments like "Why doesn't this button work?" when they should have been focusing on wether all the information they needed was on the page.
Wade Winningham
Friday, April 16, 2004
PAPER AND PENCIL.
I'm serious. There's a whole book ("Paper Prototyping") about why scratchy-looking paper and pencil prototypes work best. You avoid wasting time tweaking pixels; you avoid the iceberg problem; you can make changes in 10 seconds during the presentation and see if people like the changes on the spot.
Joel Spolsky
Fog Creek Software
Friday, April 16, 2004
Is there an evaluation version of PAPER AND PENCIL that I can download? :-P
John Topley (www.johntopley.com)
Friday, April 16, 2004
Joel :
I'm useless at drawing, even my handwritting is terrible
(I could have been a doctor! ;-) )
Sorry but "Paper Prototyping" is cannot be an option for me...
Snacky
Friday, April 16, 2004
> I've been asked to propose some UI design
> for a dozen of screens for an application.
> I've no web development experience.
I think subcontracting it is the best you can do.
Egor
Friday, April 16, 2004
"I'm useless at drawing, even my handwritting is terrible"
Not to mention your spelling!
Harsh but Fair
Friday, April 16, 2004
My original tech background was in graphics, so I'm comfortable in Photoshop... so take this for what its worth.
I do all my mockups in Photoshop, before I ever write a line of code or create an HTML file. I just *draw* the web page, starting with a screenshot of a browser window, then cut out the page, and fill it with my mockup. I've gotten so comfortable with Photoshop that I can almost alter a mockup as fast as I could draw it on paper and it looks EXACTLY like the app. (I have very little faith in the imaginative powers of most business people - and a scratchy drawing of a computer interface requires them to imagine what it would really look like.)
If they like the look, and want to see how it *feels* when you are clicking around, I might go with a fake HTML page made with Dreamweaver MX. (earlier versions of DW are crap.)
Clay Whipkey
Friday, April 16, 2004
I normally create them with HTML, but the risks that other posters have mentioned are very real. ie, "Looks great, Mark! We'll start using it today!.", "Whaddya mean 'prototype'? I'm looking right at it and it looks like it works just fine to me", etc.
I've worked with people that used Photoshop, but many times these guys made it look like a printed brochure. It looked fantastic, but many of the design elements were virtually impossible to translate into workable, browser agnostic HTML.
Mark Hoffman
Friday, April 16, 2004
Harsh but Fair :
Sorry but English is not my mother tongue :-(
I promise you that I'm going to open some grammar books soon.
Snacky
Just another foreigner who has been flamed :-(
Snacky
Friday, April 16, 2004
I'm an advocate of the Lo-Fi Design as described here:
http://www.lukehohmann.com/papers/improvingusability.htm
Harp
Friday, April 16, 2004
Snacky,
Get one of those plastic templates for drawing straight edges, boxes, and circles. Also use grid paper - I prefer Murray pads (the green engineering paper) but standard white with blue lines will do.
Nick
Friday, April 16, 2004
Agree with using paper. You can change it fast
and nobody will expect it to be lovely or work.
A realistic mockup will disapoint because people
will want it to work and they'll think it won't
take long to make work.
son of parnas
Friday, April 16, 2004
---------------
>"Looks great, Mark! We'll start using it today!.", "Whaddya mean 'prototype'? I'm looking right at it and it looks like it works just fine to me", etc.
>the problem with realistic UI prototypes is that users then think the app is finished.
>A realistic mockup will disapoint because people will want it to work and they'll think it won't take long to make work.
---------------
Of course, you could just communicate with your clients as to the nature of a prototype *before* they make assumptions. Oh wait, that would require a completely different set of DNA from the programmer DNA, and Joel is the only person who has both sets. :-p
Clay Whipkey
Friday, April 16, 2004
The problem isn't with the programmers DNA (well maybe programmers lack it) but the reverse is also true. The customers don't have the DNA to understand that a completed GUI (read prototype) is just the tip of the iceberg.
Elephant
Friday, April 16, 2004
"Of course, you could just communicate with your clients as to the nature of a prototype *before* they make assumptions. "
Oh yes, because we all know how well that works, don't we.
For many people, you could present them a document which repeats "This is a prototype." 2,000 times and then make them sign it in their own blood and they would *still* ask you why they can't have it today.
Mark Hoffman
Friday, April 16, 2004
 Recent Topics
Fog Creek Home
| 
