Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 19 2011

17:14

Designing Pop-Ups Easily in Pidoco

KISS – “Keep it short and simple.” This is the mantra behind Pidoco, and it is the reason why we have avoided cluttering the tool with complexities like page states, panels and so on for simple things like creating pop-ups. Meanwhile, there is no reason why you should not use pop-ups in your prototypes. In fact, there are strikingly easy ways of creating pop-ups in Pidoco without complex, intransparent functions. And here is how you do it.

The trick is using two pages and two layers. In one of my earlier blog posts I talked about how to work with global layers in Pidoco. This is one situation where they are particularly handy. In order to create a pop-up in your prototype simply follow these steps:

1. Create the page on which you want the pop-up to appear.

Creating a new prototype page in Pidoco to design a wireframe

 

2. Create a layer for the page content and use it to design the page. You will need to put all stencils that will be covered by the pop-up onto this layer.

Placing elements on a layer of a Pidoco prototype.

Place the page content on an extra layer.

 

3. Create a second layer for the pop-up. Design the pop-up on that layer, e.g. using a rectangle in which you place the content of the pop-up. Once you are done with the pop-up, make sure to de-select the layer in My Global Layers.*

Creating a second layer in the UI prototype for the pop-up.

Create a second layer in your prototype to design the pop-up.

 

4. Once you are done with this, go to the Prototype View and duplicate the page.

Duplicating the prototype page in order to create a second prototype page with the pop-up.

Duplicate the page to create a page that will contain the pop-up.

 

5. Now open the copy and activate the pop-up layer. Then link up the “pop-up page” with the original page and vice versa. Voilà, done!

Linking the two wireframes to be able to navigate between the prototype pages and simulate the pop-up.

Link the two prototype pages together to simulate the pop-up.

 

This simple recipe will allow you to create functioning pop-ups without resorting to complexities such as panels, states and the like. Instead of using a panel, you simply will have two pages. Easy, isn’t it?

You can also use the pop-up method to create lightboxes. Simply start the pop-up layer with a rectangle whose fill color you set to semi-transparent. This is easily done through the context menu. Make sure the rectangle covers the entire page. Now you can lock the rectangle in place and continue designing the lightbox content.

So, how about you? Have you tried to figure out how certain things are easily done in Pidoco? Let us know below!

 

* Remember: You can order global layers in the My Global Layers panel by dragging them to the desired spot. The layers are displayed in the order in which you place them, i.e. the top layer will show up on top of all the others. For the pop-up layer to come out on top make sure that the pop-up layer is placed above the layer with the page content in the My Global Layers list.

March 30 2011

13:34

Feature Snapshot: Working with Layers

Layers in Pidoco are a fantastic way to save time when creating and adapting prototypes. Many already know layers from software programs like PhotoShop. Pidoco features a similar concept that allows users to group and re-use elements, but with one crucial difference: Layers are global in Pidoco.

Image of Global Layers list in the Pidoco Prototyping Software for Interface Design and Usability Engineering

Global Layers are a great way to save time when creating prototypes in Pidoco.

Global Layers are templates that can be reused within a prototype. You can hide and unhide them on any page of a prototype. This means that a layer can be created for the menu bar and website navigation and subsequently be used on all pages with one simple click. This way parts of a website or a web app that appear often do not have to be recreated for every page. In addition, different sections of a page can be compartmentalized into different layers in relation to tasks. An example of this is a webpage with different panes.

Layers in Pidoco are global meaning that any edits made to a layer while on a particular page will affect the layer on all other pages of the prototype where the layer is activated. This is a very handy feature when it comes to adapting a prototype or trying out UI design alternatives: Simply make a copy of the prototype and change the original layer to reflect the new concept. Or create an alternative layer in the same prototype and unhide the original one on those pages where you want the changes to be effective. So here’s how it works.

 

Creating Global Layers in Your Prototype

Layers can be created easily within a prototype when you are in the Page View, i.e. after opening any page of the prototype. To create a new layer in your prototype simply click on the “Create” button in the My Global Layers panel on the right hand side of the screen. Voilà! Doing so will generate a new global layer that will appear as a new entry at the top of the list of layers in My Global Layers. To rename the layer double click on it in My Global Layers and enter the desired name in the text field that appears.

Image of how to create a new layer for a Pidoco prototype to speed up the interface design process.

Creating a new global layer for your prototype takes just one mouse click.

The new layer will automatically be shown on the page you have opened and will be pre-selected so that you can start editing the new layer right away. Layers can be edited in the same way that you would edit the page: Simply drag the UI elements (stencils) from the Stencil Palette on the left hand side onto the layer. You can group them, align them, change attributes, or link them up with other pages. Once you’re done editing the layer, simply switch back to the page by selecting the page above the My Global Layers list.

Image of how to edit a global layer in a Pidoco UI prototype via drag and drop.

With the drag & drop function, editing layers is just as easy as editing pages.

By the way, you can edit any layer that is part of the page you’re on by selecting it under My Global Layers. If you want to edit a layer that is not active on the opened page you have to first display it by selecting the checkbox or switch to a page where it is already in use.  At this point it is good to remind yourself that layers are global and that any change will affect all pages throughout the entire prototype on which the layer is displayed.

 

How to use layers

Let’s say you’ve just created a few new layers, for example for the main navigation of your website or the utilities. You can now use them on any page of your prototype without having to redo the work. To display (or unhide) and use a layer on a page, open that page in the Page View and select (activate) the checkbox of the desired layer. Doing so will make the layer visible on that page.

Image of an active layer in a Pidoco wireframe showing the UI of a travel website.

