my take on things: UI Prototyping iPhone Apps

I'm writing for the Synyx GmbH & Co. KG mobile solutions blog. From time to time, I'll cross post articles here, if I think they are of interest for you. If you'd like to read all of my other posts, subscribe to the Synyx Mobile Solutions Blog.

Before flying off to WWDC last month, I watched a whole bunch of sessions from 2009. Among others a session on "Prototyping iPhone User Interfaces" by Bret Victor. If you haven't watched it and you've got access to the WWDC videos - stop right here and watch the video!

In his session, Bret shows how to prototype an interface only by interacting with screenshots! It's amazing that a simple screenshot on the device can show you so much more than by just looking at it in a document or print out. It inspired me to use his framework and the whole process for our own development.

Unfortunately, the code for the session isn't available and neither Bret nor the frameworks evangelist, mentioned in the presentation, got back to me about the code. After some digging, I found Michael Fey's blog, who was able to successfully reverse engineer the missing parts of source code, which were not shown in the presentation.

Michael's UIViewAdditions basically allow easy access to frame properties and give you a neat init method, which adds the passed UIView as a parent:

- (id)initWithParent:(UIView *)parent {
self = [self initWithFrame:CGRectZero];
if (!self)
return nil;
[parent addSubview:self];
return self;
}
+ (id) viewWithParent:(UIView *)parent {
return [[[self alloc] initWithParent:parent] autorelease];
}

There wasn't much left to do for me. I only coded the class Root, which is the parent of all UIImageView instances. It provides a couple of methods to slide images back and forth:

@synthesize pageIndex = _pageIndex;

- (id) initWithParent:(UIView *)parent {
self = [super initWithParent:parent];
if (self == nil) {
return nil;
}
self.userInteractionEnabled = YES;
self.size = self.window.size;
[[UIImageView viewWithParent:self] setImageWithName:@"dailies"];
self.pageIndex = 0;
return self;
}

- (void)setPageIndex:(int)index {
if (index < 0 || index >= [self.subviews count]) {
return;
}
_pageIndex = index;
for (int i = 0; i < [self.subviews count]; i++) {
UIImageView *page = [self.subviews objectAtIndex:i];
page.x = (i < _pageIndex) ? -self.width : (i > _pageIndex) ? self.width : 0;
}
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
self.pageIndex++;
}

With those two classes and a couple of screenshots, it is fairly easy to create an App that looks and feels almost real. I created a short demo video, which shows how easy it is to get a good feeling if your App is going to work or not:

Now don't forget those are only screenshots and the App might need to load stuff over the network or do some animation, hence it might not feel the same. However, this process of prototyping an UI is powerful enough to give you an idea, whether the workflow or the UI in general is going to "work" or needs some tweaking.

You can download the source code for the two classes, along with a sample project from github.

my take on things

June 30, 2010

UI Prototyping iPhone Apps

0 comments:

com_channels

my_links

recent_postings