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!

id8 Publishes “Rock the Room!” iBook to Help You Make Your Meetings Better

A major factor in our success has been the popularity of id8′s singularly magnetic and constructive meetings. Now with the publication of Rock the Room!, you and your company can benefit from our unprecedented integration of confabs into the digital prototyping process.

Beginning today we’ll offer our digital publishing debut on the iPad platform, at no cost.

We partnered with renowned non-fiction writer/producer Donnell Alexander to build a story as compelling as the strategies discussed inside its electronic pages. Created with Apple’s stunning new iBook Author App and designed for the wildly amazing Apple iPad, Rock the Room uses narrative writing, illustrative videos and even new rock songs to share the story of id8′s Michael Terrett and how he rose from humble beginnings to become an elite meetings facilitator.

Subtitled Facilitate Meaningful Meetings the id8 Way, Rock the Room! includes videos of Terrett arranging the optimal meeting space, as well as sound bites full of indispensable advice and anecdotes from Terrett and other key figures inside the digital prototyping firm. You won’t set out coffee or arrange a conference call the same way after sailing through this multi-media experience that you’ll want to experience again and again.

Rock the Room! will soon become available through the iTunes bookstore. Here’s how to start making your meetings better immediately:

Get the free iBook!

1. Download Rock the Room! for the iPad (iBook, 82.8MB)
2. Make sure you have installed the iBooks App on your iPad
3. Drag-and-drop the iBook to your iTunes window
4. Plug in your iPad, and under the Books settings, make sure that Rock The Room! is clicked to sync
5. If you’re having problems, watch this short video demo
6. Enjoy, share with friends, and send your feedback 

Get the free PDF!
(Sorry, but the PDF version does not have the cool videos, audio clips, and everything else. For the best experience, please view this on an iPad.)

1. Download Rock the Room! for anything else (PDF, 49.5MB)
2. Make sure you have installed Adobe Acrobat or another reader, download one
3. Enjoy, share with friends, and send your feedback <info@id8.com>

Big thanks to everyone who contributed to this. This was a big team effort.

• Co-Producer: Thor Swift 
• Designer: Jen Matos

• Moving Images: Kurt Hegre
• Music: Stagger and Fall, Loot, Rademacher

We view this as just the first edition of this iBook.
Please send us your feedback so we can make it better. Thanks!

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!

Prototype Tool Review: ProtoShare

Last month Jen Matos did an overview of a few of the most well known prototyping tools. Over the next few weeks we’ll be taking a deeper, more in depth look at all of these tools (JustInMind was last week).  I wanted to check out one of the more specific wireframe/prototyping tools I’ve heard about so I went for a closer look at ProtoShare.

Pros/Cons
Pros: Clean interface, great online video tutorials, online collaboration (with useful notations) in real time, ability to import CSS and toggle between drag and drop and HTML, hosted online.
Cons: not pixel perfect fidelity, page interactions limited, markup language skills needed for advanced high-fidelity prototyping, edit widgets in pop-ups instead if in-line, not set up for heavy data interactions.

Advantages
Easy to learn, intuitive, beginner to advanced users will feel comfortable, wide spectrum of tools available.  Ability to add images, links, interactive fields, flash, iFrames.  Really nice collaboration interface.

Pricing
Multi-tiered monthly fee depending on number of users and company needs.  15 day free trial offered.

Reviewing

To review this application I set about it by downloading the trial and navigating around the application familiarizing myself with the tools and trying to get lost/break something to get an idea of the level of useability.  My goal was to review ProtoShare (and all applications) based on creating two prototypes: low-fidelity – reddit.com and high-fidelity – kennethcole.com.  I’m looking to see how easy it is to pick up the tricks and tools and how pixel perfect I can get my prototypes, on top of that I wan to be able to do it quick without needing weeks to ramp up my skills.

Creating a Low-Fidelity Prototype : reddit.com
I began by setting up my page and bringing in screenshots as headers and a sidebar, I found the images easy to size and move around on the canvas.  I then started added the content.  I began doing this in expandable panels which I thought would be neat if I could make them work, but turned out to be not quite right for a link farm.  I then moved onto rich text which I was skeptical about initially.  What surprised me is that I was able to customize my text letter by letter if I wanted and add in links through the HTML.  I realized after reviewing (simulating) it that I had some sizing issues but was happy with the interaction and overall design.  After playing in the application and falling down a large CSS hole for hours I was able to put this together with the interactions of the links pretty quickly:

A few minutes later I was able to fix the size of everything and have an appropriately sized page.  I appreciated the ease of use and didn’t end up struggling with tables blowing out, or things looking perfectly lined up only to see them off when I reviewed my page in the browser:

