Posts tagged with "ui design"

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!

Feature Snapshot: Working with Layers

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.

Image of Global Layers list in the Pidoco Prototyping Software for Interface Design and Usability Engineering

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.

Image of how to create a new layer for a Pidoco prototype to speed up the interface design process.

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.

Image of how to edit a global layer in a Pidoco UI prototype via drag and drop.

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.

Image of an active layer in a Pidoco wireframe showing the UI of a travel website.

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.

Image showing active and hidden layers on a page of a wireframe prototype created in Pidoco's interface design software.

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.

Image showing how to sort global layers in a Pidoco UI prototype using drag and drop.

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.