As always, this update is free for anyone who’s purchased Keynotopia templates or bundles (yes, all Keynotopia templates come with free lifetime updates, and with the bundles you also get all future templates for free, forever!)

Here are some screenshots of the new UI components:

OS X Mountain Lion GUI Templates

jQuery Templates

You can get this update through the link in your original order confirmation email. If you haven’t purchased a template or a bundle yet, get one here so that you can receive future updates for free.

Happy Prototyping!

Here are some screenshots of the new Windows templates (available in Keynote and PowerPoint formats):

All the icons included with these templates are royalty free, so you can use them freely within your app without needing any additional licenses.

And here are some screenshots of the updated Android, iPhone and iPad templates:

As always, all updates are free forever for existing customers, and all new templates are free for customers who purchased a bundle. If you haven’t purchased a template or a bundle yet, make sure you get one soon to get all future updates for free. You can browse the templates here.

Happy Prototyping!

 Image credit: Edenspiekermann_

When I read Paul Woods’ awesome blog post about how ESPI used Keynote as a design tool, I reached out to him to learn more about the details of his design process. Paul not only uses Keynote as a prototyping tool, he designs websites and products entirely in Keynote, dropping into Photoshop occasionally to create small graphical elements.

The following is an interview with designers Paul Woods and Sarah Lincoln, where they go into more detail about how they use Keynote to prototype and design user interfaces, other tools they use it with, and how they move quickly from design into coding. It’s a 30 minute interview, so you can listen to it on your way to work, or while you exercise.

With Keynotopia 3.0, the answer is YES.

The new update includes hundreds of new royalty-free icons and UI components, as well as thousands of existing components that have been redesigned from scratch to be the perfect size and color, which can be used directly into your mobile or web app without needing to hire designers or spend time redesigning your prototype in Photoshop or Fireworks.

Here are some screenshots from version 3.0:

You can see all the screenshots here.

With this version, the workflow is still fast and simple: create a slide for each interface screen, copy components and icons from a Keynotopia template onto your slides, then add hyperlinks to make the interface interactive. And don’t forget to use master slides to share frequently used components across all screens.

I’ve recorded a new version of my previous video on creating an iOS app prototype in under 30 minutes using the newest templates.

If you like to start your prototype with a wireframe, you can later use the magic shortcuts (CMD+ALT+C and CMD+ALT+V) to turn your wireframe into a final design with a few clicks, by copying and pasting styles from high fidelity components onto the wireframe ones. Here’s a quick video showing that magic trick (process works the same for Keynote and PowerPoint):

So what are the new updates in this version?

- 150 royalty-free toolbar icons in 6 different styles to use directly in mobile and web app prototypes/designs (yep, all these icons are vector shapes designed in Keynote and PowerPoint)

- Thousands of redesigned UI components (pixel-perfect for both size and color), and hundreds of new ones

- New templates for Android and BlackBerry tablets

- Android 4.0 Ice Cream Sandwich (ICS) UI components

- Facebook timeline

- iOS 5 UI for iPhone and iPad, including components for eBook, notification center, and Siri

- Twitter Bootstrap UI components, Facebook Connect, Twitter Connect, and DropBox connect

- Device frames for iPad, iPhone, Android, BlackBerry and Windows phone

As always, these updates are free for all exiting customers, and the latest version can be downloaded through the link in the original order confirmation email.

Don’t have Keynotopia templates yet? Get yours here.

With Keynotopia, Keynote and PowerPoint were transformed into awesome prototyping tools. And with Keynotopia 3.0, they also became your best design tools.

Happy Prototyping!

     Here’s how app switching currently works

     Why is this model broken? it forces me to remember if the app was recently used, and if not, can I locate it quickly on a screen. Depending on my answers, I need to take a different action. I usually start searching in recent apps. If I can’t find it there, I go for search (I’ve got too many apps on my iPhone to swipe through all the screens to find one of them).

     The best way to simplify this model is to introduce the search box in app switching mode: When I double press the home button, recent apps show at the bottom, and a search box at the top. This way, I can find any app using the same action.

Different keyboard layouts on iPhone and iPad

     I use an iPhone and an iPad on the road, and when I switch from one to another, I usually end up using "P" instead of backspace, or the "L" instead of return. Unifying the keyboard layout across iOS devices shouldn’t be that difficult!

Rejecting an Auto-Correct suggestion

I find myself shifting the device in my hand to reject an auto-correct suggestion. And because the suggestion UI is too small, sometimes I end up clicking a link that takes me to a different page, and lose the form data I’d already filled out.

