id8

Prototype Tool Review: FieldTest

Back in November I wrote an article about prototyping tools used for mobile development. Since then, I’ve been using a tool from that article to prototype an iPhone application I’m developing for my thesis (Note: I’m working on my Masters). Although FieldTest is still in Private Beta, it’s a powerful tool and has allowed me to quickly show a clickable model to users early in the development stage.

My Process

I’ve been designing the UI for my mobile app in Adobe Photoshop. At the end of each work session, I would save out screenshots to upload to FieldTest. My screens were saved as 640×920 since I’m building for iPhone 4, however the prototype displays in FieldTest as 320×460. The screens auto-resize, however on first launch on the iPhone, it looks a bit fuzzy due to the lower-resolution version. To remedy this issue, a two-finger swipe on the iPhone will give you the option to view images in Hi-Resolution. (Do it!)

Why FieldTest

The id8 team uses iRise to simulate hi-fidelity prototypes, and although it’s a a great tool, there were a few reasons why I used FieldTest to start out with:

1) It’s quick. In less than 10 minutes, I can create a new project, upload about 7 screens, add hotspots and transitions to each screen, and be ready to test. That’s fast!

2) Public view. With one-click I can share my prototype and send a link to anyone. Users don’t require a login, have nothing to install, and can view the project immediately. In a web browser, the project displays within an iPhone frame; on the iPhone, the project displays as an app.

3) Works like an app. With the transitions being seamless and immediate, the project in FieldTest actually functions like an app and not a website. Sometimes linking between pages in iRise Studio can cause a lag while loading, and although it is small, it is noticeable. Another downside for iRise is animating transitions between pages: you can’t do it. The only way to make it happen would require you to have multiple screens in hidden views on one page.

4) Branching out. Aside from the benefits listed above, an underlying benefit was being able to learn and experiment with a new tool. This allows me to be more educated on the prototyping tools currently available, and also helps me make informed decisions when putting together toolsets for projects and clients.

Worth a Look

FieldTest has been in Private Beta for a number of months now, and a full release should be available soon (fingers crossed). I’d recommend Signing Up for early access and test it out. The Beta version limits you to 3 projects, but all the projects are fully-functional. No word yet on pricing…let’s hope it’s reasonable!

Comparing Digital Prototyping Tools Part 2: Mobile

Continuing where I left off in my last review on prototyping tools, I found some great apps that are focused more on building mobile prototypes. The tools range from creating low-to-high fidelity simulations and require no coding knowledge.

So let’s jump right in!

App Cooker

AppCooker is an iOS-app planning and prototyping tool built for the iPad. Aside from designing mockups for the iPad, iPhone, and iPod Touch, this app allows you to sketch out icons, define your app idea, develop your store info, and create a pricing plan.

Mockup screens can be exported in full resolution as PNG, where only the iPhone is exported as full scale on PDF.

AppCooker is still in its early release and is offered in the App Store at a discounted price, gradually raising the price until its Full release.

Advantages Over Other Apps – AppCooker is not just a prototyping tool, it helps prepare your app for release by managing everything that is involved in creating an application for the App Store.

Pros – Goes beyond building a prototype.

Very sleek design.

Allows you to share projects (PNG and PDF), as well as collaborate and receive feedback from users (via App Taster).

Cons – Exported pdf is not clickable, shows mockup as static wireframes.

Seems like there could be a benefit of having a desktop app as well.

Pricing – $19.99 (will be $49.99 once out of beta)

Our Experience – Although I haven’t used AppCooker, the reviews from the App Store have been very positive, with the main negative comment being that users are waiting for promised updates to use the app to its full potential. It sounds like it’s worth getting at the discounted rate before the full release.

FieldTest

FieldTest is an online application that is geared specifically to building mobile prototypes viewable on a mobile device. The user uploads their wireframes, creates hotspots on the screen, and tests the prototype on a mobile device.

Advantages Over Other Apps –

FieldTest is a browser-based application that is very similar to Invision (mentioned later), however FieldTest allows you to customize transitions, applying swipe left/right, long tap, or tap effect.

Pros – No software to download.

Very simple, UI looks very easy to understand.

Cons – Specific for mobile devices only.

Limited functionality (creating only hotspots and transitions).

No collaboration available, meaning reviewers can not add comments on the screens they are viewing.

Pricing – Not available yet, currently in private beta

