wireframes & usability

Our new editor design finally went live this weekend! We hope you like our fresh new look and take advantage of its new features. We’ve updated the ‘My Prototypes’ section, where you invite others to view, review and collaborate on your prototypes. In the prototype creator itself, we have included new stencils (such as the much-desired “accordion” stencil – thanks to your feedback!) and updated our export function, so now you can specify the components to be included (or excluded) from your Word and PDF exports.

Our new UI design

To find out more updates about Pidoco, find us on facebook or follow us on twitter!
Until next time, Happy Prototyping!

Do you want to save time in your projects? Do you want to reuse elements of your prototypes and ensure that your work is consistent? At Pidoco, we’ve added a new feature, which can help you save time when you create your prototypes. We’ve introduced “Custom Stencils”, which enables our users to edit and group stencils together as templates to reuse when they want.

Custom Stencils are perfect for reusing navigation bars, login fields, footers and any other reoccurring content in your projects. What’s more, any changes you make to your Custom Stencils will be carried out wherever you have used the stencil in your project. With this feature you can save time and ensure consistency throughout your projects.

Custom stencils saved in stencil palette

Here is an example: I have used the Custom Stencils feature to create a template for a group of stencils that occur several times in the profile page of my Social Network prototype. This way I have been able to create a consistent layout, so that my image holder, text block and like button remain in the same relation to one another. Because custom stencils are saved at the left of the screen in the stencil palette, I can simply drag and drop my custom stencils into the page.

Create a custom stencil for your prototype by selecting a few stencils

You can create a custom stencil by simply highlighting a selection of stencils, opening the context menu and selecting ‘convert to custom stencil’. After converting the group into a custom stencil it appears in the stencil palette under “Custom Stencils” and can be used like a regular stencil. A custom stencil includes the customized information you have included in your stencils and also saves how the stencils are positioned in relation to one another.

Did you know: Another way to create templates in Pidoco is by using the global layer feature, which allows you to create positioned layers that you can re-use on any page in your prototype, for example to create the main navigation of an online shop.

The Custom Stencil feature is available with our Classic and Expert plans. We hope you can save time in your projects by using Custom Stencils. Watch this space for information on more updates to our product. Happy prototyping!

Have you checked out our new folder system yet? At Pidoco, you can now use folders to organize your pages, stencils and layers. This is a great way to help you keep track of your work, especially if you’re working on a big wireframe project. You can organize your work thematically, or according to the navigation of your site. You can also create subfolders, which is great if you have lots of content in your project. Some people create different pages in Pidoco to show the different states of a wireframe, such as when a popup is used. With Pidoco’s new folder system, you can then group your pages in the same folder or subfolder to help you keep on top of your work. The new breadcrumb navigation system shows you which folder you are currently in just like when you use your computer’s file system. This makes it easy to see exactly where you are in your prototype and move to other folders and pages.

Selecting prototype folder via the new breadcrumb navigation

Using folders with Pidoco is easy. To create a new folder, simply click on the plus sign next to the “Folders” label in the Prototype View. This will take you straight into your new folder. From here you can add new pages, subfolders and other elements. You can name folders and add existing pages to your folder by clicking on the context menu of your page and selecting a folder in the parent folder category. You can select multiple pages by holding the ctrl key and clicking the pages you want to organize in the folders.

In the example below, you can see that I have created a folder called “Home” in my Social Network project. I can now organize my page into the folder “Home” or into one of its subfolders (shown by the ‘/’ symbol).

Organizing pages into folders using the context menu of a page

We hope our new folder system will save you time and make your prototyping even quicker than before by helping you organize your projects. Watch this space for more information about new features. Happy prototyping!

At Pidoco, we’ve updated our navigation system. We’ve made it even easier for you to move between the pages and layers of your prototype, helping you get to the parts of your project you need quickly and easily. We have now included forward and back buttons to help you go back to the previous view of your prototype, just like in your browser bar.

Moving to a new page in your prototype

We’ve introduced a breadcrumb system, which enables you to see where you are in your prototype at any time. Boxes will appear at the top of your screen showing you which prototype, folder and page you are working from. These are clickable, which means if you are working from a page, you can go back to these sections. When you hover over the arrows in your breadcrumbs, a menu will also appear. You can then use this to switch to a different page or layer in your prototype, without having to go back to the prototype view. This is a fantastic feature, which should make finding your pages even easier.

