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!

Feature 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!

How to … create an infinite scroll page

Have you ever managed to reach the bottom of your social media feed? Probably not! Because it applies the concept of infinite scrolling. That’s definitely a trending and dynamic way to replace the pagination links and to display the vast amount of data on both mobile devices and websites.

How does it work? This one-pager makes clicking to see new or more content redundant. Because the main functionality of an infinite page is that the user scrolls the content and every time the end of the screen apparently has been reached, new content is continually and automatically loaded .

The only thing that should be kept in mind, because it might limit the use, infinite scrolling considerably triggers the user’s attention and although it’s kind of optimistically tempting and challenging to never be able to reach the end of the page, it can also be very exhausting and frustrating.

Now let’s have a look how such infinite scroll pages can be created in Pidoco. And here’s how it goes …

 

1. The project setup

To visualize the infinite scroll page, I created a mobile project called “Friends”. That’s the prototype of an app where you and your friends can update each other on the latest things such a news, thoughts or images etc. These updates are shown on the screen of the mobile device and if you scroll the page more news by your friends are displayed.

As one-pager, my prototype of course consists of 1 page only and additionally has some layers. And here’s a little confession: Although we’re about to create an infinite scroll page, and usually you won’t be able to reach the bottom of the page, our project will have an end. But as a prototype, it of course will help to demonstrate the behavior of the infinite scroll page. That’s why my infinite scroll page can be scrolled three times and then the end will be reached. So a total of 7 layers is needed, whereas there’s 1 layer for each scrollable content to be displayed (here: 4 layers). Additionally, a loading symbol should appear for a short time when new content is loading while scrolling down the page. That’s why 1 layer for each loading screen (here: 3 layers) is needed, too.

Preview of the finished app “Friends”

 

2. Creating the infinite scroll page

2. 1. Building the infinite page

Based on the default height of 640px, we increase the page size using the toolbar at the top of the canvas by a little more than 3 times and set the height to 2100px and also added some elements like a status bar and icons.

Create a page with an increased page height

 

2.2. Creating the scrollpage content

Now that we have built the basic structure of our project, we continue creating the content of the infinite scroll page. That’s why we create the first layer by clicking on “+New layer” in the layers panel and add some placeholders such as an icon, image stencil and some text. For a realistic scrolling experience, the first screen ends with the default page height. Hence, the content won’t exceed the height of 640px.

Add content to the first layer of the scrollpage

 

Repeat that step for the other layers that are continually loaded. The content of the next layer then starts where the content of the previous layer has ended and so on and so forth.

 

2.3. Creating the loading page content

Let’s go on and add the loading page icon. To do so, we add a new layer again and add a loading icon. Just use the quick search bar at the top of the stencil palette by entering “load” and drag the icon to that position where the layer that contains all the news ends.

Display the load page icon at the end of each screen

 

Repeat that for the other loading icons.

 

2.4. Adding interactions to load the page content

We continue with the interactions. When about to reach the end of the screen, more content should be loaded. That’s why we make use of action areas on each content layer. The first action area starts at the half of the content layer. Since first a loading symbol should be displayed and then the new content should appear when the user scrolls the page, we add the following interaction pairing in the interaction dialog: When the user hovers, then change layer visibility. (Note: We use an hover action here, because while scrolling the screen we inevitably hover with our mouse over the entire screen!) Now we select the layer that contains the first loading icon (Here: Load 2) and set the visibility to “show”, the next reaction makes it invisible again by selecting change layer visibility and setting the visibility to “hide” and adding a delay of 1 second. The final reaction to be added is change layer visibility, choosing the layer with the content to be displayed next (Here: Content 2), setting the visibility to “show” and using the delay of 1 second.

Adding interactions to load the next content of the infinite scroll page

 

Repeat that for all the other layers.

Hint: Don’t forget to deactivate the layers again that we only activated to align our action area. To start the app only the layer needs to be displayed that contains the first content.

 

2.5. Jumping back to the start of the news feed

Having reached the end of the news feed, there should be an option to automatically jump back to the start to avoid annoying scrolling back to the top. Therefore we add an arrow as well as some text to the bottom of my last layer (here: my layer is called “content 4). Then we use the following interaction pairing: “When the user clicks/taps” then “scroll the page” and select “to top” as position with a duration of 1 second and then add for every content and loading layer the additional reaction “change layer visibility” and set the visibility to “hide”. But don’t forget to display the first content layer (here: Content 1) as it represents the start of the feed.

Use interactions to automatically jump back to the start of the news feed

 

3. Simulation

Voilà! To test your infinite scroll page open your browser to experience the behavior and start the simulation of your project by selecting it from the project list.

 

