Native iPhone Prototypes with ProtoShare
We have an exciting new proof of concept in ProtoShare: the iPhone Prototype component. As we looked around at the iPhone prototyping market, we saw that there really is no way to pull up an interactive prototype on the iPhone. No way to experience the real interactions on the phone in user experience testing. And then we were talking to our office suite mates who happen to be a group of pretty well known and accomplished iPhone consultants and application developers, Raven Zachery’s Small Society. (Anyone see the new Zipcar app at WWDC last week?) Anyhow, they pointed out that having an interactive prototype natively viewable on the iPhone would be a big help when working with clients. They use wireframes now, but sometimes it’s difficult for customers to get the feel for an app if it’s not on the iPhone.
With that in mind, one of our engineers took a look at ProtoShare, spent a few days developing a concept, and came up with an implementation. Since ProtoShare is an HTML-based web application—not Flash—we can easily produce viewable and navigable wireframes for the iPhone. The component he developed is basically a container in which you build your wireframes, it also makes the prototype look and behave like an iPhone app when viewed through Safari on your iPhone.
Keep in mind that this component is still a proof of concept. However, we wanted to get it out there so people could take a look at it and give us feedback on what would be necessary to make this a useful feature. Do you want this? What do you need for this implementation to really work? What are the absolute necessities? What do you want to see? Do you want a iPhone application that integrates with ProtoShare? Let us know any and all feedback at in the forum.
Check out the videos below that demo how the component currently works. Some features we’re currently working on: orientation awareness, better transitions, and easier workflows for building the prototypes. Stay tuned….there’s a lot more to come.
How the ProtoShare iPhone Component Works
An Advanced iPhone Prototype using CSS3
Tags: customer feedback, iPhone, protoshare
June 19th, 2009 at 12:24 am
Nice…
We had the similar need and we came up with a slightly different solution. We use HTML prototypes as well, like we normally use for creating prototypes for the web. As your product is still in beta, I think you like to know my comments:
- That CSS example is really amazing and that will never work with our tools. I do wonder how much work it is to set this up. It mimics iPhone UI behavior pretty good.
- What bothers me is you have to log in every time you start the “app”. Probably this can be changed in preferences.
- Does your prototype needs to load a new HTML page every time you click a button? I think speed is a very important factor for an iPhone prototype to feel like a genuine app.
- Your comment about using Photoshop to import images into protoshare seems like a lot of work. I would like a solution where you have total freedom in graphic design and create the prototype in the same program.
You can read about our solution over here: http://unitid.nl/2009/04/prototyping-for-the-iphone-using-fireworks-cs3/
June 19th, 2009 at 10:58 am
Hi, Matthijs, thanks for your comments. Just what we were looking for.
My responses to your points:
The CSS on the App Store example is pretty minimal. That took me just a couple minutes to play with and get right. The CSS on the Coverflow example did take one of our engineers a little bit to put together. What we were trying to show with that example is that you can build iPhone like functionality with just CSS, so you don’t have to do any iPhone programming. One key feature he was trying to show was that when you rotate the phone, the prototype responds.
We definitely have to fix the login issue. We did this with just standard ProtoShare. To really support the iPhone we may need a dedicated app to deal with logins in a secure manner.
Our iPhone prototypes live on a single page in the ProtoShare site map and the screen transitions are done with Ajax, so the prototype responds very fast.
Your solution for doing a similar thing with Fireworks is very nice and I applaud you for explaining it well and providing files for the community to use. Great job! There are people in our customer base who would be comfortable with this approach, but there are others that would be overwhelmed by it. And of course one of the main features of ProtoShare is the collaboration, but that isn’t shown in these examples.
The reason we pointed out using a Photoshop comp is that we have customers who like to work primarily in Photoshop and then essentially create image maps for their prototypes. We wanted to show that this is still a viable workflow for iPhone development.
Again, much thanks for the comments! We really appreciate it. With your feedback we can hopefully develop a tool that can enhance the workflows you have already come up with.
Peter
June 23rd, 2009 at 12:20 pm
I’m glad you’ve taken a step forward to support prototyping for mobile devices.
1 – It would be fantastic if you could add the UI component art from sources like:
http://teehanlax.com/downloads/iPhone_GUI.psd.zip
or
http://www.designerstoolbox.com/downloads/iphone_gui.zip
Perhaps you could put the images in a library on a sample project.
2 – Here is a tip: put the beta component on a template.
To quickly create pages designed for the small screen, simply use the template, then place the standard components on the wireframe in the 320×480 space. Keep in mind that the iPhone browser’s viewable space is smaller than these dimensions. (see the Human Interface Guidelines for more information – http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html [sorry, but you will need a developer account to view the guides])
June 28th, 2009 at 8:00 pm
We have a web based solution that is similar. We run the wireframes from our kit built over Dashcode inside an image of the iphone or a slide with an image of the iPhone for a fully interactive experience, and when accessed from an iPhone it displays on the iPhone without the extraneous chrome.
Really useful for showing off prototype interfaces. It is so good we have to explain to potential consulting clients it is really not an iPhone App, just a prototype of the flow and UI…
John Painter
Cryptocybernetics, LLC.
July 7th, 2009 at 4:40 am
[...] A few weeks ago, Protoshare has also began experimenting with an iPhone prototyping mode that is currently in beta. By allowing users to export their prototypes into HTML, the software makes it is easy to preview the resulting work in an actual iPhone. A detailed post on this topic can be found here here. [...]
November 3rd, 2009 at 7:14 pm
[...] component a try on my next project. Given that it’s still an experimental component (like the iPhone beta components) I will expect to run into a few problems. As a Product Advisory Board member, I will be sure to [...]