Prototipo interattivo creato con keynotopia

Interactive prototype created with keynotopia

Create interactive prototypes for iPhone, iPad, Android and Web applications in 30 minutes or less, using Apple Keynote & Keynotopia user interface templates.

Over 250 customizable user interface components, meticulously hand-crafted in Apple Keynote.
Click here to visit Keynotopia.


Video Keynotopya in 90 seconds:

Click here to visit Keynotopia.

From Keynotopia Website:
The 5-minute guide to prototyping with Keynote

Every day, we all get lots of good ideas. Most of us, unfortunately, don’t act on these ideas. We create high barriers to entry by imagining how much resources it requires, and how much we need to learn, in order to see it in action. If you know how to put together a prototype of your idea within one hour of getting it, your chances of moving forward are much higher than the ones who will sit down to do market research, write business plans, and hunt for investors. In fact, and this is based on personal experience, your chances of winning a client or receiving investment for your idea are much higher when you can express your ideas with a prototype that you can show along with your presentation. By using a simple, cheap and productive tool like Apple Keynote, you shrink the time required to create an interactive prototype to a matter of hours. And by using ready made prototyping assets, you even shrink that time to less than an hour. When prototyping becomes your second nature, you will no longer talk about your ideas; you’ll show them and test them.

This guide will help you prototype new ideas, or new features in an existing product, in an hour or less: you no longer need to wait for your design and development team to integrate a product feature in order to test it. Take screenshots of your existing product screens and place them in Keynote, then add some user interface components and show how the new feature will work. Bring in some users and see how they interact with the new feature,quickly iterate on it, then share your prototype with your team instead of writing long requirement documents.

The mindset

When creating interactive prototypes, the most important thing to remember is that it’s important to decide what to leave out, and what to include. Prototyping is like magic: you create the illusion of something that doesn’t exist, and that illusion happens in the minds of your audience. Everything else is a distraction. Your prototype is the illusion of your idea in action, and you must approach prototyping with the mindset of a magician or a hacker: it needs to demonstrate your ideas much better than words and pictures can, and it must not include any detail that won’t help that demonstration.

Step 1: Planning

To create your prototype, start by defining the different screens that your apps will show, and how the user will transition between them. I typically do this as a state diagram as shown below (Created on the iPad using Adobe Ideas). You can also create this in Keynote, or any other diagramming tool, but don’t waste too much time make a good looking flow diagram unless you will be using it in a presentation.

The diagram shown above is for a social media application that tracks multiple accounts, and allows me to post updates to multiple networks. As you can see, I represent application screens/states in ellipses and I annotate transitions/arrows with user actions that lead from one screen to another. You don’t need to get every detail of this diagram right, but spend 10-15 minutes going through the difference use cases – It will save you time adding them to the prototype later.

Step 2: Putting together the application screens

If you have a Keynotopia prototyping pack, you will notice it comes with two different files: a .kth, which is a theme file that you can place into <UserName> -> Library -> Application Support -> iWork -> Keynote –> Themes, and a .key file that you can directly open by double clicking. The theme file is ideal for those who want to keep all their assets and application screen in one file. It’s ideal if you’re using Keynote on a laptop, or if you want to move around with a single file that you can later modify on the fly using anyone’s machine (since all the assets you need are embedded in the master slides you use in that file) – The tradeoff is that your file is much bigger, and you need to switch between master/main slides more frequently. The second approach, which is the one I use frequently, is to open the .Key file and place it on a secondary monitor. Then you can quickly switch between your library slides on one monitor and your application slides on the second monitor.

Just like an artist paints distant objects first, then closer ones, start by creating the static components that will be shared among different states of your diagram. This is particularly useful because you will be moving them into master slides later on, and share them across these screens. For the diagram shown above, that would be the “Main Application”, as shown:

Since this is a prototype for an iPad app, I used the iPad Prototyping pack. I grabbed a panel from the panels slide and I pasted it twice roughly to occupy one third and two thirds of the screen. Since these panels are grouped objects, they rescale together nicely. I then grabbed a bunch of list item controls for the list on the left. Double clicking on each list item allows you to edit the text within. Then grabbed a button and search box for the second panel’s toolbar. The images shown in the screenshot are drag and drop from Google image search (don’t worry too much about copyrights, etc.. when you’re creating a prototype – as long as you get different images for the final product). The speech bubble shown is a standard shape in Keynote.

After putting together the main screen, you can move it to a master slide so that you can reuse it in different screens without having to duplicate it or edit it everywhere every time you make a change. To move your screen into a master slide, reveal master slides by dragging the little handler above slide thumbnails, select a blank slide and press CMD+D to duplicate it or CMD+SHIFT+N to create a new master slide. Then paste your components onto that master slide, and give it a name.

You can then go back to your regular presentation thumbnails, create a new slide (CMD+SHIFT+N) and select your new master for that slide.

