How To … Insert Links Into Text Elements

A while ago, we added a new text stencil to Pidoco that makes editing text much easier than before. With the new text stencil, you can insert links to other pages or external URLs directly into your text. Today, I want to show you how…


Step 1: Insert a text element

Let’s start off by dragging a text stencil from the palette to the canvas. Once you have placed the stencil, a toolbar will appear directly above the text, allowing you to format the text. You can immediately start typing or pasting copied text. When you are done, click outside the text stencil

Insert the new Text Stencil

Inserting a text element into a prototype

Hint: The width of the text stencil will adapt while you type. If necessary, you can resize it manually.


Step 2: Link (a part of) the text

Linking to another page: Once you have entered your text, select the text or text elements, that should become the link, with your mouse. In the toolbar, click on the arrow next to the field “Insert link”. A dropdown menu will open and let you select the page of your prototype you wish to link to. The linked text will be underlined.

Create a link to a prototype page

Creating a link to another prototype page


Linking to external content: To link text to an external website, select the text to be linked and type the URL of the website into the field “Insert link” in the toolbar.

Create a link to external content

Creating a link to an external website

Hint: To remove a link, select the linked text and click on the “Remove link” icon right next to the “Insert link” field.


What do you think about the new text stencil? Drop us a comment here or via FacebookTwitter or Google+ or contact us via We are looking forward to hearing from you!

Happy Prototyping!

Merging Web and Mobile Prototypes

At Pidoco we constantly work on improving your prototyping experience by listening to your feedback. One frequent question has been “Why is it not possible to design web and mobile prototypes in one project?”. Well, your wish is our command, we have merged mobile and web prototypes, and here it is: the all-in-one prototype!


What’s new?

As of today there is no functional differentiation between web and mobile prototypes anymore. This means you can create pages for all kinds of devices and screen sizes in just one prototype. The change reflects recent design trends, namely it will allow you to prototype responsive designs much more easily.

The new all-in-one prototype makes things a lot easier: Now when going to My Prototypes, there will only be one button to create a new prototype. While you can still pick a default page size when creating a prototype, you don’t need to worry about whether you want your project to be a mobile or a web/desktop project anymore. A click on the button will immediately open the new prototype in the Prototype View. Hovering over the button will let you pick a default page size by selecting your standard device (web/desktop pc, smartphone, 7″ tablet or 10″ tablet). Naturally, you can still adjust each page’s demensions in the prototype, but the default page size will reduce manual work.

Select your prototype to get a pre-defined page size

Merging of web and mobile prototypes: The new all-in-one prototype


Another great thing about the new all-in-one prototype is that the elements in the mobile and web/desktop stencil palettes have been combined to give you a much wider range of building blocks for your prototypes. This also includes options like rounded corners in you prototypes.

Additionally, the simulation in the Pidoco app, which is available for Android and iOS devices, has been enabled for all your prototypes, even for the previously created web prototypes. This also means that the mobile sharing option is now available for all prototypes, no matter when they were created.


What stays?

Well, and what about all the good old web and mobile prototypes you have created? Don’t worry, all the prototypes you have created before the arrival of the all-in-one prototype are not affected by these changes. They are still labeled with the tags “Web” or “Mobile” in My Prototypes to make them easy to identify. You will, however, see more stencils in the palette when you open them.


How do you like our recent update? Drop us a comment here or via FacebookTwitter or Google+ or contact us via We are looking forward to hearing from you!

By the way, did you know that you can submit your ideas in the Pidoco Forum? Simply make a suggestion and all other users can vote on it. Our developers will comment and keep you updated on the status of your suggestions.


Happy Prototyping!


PS: You are not a Pidoco user, yet? Why not register for a free 31-day trial today?

Inline Editing And In-Text Linking With The New Text Stencil

For a while now, one of our most frequently requested features has been a text stencil that’s easier to handle. Today we’re proud to say: Voilà, here it is! As off today, creating prototypes in Pidoco will be even easier than before, with a text stencil, which is more powerful, easier to use and, most importantly, includes new functions like inline editing and linking.


