a blog on prototyping by pidoco°
Archive for the ‘pidoco° News’ Category.
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:
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.
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.
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.
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.
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.
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.
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:
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.
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:
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.
If you have had a look at the preview and want to get in touch with us, please go ahead and let us know:
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!
We’ve constantly been asked whether we do have some specific iOS stencils for pidoco. Today we can say, yes we do!
We are starting the roll-out of Pidoco Mobile with a private beta phase where you may be added to create iOS prototypes and test them directly on your device. Some of you may now ask, ‘and what about Android?’ Once we have fully rolled out the iOS part of Pidoco Mobile we start working on Android, so please be a little patient about it.
It consists of two parts: the web application for creating the iOS prototypes (as you know pidoco already, but with new stencils) and the iOS app to simulate the prototypes on your device.
For the web application, you need to have a modern browser on your desktop PC (or Mac, for sure). We officially support Firefox, Safari (Mac only is recommended), or Google Chrome. On top, we heard that Microsoft IE 9 is working well, too, although not yet being officially supported. The iOS prototypes that you can create do run only in these browsers plus Opera and IE 9. We skipped the support for the older IE versions (8 and earlier) to simplify our development efforts. In general, if your browser supports native SVG then it is very likely to run our prototypes.
The iOS app provides you with a list of your iOS prototypes. First, pick one of these prototype and you see its pages. Then pick a page and the prototype is opened in either the sketched or plain mode. Take it from there to test your prototype, get a feeling for the correct sizes and measurements of the elements, and see whether your concepts work. We have added a demo account with which you can try a prototype of the Facebook app to give you an impression of what’s possible. The pidoco app is available for both iPhones and iPads.
To install the iOS app on your device, please sign up with testflight right from your device. You will then have to register your device so we can add it to the builds of our app. (You might have heard that for such a test, we have to add every single device to the app for it to be installable.) If you followed the above link then we will be informed and can create a new build that we then can send you. To install the build you will have to open the link from the email on your device, the rest is done by testflight. UPDATE: we finished the private beta phase. It will be released soon for everybody to use.
If you already have a pidoco account, then we need to activate the iOS prototypes for that account. The best way is to send us a short mail (contact@pidoco.com). In case you have not yet an account you may create one and use the 31 days free trial. In this case we also need to activate your account before you can create an iOS prototype.
We know that this beta version of Pidoco Mobile might not yet be complete and that you will very likely miss a feature. If we know about this we can add it to our development process. There are different ways of how to tell us such ideas:
Just pick a channel to talk to us, we’re happy to hear from you!
(Please note that we created the Facebook prototype on our own and only for demo purposes. There was no involvement of Facebook.)
Together with Google Germany we have developed an app for the Chrome Web Store to ease the access to pidoco.com if you are using Google’s browser. To install the app simply open the (German) store with Google Chrome and search for the pidoco app. After you installed the app, simply open a new tab to see it listed.
We have hidden a little surprise in pidoco if you are using it through the Chrome App. You just have to play around and try all our features, at some point you will stumble upon it. Once you found it make sure to follow the links and get into the raffle for some shiny chromebooks!
Happy searching!
Are you using the Google browser “Chrome”? Today Google announced eleven new apps now available in the Google Chrome Web Store. The Pidoco° App is one of the eleven featured apps that users of the Google Chrome web browser can now install.
With the rise of the smartphone, apps have become a huge hit with private and professional users and are entering the web space quickly. The popularity of the apps has been promoted by the creation of various online and mobile marketplaces where users can easily acquire new apps to enhance their devices. Web industry giant Google launched its Chrome Web Store in July 2010 in the United States. Now eleven German partners have added their apps to the store.
One of the apps featured by Google in their latest press release is the Pidoco° App, which allows users to create, share, comment on and test drive interactive wireframes and GUI prototypes. Users of the Chrome web browser can now install the Pidoco° App with only a few mouse clicks, giving them easier access to Pidoco’s functions. Upon installation, the Pidoco° App can be used as a small tab in the browser’s navigation bar, enabling instant access. In addition, users can now register and sign in to Pidoco via their Google account without having to create an additional password. New users of the Pidoco° App should keep their eyes open when exploring Pidoco: There may be an exciting surprise awaiting you …
Pidoco is used by product managers, business analysts, user experience professionals and creative professionals around the
globe. Check it out at https://chrome.google.com/webstore/detail/bipghjdghdamigamobmcaigdcncbkfof?hl=de (German) or https://chrome.google.com/webstore/detail/bipghjdghdamigamobmcaigdcncbkfof?hl=en-us (English).
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.
We just applied some hot fixes to our JavaScript Code that improves the server roundtrips while editing a prototype. We received reports about this performance issue for quite a while, but were unable to find the cause for this until now. From a developer point of view, it is always difficult to work on such things if you cannot reproduce it on your machine or in some test environment. In this case, I was lucky to chat with a user last week, with whose prototype I could see the issue and identify the problem. Today, we found a solution that lead to a speed improvement of a factor of 10. We hope that you can feel this improvement when you work with pidoco from now on.
The change of today is one in a series of performance improvements that we did during the past months. In January, we were able to speed up our database and optimize every request to our server. In February, we could improve the loading time of the rendered prototypes and show the contents of a page earlier in a page load. And now in March, we again accelerated the server roundtrips, but this time the part in your browser. Since we do rely on your feedback while working with pidoco, we’d appreciate if you could give us another challenge for April. Which part would you say is still too slow? Where should we continue to hunt for performance? Let us know!
