Posts from "March, 2011"

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.

Hunting for Performance

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!

A New Year’s Compilation Of Usability & Wireframing Poetry

We have moved well into the new year, and this is a great time to briefly pause and look back at the year 2010, which has been a remarkable year in many ways. It’s been exciting, to say the least, with Facebook becoming the most frequented website on the world wide web, Google Android mixing up the mobile market, the number of mobile internet users growing massively, Twitter becoming a viable communication channel for established businesses, and cloud services really starting to take off as companies like Microsoft, IBM, or SAP have followed Amazon into the virtual world.

What role do topics like user interface design or usability play in this setting? Well, with more and more services going “cloud” or mobile, most companies have noticed that traditional interface design concepts need to be reconsidered, not only because navigation patterns differ when you are using software in a web browser or on the small screen of a mobile touch device, but also because the competition is becoming ever more intense online and in the mobile market.

To pay tribute to the rising significance of great user interface design, we have started creating poetry that plays on the variations of UI design topics. Here are a few of the diamonds in this modern category of usability and wireframing poetry. Enjoy!


Ode to the Usability of Interface Designs

Though still unfinished pride of expertness

Thou wireframe of an interface design

A rapid paper prototype used to express

Ideas of layouts and navigation that lurk in the mind

What icons and buttons envelope thy shape

Of links and portals that strive with growth

through the fiber optic cables of an ISP

Streaming gigabytes of info with ease for you and me both

What mad pursuit ever since the struggles of Netscape

When the ripe World Wide Web became destiny


Interfaces designs are sweet, but those uncluttered

Are sweeter:  which is a reason why users stay on

When a website is clear it becomes more endear’d

Leading to increased visits and subjective satisfaction

Being used with great ease and not wanting to leave

Accomplishing tasks with minimum error scares

Knowing I can recover if something goes amiss

Though winning near the goal – yet, I do not grieve

For using this graphical user interface design is bliss

With a high level of memorability, this interface design is a breath of fresh air!


Based on “Ode to a Grecian Urn” by John Keats



Ode to a Skinned Interface Design

I went to the link my friend sent me,

And I saw what I never had seen;

An ad banner was built in the midst,

Where I used to click on the screen.


With no choice but to scroll down I did frown,

My friend’s interface design was upside down,

Like a tourist with no clue I looked around lost in town,

‘Cause there were no breadcrumbs to be found.


A millisecond too long I located local navigation,

Thinking ‘they sure could use a wireframe tool for their creations’.

With findability resolved these usability problems would dissolve

And, in tow, his search engine ranking would evolve.


Based on “The Garden of Love” by William Blake



Instant Interface Design Sorrow

My mother groaned, my father wept:

Into their shopping cart unwanted things leapt,

Helpless, overcharged but arrestingly proud,

Feeling like a fiend was hid in ‘the cloud’.


Who to blame when the mouse was in my father’s hands,

Well poor usability & interface design will hurt a brand,

Placing the ‘Cancel’ button a nanometer from ‘Buy’ is not best,

Especially with a return policy worse than the rest.


Based on “Infant Sorrow” by William Blake


The original idea behind these poems was to adapt famous poems and use them to shed light on issues that affect usability, wireframes, wireframing tools and user interface design. If you have some suggestions of poems that you would like for us to interpolate during the coming year, please feel free to leave a comment with your request in it.