What’s new?

Inline Editing: Up until now, editing text in Pidoco required you to open a tiny text editor window in which you could edit the text, but you would only see the final result after closing it. With the new text stencil, you can now enjoy direct in-place editing of your text elements, which lets you see formatting and other changes as you type.

With the introduction of the new text stencil, we are also getting rid of the distinction between “Plain text” and “Styled text”, a choice you had to make before. From now on there will only be one type of text that can do it all. Now, when adding a text stencil to your canvas or editing text, a toolbar will appear directly above the text, giving you easy access to all available formatting options.

Inline editing with the new text stencil

Inline editing with the new text stencil – all options at your finger tips


In-Text Linking: The new text stencil makes it easier to place links into your prototypes by allowing you to directly insert a link into any part of the text. You can either link to other pages of the prototype by picking a target page from a dropdown or link to an external URL.

New Formatting Options: The new text stencil also comes with a range of new formatting options, including:

  • using underlined text in addition to bold or italic text
  • adding text highlighting in addition to changing font color
  • aligning of multi-line text.

Improved Auto-Sizing: Another novelty is the auto-resizing of text elements. The new text stencil automatically adapts its width while you type and has been optimized to require less manual resizing. Of course, you can still resize texts manually, if you need to.

Format your text and directly see the results

Improved text formatting with font color, highlighting, in-text linking and alignment options


Optimized Output: Finally, we have also reworked both the simulation of the prototype and the specification export to make your work shine.

The reworked specification export

Our optimized specification export makes your work shine.

The above improvements also apply to text-base stencils like headlines, text blocks, or links, which are now based on the new text stencil and can be edited with only a few clicks.


What stays?

All your previously created prototypes, using the old text stencil and the text types “plain text” and “styled text”, will still function like before and remain unaffected by the recent improvements, save the optimized simulation and exports. Existing text elements can still be edited like before. All new text elements, however, will be created using the new text stencil.

What do you think about the new text stencil? Drop us a comment here or via FacebookTwitter or Google+ or contact us via We are looking forward to hearing from you!


Happy Prototyping!

Top 5 Things Prototyping and Playing With Toy Bricks Have in Common

Think of the hours you’ve spent sprawled on the floor constructing your own toy brick masterpiece. Now think of the last time you transformed one of your ideas into a prototype. Notice any similarities? Well, while interlocking various bricks and adding elements to prototypes recently, I noticed that both have much in common. Here are my Top 5!


1. No limits

Let’s face the obvious: toy bricks are accessible to everyone. There is no such thing as a limit. There’s no restriction to age or skills, even though there are different sets and special editions available, including rather complex or technical lines. Basically all you need to have is the fascination for toy bricks. The rest is easy and comes from learning by doing.

Prototyping is quite the same. While there may be differences between prototyping at different levels of detail (low vs. high fidelity), prototypes can generally be created quickly and intuitively with the right prototyping tool. So you don’t need any specific skills, especially no programming skills. When creating a prototype maybe the only limit is your imagination…

See how to use the Pidoco prototyping tool


2. Creativity

With toy bricks it is virtually impossible to exhaust your creative potential. Toy bricks bubble over with versatility. Every set consists of specific toy bricks. Although they usually come with instructions you can follow step by step, nobody keeps you from doing it your own way. So you can go ahead and invent your own construction, mix bricks from various sets or even build an entire house. Just create your very own masterpiece!

A entire house made of toy bricks

Prototyping represents the same kind of creative process. Working with a prototyping tool gives you a ton of creative freedom. Although most prototyping tools come with a predefined set of elements, such as buttons, menus, combo boxes, video bars or plenty of icons, they hardly limit you in what you can build. By combining elements in new ways or by adding interactions, device motions or touch gestures, new possibilities open up. It doesn’t matter whether you are prototyping a website, mobile apps or a piece of traditional software.


3. Iteration