Creating a low-fidelity prototype was a breeze.  I tend to get caught up on small details and fun features like the ability to import the CSS from reddit.com into my prototype, but had I not tinkered with that unnecessarily, I could have put this together in less than an hour as a new user.  Quick and easy are important and I was able to navigate and build quite well.  It also spoke to my more technical side by offering the chance to edit the code.

Creating a High-Fidelity Prototype : kennethcole.com
ProtoShare comes with an example prototype that contains a low-fi, mid-fi, hi-fi and comp pages.  I checked out the hi-fi prototype and while it was interactive (rollovers, popups, flash), it couldn’t be mistaken for a pixel perfect prototype; one where the client sometimes forgets they’re actually looking at a prototype.  With that in mind I decided to test some of the features needed to prototype kennethcole.com without attempting to prototype a pixel perfect prototype.  I was mainly interested in Flash, iFrames, RSS Feeds and the interaction of buttons.

I was able to integrate all of these mediums fairly quickly and was pretty happy with the ease of use.  I don’t think this is the best tool to create mind blowing prototypes that are as pixel perfect as the intended site/application, but the ability to incorporate these types of media are definitely great features.

ProtoShare Meeting
I was contacted shortly after downloading my trial by ProtoShare’s VP Josh Chaney who offered to give me a walk through and tell me about their upcoming release in October.  Josh was very knowledgeable and gave me a brief overview of ProtoShare and also let me ask a few questions about the CSS features, interactivity and their professional services team. I was already pretty familiar with the application from the previous day’s puttering, but was interested in getting a behind the scenes tour and discussing the new release features.  Most of the new features will be centered around the collaboration portion of the application, making the interaction between teams easier to use and to give it more of an email feel.

Wrap-Up
ProtoShare is a really nice application.  I enjoyed working in it, didn’t hit any frustration points and I was impressed with the collaboration ability (real time online review? Yes please!).  I found the interface intuitive and I appreciated the ability to edit code as well as use simple drag and drop interactions.  This is a wonderful tool for low to mid fidelity, fast wireframing and high-but-not-super-high-fidelity prototypes..
Score: 4.5 (out of 5)

Prototype Tool Review: Axure

When most people think of prototyping, they imagine a set of pages/interactions that are in wireframe mode or some level of visual fidelity – yet almost no one expects to see a prototype delivered with a pixel perfect look and feel.  As a visual designer, I tend to want things to look ‘true to form’.  Prototyping tools that give me intuitive, intricate layout capabilities step to the front of the line.

In this review I will go over Axure, which is near the top of the food-chain in the prototyping world.  I’ve found Axure to be very good at the low-to-mid fidelity level, though there are some hang-ups when it comes to hitting that visually perfect – high-fidelity mark.  As a designer, I am looking for a tool that is perfectly suited for creating high-fidelity pages and interactions with ability to incorporate images, embed objects such as Flash Animations, Video and similar.  Beyond this list of capabilities, I’m looking for a drag & drop interface that ‘feels-right’ to an Adobe-oriented designer.

Pros/Cons

Pros: Axure is a handsome prototyping application which can become a solid staple in your UI/UX toolset for a medium price.  Axure has many of the bells and whistles of more expensive tools including user collaboration, integrated viewer feedback, HTML/Javascript rendering and a widget library.

Cons: The learning curve can be tough.  Assigning interactions to widgets, and building tables with dynamic content can be challenging – but once you get the hang of it, Axure proves to be very powerful.

Advantages

Users can quickly create wire-frame and low fidelity simulations collaboratively, and gather stakeholder feedback through the application.  Axure touts many of the capabilities found in other rich prototyping tools.  Axure has a strong user base and there are many tutorial videos available today.

Pricing

At the time of this article a single user license could be had for $589.  Axure also supports a ‘good student’ option which can get you a free license.

Reviewing

My goal in this review is to take some of the complex things I typically prototype – and replicate them in Axure.  My first assessment is to recreate reddit.com for a low-fidelity approach.  I will then attempt to recreate a high-fidelity experience: nike.com.

Creating a low-fidelity prototype: reddit.com

I began looking at ways to create the site through the use of tables with data fed rows but later found that I should approach this task by using ‘rectangles’ and basic styling elements.  Tables in Axure are fairly basic as you cannot merge cells, nor place images, buttons or other page widgets into them.  If you want to create a set of tables with alternate content, you’d use the ‘Dynamic Panel’ widget to switch between your varying data sets.  Styling widgets beyond the background color and line weight options are limited as well, but you can work around this by overlaying graphical elements on top of your widget.  Laying out the main portion of the page went smoothly.  Text, rectangle and graphic elements behaved as you would expect from a polished application.  The ability to copy from a selection made in photoshop and paste directly into Axure was a time saver as well.