Our Experience – I’ve signed up requesting early access (as should you!). Although I can’t share my experience, watching the demo video and reading about the features of the app makes me believe this will be a very promising tool for mobile designers.

Interface

Interface is a mockup and prototyping tool for iPhone and iPad that is created on a mobile device.  This tool allows you to mockup an application by dragging and dropping interface elements onto a screen. You are then able to link pages together and create transition animations to simulate a functional iOS prototype.

Advantages Over Other Apps – One great feature of Interface is that it allows you to compile and export directly into Xcode.

Pros – Easily imports into Xcode, ready for development.

Create a quick mockup while you’re on the go.

Cons – Doesn’t seem like the most efficient way to build a prototype (watch the video).

Pricing – $9.99

Our Experience – I can see this application making sense for a small project, just trying to show a few screens of a design idea, but is pretty tiresome to use after an extended period of time. I would not recommend this to simulate an entire project.

Invision

This is a new prototyping web app that has already been generating some buzz, partly because the UI looks so great and no coding is required. This was an intuitive application to demo, and definitely one of the best-looking interfaces in the market.

Invision has an extensive design library, with some great templates and toolkits that allow for quicker mockup development. The main issue I found with this app, though, is that it doesn’t simulate prototypes in a realistic manner; there are no buttons or drop-downs to make, because this application is primarily about linking wireframes together and making hotspots on a page. Clicking on a ‘pop-up’ refreshes to an entirely new page, instead of just being an overlay to the current screen.  This app works as a general ‘page-linking’ tool, but lacks the ability to do more dynamic, higher-level tasks.

Advantages Over Other Apps – It’s superficial I know, but the UI looks gorgeous. Aside from that, the app has a nice collaboration feature that allows you to share a link to your prototype and have users comment on specific elements on a page.

Pros – Very easy to use, you are up and running within minutes.

Cons – The application has limited functionality: creating hotspots on a wireframe, sharing your project online, and having users add comments.

Pricing – $8-$199/month

(30 day free trial offered)

Our Experience – I had several iPhone wireframes I needed to quickly share and get some feedback on. In less than 10 minutes, I created a project, uploaded my 3 wireframes, configured the screen hotspots, and shared a link to my digital prototype. Although Invision doesn’t include extensive interactive capabilities, sometimes a few simple links from one page to another is all you need to get the point across.

- – - -

These are all very useful apps depending on your project needs. I know there are many more applications out there, if you think I missed something worth mentioning, send a shout out in the comments and I’ll try to add it to my next review. Thanks for reading!

Idea to App in a Week – Round 2: iPad App

I’m back for another prototyping challenge, this time creating an iPad application. It’s the same guidelines as before, developing a digital prototype within a week, and I chose to build upon the iPhone app idea: the AptFinder.

Although it helped to already have the idea decided and some design elements figured out, it still took time to plan and design. Working on the iPad meant having more screen real estate to work with (obviously), so naturally, some of the flow and functionality was going to be a little different than the iPhone app. I wanted the main screen to cover the primary content, and have additional information and tools shown via the side panes.

Some points to note on building the prototype in iRise:

1. Choose an orientation -  I wasn’t able to get the prototype to respond from switching between landscape and portrait view, which meant that I had to design for one (in my case, landscape view). I may need to do more research to find a work-a-round, but would suggest building for one particular view beforehand.

2. Subtract 20px from the height - Whether you’re building the page in landscape view or portrait view, you need to account for the Apple header bar which is 20px tall. If you’re looking to create in landscape view, the page dimensions will be 1024px by 748px. For portrait view: 1004px by 768px.

3. No drag & drop – I didn’t need drag & drop functionality for this particular demo, but when I was working on another project, I didn’t realize that drag & drop doesn’t work when being viewed on the iPad. A real bummer considering that’s a pretty common interaction on this device, so plan for a work-around when building your own prototype.

Here’s the final result:

Idea to App in a Week: Prototyping an iPhone application

This past week I’ve been working on prototyping an iPhone application using iRise Studio. It took some trial and error to figure out how to get it to display properly on an iPhone, but once I got that handled the rest of the process went pretty smoothly.

 

Planning out the process

For my test prototype I created an application called FindMyPad, which is an app to help you search for an apt/house to rent/buy. I designed some of the elements in Photoshop, and also used free UI Development kits I found online. Using the UI kits helped cut down on design time, which helped me focus more on the interaction.

App Splash Screen

Check out a short video of the end result below.

Have questions? Feel free to ask!