Posts in "Pidoco News"

New Feature: Scroll to Element Interaction

We proudly present the new scroll-to-element interaction. This new feature is an extension of the existing “scroll page” interaction. It allows you to design interactions that scroll a page to a defined element on that page. This feature has been on our mind for some time, but had not made it on the roadmap yet. Luckily, it was recently requested again by some users and thus got the final push into the sprint backlog.

Pidoco already offered an interaction for scrolling the page to the top or to the bottom. The new feature makes it easier to prototype single page websites which require several scroll anchors. Now you can add a scroll anchor to any stencil on a page to use it as target for a scroll interaction.

Here is how it works

In order to use the interaction you first need to define the stencil which acts as the scroll anchor. Then the interaction can be set.

1. Define anchor element

Select the stencil you want to scroll to, open its context menu and enter a unique name into the anchor name field (e.g. ‘contact form’). You can name it anything you want, but we recommend to name it in a way that allows you to easily identify it from a list of all existing anchor names.

2. Set scroll interaction

Select the stencil, from which you want to trigger the scroll interaction. In the interaction menu, select the ‘scroll to anchor element’ interaction and then select the anchor name from the drop down menu as anchor element.

Watch out! In the drop down, you can only select anchor elements which are placed on the same page as your trigger element. Switching between pages is not intended with this interaction type.

That’s all that needs to be done! We are excited about this new feature and all the new possibilities it offers our users.

What do you think?

Does this feature help your work? What else would you like to see in Pidoco? Leave some feedback and we’ll give our best to improve our tool for you!


Introducing our new Affiliate Program!

The internet is full of affiliate programs, but only few deserve the name. Finally, Pidoco has it’s own affiliate program. And here’s how it works.

What does the Pidoco affiliate program offer?
The Pidoco affiliate Program offers up to 30% reward for each successful recommendation. That means, if someone purchases a Pidoco license based on your recommendation, you get paid 30% of the purchase directly into your PayPal account. 

How can I apply for the Pidoco affiliate program? 
Applying for the affiliate program is as easy as signing up for a newsletter. Simply fill in the affiliate sign up form and you’ll receive your affiliate link within a few seconds. Then, you can freely place your link wherever you want to recommend Pidoco. The more followers and reach you have, the more people are potentially contributing to your affiliate balance.

Why become an affiliate?
If you are not familiar with affiliate programs, here’s how they generally work: You can share your affiliate link personally to selected friends and colleagues or spread them publicly on your blog or social media platforms. The link is marked with a reference that identifies each affiliate. When someone coming from your affiliate link carries out a purchase, you earn a reward. Rewards can be a fixed dollar amount or a percentage of the value of the customer’s purchase or something else. The idea is that while promoting products or services that you like, you can make money.

Anyone can become a Pidoco partner! However, for certain people or companies our affiliate program is especially worthwhile:

UX Consultancies Becoming an affiliate is particularly interesting for everyone who is already working in the UX field. If you have clients in the UX and/or product design area you may find that being able to offer the right tool set to your clients is a huge advantage. You’re probably already doing that to some degree anyway, why not earning a reward on top?

Digital Marketing Agencies As a digital marketing agency you are already an expert at representing and at boosting conversion online. With Pidoco’s affiliate program you can now capitalize on this know-how by promoting products that not only give considerable benefit to your clients and their network, but also offer attractive rewards. What’s more: With special deals we offer from time to time, you may even be able to give additional benefit to your clients.

Bloggers If you’re writing for a UX, product management, marketing or other related blog, you will now be able to combine your interest with some monetary benefit. Pidoco’s affiliate program allows you to promote a product that is valuable to your audience while leveraging your audience to earn rewards.

So, why not become an affiliate yourself? Just give it a try, there is nothing to loose! Find more details at https://pidoco.com/en/affiliate

Featured feature: More colors for your prototypes

Today, we released a feature many of you have been eagerly awating. We added a color picker to our editor. This allows you to choose finely granulated colors for your prototypes in addition to the standard colors previously available.

You can choose a color by picking a color from the color palette or by entering an RGBA or HEX value.

Last but not least, pages now can also have a custom background color.

Featured feature: Stencil rotation

With this new feature, you can rotate every stencil Pidoco offers. When you select one or more stencils, you will find an additional rotation handle above each stencil. We believe this is pretty self-explanatory – we have nothing to add. 🙂

Featured Feature: Improve mobile testing

We know that context is very important when it comes to testing prototypes on real users. This is the reason why we try to make testing on real devices smooth and realistic.

Today we shipped two new features that help you test your smartphone and tablet prototypes.

The first is the ability to quickly open a page on your mobile device by copying the URL or scanning a QR code.

