Nifty UI/UX Prototypes with Microsoft PowerPoint

Have some good ideas, and want to see how these ideas might work out? But do not want to go into a full fledged UI/UX design, what would you do?

We generally start with paper sketches, and move to a low fidelity design before embarking upon a grand UI/UX exercise. There are times when one may need something better than paper prototypes, to bring our the life in the prototype.

Microsoft PowerPoint is a wonderful tool for creating rapid UI/UX prototypes.

Setup

First thing to do is to avoid the default transition in PowerPoint, i.e. slide transitions through arrow keys and clicks.

Go to Slide Show → Setup Slide Show and change the show type to Browsed at a Kiosk (full screen)

Set Show Type

For Screen Size, 16:9 ratios are generally good, it is the default in PowerPoint 2013 and 2016. You may want to check your screen size in the Design → Slide Size

Select 16:9 Ratio

Screens (or Slides!) and navigation

Set the layout of the slide to blank and build your screens using shapes, storyboards and clip arts.

To set up navigation add hyperlinks to any object on the screen by right clicking on the object and setting the links. I use a transparent blue coloured boxes to indicate hot spots and add hyperlinks to the boxes.

I generally do not use too much animation, I find them quite distracting.

Tips for linking

Since the slides are blank, when we try to link we see references to the slides as Slide 1, Slide 2, etc. For smaller projects this may be fine, but for larger projects proper slide names will be helpful.

To add names (title) to the slides, select outline view from view menu or you can toggle it in the bottom bar (View → Outline) . In the outline view click next to the slide and add a meaningful name.

Outline View — Click and add title

One immediate problem is that, the title is placed inside the slide and it obstructs the screen. Move the title to the top of the slide as shown in the picture below.

Move title to the top of the title, outside the view.

Interaction

Core of the interaction is done through hyperlinking. Add transparent coloured boxes on areas in the slide to indicate hot spots and add hyperlink to create a transition from one slide to another. Please note that these transparent boxes need not be added, I find them helpful since the boxes provide visual clue for hot spots.

Insert Hyperlink — Named Slides help identify the right slide for linking.

Result

Voila, a quick and clean way to create nifty low fidelity UI/UX prototypes.

The Result

Conclusion

The technique is not limited to Microsoft PowerPoint, it can be done on Keynote, Open office presentation or possibly even on Google presentation. I found PowerPoint most powerful and easy to use. Also PowerPoint 2016 has a great Story boarding feature allowing creation and sharing of visual components for prototypes, a very good feature to have indeed.