As I began to work on the interactivity of the prototype, I became familiar with the case editor.  Axure’s Case Editor can be very powerful, but might be a challenge for someone with little to no knowledge of scripting/programming.  While I did not have the requirement of setting variables and passing them through pages in this exercise, Axure proved to be capable of handling many scenarios of rich data representation — as needed.

Creating a high-fidelity prototype: nike.com

It’s often easier to create a prototype if you have a copy of the original graphic elements to set as tiled backgrounds and the like.  I was unfortunately limited in this exercise with nike.com, but managed to ‘represent’ the page with a decent amount of success by cutting and lining up the graphical elements.

My main test was to see if I could get a video to play in the page, and after learning that there was no way to directly embed code – I found another workaround.  If you use the Inline Frame widget and point to another page outside of the prototype that displays the video – things work out well.  There was some fuss on layout specifics but I’m sure if I spent the time, I could eventually achieve a pixel perfect result.

Wrap Up

I’ve found Axure to be a formidable standard for the feature rich prototyping tools available in today’s market.  I’m sure once I’ve mastered my way around the tool – I could create realistic prototypes and support many business endeavors.  My main concerns revolve around some of the formatting workarounds and the limited table options.  Dynamic Panels can get you far but may become cumbersome in a highly iterative project.  For the cost, Axure is well worth the look.

Score: 4 (out of 5)

Prototype Tool Review: JustInMind

Last month Jen Matos did an overview of a few of the most well known prototyping tools. Over the next few weeks we’ll be taking a deeper, more in depth look at all of these tools.  The first prototype tool I decided to take a closer look at was JustInMind. JustInMind is easily accessible, offers a 30 day free trial and free online tutorials.

.

Pros/Cons

Pros: Nice interface, good online video tutorials, ability to publish online for easy usability testing (also in HTML format). Cons: Sharp learning curve, hard to customize tables, views, fonts, somewhat counter intuitive.

.

Advantages

Quick simple prototypes and wire-frames.  Ability to add images, links, interactive fields.  Easy translation for usability testing.

.

Pricing

Low end, with discounts for students and non-profit organizations.

.

Reviewing

To review this software I set about creating two prototypes: one low-fidelity (reddit.com) and one high-fidelity (kennethcole.com).  My goal was to find the quickest, easiest way to prototype both of these sites using my background in digital prototyping and the features I learned from the online tutorials.

.

Creating a Low-Fidelity Prototype : reddit.com

My impression of the software is that it would be great for quick low-fidelity designs and wire-frames.  I ran into some trouble when attempting to use repeated rows in data tables and ended up having to dial back and instead use screenshots of the original site and place them in a table with tags to link out.  The interface was simple enough to create a basic page with but creating pixel perfect prototypes doesn’t seem to be a strong point of JustInMind.  Switching views or using expandable layers seems to cause problems when placed in tables.  Linking from page to page proved to be simple and actions were easy to use after a few times of creating them.  Because of the different avenues (and some dark alleys) I wandered down, it took me quite a while (a few days) to get my prototype (well, 4 of them) to have the interaction and more or less look and feel of reddit.com

This is the JustInMind interface with my first attempt at creating reddit.com with a dynamic data table and repeated rows:

After I rebuilt my prototype with screenshots and link targets this is the finished product.  As I mentioned I ran into trouble with spacing for the alternating layers in the table:

Creating a High-Fidelity Prototype : kennethcole.com

I wanted to prototype a site that had a lot of graphics, some flash and an interactive design; kennethcole.com fit the bill (plus there was the added bonus of being able to drool over the shoes while I put it all together).  I ran into some of the same problems creating this high-fidelity prototype as I did with the low-fidelity prototype, namely spacing issues, changing layers (switching views) and creating pixel perfect alignment.  I went down a lot of paths that seems like a good idea at first, but ended up taking way too much time, and in the end, not creating as tight a look as I was shooting for.  As this was the second prototype I attempted with JustInMind the ramp up time was quicker, but still took me a couple of days to understand basic interaction and many hours messing with images and trying to line things up just right.

This is the JustInMind interface with the beginnings of the kennethcole site:

After initially attempting to break it up into tables, I realized that in order to achieve a pixel perfect prototype, I would need to preserve the original images and go about creating multiple layers.  This worked as long as the layers were the same size:

Wrap-Up

JustInMind is a great tool and I’d recommend it to prototypers working heavily in wire-frames, low-fidelity and without a need for heavy data interaction.  The tutorials proved to be helpful, but moving from beginner to advanced user in a week proved difficult.  Additionally, creating both low and high fidelity prototypes with the software might be a bit much for the average prototyper. Score: 3.5 (out of 5)

Comparing Digital Prototyping Tools