merhl

I know a lot of people see prototypes as big wastes of time and money, well the way I see it is their are some great advantages. Prototyping can be a great success if done correctly and done for the right reasons. Too many times people see prototypes as the beginning of an application or the beta version of what the production application will be. Well thats not how prototypes should be treated.

The key element to a prototype is that it shows the user experience of the application, something that designs and functional documents can’t totally convey. With UX becoming such an important part of applications either on the web or desktops its going to become more and more important to show what those user experiences might be. I think clients are going to see UX as what separates their application from their competitor.

Prototypes have a variety of categories for what they could be used for.

• Getting buy in from a Board/Committee
• Creating Marketing Buzz
• User Testing
• Testing data integration and data architectural solutions
• Testing unique user interactions
• plus many others

There are some guidelines to take into consideration when building a prototype.

Prototype Life cycle
The life cycle of a prototype should have a very defining end date. The prototype should never be used as the starting point of an production application, it should only be used as a visual reference to the final production application. The code used to build rapid prototypes is just that very rapid.

Keep the focus of the prototype to just a user scenario or experience.
When building a prototype make sure to focus the efforts on a key user interaction or experience that should be defined from some sort of user scenario. For example if an application needs to display a list of items and the user needs to filter or sort them in a unique way then pick one or two of the filtering options to convey how the experience would work.

Keep the timeline short
Prototype should be something that can be built vary rapidly. A rule of thumb I try to keep my prototype under a week of development time.

A Visual Specification
When the prototype is finished it can be used as a Visual Specification for the Development/Production team to reference. This team could build the application in the any language they wish, it doesn’t have to be what the prototype was built in, unless the prototype was used for some sort of data integration testing scenario. The prototype will help define the UX for the application and the development team can concentrate on the development and reference the prototype for the UX .

Some other topics that come with Prototypes.

Interactive Prototypes
I have had people ask me about paper prototypes and how they are used vs. interactive prototype and they can see some time benefits to paper prototypes. I’d beg to differ, with the speed at which someone can build a interactive prototype’s in Flex/Air and with Thermo soon arriving is roughly the same amount of time it would take to create a paper prototype. One thing the Interactive prototype does it shows what the experience will be when a user interacts with it. Which in this case is the most powerful part of the application. Its all about conveying the experience you want to give to the user. There is a great thread about paper prototypes on IxDA.

Wireframing
Wireframing can be another step in prototyping depending on the depth and complexity of the application. I think wireframes and prototypes are something that go hand in hand that help define the user interaction and speed along the process of the building the prototype.

So if prototypes are done for the correct reasons I can see them being tremendously beneficial.

I made few updates to the AIR iPhone and the browser version, one of the updates was the unlock slider.

I skinned the hSlider to get the look I wanted and I also have the source code below and a sample of the interaction.

The one thing that I found is that in order to enlarge the thumb on the slider you will have to add a class that extends the SliderThumb.

extends package util
{
 import mx.controls.sliderClasses.SliderThumb;

    public class iPhoneSliderClass extends SliderThumb {
        public function iPhoneSliderClass() {
            super();
            this.width = 52;
            this.height = 37;
        }
    }
}

And then apply it to the sliderThumbClass on the slider.

<mx:HSlider width="186" x="17" y="17" id="hSlider"
                minimum="0" maximum="100" value="0"
                thumbCount="1" showDataTip="false"
	        dataTipPlacement="top"
                sliderThumbClass="util.iPhoneSliderClass"
	        tickColor="black" tickThickness="0" tickLength="0"
                buttonMode="true"  useHandCursor="true"
	        snapInterval="1" tickInterval="10"
	        allowTrackClick="false"
	        liveDragging="true"
	        />

Source unlockSlider.zip

Well had a few people ask about putting the AIR iPhone in the browser so I did. There a few things that do not work but I just took 15 min and made a few code changes. The weather and browser do not work at the moment but everything else is working fine. Ribbit still works, along with rotating and I also made the phone dragable at the top and bottom inside the browser.

Have fun with it - The Browser iPhone

A great book on Adobe AIR is releasing today, at least I think from what Rich posted. I did the Technical Editing on the book and it was a great experience working on it. It has all the fundamentals and some nice tips when building AIR applications. I encourage anyone looking at developing AIR apps to pick it up its a great resource to have.

Rich has also posted an excerpt from the book on InsideRIA.com.

While working on a project I needed to have a dual slider that was fixed in size and only changed width when a certain time increment was selected. I didn’t want the user to change the width so I needed to remove the thumbs from the slider. This is where working for UM has its perks you have instant access to some great Flex Developers. Doug McCune suggested I set the ThumbSkin to ProgrammaticSkin. So thats what I did and it worked great.

I am using the HSlider from the flexlib, and in my .css I added

.myHSlider {
thumbDownSkin: ClassReference(”mx.skins.ProgrammaticSkin”);
thumbUpSkin: ClassReference(”mx.skins.ProgrammaticSkin”);
thumbOverSkin: ClassReference(”mx.skins.ProgrammaticSkin”);
thumbSkin: ClassReference(”mx.skins.ProgrammaticSkin”);
trackSkin: Embed(source=”/assets/scrolltrack.png”);
trackHighlightSkin: Embed(source=”/assets/scrolltrack.png”);
}

What this does is basically take off the original slider thumbs.

I have a sample below with the source, I like to spice things up so I added some styling to it.