Playing with toy bricks, no doubt, is great fun, but probably one of the main reasons you spend hours searching for the right brick while letting them prick your knees or feet, is that you simply like creating things. Thanks to this passion, you can build objects that are not just a quick construction, but may include highly-specialized technical details. As with almost all things, your best constructions probably involved a lot of trial and error: constructing, de- and reconstructing your object until you were happy with the result.

Mocking up a future product is quite the same iterative process. You may be a creative whiz, but most prototypes will take a number of iterations before they pass the usability test. With the right prototyping tool, this will be no problem at all, since it will let you go through various versions of the prototype, allowing you to modify and redo certain parts without having to do it all over again. In the end your prototyping masterpiece will likely meet UX requirements and exceed customer expectations.

Keyboard built with toy bricks


4. Speed

One of the most amazing things about toy bricks is the interlocking! Not only that you can virtually use them forever, as they will still interlock with the newest pieces, even if bought many years ago, you can also put the bricks together really fast. It only takes a few minutes to pile up your bricks and to plastically present your latest idea.

Prototyping is quite similar! The predefined building blocks found in good prototyping tools allow you to mock up an idea with only a few clicks. Even adding interactivity or animations to breathe life into your prototype can be done in a few minutes. Often, this is much faster than coding it. But the real time-saver is when you need to adapt a prototype due to changing requirements or feedback from usability testing: Instead of having to rewrite your code, you can simply move elements around, add or remove a page, relink and voilà – there’s your new version.

Prototype of the Brick Store

Prototype of the Brick Store


5. Teamwork

Playing with toy bricks is a great way to spend a day – no matter if you are a child or a grown-up. Most of all, toy bricks are a multiplayer activity bringing together friends and family. That’s basically the same with prototypes. By sharing them with your colleagues or other stakeholders, the whole product family gets united on the virtual play carpet. Not only can people easily get directly involved in the prototyping process, enabling them to put thoughts into images rather than just words), but everyone can also easily understand the prototypes, which empowers them and fosters vivid dialogue and discussions on the work in progress – usually leading to better results.

Unlimited collaboration
Unlimited collaboration with unlimited options
(Photo by designmilk, 2013. under the terms of the Attribution-ShareAlike 2.0 Generic)


You’ve created a interesting prototype or brick toy construction? Let us know on Twitter, Facebook or Google+.

How To … Work With Screenflows

Screenflows are a great way to visualize the structure of your prototype. Screenflows allow you to create maps of multiple pages in order to demonstrate navigation paths, site maps or workflows. They can also facilitate the creation and organization of your prototype as they allow you to focus on specific use cases and quickly see how pages relate to each other. So here is how it goes …


Step 1: Create a screenflow

Simply put, a screenflow is a selection of pages of your prototype, i.e. a subset of all available pages. You can manage and create screenflows from the Prototype View. To create a new screenflow, click on the “New” button.

Create a screenflow within the Prototype View

Creating a new screenflow from the Prototype View


Step 2: Edit the screenflow

In order to edit the screenflow, double-click on it. This will direct you to the Screenflow View where you can add, arrange and link pages. To add a page, simply drag it from the My Pages panel on the left and drop it into the editing panel in the middle. You can arrange pages by simply moving them with your mouse. To remove a page from the screenflow, use the “Hide page” button in the Context Menu.

Add all previously not used paged to your screenflow

Add all previously not used paged to your screenflow

Hint: If you want to use all the pages of your prototype, click on “Add all unused pages”. Each page can only be used once per screenflow. Pages you have already included are greyed out.


Step 3: Link pages and create maps

Screenflows are a convenient way to link the pages of your prototype. To do so, select a page and all linkable elements will be highlighted (Note: elements that may contain multiple link targets must be linked directly in the Page View). Now drag any highlighted element onto the desired target page to create a new link. Use the “Remove link target” button to break unwanted links. Yes, it’s that simple.

