Paper Prototyping

-
I've been pretty far down in the trenches the last couple months, hence my lack of posting. It's good to be busy, and working on what I love the most, visual designs.

A fun thing happened while on the client site last week, and I thought I'd quickly post about it.

I was there to present my visual designs and get feedback before the requirements doc was finalized. I had suggested to the client previously, with the recommendation of my company's UX Director, that I try some paper prototyping with some real users. They liked the idea, but didn't really speak of it much since. So there I was, on the client site, working away at some suggested changes made by the BAs in our morning session, and here comes a BA with a user. "Do you want to try some paper prototyping?" I was a little stunned, but luckily had my visuals previously printed (all be it in black and white). I took the user into a meeting room. Now this isn't something I had ever done before, I read a couple articles, looked at some examples online, but that was the extent of my knowledge. What the heck, right? No better way to learn. Jump in the deep end.

By the end I had some great feedback and a bunch of marked up papers all over the place in no logical order. You know what? It was fun. It was great to have a one-on-one session with a user. There was no one else there to basis him, or explain how something should work, or guide him into the right place. It was just me, my mock ups, and the user. That's real research.

I got to do it once more while there, and it looks like I will be making a trip back specifically for the purpose of paper prototyping.

So I've now convinced my client to let me do contextual research and paper prototyping. Hooray for advocating the value of user experience research!

Comments

Corrado said…
This is very interesting. I also explored prototyping with paper. It was cool, it went this way: I was showing with the projector (or beamer, don'y know the exact word! :) on the wall some section of a webapp I'm developing, and we started commenting it with word. Than we switched to paper and pen to explain the changes we would like to do... But still not very effective, people was still saying like "did you mean, like this?".. So I jumped up, took paper and scissor, and started stick on the wall on the projection piece of paper like buttons, tabs, arrows and other web elements, to explain my point. Everyone got it, and we created a wide set of "components" and now we always use the projector and this "library of paper component" to build the interface on the wall using the projection as the base layout. And as you said, it was extremely fun! I also considered printing a small set of adhesive web components for this purpose, and selling them!

If you want, you can check out the webapplication I'm developing, maybe you can find it useful, it's a webapp for gathering feedback for designers.

Bye, thanks for the flex hints!

Corrado, Italy
September 16, 2011 at 5:14 AM
Corrado said…
I forgot the link :) http://fluo.creonomy.com

It's early release, you'll find bugs, but you can also report them :)
September 16, 2011 at 5:15 AM
Post a Comment

Popular posts from this blog

Flex Advanced Data Grid collapses on refresh

-
I was having this problem with my Advanced Data Grid. Every time the data refreshed the whole thing collapsed, which isn't a good thing when users have drilled down 3 levels. I know this is probably a bad way of doing this, but it is the only way I could get to work. All the examples I've seen of this say to just assign the saved openNodes Object to the openNodes property, like this... myOpenNodes = new Object(); myOpenNodes = IHierarchicalCollectionView(myADG.dataProvider).openNodes //refresh here IHierarchicalCollectionView(myADG.dataProvider).openNodes = myOpenNodes; but that doesn't work!! Here is what I did: On the refresh method set the following variables (these variables need to be accessible from all methods inside the component, so put them in your model or make them global, whatever). These variables hold the state of the ADG before the refresh. //Object holding all currently open nodes myOpenNodes = new Object(); myOpenNodes = IHierarchicalCollectionView(myADG.d
Read more

Add and remove lineseries - Flex LineChart

-
This took me some time to figure out so I thought I would post about it. Main objective is to toggle on and off lineseries based on user input. Usually this would mean editing the dataprovider, tricky thing here is that I need the color of each line to always be the same based on data, so instead I leave the dataprovider alone and actually add and remove LineSeries to/from the LineChart. This probably isn't the best way to do this, but hey, it works, and it may help someone else out. Here we go... First lets start with the MXML: Here I have a Panel with a LineChart and a Legend inside it, as well as 3 Toggle Buttons. You will notice that there are no series inside the LineChart. <mx:Panel title="LineChart Example" height="500" width="100%" layout="vertical"> <mx:HBox id="choices" horizontalGap="0"> <mx:Button id="Profit" label="Profit" toggle="true" click="upda
Read more

Flex TabNavigator - tab click event?

-
So there doesn't seem to be any item click or tab click event on the tab navigator in Flex. I find this sort of annoying, I mean surely this would be useful and should be included? When searching all I could find was people saying to either use the change event on the tab navigator, (which didn't help me because I wanted my method to run even if you clicked on the currently selected tab) or to use a tab bar instead (which also didn't help me because I am using the SuperTabNavigator from flexlib). What I am doing is basically maximizing the tab when it is clicked, and minimizing it if it is clicked again. I found a solution. http://www.actionscript.org/forums/showthread.php3?t=135539 (post by stburns). You basically get the tab's button. It sounds weird, here's the code to how it works. private function creationComplete():void { for (var i:int=0; i<myTabNav.getChildren().length; i++) { var tab:Button = myTabNav.getTabAt(i); tab.ad
Read more