That’s it! You just finished your first infinite scroll page.

 

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

 

Happy Prototyping!

5 Common Misconceptions About Wireframing And How They Can Be Avoided

There are many articles listing and summing up the pros and cons of wireframing, defining what a wireframe is and what not and where the difference between prototypes and wireframes are. That’s why we won’t go that much into detail here and rather focus on 5 common misconception about wireframing and how they can be avoided.

 

Lo-fi wireframes help to create the architectural structure and to highlight core functions

Lo-fi wireframes help to create the architectural structure and to highlight core functions

1. Wireframes have to be hi-fi

Wireframes come in many different shapes, sizes and even with a different degree of fidelity – from low to medium to high fidelity – all depending on your individual wireframing needs. So yes, wireframes can contain many details and the more they look like the final product, the less abstract you have to think. Of course it’s a good way to demo your app or website idea as well as its USPs and core features to potential clients, investors or stakeholders who prefer the touch-and-feel experience over abstract thinking. But you certainly won’t present them your very first idea. Especially in the early phase of the product development process you only want to quickly scribble your basic idea and refine it with same basic elements, placeholders or transitions. It’ll be all about testing your idea and its feasability.

The lo-fi wireframe supports all that! So put your papers aside, stop overexplaining your idea, and just use a simple lo-fi wireframe and tell a story with few words only. Additionally, the lo-fi wireframe prioritizes the core functions of your deliverable by demonstrating the structural placement of the content, potential functionalities and intended interactive product behavior. In terms of design, you can keep things functional rather than pretty and if necessary at all just use a few colors only, integrate some placeholders where text or images should be.

 

Wireframing is the best way to bridge communication

Wireframing is the best way to bridge communication (picture by Mabel Amber via pexels.com under CC0 license)

2. Wireframing is for UX folk only

The awareness for UX has risen in the past years and more and more companies understand the value of integrating UX in their product development process. However, the term “user experience” is on the edge of becoming a fuzzy buzzword. Wireframing is closely connected to UX as it’s about the alignment of elements and mainly about creating an interface that users are happy to interact with. That of course pushes the assumption that wireframing is limited to the people who mainly focus on UX. But it’s not. Because wireframes are necessary for everyone who’s involved before the release of the finished app or website.

First of all, wireframes however provide a quick way to achieve a joint understanding of the deliverable. They also help to bridge communication and to get all your product stakeholders from the developer to the designer to product manager on the same page. Thereby the iterative process loop of getting feedback and improving is assured. But it’s also about the users! Before investing a lot of time and money in coding and releasing the app or website, you certainly use your wireframes to run several usability or A/B tests. During that iterative process, wireframes are the quickest and easiest way to generate results and to create the best possible user experience.

 

Wireframes are the skeleton of every development process

3. Wireframing is unnecessary in times of agile development

In times of agile development, wireframes seem to be out of time and apparently, the focus now moves on to interactive medium- to even high-fidelity prototypes. Because such kind of prototypes speed up usability testing, extend feedback rounds or even help to lean back on living documentation. That’s not wrong, but speaking of time and cost effectiveness in the early product development stage, you won’t skip development steps and start with a highly detailed version straight away. Instead, create a consistent and well-structured development process to avoid misunderstandings from the very beginning.

And that’s why a wireframe is still needed and even more: it’s the skeleton of your deliverable! Wireframes help you to create the architectural structure of your deliverable, build the concept and form the foundation. It’s more than just a sketch and the wireframe will soon evolve over time, receive more and more details, morph from a wireframe to hi-fi prototype, become the code-ready version and finally the released version.

 

Wireframes support the collaborative developing process

Wireframes support the collaborative developing process (picture by Startup Stock Photos via pexels.com under CC0 license)

4. Wireframing is best done in presentation programs

There are many different ways to create a wireframe and basically it depends on your needs and so any program could be helpful to scribble an idea. That’s why often some of the most common presentation programs are used. And they might even be sufficient if you want to click some screens. But what if you want to receive feedback on your wireframe, would like others to be able to edit it, or you need to send it to your stakeholders? The only way to do it is forwarding the presentation file. However, it’s very likely that not everyone will be able to access it and see the result properly due to program incompatibilities. Working already with a few people, you’ll get many emails with a lot of feedback, which you’ll have to sort, combine it with the corresponding spot in the presentation file and also have to compare all the submitted change requests.

Here it helps to consider the main functions of a wireframe: consistently gaining feedback. The best way to do that is by choosing and using a wireframing or prototyping tool that suits your needs best and most of all allows for collaboration. After defining your product team roles, you can make them all join your wireframe in the professional wireframing program. Now, all of you can view the current state of the wireframe, share comments on it, edit the wireframe together in real time or separately while everyone still gets the latest wireframe state.

 