Now you also have the option to open a page in fullscreen mode. If you use the feature “Add to Home Screen” on your smartphone (Safari for iOS or Chrome for Android) your page will be automatically scaled to match the width of your device. Moreover, browser UI elements will be hidden.

Happy prototyping!

Featured Feature: New copy-paste shortcut

Today we released a new Pidoco feature which further improves your productivity while creating prototypes.

Now, if you press Ctrl (or Cmd on Mac) before dragging one or several stencils with your mouse, the selection will be duplicated.

Sign in and try it our today.

Happ prototyping!

Featured Feature: Freely order pages and layers

The powerful layer feature has been an integral part of how Pidoco allows users to reuse components in their projects to speed up their workflow.

Layers function as global asseta across a project: Once created, the same layer can be used on multiple pages by simply selecting it from the layers list. When the layer is edited, the changes are instantly visible on all those pages. This is a very efficient way of avoiding redundant work.

You can stack and order any number of layers on a page. Combining the right layers can help you create new pages in the blink of an eye.

Being able to mix pages and layers, i.e. to place the page content between the content of several layers in the stack, has been a highly demanded feature. We had to make some major changes to our system before being able to offer this new option.

Now everything is in place and we are happy to announce that pages and layers can be freely stacked and ordered. This will make using layers easier and more efficient.

Finally, remember that using layers in combination with interactions offers a lot of new possibilities.

Sleeker, faster, better: The New Pidoco

Over the past months we’ve been hard at work building a new version of Pidoco to create an even better experience for you. Many of you have helped us by participating in several rounds of usability tests. After incorporating your feedback into our design, here’s the result: a new Pidoco version that we are certain you will love.

So, what’s new?

#1 Sleek design

In order to ensure an optimal usability, the new Pidoco now greets users with a clean new design providing a clear overview and facilitating access to all core functions. The Home screen is now fully integrated with the other views and syncs easily with the editor while you are working on your projects. We’ve also extended the breadcrumb navigation to the Home view and improved access to support options as well as account and license information. In addition, we have polished the preview, our dialogs, and the sidebar in the editor to make them easier to use.

 

Pidoco Prototyping Tool - Home View

The new home screen has been redesigned and now offers quick access to frequently used functions.

 

#2 Perfect overview

One of the most noticeable changes is the brand-new Map feature. Instead of a simple list of screens, the first thing you see upon opening a project is a complete overview of all its screens in the form of a screen map. Aside from a thumbnail depiction of each screen the map shows you the links between pages, giving you a quick insight into the structure of your project. Simply drag your pages to individually reposition them. The map comes complete with zoom and scroll functions, just like you would expect. Of course you can still switch back to the traditional list view, where you can organize your pages in folders.

Pidoco Wireframing Tool - Map View

The new Map view gives a great overview of the project.

 

#3 Quick access

Projects can at times become quite complex. The improved Project view offers easy access to all the components of your projects. Five main tabs conveniently structure your project and let you jump directly to screens or assets, manage access, review or reply to comments, and save project versions.

In addition, we introduced Quick Actions for each element, offering frequent actions such as editing, simulating, exporting and sharing of projects or editing pages at the tips of your fingers at any time.

Pidoco project view with five main tabs: pages, assets, comments, collaboration, versions

The improved project view provides easy access to all parts of the prototype in the five main tabs.

 

#4 Convenience functions

From projects to pages, assets and comments, we have re-designed how elements are displayed. A unified list pattern provides an easy-to-grasp overview of projects, screens and assets while search, sort and filter functions allow you to optimize how you work. Sorting refers to element name, creation date or last edit, while filters are available for screen sizes or asset types, depending on the type of element.

The Quick Search works like a dynamic filter and is now available in all views, from stencil palette to screen list. Just start typing wherever you are to find what you are looking for.

In addition, we have standardized editing options across all views to speed up your workflow and keep things as simple as possible.

Finally, you will find convenient meta information on many elements, which will help you find what you are looking for.

 

#5 Drag & drop

While this is not a new feature in Pidoco, we have vastly improved the drag & drop upload. Previously available for images, we have now expanded this helpful feature to entire screens: Simply drop a screenshot onto the Map or screen list and Pidoco will automatically create a new screen in the right size and add it to your project with the uploaded screenshot placed as background image, so you can immediately start editing or linking that screen.

Additionally, we have rolled out drag & drop in all views, so you can now sort and move elements easily.

Drag your pages to move into folders.

Drag your pages or assets to organize them in folders.

 

#6 Better access to comments

Commenting has been a core collaboration feature of Pidoco from the start. Now we have incorporated a new Comments panel into the main editing view to offer better access to comments while editing a project. Comments are now also color-coded so you can see more easily which issues have already been resolved and which still require your attention.

Comment panel in the editor sidebar.

The redesigned sidebar in the editor includes a comment panel for quickly accessing all comments while editing the prototype.

 