The solution for this one is also simple: add a "Reject" button on the toolbar above the keyboard. This button is accessible without shifting the device or moving the fingers too far to reach out for the tiny auto-correct UI.

Deleting an app

I locate apps using two visual cues: icon color and location on the screen. Whenever I delete an app, icons rearrange themselves to fill the gap, and it takes me a while to get used to the new order. My work-around is bringing another app and placing it in the old spot, but again, that causes the screen that I grabbed the latter app from to rearrange.

I’d rather have empty spots on the screen than having the whole screen rearranged and lose muscle memory. I can then choose to tap on that empty spot to rearrange the screen, or grab an app from another screen to fill in the hole (I will still end up with a hole in the screen I grabbed the new app from, but that’s a compromise that I can live with)

The close button in recent apps

When I switched from PC to Mac 5 years ago, I wondered why that red "close" button on the top left window is so tiny!

UI design 101 states that larger/closer objects are easier to hit than smaller/farther one (known as Fitts Law). For Apple, this is a form over function mistake, and iOS didn’t escape it.

For example, look at the "recent apps" area in app switching mode. I am driving my car, and I no longer need my GPS app to be interrupting my music. Trying to hit that red close button while driving almost got me into an accident. What other action is there to be done on the recent apps’ icons while they are bouncing? Why not make the close icon a bit larger, or make the whole app icon the hit region for closing the app, at least until a new feature is ready to use the full app icon?

Consistency reduces learning curve and contributes to the form factor, but I’d rather have convenience than consistency in this case.

These design modifications were created in a few seconds using Apple Keynote and the iPhone prototyping template

One of my favorite stories about prototyping comes from James Dyson’s auto-biography “Against the odds”. When Dyson became frustrated with his Hoover vacuum, he got the idea of using a cyclonic filter to replace the bag. Late night in his kitchen, he created a prototype using an old vacuum cleaner, cardboard and duct tape. The new filter sucked the dirt from the floor and pushed into the air. The prototype “worked”!

5,126 prototypes later, Dyson had the perfect vacuum.

What Dyson did was inspiring because he assembled a proof of concept quickly, without getting distracted by the detail. He didn’t think about how to collect the dust, how the vacuum would move, or whether a hose connection will work. He wanted to answer one question: “will it pick up dust?”

I receive at least one email a week asking if live data can be used to prototype with Keynotopia, and my answer always is “Why do you need live data?”.

By definition, a prototype is an early “fake” version of your product, and in my experience, fake data always does the job. If you need to show a list of friends, create a random list of names and faces. If you are retrieving a collection of popular dishes, copy the top 10 dishes from your favorite recipe site. And if you already have an API that pulls in live data, do a couple of API calls and hardcode the results into your prototype.

I’ve created dozens of prototypes over the past couple of years, and I’ve always found it possible to do without live data, at least in the idea validation stage.

I think of prototyping as magic: the goal is to create the illusion, and if the illusion works, why waste so much time figuring out how to actually pull a large rabbit out of a small hat?

My prototyping mantra is to first get it done, then get it right. The momentum of having the first prototype soon propels you to create more and better prototypes. Later on, integrate live data when you start coding. But don’t get distracted by the detail too early.

Ever found yourself in this awkward situation?

A friend is asking for your feedback about a prototype that he spent 4 months building, and you’re wondering whether you should tell him how horrible it is, or just smile and encourage him to go on with it.

I’ve been there on several occasions, and that’s why I decided to write this post.

In my experience, here are the six main reasons a user test is doomed to failure.

1: Testing only one prototype

Creating rapid throw away prototypes makes you less emotionally attached to them, and more willing to modify/discard them if you receive negative feedback. You also get better feedback when users can compare different solutions.

Inspired by test-driven development, I often decide what I want to test before I start prototyping. This prevents me from getting lost in the detail or wasting my time adding unnecessary features. I use simple tools, like Apple Keynote, to minimize distractions and shorten the time required to build and test prototypes.

When you test multiple prototypes, make sure you randomize their order to reduce learning effect.

2: Selecting users randomly

Sorry to tell you this, but your mom, your girlfriend, and your buddy are just being nice to you when they say "this looks good!"

Relevant results require relevant users, and to get relevant users, you need a strict filter.

Before posting an ad on Craig’s List, clearly define your selection criteria, create a comprehensive survey and provide a link to it in the post. Then run the ad for a couple of weeks, and pick the best matches for your criteria.

3: Not knowing what to measure