Wireframes and visual comps rely on each other

Wireframes and visual comps rely on each other (image by Pixaby via pexels.com under CC0 license)

5. Wireframes can be replaced with design comps

Design comps (short version for comprehensive layouts) act as the visual drafts of the final product, which means they actually look like the final app or website just by adding graphics where formerly placeholders were seen in the relatively sparse looking wireframe and moving them nearly pixel-perfect to their positions. Comps are the layouts ready to be forwarded to the decision-makers and once approved serve as the design guide. That’s why it’s quite tempting to assume that such visual comps make creating a wireframe absolutely redundant. But in fact it’s not! Where comps focus on design, wireframes also include the interactivity.

It might be one of the longest ongoing discussion in the field of UX and wireframing. However, there’s a good way to keep things clear: wireframes act as the basis of a visual comp or at least as its supplement and help to define the product requirements. Most importantly, wireframes support the data-driven UX process, while comps support the visually-driven design process. With that mindset, visual comps and wireframes only come along together and rely on each other as they will be your best way to both create and iterate your deliverable.

 

Did you experience more misconceptions about wireframing? Let us know via
support@pidoco.com or Facebook and Twitter.

How to … create a product tour

Imagine you just created your new product and now you want to demo its highlights in a product tour. That’s a good decision because such product tours are not only a quite cool teaser of the product and visual eye-catcher, they help to explain your product with mainly images and few text only. It’s an easy way to catch your future-customers’ attention!

What to consider when creating a product tour?

  1. Step by step: Guide the user through your USPs.
  2. Spotlight: Highlight the most important product aspects on one slide.
  3. Brevity: Keep your key value propositions short, but clear.
  4. Action: Let your product tour end with a call to action to turn your visitor into a customer.

Now that we have the basic information, we commence prototyping our animated product tour. And here’s how it goes …

 

1. The project setup

To visualize the product tour, I created a mobile app called “Interactive Product Tour”. This mobile project contains a total of 4 pages, whereas each one represents one product highlight, and 8 layers that include a footer as well as 7 additional animated outstanding features.

On the first page (“Start of the tour”) I added some rectangle and ellipses to represent the mobile device and also used the drawing stencil to paint a cloud at the bottom of the mobile app. On the following three  pages (Highlights of the tour – 1/2 and End of the tour)  I repeated that, and only created a new drawing to represent the second part of the cloud at the bottom, because later I want to create an animation that lets the cloud move.

Screenflow of the pages that of the Product Tour

Additionally, I created layers that later appear automatically when showing  a new screen. These layers contain the content of the product highlights that “fly in” on each page. For instance on the first page, I added two magnifier objects to zoom into buttons of the app and on the last page I added three icons to demonstrate that the product is available on other devices too.

Layers are used to create auto-pop-up highlights

Layers are used to create auto-pop-up highlights

 

2. Creating the interactive tour

Now that we have build the basic structure of our product tour, we continue with the interactions. On the start page we build an interaction chain that consists of multiple reactions triggered by only one user action. To do so, we open to the interaction dialog and add the action When the user “loads the page”. I will split it into three parts – pop-ups, page jumps, and loop – to make it easier to understand the entire chain. Just keep in mind that you need to add the reactions in the order as they are supposed to appear.

Preview of the complete interaction chain

 

2.1. Add pop-up highlights

Since we integrate automatically appearing highlights that are placed on layers right at the beginning on the first page, we include those layers into our interaction chain. To do so, we remain in the same interaction dialog that we have already opened and add the reaction “change layer visibility”. Then we select the layer that should pop up, set the visibility to “show” and add a delay. (Note: Delays are used in subsequent order so you need to count forward from the beginning of the first user action.) Here: I started with the layer “1-1 Highlight bubble” and made it appear after two seconds upon the first page load. Then I added the second highlight bubble with the same settings and only adjusted the delay and repeated that for all the other layers.

Adding layers to the project

 

2.2. Jump from page to page

Now it’s time to jump to the second page. So we add the reaction “show page” and select the page that is supposed to come next (Here: “Highlights of the product – 1”). To have a neat transition, we use the option “instant link” and the animation “slide in from right”. To automate the transition a delay has to be added. Here I used 5 seconds. I repeated that step for the other pages and only changed the delay to 10 and 15 seconds so that the pages change every 5 seconds after the first trigger.

Adding page transitions to the project

 

2.3. Infinite loop

Finally, we want the product tour to start again. To do so, we add the last reaction. So we select “show page” and choose the first page “Start of the tour” again. This time we have to change the options and set “Link with reload – open in same page”, add a fade animation and a delay of 17 seconds so that the product tour quickly starts over again.

