Oct 12, 2011
volker
0 comments

Our biggest improvement is on the finish line: the tabs are gone!

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:

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

Tags: , ,

Speak up! Let us know what you think.