Decide what you will change between different prototypes (the independent variable), and what you will be measuring (the dependent variable).

For example, if you want to determine whether to use list or a map to show search results, the independent variable is the presentation format (map vs. list) and the dependent variable is the time needed to find and click on a specific search result.

Avoid changing more than one independent variable in a single test, otherwise you might not know which variable lead to a specific result. In the previous example, if you show a map on the left in one prototype and a list on the right in another, it might be hard to tell whether locatoin or format made it easier to find the target result.

4: Jumping into the test too quickly

Remember what you’re testing? prototypes, not users. And you need to tell them that!

Before you run a test, give users time to familiarize themselves with the product and the setup. Get them talking, get them comfortable, and reassure them about the privacy of the information you are gathering.

The first test or two will usually help you get a feel for how to run the following ones: Are there common questions you need to address early on? Is your code logging events correctly? Are you measuring the right variables? Are you hiring the right users? Are you asking the right questions?

It’s important to have at least one pilot test to perform all sanity checks, and exlude its results from your final analysis.

5: Focusing only on what users are doing

When users are quiet, they are thinking; they are trying to navigate a mental map they’ve created about your product. They are looking for the next step in that map and trying to find a matching step in your product. They are silently thinking about dozens of questions. Respect their silence and you might be missing great opportunities.

Thinking aloud is one of the best ways to get into the users heads and dive beyond the obvious. Instead of trying to guess what users are thinking, good usability professionals find the right moments to ask users about to think aloud, without interrupting their flow.

I usually record videos of user studies to use as reference alongside event logs. In addition to using them as references, videos are great for compiling a summary of the study to share it with team members. Compiling a 15 minute highlight of the key moments in user tests and showing it to stakeholders often lead to great discussions.
 

6: Not following up

The test is not done when the tasks are over. That’s when users relax and can discuss their experiences with you. That’s your opportunity to get the truth behind the measurements.
 
Prepare a list of interview questions, and create a healthy mix of multiple choice, yes/no, scale, and open ended questions.  Ask about what they found intuitive, what they disliked , what was confusing, and what they would change.

And don’t limit yourself to questions you’ve already prepared; sometimes it’s better to skip some of them to further investigate an insightful answer or remark from a user.
 
In addition to compiling quantitative and qualitative summaries, try to find correlations between these two worlds. For instance, users who said that the app’s menu structure reminded them of Facebook’s navigation model were able to locate items faster.

Good user testing isn’t just about collecting data; it helps you see through data into mental models and goals.

Until recently, I’ve shared my prototypes as PDF files via BaseCamp, Wikis, ProtoShare and email. The challenge has been enabling someone to leave comments or questions on specific screens. People would download the prototype file, annotate it, then email it back to me. It has been inconvenient and inefficient.

Enter iWork.com, Apple’s platform for sharing iWork documents and Keynote presentations. Not only it enables you to upload your docs and set privacy options, people can leave comments on specific screens or start a discussion about the document.

You can also embed your presentation in a [password protected] blog post and start a private discussion about it (see example here)

In presentation mode and embed mode, the slides are clickable (yep, hyperlinks work!). Try clicking through the following prototype (JavaScript required).

This is by far  one of the best (Free) ways to share wireframes and prototypes, and get feedback.

Here are some screenshots

What if you can prototype your next idea quickly and cheaply without using any special wireframing or design tools?

What if you can send your prototype to friends to play with and give you feedback, without having to worry about uploading it to a server or making sure they have the right platform?

What if you can embed your prototype within your product presentation, and click through it to show your audience how it works, rather than overloading their imagination with bullet points?

And what if you can do all this without writing a single line of code?

The challenge with existing prototyping tools is that they require you to become a designer in order to create a good looking, interactive prototype. By taking design out prototyping, you can focus on simply placing components on a page, editing their text, and create links between components and other pages. And contrary to popular beliefs, a prototype doesn’t need to look ugly or rough, especially if you’re presenting it to a prospective client or investor.

The video below shows a sample prototype created using Apple Keynote and Keynotopia‘s iPad prototyping elements, without using additional graphics or tools. You can also see how I am testing the prototype on an iPad, tapping my way through different screens and dialog.

Here are the UI elements I use in that presentation, which were all created in Apple Keynote.

Why use Keynote?

Keynote includes powerful drawing tools, smart guides, styles, locking, and grouping. Master slides make it possible to reuse interface components across multiple screens, hyperlinks add “clickability” to the prototype, and slide transitions create cool interface animations with a single click. Finally, it works seamlessly with Adobe CS apps, so copying and pasting graphics works seamlessly across.

