wireframes & usability

Want to be a prototyping superstar? We’ve been making tutorial videos with all our secret hints and tips to help you get the most out of Pidoco. Watch how to use our latest accordion stencil or see how to create a popup in your prototype. You can watch all of these on our YouTube channel. Just click the subscribe button to make sure you don’t miss any of our new releases!

This is our image tutorial video, which shows how you can upload and crop images in Pidoco.

Of course if you would like to talk to an expert from Pidoco, we offer free online demonstrations. Just fill out the contact form and let us know when would be best for you. We’re based in Berlin, so we’re free Mon-Fri 9:00 – 19:00 (CET).

Do you have any suggestions for future videos? We’d love to hear from you. Just comment below!

Too many people think that creating prototypes is a quick fix to ensuring that a final application will be user-friendly, but the truth is that prototyping tools can only take your project so far. To create successful functioning applications, you must first take some basic steps to get the most out of this valuable design process.

1. Know your purpose
Whether you are sketching out paper wireframes or want to create a higher fidelity interactive mockup, you should have a clear mindset of what you want to achieve from prototyping and what the requirements of the application are that you are prototyping.

2. Get your team involved
Prototyping is a process that does not require programming. This means that anyone you think can bring value to your concept should be involved in the creation process. With collaboration, you can get the perspective from different teams, which will help you look at your concept objectively.

3. Communicate
There are so many possibilities nowadays for communicating, wherever your stakeholders are. Make sure that you take advantage of this. With prototyping software, you can comment in the prototypes to show where you want to make changes, or to make things clearer for others.

4. Be critical
It might be that your design doesn’t make the cut. Often you have to balance the needs of the client with those of the user. This can make design a difficult task. Try to be objective when you look at your prototypes. Remember honesty early on in the development process pays off.

5. Experiment
Prototyping is the most cost-effective part of your design process, so take advantage of this. Create multiple wireframes to show your stakeholders. Remember these can be used in A/B testing later. Another advantage is that it can be easier for your stakeholders to articulate what they want when they are given options.

6. Consider your use cases
Too many times people create prototypes without considering the actions and processes of the user. Use cases can be drawn up quickly and often put in a diagram, so you can think about the different functions your users will want to carry out. For more information on use cases, click here.

7. Carry out user testing
Even with use cases, you will often be surprised by how your user responds to your UI. Whether you choose to carry out remote user testing, or watch your user click through the prototype in front of you, it’s invaluable to see how your user interacts with your design.

8. Think of the next step
Remember that your prototype will be used as a blueprint for other designers and programmers. Make sure this is a useful guide for them and be aware of their requirements for the prototype.

9. Document your processes
This is especially important if you are working for a client. A specification document of a prototype is a record that both parties can refer to. This means that if your client demands more features, you can make it clear that this is outside the initial agreement.

10. Don’t throw your wireframes away
Not all wireframes and prototypes should be discarded after a project. You may end up working for the same client again, or want to take ideas from your existing prototypes. Remember, it can be nice to take a basic existing prototype so you don’t have to start with a blank page in your next project.

Do you have any great prototyping tips I have missed? Feel free to comment below.
 

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.

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.

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.*

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.