Next, grab more components from the prototyping pack and start creating other states of the application. For our example, grab the pop-up dialog and place it below your post button. You will notice that most prototyping components are grouped together to make it easier to copy/paste them easily. To resize the pop-up dialog without resizing its content, double click the group over the object you’d like to select – this will allow you to select objects within a specific group without having to ungroup the parent object. You can also have nested groups, but that’s an advance technique that will be covered later on.

The screenshots below show the “show profile pop-up” and “post updates” screens:

Step 3: Adding interactivity

Once all are created, it’s time to define how the user would transition between them. To accomplish this, you go through your state diagram and, for each transition, select the component that users would click to navigate into the next state. With that component selected, select the hyperlink tab in the inspector, and select the target slide.

For instance, the profile image would link to slide 5, containing the profile pop-up dialog. I highly recommend using slide numbers, instead of next/previous slides, since Keynote will preserve these links in the former case even when you move slides around. I also recommend inserting new slides always at the end of your list, and link it appropriately, so that you don’t mess with the order of existing slides after adding the hyperlinks.

Rinse and repeat for every state and transition. Make sure you test the interactivity every once in a while to make sure the app behaves as you’d expect it to.

Before testing your presentation, you want to make sure that clicking anywhere on the slide doesn’t cause it to advance to the next one. To do this, select “Hyperlinks only” in the presentation settings in the inspector.

Click here to visit Keynotopia.

Step 5: Export and test

The most common format I use to test my presentation is PDF. From the file menu, choose export and then select PDF. The reason I like PDF is that I can email it to someone to test it and provide me feedback, or I can send it to my iPhone or iPad and tap through it (hyperlinks are preserved in PDF format). I use GoodReader on the iPhone and iPad to render the PDF.

If you’re feeling adventurous, you can add some slide transitions or magic moves to create interface animations. But remember not to get too distracted by these features. The goal is to show your idea quickly and be able to interact with it, not to make it do fancy stuff (you can always add the fancy stuff later, once you’re done with the basics).

Step 6: Share and iterate

Now that your prototype is done, it’s time to show it to people and see how they would use it and interact with it. Don’t be afraid that someone will copy your ideas, chances are they had many ideas before that they never acted on – may be they didn’t have a Keynotopia Prototyping Pack ;)

Your first prototype should never be the final one you’re going to implement. In fact, to get meaningful user feedback, you may need to test multiple prototypes and compare results. Users can provide you feedback on which prototype is better, much easier than they can tell you what’s good/bad with just one prototype.

The beauty of using this prototyping technique is that once you reach a prototype that you need to implement, you won’t need to write long requirements and specification documents. Just attach comments to different screens, and share it with your developers. Instead of reading long descriptions, they will be able to interact with it and read your comments and slide notes (Your comments and slide notes will not show in slideshow mode, so your application screens will not be obstructed by them).


Keyboard shortcuts

As you create more prototypes with keynote, it’s essential that you start customizing and using keyboard shortcuts – it will save you a lot of time. To customize keyboard shortcuts in Keynote, go to System Preferences –> Keyboard then click the Keyboard Shortcuts tab. Select Application Shortcuts, from the left panel, then click the + button at the bottom left of the right panel to add a new shortcut. Select Keynote as the application, then type the menu item name you’d like to create a shortcut for *exactly* as it appears in Keynote (In the example below, I am assigning a shortcut for Align->Left menu item, so I typed “Left” – it’s case sensitive.

Keyboard Shortcuts
Here are the keyboard shortcuts I use:

Menu Item Shortcut Purpose
Group CMD+G Group objects together to easily select and edit them as a unit.
Ungroup CMD+SHIFT+G Ungroup grouped objects – Pressing it multiple times will ungroup nested groups
Send Backward CMD+[ Place selected objects/groups behind others. The order of objects on the slide is defined by the order they were created.
Send to Back CMD+SHIFT+[ Place selected objects/groups behind everything else.
Bring Forward CMD+] Does the opposite of Send Backward
Bring to Front CMD+SHIFT+] I’ll give you three guesses
Lock CMD+L locking enables you to pin selected objects to the slide so that you can select and edit other objects without accidentally selecting or editing the locked ones.
Unlock CMD+SHIFT+L Unlock selected objects or groups. You will notice that locked objects, when selected, will have “x” markers around their edges, instead of the square marker that enables you to resize them.
Zoom In CMD+SHIFT+> This is the standard zoom in shortcut for all iWork apps. CMD++ is already reserved for increasing text size, which I use more frequently.
Zoom Out CMD+SHIFT+< Same
Fit in Window CMD+1 This shortcut is particularly useful if you’re working on a prototype with dimensions larger than the screen. For instance, I prototype iPad apps in portrait mode, and the 1024px height won’t fit on my 800px laptop screen.
Actual Size CMD+0 This will zoom into the actual size of the slides

Click here to visit Keynotopia.