proof of concept / medium fidelity prototype

PeakOutput

so i have an interface design for a new application but right now it is just in paper prototype form

the next step is to render screenshots in photoshop and i know how to do that no problem

but then, what I need to do is find a way to create an interactive version of the interface to demonstrate my research and prove my concept to a panel.

I have a little experience with html and css and flash but I cant think of how to code it or even better if there is a specific piece of software that can help me do this quickly and easily.

I will try to describe the interface so you can get a better idea of how it can be done

imagine a table with 3 rows and no columns.

in the top row is a series of headings each one corresponds to a particular set of sub headings in the middle row each of which corresponds to some information in the third row

now imagine this on a touch screen, with each row being kind of like cover flow in itunes. if i swype my finger on the top row it moves to the next heading in that direction and at the same time moves the relevant sub headings into the middle row and the corresponding information for whichever sub heading is showing into the 3 row.

now if i swype over the middle row the top row remains the same but the sub headings change and the information in the third row changes to correspond with the sub heading.

I hope that makes sense and someone can give me some advice

flash might be the most obvious way to do it but i would prefer if there was an easier way

Deliverance

Check out Flash catalyst: a cut down version of Flash that is a catalyst for fidelity prototypes.

Also look into JQuery: an open soucre library of pre-written javascript functions that can be readily applied for the functionality that you need.

PeakOutput

Deliverance wrote: »

Check out Flash catalyst: a cut down version of Flash that is a catalyst for fidelity prototypes.

Also look into JQuery: an open soucre library of pre-written javascript functions that can be readily applied for the functionality that you need.

thanks a lot do you have much experience with catalyst?

I am trying to figure out how I should organise my layers etc so that it is as easy as possible to get every element to do what I want it to do when it is imported into catalyst

p

You could pu tit into a powerpoint presentation and then add clickable areas so you can jump between slides.

Also, easy enough to do that with a PDF too if you have Acrobat Pro.

Pixelcraft

There's also http://keynotekungfu.com/ if you've keynote

PeakOutput

Thanks a lot those two solutions would have been perfect for the exact last iteration of the design but I now need to be able to demonstrate the concept of using a swyping motion on a touch screen and i dont think i could do that with powerpoint or keynote(both of which i have) but i could be wrong

p

Really, if you're getting into actually prototyping the interactions, then you're going to need to get your hands dirty with coding. You have 2 main directions I see.

1. Start prototyping with code, possibly with a developer. Perhaps there might be some prototyping tools for prototyping on iOs or similar, but I don't know.

2. Just display an animation of the action, instead of the actualy interaction itself.

Really though, at the level you're talking about, you really need to start considering platforms and technology specific details you're going to prototype on/with, or else just go with straight animation. Maybe Flash or After Effects might be good for this. Something like this, maybe: http://www.youtube.com/watch?v=sM91fVgkkOg

PeakOutput

yep you are right but this is for my thesis and I just literally dont have time to code it and I wouldnt gain any extra marks for coding the prototype compared to say using flash catalyst

unfortunately my course failed to deliver on some of its promises and one of them was how much programmin knowledge we would finish with

p

Well good luck with it - hope you figure something out.

PeakOutput

p wrote: »

Well good luck with it - hope you figure something out.

Think I got a bit lucky today, and thanks for the suggestions, I didnt realise exactly what you could do with keynote but saw my room mate prototyping on it today so if I cant figure catalyst out I know I will be able to get something close to what I want with keynote and mockapp

thanks lads

p

Keynote's pretty good. Check out it's "Magic Move" functionality. It's great for making hands slides around etc... and also you can pop an interactive keynote file on an iPad/iPhone and actually interact with it there which makes a nice demo.