#7 Link sharing

Collaboration is at the heart of Pidoco: You can share your projects with any person for viewing, commenting, forking or editing. We have improved the sharing mechanism, now you can easily retrieve the sharing link and share it with colleagues or clients without having to use the standard email option.

 

#8 More powerful preview

The preview has received a new design as well. But even more important, we have added a full-screen viewing mode to allow you to present your prototypes in the best light. The comment markers now come in different colors, allowing you to recognize their respective status without having to open them first.

Pidoco Prototyping Tool - Preview

With its new design, the preview shows the prototype in action and has been equipped with a new full-screen mode.

 

Of course, there are also a bunch of small improvements we have made, including better access to settings and profile information or new dialogs, but see for yourself: See the new Pidoco in action!

Let us know in the comments what you think or email us at support@pidoco.com.

Upcoming Release: What’s New

So, we’ve been telling you all about the upcoming release of the new Pidoco. Now it’s only a few weeks before it will be arriving. To allow you to familiarize yourself with the new Pidoco version, we have put together a little guide showing you what’s new. Enjoy!

 

#1: Home View

Pidoco Prototyping Tool - Home View

The new home screen has been redesigned and now offers quick access to frequently used functions.

 

The Home view has been redesigned to give you a better overview of your projects. While the project list is very similar to the current list, the Home view will now offer some neat improvements:

  • Quick Actions: Instead of the old tabs, we have turned some of the most important options, such as editing, sharing or exporting into quick links that allow you to more easily access them.
  • Toolbar: We have added a toolbar to the Home view to make work even faster for you.
  • Search: Now you will be able to search for projects, which is especially useful if you have many.
  • Filtering and sorting functions are now available to manage your projects more efficiently.

 

#2: Project View

Pidoco Wireframing Tool - Map View

The new project view greets Pidoco users with a map of the entire project, offering easier orientation and a better overview.

Perhaps the biggest change in the Project view is the new Map feature. The Map will give you a visual overview of your entire project, allowing you to quickly find and access the right pages or simply get a better grasp on the project. Zoom in to see more details or zoom out to get a bird’s eye perspective. Of course, you can always switch to the list view to search for pages or sort them into folders. Note: For existing projects, you will still see the page list first. Upon switching to Map view, you will find your pages and can arrange them as you see fit.

The new Project view also comes along with several tabs that neatly contain the available functions. They will be replacing the tabs of the current Home view.

  • Pages: Shows all pages – as map or list, depending on your preferences
  • Assets: This is where you can now manage all your assets. Upload screens, graphics or icons, create screenflows or manage your masters and layers.
  • Comments: This is the central place for reading and replying to feedback you receive through the commenting feature.
  • Collaboration: Managing invitations and access rights happens in this tab.
  • Versions: This is where you can now find all versions of a project – manually generated milestones as well as auto-saved backups.

 

#3: Editor

Pidoco Prototype and Wireframe Editor

The editor view now offers easy access to all comments without interrupting the workflow. The layer panel also has received a new design.

The editor also has received a little upgrade. The main new features will be:

  • Comments panel: You can now read and reply to feedback directly as you are editing your project.
  • Layers panel: The layers panel has received a redesign to make it easier to distinguish the page from the layers and to allow you to focus better on the stage.

 

#4: Preview

Pidoco Prototyping Tool - Preview

With its new design, the preview shows the prototype in action and will be equipped with a new full-screen mode.

The preview will have not only a new design, but also offer a new full-screen mode for viewing projects without any distraction. The comment markers now come in different colors, signalling their respective status for an easy overview. Of course, we are keeping the different hand-drawn and wireframe modes, so you can choose how to present your project best.

 

#5: General/Convenience

Pidoco Wireframing Tool - Sharing feature

New convenience functions and an improved sharing feature make working with Pidoco even more productive.

More generally, there will be a few new convenience functions that we will be rolling out across the system. They include:

  • New design: The pretty “flat” design looks a lot cleaner and will show your projects in the best possible light to give them full focus.
  • New dialogs: All dialogs have been revised to make them easier to use.
  • Drag & drop lists: The project, page and asset lists now allow you to sort items using drag and drop.
  • Filtering  and sorting: Filtering and sorting functions will be available in all list views to help you manage pages, assets and more.
  • Quick Search: The dynamic search function will be available in almost every view.
  • Sharing: You will be able to retrieve the sharing links without having to send an email.

We are very excited to share the new Pidoco with you in just a little while and hope you’ll like it.

So, watch out for the release date!

 

How to … Create a Contextual Action – Swipe to Delete

Your goal is to offer the best experience possible to your users. You don’t want them to go the extra tap mile to navigate between pages, to delete an item from a list, to add a song to a playlist, to archive a message or to unsubscribe from a newsletter. Actions like these are all so-called contextual actions and always relate to touch gestures. Contextual actions are a good way to provide quick access to quite common actions in a mobile application and at the same time are a brilliant way to reduce the number of taps the user needs to complete the task.

 

