A Working App Prototype in Less Than 10 Minutes

Introduction to AppGyver Prototyper

When it comes to effective prototyping nothing counts more than how accurately you can represent your idea. For app prototyping specifically, that means delivering a sense of look, touch and responsiveness. We’ve all been put in the position where we’ve found ourselves defending a great idea just because it wasn’t quite finished yet. For most of us, ideas don’t magically make it from the whiteboard to our end product without hitting the computer in between.

Finding an effective method of communicating your great idea with as little compromise as possible is paramount. Without an effective method of conveying your app experience, your brilliant app idea may be misconstrued as mediocre.

AppGyver Prototyper lets you create working prototypes directly from your mockup images. Prototyper offers some key functionality that can help you deliver awesome prototype experiences: native transitions and navigation paradigms; access to hardware functions; run them on real devices; and simple and instant distribution to testers and stakeholders

Put simply, Prototyper works by creating action areas on your individual mockups, which it calls ‘views’. Action areas are then used to either link the views together, or to access device features like transitions, alerts and popups. Prototyper actions access the hardware features of your device. When you run your prototype, you’ll experience all the same speed and tactile sense that you’d expect from a native app.

Getting started

To get started you’ll need to create a free Prototyper account which can be found at www.appgyver.com or search for Appgyver Scanner on the app store.

After having a quick look around, create a new prototype and call it what you want. Layouts will stretch to fit the selected device but in this case, we’ll be building for the iPhone 5. To make sure your idea has maximum impact, use the device your stakeholders and testers will use to view the final project. Once you've selected the iPhone 5 from the devices (Image 1) and clicked to upload your first image, you'll be presented with a few options. Choose to upload your own images and select the three files which are available at the appgyver website.

At this point, you're already prepped to start creating links and assigning actions. First, we'll deal with adding some functionality to your music machine.

Accessing device audio

The drum pad - After you’ve uploaded your target images, select the view that represents the drum pad and start click-dragging on your image to create action-areas.

Once you’ve accepted a selection, you’ll be presented with a menu of available actions including audio playback. Once selected, you'll be given the option to upload your sounds, do that repeatedly for each button of the drum pad with their respective sounds. See Image 2 and 3.

The synth keyboard - Setup the keyboard in the same manner. Simply open the keyboard view and drag across the keys to define audio clips for each.

Previewing on your iPhone - Now you're ready to take the first look at your gleaming new prototype. Click the ‘build and preview’ menu item globally available at the top right of your browser window. If you haven’t done so yet, now’s the time to download the AppGyver companion scanner app and scan the QR code. Your prototype will be loaded onto your iPhone in a few seconds. Alternately, if you don't have access to an iPhone, Prototyper provides a previewer that feeds a screencast directly to your screen simulated by an actual iPhone.

Navigation

Setting up a Facebook-style drawer menu - Currently, one of the most popular navigational paradigms is the Facebook drawer menu the, menu you access in Facebook by dragging your finger from the edge of the screen toward the center. This is a feature that AppGyver included as one of the core functions in Prototyper. To set up your drawer menu, enable the drawer in your project’s settings menu and select the target view that represents your drawer menu (see Image 4).

Assigning the drawer-open action - Although the drawer will work right away by dragging from left to right of your devices screen, you’ll want to give Prototyper an action area that can be used to open the drawer with a tap. To do this, open the drum pad view (you can access your views with the quickview popup at the bottom of the browser) and drag across the button image at the top left of the view. Select ‘open drawer’ from the actions menu.

Assigning the close-drawer action - Lastly, you’ll want to make sure your users can exit the drawer menu with a single tap. Drag across the drawer open/close icon in your drawer menu view and select the action, ‘close drawer’.

Linking views and native transitions - Navigate to your drawer menu in the quickview menu at the bottom of your browser. The views menu at the bottom of the browser lets you quickly navigate when working with any view without the need to go back to the views overview page. Next, you’ll want to define where your drawer navigation leads your users. Dragclick areas and select ‘link’ to choose the appropriate view for both the drum pad and the piano. Here Prototyper will give you a feast of native transition options. To make sure the app makes sense to the user, we’re going to select transitions that are logical. From the drawer menu, select a sliding transition that moves the new view from right to left as if it’s moving onto the screen.

Sharing with your test-group and stakeholders

One of the keys to effective prototyping is the ability to effectively distribute your idea with people that will give real feedback. With Prototyper, it's simple. After you make your final build with 'build and preview,' either click the share button and enter your list of email addresses for the people you'd like to share with, or use the shareable url. Your testgroup will have immediate access to the latest build. With Prototyper, every time you build, each connected device is updated with the most recent changes. This gives you an ultrafast feedback loop. To illustrate this point further, imagine seeing five test devices sitting in front of you all update at the same time a few seconds after you build. Once you’ve built, you’re ready to share. Grab your tester email list and share with the built-in share menu item (Image 8).

Fast, effective prototyping equals good user feedback

Effective prototyping is key to getting good feedback. Rarely is a great app born that hasn’t undergone rigorous testing and iteration. There are a million good app ideas out there, but having the right tools at your disposal will help you focus on the idea and keep your mind off the annoying details of process. Giving your stakeholders something that truly represents your vision is the first step in great app design. Available also on the app store

This example app has been published on the app store. You can check it out at the URL:https://itunes.apple.com/us/app/musicstation/ id662893070?mt