Clickable App Prototyping with Microsoft PowerPoint (2024)

Designing the user interface (UI) is arguably the most important process of the app development lifecycle. It includes not only the visualization (layout of buttons and images) but also the logical flow of actions that it takes for a user to go from one screen to another. That is why creating a UI mock-up of your final product is so important for prototype testing. In fact, it can even be presented to investors before your app goes into development.

This tutorial will teach you how to use Microsoft PowerPoint as an effective tool for creating UI/UX mock-ups. By the end of the tutorial you will know how to play with Shapes to create and simulate buttons with transitions from one screen to another. I will demonstrate this by recreating the basic functionalities of my favorite to-do list app, Wunderlist.

The storyboard for this to-do list app is quite simple. The first screen is the menu of to-do lists. When the user clicks on one of the lists, the app transitions to another screen with a new interface that now shows the tasks for that list (e.g. Groceries).

Note that I’ll be using a Mac for this tutorial so the PowerPoint may look a little strange for all you PC users. The same options will be there; you just have to do a little digging.

Open Microsoft PowerPoint. Go to Google and search for an image of the phone you want to do prototyping on. Save the image. Insert it into the first slide in PowerPoint by pressing Insert, selecting Photo, and then selecting Picture from File. Scale and move accordingly to center it on the slide.

Next, insert an image you would like as the app background. Using the crop option, cut away the sides of the picture until the final image matches the screen size of the phone.

Voila! You now have the basic infrastructure for your app. Before we move onto the next step, which is creating the interface and overlaying it onto the background, I recommend duplicating this slide to create a template. This template will be used as the background for all the screens, so don’t make any changes to it.

Do this by selecting the slide in the left panel, right click and copy and paste.

The interface of the screen is just a layout of buttons and images in free space. Let’s skip the profile picture and dive straight to the menu of to-do lists. Go to Insert and click on Shape.

Select the square shape and make a rectangle that covers about 2/3rd of the screen, like the Wunderlist example. With the shape selected, find the Fill option in the toolbar and change its color to one you like. If the shape has a border, find the Line option and select No Line (unless you want a border).

Lower the transparency of the rectangle to give it a nice fancy look. This is not necessary, of course.

Now, let’s add a couple to-do lists. Click on Insert and select Text Box. Create the text box within the white rectangle. Type in a name for the to-do list and adjust the color and font to your desire. Alternatively, you can add a box shape and do the same thing.

Tip #1: You can add icons by either using symbols in PowerPoint or by downloading free icons off the web. To access the first option, insert a Text Box. Press Insert and select Symbol and then find an icon to your liking. For the second option, you can find many free icons on the web, for example here. These come as picture files so you will have to insert them as images into the slide.

Next, let’s create the interface for the to-do list “Groceries.” Select the template slide that we created in the left panel and duplicate it (copy and paste). Just like the previous steps for creating the menu interface, use the same skills of inserting shapes or text boxes, setting transparency, and changing their fill and text colors to reproduce the second screen of the Wunderlist example.

Tip #2: Use copy and paste to quickly duplicate a shape that you made a lot of changes to.

Tip #3: Use the up-down-left-right arrow keys to fine tune the location of the shape.

At last, we reach the fun part where it all comes together. Go to the first slide that has your menu of to-do lists. Select (left click) one of the text boxes (e.g. Groceries list). Right click on the text box to reveal a set of options and select Action Settings.

The Action Settings menu pops up. Select Hyperlink to: and select Slide….

Select the slide where your second screen is. Recall that this second screen is the slide you created with the interface that displays the tasks for the selected to-do list. In my case this is slide 2. Once selected, press OK, and then OK.

We are now ready to play the app to make sure that pressing on the Groceries to-do list works correctly. Click on Slide Show and select Play from Start. This will put your PowerPoint into Presentation mode, which is the mode you want for users to interact with.

Move your mouse around until you see your cursor. If you hover above the to-do list that you adjusted the Action Settings for (e.g. Groceries in my case), you should notice your cursor turn into a finger press icon, indicating that you can press on that shape. If the finger press icon doesn’t come up, you should still be able to press it.

Notice what happens when you click on it. The presentation transitions from this slide to the other slide you designated as containing the interface with the list of tasks.

Congratulations! You have successfully created the basic functionality for a button and the subsequent transition of one screen of the app to another.

You can continue this exercise by repeating these steps for the Back button on the second slide, which will return the user back from the list of tasks to the menu of to-do lists.

Tip #4: Exit presentation mode and return to the PowerPoint slides by pressing the Esc key.

PowerPoint has a lot of other functionalities, such as animations and graphs, that can enhance the user’s experience with your prototype. Whether you want to make a news app or a weather app, what you can design in PowerPoint is really up to your imagination. Keep me posted on how your prototyping goes, and good luck with the rest of your app development!