What to consider when including contextual actions in a mobile application?

When executing a contextual swipe action, most of the people expect a destructive result, such as deleting. That’s mainly because of the original use of the swipe gesture towards the left in order to delete an item. This well-known gesture also relates to the physical act of crossing something out on a list.

To create effectively working contextual actions consider some more points.

1. Context: Instead of including text, use clearly understandable icons to represent the action items (e.g. a basket or an “x” for deleting)
2. Consistency: Keep the meaning of the contextual swipe action consistent throughout the app. When multiple actions are associated to the same touch gesture you confuse users.
3. Confirmation: To avoid frustration and error, ask for a confirmation before completing an action.
4. Conflicts: Don’t use too many swipe gestures and make sure they don’t interfere with other swipe actions (e.g. to navigate between pages).

 

Now that we have the basic information, we build an app with a contextual action and will use a swipe gesture to delete list items. And here’s how it goes …

 

1. The project setup

I created a mobile project called “My Notes”, which is a prototype of an app in which you write down your thoughts or create to-do lists or sketches etc. My app includes a list with two notes. When swiping to the left of one entry, a “Delete” button shows up and after tapping on it, the note is deleted.

Swipe to delete a note from the list

First I created the pages for my list – one for each state: full and empty list and add a page for the two notes that should be displayed in the app. The pages all serve as frames only as the content will come from the layers I added. That’s why in my prototype all the 4 pages nearly look the same. Here: I added a status bar to the top and a headline. The footer differs only a little. The pages that list the notes have an extra text stencil at the bottom to display the total amount and the empty list contains a little icon at the bottom right to create a new note.

Additionally, I used 7 layers, whereas each represents the different stages of the deleting process: full list, item #1 deleted, item #2 deleted as well as the 4 layers that display the respective buttons. Here: I created 4 layers in total, one for each required button in the full list and two after the deletion process.

I recommend to create the pages and layers first. You can add the content later, but it helps you to quickly build and link your content.

 

2. Creating the contextual action

Now let’s continue the work at the contextual action to delete a note with a quick swipe to the left. To do so we proceed step by step.

Step 1: Start the app

We start on the first page (Here: “1 – Start: Entire list”) and activate the first layer that contains the complete list (Here: 1. Full list) consisting of one list with 2 notes and 2 lines of text. For that I added a list stencil and placed some text in the lines.

Activate the layer with the full list

 

Step 2-1: Swipe to the left in order to delete item

Now we want to display the delete button following a swipe gesture to the left. To do so, the layer with the full list remains active on the start page and we add two action areas on top of the two list entries. The reason we do this is that we have two options: delete item #1 or #2 first and the layers should be placed on top of each other. (Hint: Use drag&drop the re-order your layers in the panel.)

Let’s delete the entry #1 first. For that we add the following interaction pairing to the action area: When the user swipes to the left, then change layer visibility and select the layer that contains the respective delete button. (Here: “1. Delete button – Full list – Note #1”).

Link the action area to display the “Delete” button

 

Step 2-2: A “Delete button” appears

Now, we open the layer with the first “Delete” button. (Here: 1. Delete button – Full list – Note #1) Then we add a button to the first entry, change the color (via the context menu) and add it to the right of the list. To visualize the swipe action even more, we can adjust the text by moving it a little to the left and reducing the length.

Add the “Delete” button to confirm the destructive action

 

Step 3: Tap on “Delete” to confirm your destructive action.

We know it’s necessary to tap on the “Delete” button to confirm the destructive action. That’s why we link the button to to the prompting page that shows the second list entry only. Here: After deleting the first list entry, the interaction pairing is: When the user clicks/taps, then show page “2 – Note #1 deleted”.

Link the “Delete” button to the page with the reduced note list

This next page should show the reduced list. That’s why we open it and activate the layer that includes the shortened list after successfully deleting the first list entry. (Here: “2. Note #1 deleted”)

Activate the layer on the new page with the reduced list entry

 

Step 4: The entry is deleted.

Now only one entry is left on the list (Here: item #2). We can also delete this entry. To do so we add another contextual action by repeating the previous steps. As the list will be empty in the end, we only link “Delete” button to a blank page (Here: “3 – Result: Empty list”).

Show an empty list after deleting all notes from the list

To delete the second list entry, repeat these steps and only change the layers and page accordingly.

 

3. Simulation

Voilà! To test your contextual actions take your mobile device, open the Pidoco app (available via Google Play or the App Store) and start the simulation of your project by selecting it from the project list.

 

That’s it! You just finished your your project including contextual swipe actions.

Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

Happy Prototyping!