How do you create a similar prototype in 30 minutes or less?

Download the iPad Prototyping template from Keynotopia , and install the file “iPad Prototype.kth” into <UserName> -> Library -> Application Support -> iWork -> Keynote -> Themes. Alternatively, you can double click the file to open it in Keynote, and choose file -> Save Theme. This will create a theme in Keynote that you can reuse to create new presentations, as shown below.

When you create a new presentation based on the iPad Prototype theme, you will see a single black slide. To access the assets, you need to go to the toolbar and click View -> Show master slides.

This will reveal the master slides panel above the slides panel, allowing you to click on a specific master slide and copy/paste assets into your slides.

Step 1: Sketching the user flow

To create your prototype, start by defining the different app screens that you will need 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).

It’s important that you get this diagram right because it will save you time doing modifications to your prototype later on.

Step 2: Putting together application screens

Next, you create a new slide for each screen, and copy/past components from the masters into each slide (Select a master slide > Select an object > Select target slide > paste object). Since all objects were created in Apple Keynote, they are fully editable (resize, change labels, change colors, add/remote elements, etc…). Each object is a group of building blocks that are grouped together. You can either double click on an object to select each sub-object, or ungroup using the Ungroup button on the toolbar, edit sub-objects, then group again. Grouping makes it easier to select and move objects.

Hint: After you’ve created each screen, you may find it at times easier to move the static components of that screen into its own master slide. That will save you time in making modifications in each slide if you decide to change something later.

After creating each screen, you duplicate (CMD+D) slides and add additional elements to them (pop-ups, fill text, …).

Step 3: Adding interactivity

Finally, it’s time to create transitions between screens. You do this by going through your state diagram, and for each slide, select the element that would transition it to another slide. For instance, clicking a picture shows the profile pop-up, so you’d select the profile picture (you can select all pictures in the slide), and in the Inspector -> Hyperlink select the target slide. Do this for every transition that you have in your state diagram. Keynote will add a blue indicator on each hyperlinked element in your slides.

Hint: Keynote is smart enough to know when you rearrange your slide, and will keep track of the right slide you link to even if you change its sequence order.

Test your presentation frequently to double check that you’re hyperlinking the correct slides.

That’s it! You now have an interactive prorotype within your presentation.

Test it on an iPad !

If you’d like to test this prototype with users and see how they’d use it, you need to export it as QuickTime as shown below (This will prevent screens from automatically advancing if the user clicks a spot that’s not hyperlinked. You then open the prototype in QuickTime Player 7, and interact with it.

If you’d like to test the prototype on the iPad, you need to export the prototype as PDF, email it to yourself or put it in DropBox, then open it on the iPad. In the video above, I use GoodReader to show the PDF file.

Hint: Unfortunately, the Keynote iPad app does not support hyperlinked navigation, so if you open this keynote file on the iPad it will only advance sequentially.

Bonus Hint: Keynote has an automatic tweening/animation feature called Magic Move. If you want to have fun by adding animated transitions, fading pop-ups in and out, you can do so by copying and pasting the shape across two slides, select both slides then selecting the effect as shown below. I found this feature to be unpredictable at times.

Final Words

Remember that a prototype doesn’t need to be perfect. It just needs to convey your idea better than your words do. Don’t over-engineer it, and don’t prematurely optimize it. Just put together something that users can see and play with. You will get many more insights than spending hours in focus groups, market research and surveys.

Next time you’re giving a pitch, remember to show more and talk less. If a picture is worth a thousand words, a prototype is worth a thousand pictures.

Creating prototypes is like doing magic: once you understand that all magic happens in the spectator’s mind, you can focus on bringing what matters to the audience. Everything else is a distraction.

If you think this tutorial is useful, or if you have any feedback or questions, leave me a comment below. I will do my best to reply to every single one of them.

Update

Wow! I didn’t imagine when I wrote this blog post that it will generate so much buzz and love in the blogosphere and the Twitterverse. In the past two weeks alone, more than 10,000 people read this post and more than 500 downloaded the iPad Keynote toolkit.

Having received so many requests to create a variation for the iPhone, I spent the past few days creating the most comprehensive prototyping toolkit for Keynote. Over 350 assets total, all created in Keynote. The premise of this toolkit is to help anyone put together an interactive prototypes of their idea and test them with users in less than 30 minutes. The other benefit is to embed these prototypes in product pitches and demos, and be able click-through screens without leaving the presentation.