In order to create a map that shows connections between pages, you can choose to display relevant links in the screenflow. To do so, select a page and you will see all existing links as little grey arrows going to and from the page. Use the “Show arrow” and “Hide arrow” buttons to pick which links should be visible in the map.

Show linked pages within the Screenflow View

Screenflow showing a map of linked pages

Hint: Double-click any page in the screenflow to edit it.

That’s it! You have successfully created and edited a screenflow!


Do you need help creating screenflows? Just send us a message via or FacebookTwitter or Google+.

Happy Prototyping!

Top 5 Things Prototypers Can Learn From Football!

It’s this time of the year again! It’s the BIG BOWL GAME DAY! Tonight the New England Patriots will fight against Seattle Seahawks. While we at Pidoco are still placing our bets and discussing which company will place the most awesome ad, we also noticed some similarities between creating a prototype and playing the perfect match. Wait, you think football and prototyping don’t have anything in common? Think again because as a “prototyper” you can learn a lot from it. Here are our Top 5!


1. Tactical creativity
Whether it’s matching day or the day you start creating a prototype, you need to have an idea of what you are going to do and what the final result should look like. So you start scribbling down your ideas for a prototype. This will help you to get a clearer structure of your prototype and its content. Whether a greenhorn or an expert, you, your product manager or whoever is in charge have to find out if there are already competitors out there and what their products’ core features are like. From that, you can chart out your strengths and figure out how to improve potential weaknesses.

Create you creative tactic

Develop a creative tactic

The coaches Bill Belichick of the New England Patriots and Pete Carroll of the Seattle Seahawks can, of course, draw back on a very long NFL career; nevertheless they have to do their homework as well and do what every coach has to do: find the strengths and weaknesses of their teams, train players to improve their skills, build up strong offensive and defensive lines, encourage the players and of course, finally create the perfect tactic for the final matching day by monitoring every little step of the opponent.
Whether you start from scratch or are already an experienced superstar, all the creativity and tactics are important, but you need to be able to adapt to suddenly arising chances and maybe even rebounds. It’s an ongoing iterative process.


2. Collaborative sportsmanship
Best results can only be achieved when working together. That’s nothing new, but something really important. Of course, you need a coach, a quarterback or a designer, product manager etc. to strive forward, but creating a competitive product is like building a strong backfield – it only becomes a bastion if you really work together.

Collaborate with your team members

Collaborate with your team members

When prototyping you can try sharing your prototype with others to get feedback or work on solutions collaboratively in real-time. So, you see … whether you are part of the Patriots or the Seahawks or of an app development team, it’s all about exchanging ideas and talking about strategy, tactics and all the many details.


3. Impressive interactions
Rather than coming along with fancy details, especially early prototypes can fully rely on simplicity, simple colors, simple structures and even placeholders instead of detailed content. Nevertheless this doesn’t mean that you have to leave out important, unique core elements. In prototypes you might create a simple black and white wireframe, but since especially mobile applications are about interactions, touch gestures or screen transitions, exactly those interactions shouldn’t be ignored. So with only a few clicks, add interactions to an element (e.g. a swipe gesture), define corresponding system reactions (e.g. a pop-up opens) and voilà, you breathe new life into your simple prototype and impress without much effort.

Set the reaction to a action

Bet on interactivity

It’s the same with a football match. Honestly, we all know this and have seen quite a lot of those matches: They didn’t look that nice and mainly showed very simple maneuvers or “impressed” with rather unspectacular moves over quite a long time. But there are those moments, when the crazy snap frenzy suddenly starts and e.g. Tom Brady or Russell Wilson see their chance, get the ball from the center, immediately plan a spectacular move, outmaneuver the opponents defense or pitch the ball backwards to a running back or even crazier run the ball themselves and serve a nice quarterback sneak. A perfect way to describe an action-reaction-chain consisting of “only” a few moves!