The breadcrumb navigation in our prototype creator lets you see what global layer you're working on

Thanks to another great feature we have added, you can work on different pages of your prototype in different browser tabs. What’s more, if you do this, the tabs in your browser will be clearly labeled to show what pages or layers you are working on. In your browser, you will then be able to change the order of your tabs to suit you and use shortcuts to flick through these tabs. To open a page in a new browser tab, simply click on the page whilst holding down the ctrl button. You can also click on the special icon in the breadcrumb menu. With Pidoco, you can save the URLs of these tabs for the next time you work on your prototype. What’s more if you send the URL to someone collaborating with you on a prototype, they will also be able to open this page automatically.

These are just some of the new features we’ve added to make working on your prototypes even easier. We hope you enjoy working with our new navigation system. To see how the new Pidoco navigation system works, you can also check out our YouTube video! Pidoco explained: the new breadcrumb navigation pidoco

Pidoco and ScatchApp are joining forces to help our users make the most of paper prototyping. While Pidoco is a great tool for creating UI prototypes of websites and software applications really easily, we still find that some of our users prefer to create their initial designs on paper. To help our users save time and money, we are working with ScatchApp to see if we can make it easier for our users to transform their paper wireframes into interactive software prototypes. We believe ScatchApp is a great tool that will help our users create prototypes even faster than before and take advantage of the great collaboration and testing features Pidoco has to offer. ScatchApp has won several awards and is a triple Startup Weekend winner of Szczecin 2011 due to its innovation merging the boundaries between paper and computer.

How does ScatchApp work?

ScatchApp works by using unique technology that can recognize the layout and features of paper wireframes. ScatchApp can recognize components such as text boxes, headlines, buttons and image place-holders, which is great, whether you are creating flowcharts or wireframes. Uploading your designs with ScatchApp is easy. Simply draw your sketch on a piece of paper using the relevant symbols, take a photo with your mobile phone and upload the image to ScatchApp. Within seconds, your design will be transformed into a digital wireframe that you can edit online in Pidoco. ScatchApp even aligns the individual elements in your design, giving you a clean, professional-looking layout.

We've sketched out a paper wireframe of the Pidoco home page
that we will upload with ScatchApp.

How will you be able to use ScatchApp with Pidoco?

Here’s an example of how to use Pidoco in connection with ScatchApp. We understand that some people like to sketch out their ideas on paper first. Some even find this helps them be more creative. Naturally, paper has its limitations and even the best paper wireframes cannot produce the same results as prototyping with Pidoco. In addition, paper prototypes cannot be adapted or shared easily. In the example above, you can see that we’ve sketched out the layout of the Pidoco home page. In the picture below, you can see what the finished product will look like in Pidoco once this has been uploaded into ScatchApp. The buttons, text boxes and image placeholders appear in the same visual layout as in the sketch.

Now we've uploaded our sketched wireframe to Pidoco,
we can edit our prototype and add interactive elements.

In Pidoco we can now link and edit these pages. With Pidoco you can also collaborate on prototypes online in real-time and even use your prototypes in usability testing. What’s more you can discuss your prototypes with colleagues online. Using ScatchApp with Pidoco therefore enables you to model your UI designs with paper and pen, while making the most of all the great features of digital prototyping that Pidoco has to offer. If you would like to learn more about Pidoco have a look at our website, or if you would like to learn how to program your own application against the Pidoco API, take a look at our documentation here.

We’re looking for web developers, freelancers and interns in software programming and marketing. If you would like to work for a fun and exciting startup email us at info@pidoco.com. For more information go to https://pidoco.com/en/company/jobs.

We would love to hear from you!

As already mentioned in our previous blog post about the new navigation that we implemented, there were a few new features that had to be finished before we can continue deploying the new version of pidoco. That is also the reason why we weren’t able to deploy this yet, since the features first had to be tested and stabilized to include them into this new preview. Up to now we have finished four out of the five open issues that we mentioned in the other blog post:

Navigation to other pages

We added a little menu to each breadcrumb that opens when you hover over the little grey arrow as shown in the screenshot. It lists all the elements on the same level and you can pick one to switch to that view. We also added a button that opens the desired view in a new browser tab such that you then can easily switch between several views. This way, navigating through your prototype should be as fast as before.

Folders

You can now add folders to your prototype where you can put anything inside. This allows for better organization of all the pages, layers, etc that your prototype contains. In order to move an item to a different folder, use the context menu. A drag and drop moving into a folder has not been implemented yet.

Custom stencils

We already have layers to reuse groups of elements across several pages, but they are always at the same position. From now on you can convert a group of elements into a so called custom stencil that then appears in the palette and can be added anywhere in your prototype. You can add several instances of it to the same page, you can choose different positions, and any change will automatically be applied to all the instances.

New visual design

Since it already took longer to implement things up to now, we skipped this part and will change the design in one of the next versions.

Stability

A whole lot of bugs have been fixed already, but there are still some left to be fixed. As long as we are not satisfied with the quality we won’t deploy the new version. However, it shouldn’t take very long anymore until we reach that point.

Let us know what you think

We would love hearing from you what you think about this new version! If you have any suggestion or feel that there is something important still missing, please don’t hesitate to get in touch with us.

• Chat with us.
• Feel free to send us a tweet: @pidoco
• We are happy about any email we receive: support@pidoco.com
• You may even give us a call: +49 30 4881 6385

Many thanks for your support!

It has been three months ago that we added the pidoco Mobile Edition for you to create specific iOS prototypes, which you can run directly on your iPhone or iPad using our new apps. Since then we were discussing with Apple to get our iPhone app into the store. Today, we’re happy to announce that the app finally is available in the App Store!

When you search for it you may notice that we have a Pidoco app that is for 99 cents and a Pidoco HD app that is for free. You may ask, why you have to pay for the app? Unfortunately, Apple’s App Store policies prevent our app from being free because pidoco° itself is a paid service. So, for your benefit, we chose the minimum possible price. With the iPad version of our app we were just lucky to get it approved before we made our pricing public, therefore it is still for free. But once we have to add a new version, this is likely to be changed.

If it were for us to decide you would get the app for free. However, we preferred having the app in the store instead of having no app at all. Our hope is that you will understand that to date it was not possible to get a free pidoco app into the store. Having now achieved that the app is in the store we will continue to think about a solution that both satisfies Apple to make some money with our app and you to get the app for free. After the last three months, I’m not yet convinced that this solution will be possible in the short term, but we’ll work on it.

Oh, you haven’t heard about Pidoco Mobile yet? Please read this article that describes how the mobile edition works.

As you may know from previous blog posts (Redesign, First Step, and Second Step) we are working for quite a long time on improving pidoco with a completely new navigation of our prototype creator. We do this in preparation for a few new features like folders or your own stencils.

The most visible change that we did: we removed the tab navigation and introduced a breadcrumb navigation. Have a look how this will look like in the future (we plan to deploy this into our live system in November):

The first row of the pidoco interface now contains three elements: to the left we added two buttons that navigate back and forth in your browser history. Next to them is a breadcrumb component that always shows where you are in your prototype. In the upper right corner we placed some helpful links, like our support chat.

The new features in detail:

• Breadcrumbs: whenever you open a page, screenflow, or layer for editing, the breadcrumbs will show where you are. You can do various things with them:
  • Open the context menu to edit any property of the given item
  • Edit the name by double clicking on a crumb. This works also for the name of the prototype
  • Navigate to other items (not yet included in preview) by choosing it from the list of items that are on the same level
  • Open the item in a new browser tab by pressing Ctrl or Cmd while clicking
• Browser Tabs: you may know our real time collaboration feature. We now use this feature to sync several native browser tabs with the same prototype. This way you can open the same prototype in several tabs (or windows) and have all the pages or layers accessible that you are currently working on.
• Browser History: we enabled pidoco to track in your browser history where you have navigated while prototyping. This allows for using the history back and forth buttons. You may use the native browser buttons or the two buttons in the upper left corner, which do the same as the native buttons.
• Bookmarks: add the pages or layers that you need most often to your bookmarks. Since we enhanced the URL, the prototype can be opened directly in any specific page or layer.
• Global layer in Prototype View: up to now, we only show the pages and screenflows in the prototype view. With this version, we also added the global layers such that you can immediately open a layer for editing, no matter on which page it is visible.

