id8

Sign Up For a Free Digital Prototyping Consultation With id8

We’re passionate about digital prototyping. We’ve seen how the process can bring people together, help our clients achieve their goals, and help deliver superior digital products.

But it’s sometimes hard to bring digital prototyping into an organization or know where to start. Some of the common questions we hear are:

• How will it work with my current processes and resources?
• How is it better than what I currently have?
• How much will it cost?
• What will I get when it’s over?

To help understand the value and make the case for digital prototyping, we are developing a new program called, “Pilot with id8.” This is intended to help you build a business case and jump start your project with digital prototyping.

In just a few days of expert consultation we will conduct some initial interviews to understand your needs, we will create a draft plan with resources, activities, and costs, and we will design the first few screens of your digital prototype. This will give you a concrete plan and demo that you can use to build a business case and generate enthusiasm within your organization.

If you are interested, please contact us pilot@id8.com to see if you are eligible for a free digital prototyping consultation with id8.

We know that you’ll find it worthwhile, and we hope to chat with you soon!

Show them where you came from!

Sometimes we move so fast on a project, iterating within the prototype every week, that I often feel we forget how far we’ve come.

I personally always like to remind people on my team the amount of ground we’ve covered, and how much work we have completed to this point.

One way to do this is to simply say: “Remember when we first started this project…. remember all we had was a box with three buttons in it…. now look at where we are…”.

However, I’ve tried that method many times and I don’t think it’s very effective. In the moment it’s cool, but as soon as you move on to another topic it’s forgotton.

So recently I’ve been thinking about a better way to convey this. I always try to go back to our core principle – visualize. The best example of that I could find is time-lapse cameras. See a months worth of work in 2 minutes. I love these things. It might have something to do with the fact that I have a short attention span, but none-the-less I love watching the whole experience from start to finish.

Here is a classic example:

And then this one:

These are great, but I want to convey a prototype changing over a short period of time. So I think this is a better example of what I’m looking for:

So with those examples in mind, I decided to take screen shots of the prototypes we build over time, and then, for now, put them into presentations to show the team before we get into any major discussion or decision making.

Here is an example – it’s a start:

Over time I will try to improve them and make them more interactive, maybe even create a little movie with some cool music.

So far I found it to be a very helpful technique. It helps relax the people in the meeting, it also helps remind them how much work we’ve covered thus far.

I love doing it, and I will continue to do it. It takes a bit of time and effort, but I feel it’s worth it and when you look back at the ideas you started with, it can be pretty funny as well!

Have fun… and request it of your vendors!

This is a series of posts about how consultants (vendors and services providers) can help our clients by making projects more “engaging.” All too often we meet vendors who are way too serious for my liking.

A lot of times we are dropped into situations where the project is in trouble, the teams are frustrated, and general morale is at a low, or at a concerning point. As a consultant, I believe it is extremely important to have as much fun as possible with your team and the people you are working with. It rubs off, trust me. It will lift the mood of the team, and it will also show everyone on the project that no matter how bleak the situation looks, it’s always better to have the glass half full!

Some companies have this encouraged into their corporate culture, and therefore it becomes second nature. Other companies only learn about it on a motivational poster. Nonetheless, I have yet to meet a team that has told me to calm down, turn off, or stop the fun.

How do you do this? There are many ways, but below is an example of one I recently used.

Presentation surprises…

I always like to start a presentation with a light joke, normally on myself, but every once in a while I get to land a gem like this one.

It occurred to me that Eric, id8 Partner and Founder, looked like this guy:

I thought it would be a good idea to pass that on?

And, led me to beg the question:

Tell me that is not spooky close – he could be his double!

How did it work? The clients loved it! We took what could have been another boring meeting, and set the tone for what became an engaging session to share ideas, feedback, and laughter.

The key thing to note is that it must be collaborative. Do not keep it within your company, or just to your friends, or only after hours. Share and surprise the whole team. The work we do is serious and very complex. However, I have yet to work on a project where the people did not appreciate having a laugh with the team.

Give it a try. You will be surprised at the outcome. But please don’t try to figure out who my celebrity double is.

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!

iBloc Support-
Slide Panel Action

The Slide Panel Action iBloc allows you to move any iRise widget beyond the top and left boundaries of the page, with or without animation. A typical use for this widget is a navigation panel that can slide on and off screen from the top or left edge of the browser.

Current Version: 1.0
Supported iRise Studio Versions: 8.5 – 8.9
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes

What does it do?

• Moves any iRise page widget by the specified number of pixels in the X or Y direction, or both, or to specified X and Y coordinates.
• Allows you to move widgets to negative X and Y coordinates (off of the top and left edge of the screen), unlike the Edit Properties Action.

iBloc Support-
Table Filter Action

The Table Filter Action iBloc instantly hides or shows table rows that contain a given word or phrase without requiring a page refresh. This is great for prototyping dynamic pre-set filters on data-driven pages, such as search results.

Current Version: 1.0
Supported iRise Studio Versions: 8.5 – 8.9
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari
Works in iRise iPhone and iPad Apps: Yes

What does it do?

• Instantly hides or shows table rows which contain a specified text string.
• Works on static tables as well as tables with repeated rows (data-driven).

iBloc Support-
Orientation Widget

The Orientation iBloc is designed for running iRise prototypes on mobile devices, including iPads, iPhones, and Android devices. It enables dynamic page resizing and reformatting when the screen is rotated and orientation changes.

Current Version: 1.0
Supported iRise Studio Versions: 8.5 – 8.9
Supported Browsers: iOS Safari (iPhone and iPad), Android (default browser)
Works in iRise iPhone and iPad Apps: Yes

What does it do?

• Fires one of two custom events when a page loads or orientation changes while viewed on an iPad or iPhone or other mobile device browser.
• These custom events can be used to trigger any combination of iRise actions or links, including switch views, change properties, show/hide, etc.

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:

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)

iBloc Support-
Highlighter Action

What is an iBloc, and why should you care? Great questions!

iBlocs are little custom code snippets that allow you to enhance your iRise digital prototypes. We build them to add new behaviors and interactions to our prototypes. As an added bonus, they are reusable, so once you’ve designed it you can use it in any of your iRise (version 8.5+) projects.

Here’s some additional information about the Highlighter Action iBloc that we created.

Current Version: 1.0
Supported iRise Studio Versions: 8.5 – 8.9
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes

What does it do?

• Highlights words in text widgets on any event, based on the current value of a text input widget.
• Matching text can be highlighted with any background color, bold text, and/or italics, and can be selected based on partial or exact matching.