4. Entertainment
Football matches are not only about tactics, collaborating and interacting. Of course they are just as much about entertainment! Certainly, the teams will present themselves in the best possible way and will work extremely hard to finally get the Vince Lombardi Trophy. However, the Super Sunday, especially for the viewers, is also about being entertained by the expensive commercials excelling themselves, and of course by the music acts appearing during pre-game or halftime ceremonies. It’s all about having the perfect night, fun and the perfect presentation of everyone’s skills.

Entertaining interactions

Entertaining interactions

The same applies for your prototype. Once you are done with all the preparations and ready to present it to the decision makers it’s often all about top or flop. So you need to impress. And you can easily do this by simulating your prototype on the device it should finally be used on. Let’s say, you created a prototype to be used on a tablet, well simply simulate it on one! Even better: if you built a location-based service app, you could embed a map into your prototype and set the interaction such that e. g. a pop-up window appears on the screen once you have reached a specific spot. So why not invite your audience for a stroll around the city and they will certainly be impressed by your new LBS app. Or add some music for instance to add to the entertainment.


5. Result-oriented discussions
To be honest, the more people are involved, the more opinions rise up. Sometimes this can be really awkward and it’s not always easy to deal with it, especially if you don’t or can’t agree on something. As a prototyper collaborating with various people you are certainly familiar with discussions about things like the size of a button, the position of an image or even the shade of green. But especially when simulating your prototype, everybody can get a realistic impression of the final result and you can steer discussions by focussing your prototype on the most critical aspects of the project. Sometimes less is more, and eventually the perfect position and size are found. You can take this even further: why not invite test users to work with your prototype and ask for their feedback and the experience they had? The aim should be clear: result-oriented discussions will definitely help you create a better product.

Taking home the Vince Lombardi Trophy is THE goal for the New England Patriots and Seattle Seahawks on Sunday. We can all guess how many discussions on tactics, analyses etc. this involves.

Discuss the results

Discuss the results (Photo by Johntex, 2005. under the terms of the GNU Free Documentation License Version1.2)

No matter which move is made, which player makes the deciding touchdown, everything will be strictly monitored and heavily commented on especially by the fans. We are all quite good at that, aren’t we? But even if we root for the same team, it doesn’t necessarily mean that we have the same opinion, and we can certainly support different tactics or know more effective moves.

Probably, the only way to avoid discussions is to be around people sharing your thoughts. But in this case, whether you are the coach, a team member, the prototyper, the product manager or the viewer etc. a vivid and constructive weighing of all options, what-ifs or (missed) chances and opportunities would disappear – and with them also the praise and celebration. Wouldn’t this be boring?

Finally, who will win tonight? Well, we are still undecided, but to make your choice a little easier, here are some facts on the finalists …

The finalist check: New England Patriots vs. Seattle Seahawks.

The finalist check: New England Patriots vs. Seattle Seahawks.


What do you think which team will win? Let us know on Twitter, Facebook or Google+.

How To … Adjust the Screen Size of your Prototypes

Today, most websites and apps need to work on various screen sizes, including those of smartphones and tablets. Responsive design is therefore one of the hot topics in UX. With Pidoco you can prototype for multiple devices – all in the same project. All you need to do is to set the desired screen size for your prototype pages. Here’s how to…


 1. Web prototypes

When creating a new web prototype, you will start out with a default page size of 960 x 1000 px. To adjust the page size open the page’s context menu (e.g. by clicking on the “Options” icon or by right-clicking on the page) and change the “Width” and/or “Height” values in the Properties tab. Pidoco will automatically remember these settings and apply them to new pages.

Page dimensions of prototypes are easily adjusted via the page's context menu

Page dimensions of prototypes are easily adjusted via the page’s context menu

Hint: Aside from using the breadcrumb navigation as shown above, you can also access a page’s context menu from several other places, including the Page View, Prototype View or the Screenflow View.

Adjust the page dimensions of web prototypes via the Page View and the breadcrumb navigation

Example of the page context menu as accessed from the Prototype View


 2. Mobile prototypes

