My OperaInteractive Mockups With OpenOffice
Friday, September 19, 2008 5:52:07 PM
During my work at Opera, I've been looking at various options on how to create simple and fast UI mockups. The basic requirements were simple: The mockups should be easy to create and change ("just like paper prototypes"), but they should also be easy to exchange: between project members, electronically, on different platforms. Ideally, they could also be used for user testing.
While searching the Web, I stumbled upon Maureen Kelly's blog post about creating prototypes in Powerpoint. I'm not using Microsoft Office. I am - and Opera Software is - striving to promote open standards, and I am not necessarily using Microsoft Windows after all. But I found the idea of using presentation software for mockups very intriguing.
I didn't find much information on the Web about people using OpenOffice for the same purpose, that's why I'm presenting my own experiences and findings here. Also, the blog post mentioned above is about creating Web prototypes, while I am focusing creating mockups for desktop programs.
Overview
After having used OpenOffice Impress for some projects now, I must say I like to use it for early and more advanced prototypes, for several reasons. Here are the main advantages:
There's no advantages without downsides. Here's what I've been noticing so far:
How To Start
General Settings
First of all, make sure that the slide show settings are set so that your mockups work as expected: Go to the Slide Show dialog ("Slide Show --> Slide Show Settings"), and make sure that "Mouse pointer visible" is checked and "Change slides by clicking on background" is unchecked. That way, slides will only advance by clicking on buttons or other UI controls that you have set up.
I also find it useful to see guiding lines when moving and aligning objects. To enable them, go to Tools->Preferences, Section OpenOffice.org Impress->View and check "Guides when moving". Also, in the "Grid" section, I prefer to work with "Snap to grid" unchecked, but "Visible grid" checked. Last but not least, I have "Allow quick editing" in the "General" section unchecked. It makes life a lot easier when it comes to selecting small objects.
Controls You Will Need
Now make sure that all the OpenOffice controls that you will need are opened and easy to reach. You will need to create lots of text fields and rectangles, so make sure the "Drawing" toolbar is on (it is at the bottom left, by default). Then you will need to use custom styles, so enable the "Styles" pane ("Format->Styles and Formatting" or F11). Also, show the Tasks pane ("View->Tasks Pane"), as you will need it to use master pages and custom animations later on.
This is the setup that I use.
Mockup Template
As a next step, you will want to create a template that provides you with all the basic UI controls that you will need. It might look very different from application to application, especially if you are developing Web mockups. For a start, you can use the template I created and adapt it to your needs.
UI_mockups.otp
You will find a slide full of image controls you might need (checkboxes, radio buttons, arrows), as well as styles defined for controls like dialogs, buttons, or labels. For easy-to-recognize navigation, I made all clickable controls blue (blue font/frame), you can of course change that as you like. Remember that your mockups aren't supposed to look real. The rougher the design, the more people will focus on the interaction rather than graphical details.
To find your custom styles, go to the "Styles" pane, select "Graphics Styles" (as opposed to "Presentation Styles", and only show custom styles.
Create Interfaces
To create your user interfaces, simply create rectangles and text fields and apply the custom styles. To create a button, for example, create a new rectangle, double-click it to add the button text, then double-click on the "Button" style in the "Styles" pane. Styles can also be applied to images, so if you want to create a button with an icon on it, just insert the icon and apply the 'Button' style to it.
Here's a sample dialog created using the custom styles from the template:
Add Interaction
Before you make your controls interactive and clickable, you need to give your slides useful names. To do so, select "Rename Slide" in a slide's context menu in the "Slides" pane. This is important, as slides are connected using the slide names, and changing slide names afterwards will therefore make your interactions stop working.
To add interaction, select the element - a button, for example - and select "Interaction" in its context menu. If necessary, press ESC to get from text editing mode to normal selection mode beforehand. In the "Action at mouse click" field, select "Go to page or object" and select your target slide.
Make Your Life Easier: Master Pages
Master pages can be used for two different purposes in your mockups:
To make a master page out of your slide, select all elements on the page and copy them. Then go to "View->Master->Slide Master", create a new slide there and paste all your elements.
Animate
You can also do more fancy stuff by using animation. You can pop things up or simulate a delay. To do so, select "Custom Animation" in an item's context menu (or go directly to the pane), and add your animation there. To simulate delay, create an "Appear" animation, start it "With previous", go to the Effect Options dialog ("Properties" section), select the "Timing" tab and add a delay there.
Tips & Tricks
Summary
OpenOffice impress gives you an easy and easily exchangeable way to create simple mockups. They are great to make sketches and for heuristic evaluations. As they are not 100% interactive, they might not be ideal for user testing. Also, be aware that they should stay simple. Otherwise, you put a lot of energy into something that does not give you much benefit.
While searching the Web, I stumbled upon Maureen Kelly's blog post about creating prototypes in Powerpoint. I'm not using Microsoft Office. I am - and Opera Software is - striving to promote open standards, and I am not necessarily using Microsoft Windows after all. But I found the idea of using presentation software for mockups very intriguing.
I didn't find much information on the Web about people using OpenOffice for the same purpose, that's why I'm presenting my own experiences and findings here. Also, the blog post mentioned above is about creating Web prototypes, while I am focusing creating mockups for desktop programs.
Overview
After having used OpenOffice Impress for some projects now, I must say I like to use it for early and more advanced prototypes, for several reasons. Here are the main advantages:
- It is easy and quick. Prototypes are created within minutes, and can be easily changed on-the-fly, also during UI discussions of small groups of people.
- It is interactive. You can create click-through interfaces that feel "almost real". You can even use animations to simulate delays and pop-ups. That way it is easy to see if certain parts of the interface are missing, and if there are hick-ups in the interaction flow.
- It focuses on interaction rather than (graphic) design. It is contextual or, as Maureen Kelly puts it, "low-fidelity". As the UI controls are simple shapes, you're not inclined to focus on design decisions where you should rather focus on the basic interaction flow.
- It is easy to distribute. OpenOffice is available on many platforms, and many people already have it installed (especially here at Opera). So many people can work on it. And for people who just need to look at it, you can export the fully functional prototype as PDF or HTML. And the cool thing is, the exported PDF is still interactive (only animations don't work).
There's no advantages without downsides. Here's what I've been noticing so far:
- Limited interaction possibilities. Interaction is fine as long as it is simple mouse clicks. If keyboard input (short-cuts) or right/middle mouse clicks are required, it doesn't work. So it's great for cognitive walkthroughs, but probably impracticable for user testing.
- Limited re-sizing capabilities. Resizing a dialog, for example, takes more than just re-sizing one item. With clever grouping of element it can be done fairly quickly though.
- Some OpenOffice bugs/inconveniences. So far I've discovered: animations aren't copied with objects. I opened a bug about that. Copying complete slides is a workaround. Also, "go to slide" is always linked to the name of the slide. Master pages can't be copied. And interactions are linked so slide names rather than slides: if you change slide names later on, your interactions won't work any more.
How To Start
General Settings
First of all, make sure that the slide show settings are set so that your mockups work as expected: Go to the Slide Show dialog ("Slide Show --> Slide Show Settings"), and make sure that "Mouse pointer visible" is checked and "Change slides by clicking on background" is unchecked. That way, slides will only advance by clicking on buttons or other UI controls that you have set up.
I also find it useful to see guiding lines when moving and aligning objects. To enable them, go to Tools->Preferences, Section OpenOffice.org Impress->View and check "Guides when moving". Also, in the "Grid" section, I prefer to work with "Snap to grid" unchecked, but "Visible grid" checked. Last but not least, I have "Allow quick editing" in the "General" section unchecked. It makes life a lot easier when it comes to selecting small objects.
Controls You Will Need
Now make sure that all the OpenOffice controls that you will need are opened and easy to reach. You will need to create lots of text fields and rectangles, so make sure the "Drawing" toolbar is on (it is at the bottom left, by default). Then you will need to use custom styles, so enable the "Styles" pane ("Format->Styles and Formatting" or F11). Also, show the Tasks pane ("View->Tasks Pane"), as you will need it to use master pages and custom animations later on.
This is the setup that I use.
Mockup Template
As a next step, you will want to create a template that provides you with all the basic UI controls that you will need. It might look very different from application to application, especially if you are developing Web mockups. For a start, you can use the template I created and adapt it to your needs.
UI_mockups.otp
You will find a slide full of image controls you might need (checkboxes, radio buttons, arrows), as well as styles defined for controls like dialogs, buttons, or labels. For easy-to-recognize navigation, I made all clickable controls blue (blue font/frame), you can of course change that as you like. Remember that your mockups aren't supposed to look real. The rougher the design, the more people will focus on the interaction rather than graphical details.
To find your custom styles, go to the "Styles" pane, select "Graphics Styles" (as opposed to "Presentation Styles", and only show custom styles.
Create Interfaces
To create your user interfaces, simply create rectangles and text fields and apply the custom styles. To create a button, for example, create a new rectangle, double-click it to add the button text, then double-click on the "Button" style in the "Styles" pane. Styles can also be applied to images, so if you want to create a button with an icon on it, just insert the icon and apply the 'Button' style to it.
Here's a sample dialog created using the custom styles from the template:
Add Interaction
Before you make your controls interactive and clickable, you need to give your slides useful names. To do so, select "Rename Slide" in a slide's context menu in the "Slides" pane. This is important, as slides are connected using the slide names, and changing slide names afterwards will therefore make your interactions stop working.
To add interaction, select the element - a button, for example - and select "Interaction" in its context menu. If necessary, press ESC to get from text editing mode to normal selection mode beforehand. In the "Action at mouse click" field, select "Go to page or object" and select your target slide.
Make Your Life Easier: Master Pages
Master pages can be used for two different purposes in your mockups:
- Background. If your mockup is showing a dialog and you want to put a screenshot of the actual program in the background, use master pages for that. That way you don't have to put the image on every single page, and the image won't get in your way when selecting/moving mockup elements.
- Avoiding redundancy. If you create highly interactive mockups where many slides look almost the same, put the basic UI on a master page and add the changing bits to the actual slides. Actions also work when they are on the master pages.
To make a master page out of your slide, select all elements on the page and copy them. Then go to "View->Master->Slide Master", create a new slide there and paste all your elements.
Animate
You can also do more fancy stuff by using animation. You can pop things up or simulate a delay. To do so, select "Custom Animation" in an item's context menu (or go directly to the pane), and add your animation there. To simulate delay, create an "Appear" animation, start it "With previous", go to the Effect Options dialog ("Properties" section), select the "Timing" tab and add a delay there.
Tips & Tricks
- Use the first slide as an entry point to your UI. You might have different slides that might be the first ones for the user to see, depending on pre-conditions. Link them from your first slide.
- OpenOffice allows you to create custom presentations. So if you want to present the main parts of your UI to somebody else, without showing all the steps, and leaving out the interaction, you can do so. Check out "Slide Show->Custom Slide Show" in the menu. You can also hide slides (in the slide's context menu).
- Use lots of grouping, it will make your life easier. Group all your dialog elements into one group, and you will be able to move your dialog around. You can enter your groups with double-click (or "Enter Group" in the context menu). You can also have groups within groups.
Summary
OpenOffice impress gives you an easy and easily exchangeable way to create simple mockups. They are great to make sketches and for heuristic evaluations. As they are not 100% interactive, they might not be ideal for user testing. Also, be aware that they should stay simple. Otherwise, you put a lot of energy into something that does not give you much benefit.