Creating an animation loop

 

3. Simulation

Voilà! To test your product tour, 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 demo a product tour.

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

Happy Prototyping!

How to … create a sidebar

Recently, we spoke about mobile navigation patterns and their impact on creating valuable content on limited screen space without losing important options. This time, we take a closer look at the sidebar.

The sidebar is best used to offer a secondary view that contains additional options like user settings, a list or a contact form etc., but it doesn’t make you leave the current screen. It’s a collapsible panel, often with the same height as the screen, that only slides in with a tap on an icon, usually a gear wheel or persona icon.

And here’s how it goes …

 

1. The project setup

To visualize our navigation pattern, we go back to our previously created project called “Watch it!“. You might remember: This mobile app contains a navigation bar with an overflow menu. Today, we’ll add a sidebar to it which can be accessed via the persona icon in the top right corner. The sidebar grants access to the user profile and various profile settings and options.

Recap: In our mobile app, we have already created one start page with one layer that contains an overview on the available movie genres. Also we built a navigation bar on another layer which contains a hamburger menu on the left and the overflow menu acts as a collapsible quick-access menu to the available movie genres.

The start page of the “Watch it!” app with the navigation bar

 

2. The Sidebar

For the second part of our “Watch it!” project, we need in total: 1 page for the sidebar itself and one page for each entry within the sidebar.

2.1 Creating the sidebar

Let’s create the actual sidebar which will list all available options connected with the user profile of this app (changing password or language settings or getting in touch with the support etc.). To do so, we add a new page (here called: “1-Sidebar”) and immediately add the content. Here: I used a grey rectangle as background and added text stencils.

Creating the sidebar and its content

 

2.2 Setting up the sidebar content

As our sidebar will only give an overview of the available options, we create a new page for each entry of the sidebar. (In my project I built a total of 8 pages.) Now let’s fill the page with content. Here I  added some text elements, text input fields and a button on the “Password” page.

Adding content to the content pages of the sidebar

To save time, just create one page first, then duplicate it and then alter the content on the remaining 7 pages.

 

3. Adding interactions

Let’s go on with the interactions. We’ll have to take three steps now because 1) the sidebar is supposed to be slideable, 2) the sub-entries listed in the sidebar should be clickable, 3) the sub-level pages of the sidebar have to be slideable to re-access the sidebar panel again.

3.1 Making the sidebar slideable

To leave the sidebar and get back to the start page of the “Watch it!” app, the sidebar is supposed to disappear with a swipe gesture. So we select the grey rectangle (as it spans the entire page), open the interaction dialog and add the action when the user “swipes”, set the direction to right and use the reaction “show page”. We refine the interaction selecting the option “Instant link” and setting the animation to “slide in from left”.

Making the sidebar slideable

 

3.2 Making the sidebar list entries clickable

Having already created the 8 pages that represent the content of each entry of the sidebar panel, we continue with creating interactive links. To do so, we open that page (Here: 1 – Sidebar) and click on the respective text, open the context menu and select the respective page from the dropdown menu next to “Target”. Here: I linked the entry “Change password” with the page called “Password”.

Quickly link the entries of the sidebar

Repeat that step for the entries of sidebar.

 

3.3 Making the sidebar sub-content slideable

Finally, we want to add more interactions to the pages that display the sidebar content. To leave the sub-level view and go back to the sidebar panel, we want to use a swipe gesture. So we open one of the previously created sidebar pages.

Let’s start with the first one: I opened the page called “Password” and added two action areas for that parts of the screen that are empty. (Hint: They might even overlay other elements like the headline.) Again we need the interaction pairing: When the user “clicks/taps” then “show page”,  select the previous sidebar page, set the options to “Instant link” and the animation to “Slide in from left”.

Building a slideable page for each entry of the sidebar.

To save time again, just copy and paste the action areas to the remaining 7 pages and adjust the linked pages.

 

4. Connecting the sidebar with the navigation bar

4.1 Extending the navigation bar

Now we open the layer that contains our navigation bar and add a persona icon to the navigation bar. To do so, we use the quick-search option atop of the stencil palette and drag the respective icon to its position.

Adding a persona icon to the previously created navigation bar

 

4.2. Connecting the navigation bar and the sidebar

All that’s left is connecting the sidebar with the profile icon in the navigation bar. To do so, we select the persona icon on the right and add the interaction pairing when the user “clicks/taps” then “show page” , select the one that contains the sidebar and use the animation “slide in from right”.

Access the sidebar menu

 

5. Simulation

Voilà! To test your sidebar, 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 mobile app that includes a sidebar

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

 

Happy Prototyping!