Mobile prototypes come with a selection of common screen sizes, like smartphone (e.g. for iPhone or Android apps) or different tablet sizes, but of course you can set your own size. When adding a new page, you can select the desired screen size from the “New” dropdown in the toolbar. The default is 320 x 568 px (a smartphone screen in portrait mode). To adjust the page size simply open the page’s context menu and change the “Width” and/or “Height” values in the Properties tab.

Other available pre-defined screen sizes are:

  • 7″ tablets (600 x 800 px) in portrait and landscape formats
  • 10″ tablets (768 x 1228 px) in portrait and landscape formats


Adjust the page dimensions of mobile prototypes (via the Page View)

Mobile prototypes offer a range of pre-selected default page dimensions for various devices


That’s it! You have successfully resized your prototype pages!

Do you need help resizing your prototype pages? Just send us a message via or FacebookTwitter or Google+.


Happy Prototyping!



PS: If you are not sure which sizes are best to use, here is a quick overview on the commonly used dimensions of websites. listed the page widths of widespread websites. For instance Facebook and LinkedIn have a fixed width of 980 px, whereas Bing comes along with 970 px and YouTube with 961 px. In terms of the height, 600 px marks an imaginary line from which on a visitor is likely to begin scrolling. According to and, optimizing your page for a resolution of 1024 x 768 px will guarantee a trouble-free scrolling for the majority of your visitors.

In terms of mobile devices, this is tricky as there are many different old and new devices out there. Here collected some useful information as you can see from the image, and presents a list of the physical and CSS values of various mobile devices, tablets and phablets.

However, when creating a new prototype, use page dimensions you expect most of the visitors to be using. In this case, it is recommended to do some research in advance.

How to … Edit Menus, Tables and More (Pidoco Syntax)

In Pidoco you can easily edit elements using a specific notation, which is actually similar to what is commonly referred to as the wiki syntax. You can find this notation in stencils like the TableMenu or Tree view as well as in the (un)ordered List. This post explains how to create and configure these elements. Here is how it goes …


1. In General

In Pidoco, stencils that contain textual content (e.g. menu, tree view, lists or even simple text) can be edited in order to alter that content and replace it with your content. To edit an element double-click on it and a simple text editor will open. But there’s more: When editing the content of certain elements in Pidoco, the Pidoco syntax allows you to tell Pidoco how you want the content to appear in your prototypes. For example, you can set formatting options by adding certain characters or symbols to an element’s content. The following conventions apply for all stencils that offer this option:

  • Adding entries: Each line in the text field represents one entry and starts out with a specific symbol, e.g. an asterisk (*) or a hash character (#).
  • Structuring entries: For stencils whose entries possess a hierarchical structure, the number of symbols marks the hierarchical level of the entry, e.g. one symbol stands for a top-level entry, two for a sub-level entry or three for a sub-sub-level entry etc. To add an entry, simply go to a new line and type your entry, preceeded by the appropriate number of symbols and a space.
  • Linking entries to a prototype page: Links are marked by brackets around the linked entry ([]) and the ID or URL of the link target immedialy following the opening bracket (Example: * [page0001 First Entry]). In this example, “page0001” is the page ID and “First Entry” the actual entry that will be visible in the prototype. Note: There’s no space between the opening bracket and the link target. Let’s assume you have already typed up the various entries of the stencil: To link an entry, highlight the entire entry you wish to link up and choose the target page from the dropdown menu shown in the text editor.
  • Linking entries to an external URL: The syntax is the same as for a link to a prototype page, but instead of the page ID, the external URL is written after the opening bracket.


2. Notation examples

a) Menu

In the Menu stencil each line represents one specific entry marked by one or more asterisks, depending on the level in the hierarchy. Only the top-level entries (one asterisk) are visible in the prototype, until the user opens the menu to display lower level entries. To add a new entry, go to the respective line, enter the asterisk(s) at the beginning, add a space character and type in the text of the entry, e. g. * Home. To link to a page within the prototype highlight the entire line and choose the desired target page from the drowdown of the text editor, for instance [page3243 Home]. To link up external content, paste the URL instead of the page ID, e.g. *** [ Stencil].