Layers can be added to prototype pages by simply activating them via the checkbox.

All layers that are visible on the page are marked by a check in the checkbox in the My Global Layers list. Hidden (inactive) layers appear without a check. To hide a layer from a page simply do the reverse: Open that page in the Page View and deselect (deactivate) the checkbox of the desired layer in My Global Layers. Doing so will make the layer invisible on that page. Remember you cannot edit a hidden layer.

Image showing active and hidden layers on a page of a wireframe prototype created in Pidoco's interface design software.

The My Global Layers panel lists all available layers. Simply select the ones you need on any page in your prototype.

This of course also works not only for the navigation of a website, but also for footers, side menus and various other items that you want to re-use. Layers can also be used to model various states of the same page. Say, for example, you wanted to distinguish between the homepage of a web portal before and after the user has logged in. Simply create two layers for the different states of the utilities and/or navigation and duplicate the homepage. Display one layer on each page. Since the links on your layers are also global, you can even include different navigation paths using this method.

 

Managing Layers

All layers available in a prototype are listed in My Global Layers panel on the right-hand side of the prototype while in the Page View. There is no natural hierarchy among layers, but you can order them by dragging them to the desired position in My Global Layers with your mouse.

Image showing how to sort global layers in a Pidoco UI prototype using drag and drop.

Ordering layers is easy and quick in the My Global Layers list via drag and drop.

The top layer in the list will be displayed on top of all others, and so on. Note that the page entry above My Global Layers is not a layer, but represents the page you are on. Elements contained directly on the page will be displayed on top of all layers.

So, this gives you a brief idea of what layers can do for you. Have you tried the layer feature yourself? We’d love to hear about your experience.

About Feature Snapshots: Feature Snapshots address topics that are essential in the daily work of interface designers and all those using wireframes for professional purposes. As such, they are intended to help you learn how to tackle such challenges using Pidoco. One of the key benefits of prototyping is the possibility of working with design alternatives to find out which best suits business and user needs. This particular Feature Snapshot is about working with layers in Pidoco and how it can support the iterative design process.

November 06 2010

00:39

Feature Snapshot: Embedding Prototypes in Office Documents

Pitching an idea or concept for a new website or application to your client is not only about understanding what your client wants, but also about developing a presentation that allows you to demonstrate that your product will satisfy your client’s requirements.  Delivering a good product presentation is the art of convincing clients that your work is worth their time and money. Unfortunately, it can be a real hassle to update a presentation if you change your mind about a key aspect of the concept, especially when you are using images of the user interface to visualize key ideas or scenarios of use in your presentation. And the same problem often arises again when you have to update a presentation or specification document after receiving feedback from a client.

Pidoco offers an easy solution to this problem! The Direct Link feature allows you to continually update images of your prototype within various office documents, for example a PowerPoint presentation.  This gives users the ability to update office documents to the most recent version of a prototype without the hassle of using copy and paste on each individual image.  Using the direct link feature users can embed links to various prototypes within a presentation and then send the file to clients or colleagues for documentation or reviewing.  The embedded links will appear as graphics of the related prototype in the document.  Unlike static images, however, the embedded images can be updated with just one mouse click, sparing users from the unfortunate job of having to manually exchange old images versus newer ones, one by one.  Updating the embedded links synchronizes the images in the document with the current version of the Pidoco prototype found online thereby ensuring that the latest changes are automatically incorporated into the presentation.

Step 1: Extracting a link from Pidoco

Image 1: The direct linking dialogue window.

Using embedded images with Pidoco prototypes is easy. Here’s an example of how to use the direct link feature with Microsoft’s PowerPoint software. In order to embed a direct link into your PowerPoint presentation you must first extract a link from Pidoco. To do this, open your Pidoco prototype.  Go to the Screenflow View of your open prototype and open the page that you want to embed into PowerPoint.  Then point at the “Share” button in the Toolbar and click on the “Get a link to this Prototype” option. You will see the dialogue window shown in image 1.

Copy the link located in the text field marked “PNG”.  This is the link you will embed into PowerPoint.

Step 2: Embedding the link into PowerPoint

Image 2: Inserting a direct link into a PowerPoint presentation

After you have copied the link to your prototype from Pidoco’s website, you can embed it into an opened presentation. Go to your PowerPoint presentation to complete the embedding process. Open the “Insert” option located on the Office Toolbar and click on the “Picture” option as shown in image 2:

Image 3: Using the dropdown menu options to embed a direct link

Once you have clicked on the picture option, the following “Insert Pictures” options will appear (image 3):

Image 4: The result: A neatly inserted image of the prototype that can be easily synchronized with the original prototype

Paste the link into the text field labeled “File Name”.  Then open the dropdown menu of the “Insert” button, and select the “Insert and Link” command.  The image of your prototype will appear in the selected slide of your PowerPoint presentation, as can be seen in image 4:

Step 3: Synchronizing Prototype and PowerPoint Presentation

Now that you have embedded the image it is easy to synchronize the presentation with the most current version of your prototype. To do so, click on the Office Button and point to the “Prepare” option.  Click on “Edit Links to Files” (image 5):

Image 5: Easy synchronizing of presentation and prototype with one mouse click

Clicking on this option will automatically update your presentation to include the most recent state of the prototype created in Pidoco.

Benefits of the Direct Link Feature

Summing things up, Pidoco’s Direct Link feature is a fast and easy way to keep your files up-to-date even when your prototypes change frequently, which often happens in early design phases.  This will help you communicate and share information better with your clients or colleagues and will minimize the time you spend on updating presentation and specs.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl