PowerMockup, A New Tool for Low Fidelity Mockups
Agile teams seeking to deliver a high quality user experience often create mockups of varying fidelity to hone in on an appropriate design prior to coding (e.g. prior to sprint/iteration planning). PowerMockup is a new product for those seeking to create low fidelity mockups using a tool they are already familiar with, PowerPoint.
Low fidelity mockups, often called wireframes, are intentionally basic, often consisting of just black and white shapes and text. The lack of color and texture is intentional as it puts the focus on usability, functional design and flow instead of esthetics like color and font. The simplest technology for creating wireframes is paper and pencil, which suffers from a few flaws, including: it is time consuming to create even a basic page layout, updates are difficult, and there is no easy way to share a design.
To fill the gap, digital tools like Balsamiq Mockups, were created. With Balsamic Mockups you can create and manipulate a wireframe that for all intensive purposes looks like it was hand drawn with a felt tip pen. Many also use an old standby, PowerPoint, applying the standard built in shapes to create something that resembles a web page. All digital tools have advantages over pen and paper, including greater speed in modifying a mockup, consistency across mockups, and ease of electronic sharing.
PowerMockups is a new entrant that adds interface elements (shapes) to PowerPoint, allowing many to use a tool they already know. Features include:
- 78 fully editable user interface elements
- 84 wireframe icons
- Compatible with PowerPoint 2007 and 2010 for Windows
Interface elements include basics like a browser window, text box, message box and button, along with many others. They are organized on a ribbon bar into containers, navigation, text, graphics and icons. The interface elements for navigation are shown in the image below.
The interface elements are designed to simplify the creation of mockups, and they can be mixed with, and manipulated like, the built in PowerPoint shapes. To create dynamic representations you can use standard PowerPoint functionality to create slides shows or add links between pages. You can also use static representation to show flow and functionality, as in the following example.
Find out more at the PowerMockup website.
PowerMockup is a fantastic UI Mockup Tool
One challenge with defining UI Storyboards in PowerPoint however is the ability to define "alternate" flows of user interaction in addition to the main flow. Use Cases have the concept of main flows and alternate flows, but UI Storyboards are stuck in one dimensional main flows only, which leads to duplicating UI Designs across a lot of UI Storyboards that have some common steps. Sure you could take those common steps out and reference them in separate document, but that just leads to a maintenance nightmare as things change, not to mention making it harder for your stakeholders, testers and developers to understand the flow easily.
To address this problem and others you might want to look at PowerStory (www.power-story.com)which allows you to define main flows and alternate flows (sequences) of slides in powerpoint, basically means you can have your BAs or Product Managers define Use Cases within PowerPoint and then have your UI/UX team add UI Mockups for each step in the main and alternate flows to create the UI Storyboard.
In Addition PowerStory will generate a test case for each unique path through the combinations of main flow and alternate flows, and save these test cases into Team Foundation Server (TFS).
PowerStory ensures your use cases, ui mockups, ui storyboards and test cases all communicate the same requirements.
Combining PowerMockup and PowerStory will give you an easy and rapid way to evolve use cases into UI Storyboards while ensuring they stay in sync, as well as save significant project budget automating the creation of test cases.
Yoni Goldberg Oct 30, 2014
Dmytro Svarytsevych Oct 30, 2014