Notation specific for the menu stencil (incliuding internal and external links)

Notation specific for the menu stencil (including internal and external links)

Hint: Don’t forget the space character between the asterisk(s) and the opening bracket and between the page ID/external link and the name of the target page. If you cannot see all of menu entries in the menu, try to resize the stencil as it may require more space.

The formatted menu stencil (in the Simulation View)

The formatted menu stencil (in the Simulation View)


b) Table 

The Table stencil contains data structured in rows and columns. As usual, each row equals one line of text. The columns are marked by vertical lines | as a separator (also known as “pipes”). If you add a new row, remember that each row starts and ends with a vertical line that together represent the outer border of the table. To add a column, use the pipes and don’t forget to leave at least one empty space before and after each pipe, e.g. | Rank | Page | Impressions |. Each cell in the table therefore has an “opening pipe” and a “closing pipe”. Hint: Rows can have different numbers of cell entries, but the number of columns in the table is determined by the row with the highest number of cell entries.

You can also format the font style and alignment of the table entries. To display an entry in bold enclose the text with an asterisk (*), e.g. | *Rank* | *Page* | * Impressions* |. To align the text, enter one of the following letters directly following the opening pipe of a given cell without a space: c. to center the text, l. to align left or r. to align right.
|c. 1 |l. Home |r. 1,333,000 |.

To link a cell entry to a page within the prototype, select the entry and choose the target page from the dropdown of the text editor, e.g. |r. [page3243 Home] |. To link to external content, insert the URL instead of a page ID.
[ Stencil].

Notation specific for the table stencil (including formatinng)

Notation specific for the table stencil (including formatinng)

Hint: Don’t forget the space characters! Add one before and after each pipe. To leave a column blank, just put a space between two pipes (| |).

The formatted table stencil (in the Simulation View)

The formatted table stencil (in the Simulation View)


c) Unordered and Ordered List

In the List stencil each line represents one specific entry either marked by asterisks if you use a unordered list or by hash characters if you use an ordered list.

Notation specific for the ordered list stencil

Notation specific for the ordered list stencil

Hint: Don’t forget to add the space characters after the * or # !

The formatted ordered and unordered list stencil (in the Simulation View)

The formatted ordered and unordered list stencil (in the Simulation View)


d) Tree View

In the Tree View each line equals one category, sub- or even sub-sub-category. This hierarchy either starts with + or – , depending on whether a category is initially open (and can be collapsed, thus showing a – ) or closed (and can therefore be opened, thus showing a +). To add a new entry, go to the respective line and type in + or – at the beginning. Then add a space character and type in title of the entry, e. g. + Content. To link an entry to a page within the prototype, select the entire entry and choose the target page from the dropdown menu, e.g. – [page3243 Home]. Pasting a URL instead of a page ID will create a link to external content.
++ [ Stencil].

Notation specific for the tree view stencil (incliuding internal and external links)

Notation specific for the tree view stencil (including internal and external links)

Hint: Don’t forget to add the space characters after the + or – !

The formatted tree view stencil (in the Simulation View)

The formatted tree view stencil (in the Simulation View)


That’s how easy it is to quickly turn menus and other stencils into interactive elements! Do you need help with the Pidoco syntax? Just send us a message via or
FacebookTwitter or Google+.


Happy Prototyping!

EU changes applicable VAT

As of January 1, 2015, European Union regulations, in particular the so-called “VAT Directive”, require that suppliers of electronic services such as Pidoco charge value-added tax (VAT) according to the customer’s country of residence (place where the recipient is established) instead of according to where the supplier is based. This applies for all our customers who are not based in Germany, but are a European taxable person (e.g. a non-business customer). If you are currently using Pidoco on a subscription and are not a business, i.e. you do not have a European VAT ID, this may affect you.


So what does this mean for me?