In the current preview we have only two levels for the breadcrumbs: the prototype view and any other view in the second level. With only these two levels, the breadcrumbs may not yet make big sense. However, we plan to add further levels soon. Both within the prototype (folders) and on top of the prototype (maybe something like projects that wrap several prototypes). Especially with the folders you will realize the full power of this feature.

These screenshots show the different views and how the breadcrumbs and the URL change in all the views. For comparison, the following screenshot shows the current (old) version with the tab navigation.

When will this be available?

We know that people prefer what they are used to. And because of the big impact of this change on the way you use pidoco, we decided to give you the chance to preview what is coming up before we deploy this feature. This way you can get a feeling of how to use pidoco in the future and the surprise is hopefully not too big when we have this in our live system.

The current state of the preview is not exactly the state that will be deployed. These things will be done before deployment:

• Navigation to other pages: we want to add a feature to the breadcrumbs that shows you a list of items on the same level, where you can open any of these items with one click. Currently, it is required to go one level up and choose the item to open, which is a step we want to provide a shortcut for.
• Folders: we very likely will add folders to your prototype such that you can organize your pages and that the breadcrumbs will make more sense.
• “Custom stencils” (working title): a while ago we already started working on a feature where you can create your own stencils out of a group of elements. Our plan is to add this feature as well, because we were missing only the breadcrumb navigation to complete this feature.
• New visual design: together with the breadcrumb navigation we developed a facelift of our visual design as well. Although we didn’t decide it yet, we may include the new design as well.
• Stability: although we did a lot of tests for this preview version, we did not yet fix all the tiny bugs. Until we deploy this version you can be sure that we will fix all of them.

The time frame for all this to become the next version of pidoco is November. We will create another preview version a few days before go-live to show you how this will finally look like.

What if I have an idea / feedback on this?

If you have had a look at the preview and want to get in touch with us, please go ahead and let us know:

• Chat with us. You can pick anyone in our chat support, but if I am online you can also talk directly to me, Volker.
• Feel free to send us a message on twitter: @pidoco
• We are happy about any email we receive: support@pidoco.com
• It’s also possible to leave us a comment on facebook: http://www.facebook.com/pidoco
• We do have a feedback forum where you can add new requests and vote existing ones: http://pidoco.uservoice.com
• You may even give us a call: +49 30 4881 6385

We are looking forward to talking to you and hearing your feedback!

A couple of months ago we announced our Easter Egg Hunt campaign to mark the debut of the Pidoco Web App on the Google Chrome Web Store. To commemorate this occasion we promised to give away nine Google Chromebooks by Samsung as prizes to a few lucky winners among the Pidoco Web App users who managed to find the easter egg hidden in our app. We at Pidoco would like to extend a big thank you to all that participated in the contest and congratulate our lucky winners! A big thank you also goes out to Google Germany for sponsoring the Chromebooks.

For users of Google’s Chrome web browser the Pidoco Web App comes in as a great improvement since it allows users to edit, share, and manage their Pidoco prototypes more quickly and efficiently. Upon installation a large icon is added to the New Tab page that allows you to easily find and open Pidoco with one click! Further more you can set the Pidoco Web App to open in a regular tab, pinned tab, or in full-screen mode. As a web-based wireframing application, the Pidoco Web App offers you the latest in wireframing and prototyping capability and stays up-to-date as we add new releases. Thanks to Chrome’s sync you can access the Pidoco Web App no matter what computer you’re using.

Our lucky winners can now use the Pidoco Web App on their new Chromebooks: It now takes as little as 8 seconds to boot up and start prototyping! The all day battery as well as the built-in WiFi and 3G ensure mobility free from malware and viruses.  The Chromebooks will be going out to winners mainly in Germany, but two will travel as far as the United Kingdom and Sweden.  Some of the happy winners have even managed to come to our office to pick up their Chromebooks in person. Here are some pics!