Posts from "December, 2015"

Happy holidays – Drag & drop image upload

Holidays are around the corner and Pidoco will be in holiday mode until the beginning of the year. But of course, we wouldn’t go on holiday without giving you a little present! That’s why we have just launched a beautiful new feature that we think you’ll love. Our brand new drag & drop image upload can do more than just help you save time on uploading pretty graphics.

Upload images

Use the new drag-to-upload feature when you are editing a page in order to quickly add image files, such as icons, banners or photos to your page. Simply drop one or more files directly onto the canvas and they will be uploaded right in place. Voilà, no more extra clicks to upload content! This works with all PNG, JPG, BMP and GIF files.

Bulk-adding images via the canvas for quick-editing

Bulk-adding images to an empty prototype page via the new drag & drop image upload feature

Note: You can also drop images to the stencil palette if you don’t need them right away. They will be added to the end of the stencil palette as with the normal image upload.

Create pages from screenshots

As we said, there’s more. If you like to start out with existing screenshots or photos of your scribbles, try this: Open an empty screenflow, grab your screenshots and simply drop them into the screenflow. This will turn each image into a page with the right dimensions and place the screenshot in the background of the page so you can prototype right over it. Now simply arrange the pages, open them to place some action areas on top and go back to the screenflow view to link the screens up using the action area hotspots. Done!

Quick-adding images via screenflows to set them as page background

Dropping images into a screenflow to generate pages for a prototype that can be linked via action area hotspots

 

We hope you’ll enjoy our little holiday gift, which resulted directly from feedback we received from our users. We would like to take this opportunity to thank all of you who help us continually improve Pidoco through your feedback, especially our loyal test users who have been supporting our efforts by taking time to participate in usability test sessions throughout this year. You are wonderful! If you aren’t a test user yet, but would like to take part in one or more of our monthly usability tests, just send us a quick email to support@pidoco.com and we will be happy to provide you with more information. Stay tuned for more to come in 2016!

Happy holidays!

 

PS: Not a Pidoco user, yet? Why not register for a free 31-day trial today?

How to …. create navigation structures (part 4): The doormat

Here it is, part four of our series on common UI design patterns. This one will be all about the navigation pattern called “doormat”. You can find the previous parts of the series here:

The doormat is a navigation element that consists of two parts: a navigation bar displaying the main categories and a collapsible menu, the so-called “doormat”, which lists the sub-items. The horizontally aligned navigation bar usually consists of up to four main entries that serve as the labels of the sub-entries, too. The doormat only shows up, if the user hovers the mouse over one of the categories or the entire navigation bar. The doormat typically contains up to 8 items arranged in columns and references the main categories.

The doormat navigation pattern is best used on information rich websites to display complex content and to guide the user to the right section of the site. The doormat provides a clean, easy-to-understand and informative structure and provides quick access to each section of the website. This is a convenient way to welcome users by literally rolling out details on a red carpet (or the doormat), without overwhelming them with too many details upfront.

Typical characteristics of the doormat are:

  • usually located at the top of the page below or next to the site branding and header,
  • one horizontal row with up to 4 main categories (navigation bar),
  • vertically collapsible panel (doormat) with columns of up to 8 sub-items,
  • every sub-item belongs to one main category,
  • doormat only appears upon hovering over a category or the entire navigation bar,
  • doormat usually spans the entire width of the page,
  • first category is reserved for “Home” (unless it is offered as separate option).

Now that we have a good understanding of the doormat navigation, let’s create one. Here is how it goes …

 

1. Setting up the project

To build the doormat navigation we will use several layers – two for the doormat itself plus one layer for each sub-item on the doormat. To save some time, I recommend creating at least the two layers for the doormat in advance by clicking the “New layer” button in the layers panel. We will add the respective content later. I will use a news website as example in this post, and will call the two layers used for the doormat “Navigation bar” and “Doormat”.

Preview of the finished doormat navigation

Preview of the finished doormat navigation

2. Building the doormat navigation

Our doormat navigation consists of two parts on separate layers: the upper part is a navigation bar that represents the main categories and will be built on the “Navigation bar” layer. The lower part forms the actual doormat containing the sub-items and will be built on the “Doormat” layer. The actual doormat with all its sub-items will only be visible upon hovering over the main navigation bar.

2.1. Creating the navigation bar

Since the navigation bar will stay the same across the entire project, let’s put it on the “Navigation bar” layer. To do so select the layer in the layer panel. Then add a rectangle as background for the navigation bar and place several text stencils on top for the main categories, in my example “World”, “National” and “Local”. Leave some space at the top of the page so we can add some branding above the navigation bar, e.g. an image stencil as logo that links back to the “Home” destination and a headline.

Creating the main navigation bar in a layer

Creating the main navigation bar in a layer

To make the doormat appear when the user hovers over the navigation bar, we will use an action area stencil that will react to a hovering mouse. Place it on top of the navigation bar and make sure it spans the entire width, so it can register the mouse anywhere above the navigation bar.

Now set the action area to display the second layer by going to the context menu and adding a new interaction in the “Interactions” tab. In the interaction dialog, select the hover interaction and set the reaction to “change layer visibility” for the “Doormat” layer. Choose “Toggle” for the visibility.

Linking the layer wit main navigation bar with the layer containing the doormat

Linking the layer wit main navigation bar with the layer containing the doormat

2.2. Creating the doormat

The second part of the doormat navigation, our actual doormat, will be built on the “Doormat” layer. For this one, add a rectangle as background and place the sub-items on top, e.g. a text stencil for each entry. Here I created six sub-items, two for each main category.

Creating the doormat on a new layer

Creating the doormat on a new layer

The sub-items will link to different content layers which will contain the actual content of the website. If you haven’t already done so, this is the time to add the content layers – one for each sub-item. (Hint: Don’t forget to include one for the “Home” destination.) To allow the respective layer to be shown when the user clicks on the corresponding sub-item we will use action areas again (one for each entry) and attach an interaction to each (s. above). Since only the one layer with the respective content should be displayed and all the other layers should be hidden, add as many reactions as necessary and set the layer visibility in the interaction dialog accordingly (the content layer to show should be set to “show”, while all other content layers should be set to “hide”). Here, for instance I added a click interaction that displays the layer “World – Politics” and hides all the rest.

Linking sub-items of the doormat to the content layers

Linking sub-items of the doormat to the content layers

2.3. Making the doormat disappear

Since the doormat should disappear again, when you hover anywhere outside the actual doormat or the navigation bar, we will place action areas above the navigation bar and below the doormat on the “Doormat” layer. Now we simply need to add the following interaction to these two action areas: “When the user hovers then change layer visibility of the layer ‘Doormat’ to hide”.

Adding action areas to the main layer to make the doormat disappear

Adding action areas to the main layer to make the doormat disappear

Note: To work properly, the “Doormat” layer must be on top of all other layers. If it is not, go to the layer panel and simply drag it to the top of the stack.

 

3. Adding content to the content layers

Finally, all we have to do is adding content to our layers. Hint: Don’t forget to switch to the right layer when adding the content.

Switching layers in the layer panel to add content to each one

Switching layers in the layer panel to add content to each one

By clicking on the “Simulate” button in the toolbar, we get a preview of our project. Here is what my finished project looks like.

 

That’s it! You have successfully created a doormat navigation! Do you need help building a doormat navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!