If you are currently using Pidoco on a subscription, are not based in Germany and have not supplied a valid VAT ID to us, your current plan will be subject to a different VAT rate starting on January 1, 2015 (unless your country of residence happens to have the same VAT rate as Germany). Any renewals after that date will carry the VAT of your country instead of the currently charged 19%, the VAT rate currently applicable in Germany. Unless you are using PayPal to pay for your subscription (see below), there’s nothing you need to do. We will automatically adjust your subscription and invoices at the first renewal on or after January 1, 2015. If you need to take any action, we will notify you in advance.

Sounds complicated? Here’s an example! Let’s say, you live in France and are on a Starter plan, which renews every month. Currently we are charging you VAT according to the German rate of 19%. So you are paying: 12.00 Euro + 2.28 Euro (19%) = 14.28 Euro. As of January 1, 2015, we will have to charge you according to the French VAT rate of 20 %, because you are based in France. Hence the invoice amount will change to: 12.00 Euro + 2.40 Euro (20%) = 14.40 Euro.

Of course, the new rates will also apply to any new purchases made on or after January 1, 2015.


Paying via PayPal? 

If you are using PayPal as payment method for your subscription you will need to authorize the new subscription value directly on PayPal before the next renewal of your subscription and will be notified separately via email.


Are you a business?

If you are a business and qualify for participation in the reverse charge scheme, you may supply us with your VAT ID number in order to be able to use Pidoco under the reverse charge scheme and avoid any VAT charges from our side. Please send your VAT ID to including your registered email address as well as your customer ID, which you can find on your invoices.


If you have any questions, please contact us at or +49 30 4881 6385.


Happy Holidays!

Your Pidoco Customer Service

How To … Create A Linkable Menu

The menu is a commonly used UI element that facilitates navigation through the pages of an application. The menu stencil is one of the core stencils in Pidoco. Today I want to show you how easy it is to create such a menu. So here is how it goes …


Step 1: Create pages

First, create the pages that the menu stencil will link to.

Screenflow showing a menu serving as navigation element

Screenflow showing a menu serving as navigation element


Step 2: Add menu stencil and content

Now add the menu stencil from the Stencil Palette and place it in the desired position. Usually, you will want to include the same menu on all of the pages it links to, so consider placing it on a layer. (Here: I placed on the menu on the layer called “Header”.)


Adding the menu stencil to a prototype


When dragging the menu to your page, the text field will open directly. But to edit the content you can also double-click on the menu. The menu stencil comes with a few default entries. Each line represents a different menu entry marked by asterisks. One asterisk represents the top level of the menu, which is visible at all times (e.g. * File). Two asterisks represent the first level of sub-entries, which are only visible when the user hovers her mouse over the menu in the simulation (e.g. ** New file). Three asterisks respresent sub-sub-entries, and so on.

You can add more entries to any level or replace existing ones using a new line and the right number of asterisks for each. Entries will appear in the order you specify, but at each given level, only the corresponding entries with the right number of asterisks will be visible in the simulation.

Hint: If you add entries to the top level (1 asterisk), you may have to resize the menu stencil to see all of them on the screen.


Step 3: Insert links

To link a menu entry to a page in your prototype select the entire entry with your mouse and choose the desired target page from the dropdown menu above. The dropdown includes all pages you have created so far. Selecting a target page will insert brackets ([ ]) around the menu entry (also called the anchor text) to signal that it is now linked up and add the ID of the target page after the opening bracket (e.g. page0001). Make sure not to introduce spaces between the target page ID and the bracket, erase page IDs or change the position of brackets and spaces when you edit the menu because this may break the links.

Linking up individual entries of the menu via the text field and the dropdown menu

Linking up individual entries of the menu via the page dropdown


Hint: You can also link to external URLs. To do so replace the target page ID with the desired URL, leaving the brackets intact. Be careful not to leave a space after the opening bracket.


That’s it. You have successfully created your first linked menu!

Do you need help with the menu? Just send us a message via or FacebookTwitter or Google+.


Happy Prototyping!