Posts in "Pidoco News"

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!

How to … create an overflow menu

Navigation patterns are the key to make the most out of the precious screen space on a mobile device. Many different navigation paths can be used and not long ago we had a look at the 7 commonly used patterns and typical use cases. You can quickly create these navigation patterns with Pidoco. Today, we’ll take a look at the overflow menu.

The overflow menu is best used to stow away a large number of additional options or menu entries that are not often used but still necessary. For the navigation in mobile apps with very little space that’s a good way to keep the screen clear. Usually, this navigation pattern is found in a navigation bar at the top of the screen and is connected to a hamburger menu. To open the menu, just tap on the icon.

And here’s how it goes …

 

1. The project setup

To visualize that navigation pattern, I created a mobile app that contains a navigation bar at the top of the screen which includes an overflow menu. The app offers different movie genres you can access via the start page with a tap on the colored rectangle. Additionally, you can select the movie genres on any screen via an overflow menu. If you’re curious, here’s a preview of my finished project called “Watch it!”.

1.1. Creating the start page

To build the app, we need multiple layers and pages. For my project I added 1 page that serves as the start page. With a click on “+ New layer”, I created a layer that contains the overview of the available movie genres. Here I added differently colored rectangles and icons representing one movie genre and activated the layer (Here called: “Watch it! – content”). You can link these elements later after you created the overflow menu. It’ll work the same way.

Creating the start page of the mobile app

 

1.2. Creating the navigation bar

Having built the start page, we continue with our navigation bar. To do so, we create a new layer. The navigation bar will be located at the top of each page and contains the name of the app and the icon which is connected to the overflow menu. Here I used the icon with three lines and added it to the left.

Building the elements of the navigation bar including the icons for the overflow menu.

 

2. The overflow menu
2.1. Building the basic structure

In total 6 different movie genres are available and a tap on the icon in the overflow menu directs to the respective content. That’s why we need one layer for each category. So we click on “+ New Layer” again, add stencils and activate the layer. Here I added some text and an image placeholder as well as a red triangle to make it look like a playable video.

Adding content to the layer

Hint: Save time by multiplying that layer and only change details like the headline etc. for each layer. Just go to the Project view and select “Clone element” from the context menu.

 

2.2. Creating the overflow menu

To build our overflow menu, we create a new layer by hitting the “+ New layer” button in the layers panel and it opens where we add the content of the menu. Here: I added the same 6 icons representing each movie genre.

Adding an icon for each movie genre to the overflow menu.

 

2.3. Adding interactions

Having built all the layers, we go on adding interactions and start with the first entry of the overflow menu. A tap on an icon displays the respective content of the selected movie genre. So we use the following interaction pairing: When the user clicks/taps then show page and we select our start page as it serves as our app basis. Then we add another reaction and use change layer visibility, select the layer to be displayed (Here I started with the first entry “Action”.) and set the visibility to “show”. Since we can jump between the entries of the overflow menu, all the other layers that contain a different movie genre as well as the layer showing the overview (here: “Watch it! – content”) and the overflow menu itself need to be invisible. That’s why we add more reactions and use “change layer visibility” for each one of them and set the visibility to “Hide”.

Making the overflow menu interactive using multiple reactions.

Hint: Open the interactions panel in the right sidebar, highlight all elements of your overflow menu, and then click on “Apply these interactions to the selection”. Then you only have to change the visibility of the layer that is associated with each menu entry.

Copying the same interactions to multiple elements.

Copying the same interactions to multiple elements.

There’s also the option to close the overflow menu without selecting a movie genre. To realize that we add an action area to the right of the overflow menu and span it across the remaining screen width. Then, we add the user action “clicks/taps” and the system reaction “change layer visibility”, select the layer that contains the overflow menu and set the visibility to “Hide”.

Making the overflow menu disappear without a selection.

 

2.4. Connecting the overflow menu with the navigation bar

Finally, we connect the overflow menu with the hamburger icon of the navigation bar which is displayed at the top of each screen. A tap on the icon makes the menu appear or disappear. That’s why we open the interaction dialog for that icon, select a tap action, use “change layer visibility” and select the layer that contains the overflow menu. But this time we set the visibility to “Toggle” so it will be shown or hidden with only one tap.

Access and leave the overflow menu with only one tap.

 

3. Simulation

Voilà! To test your overflow menu, just open the Pidoco app on your mobile device (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 the your mobile app that includes an overflow menu.

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… work with multiple reactions. Part 2: Mobile apps

Recently, we launched the first part of the series on working with multiple reactions and together created an online store with an automatic carousel and an adjustable shopping cart. This time, we’ll build a mobile app and make the most out of limited screenspace while still creating impressive prototypes. In Pidoco that magic happens with the use of extended interactions.

 

1. The project setup

Let’s have a look at today’s example: a mobile app that lets you click through images, like them and create a favorite list. To give you a little inspiration, here’s what my finished project looks like. The app called “Live there!” includes a tab panel with several images of rentable houses on the start page. Those images can be liked, and additional information is displayed with a tap on “Show more”. Reservations can be requested and a click on the heart icon adds the selected house to the favorites list. All the liked images are listed on the page “Favorites” and of course can be edited and removed from there again. A small overlay on that page gives additional information simulating a feature update and disappears after a few seconds again.

And here is how it goes …

 

2. Building the app frame

We start with the basic structure of the app by adding the content to the start page that is supposed to be sticky. Here I used a status bar at the top, added a navigation bar from the pre-designed templates and added some text and a few icons.

Adding static content to the start page

Hint: We’ll need several pages for the app – one for each navigation bar entry, one for the calendar and one for each real estate image that will be displayed with a click on “Show more”. The quickest way is to duplicate the page in the Project View.

 

3. Use case: Like images with a double tap

Goal: Double tap on the image of the real estate to like it, and the white heart turns red.
Ingredients: 5 layers are needed: one layer for the image panel itself and four layers to switch the like status for the images. Each image needs one layer for the status “liked” and one layer for the status “unliked”.

Step 1: Creating likeable images

Having built our app basis, we now create the image panel on the first layer with a click on “+ New layer” and then add two image stencils to it – one for the image on the left, one for the image on the right. We can combine the two images in one layer. As the panel with the first two images has to be displayed by default, we check that layer (here called “Image 1+2”) in the layers panel.

Next, we need a second layer to add the “unliked” state of the left image. Here I used a heart icon without fill color and placed it at the upper right corner of the image. As this is the default setting of the image, we activate that layer in the layer panel.

Creating the layer for the unliked content

Finally, we add the third layer to show the “liked” state of the image. You can copy the content from the previously created layer and only change the heart icon to a filled heart by clicking on “Change” in the context menu and selecting the right icon. Here I changed the color from black to red.

Creating the content for the liked images

On layer four and five, we do the same as in layer two and three for the right image.

 

Step 2: Adding interactions

All that’s left is adding interactions to the images to make the heart change from white to red after a double tap. Each image can have one of two states: liked or unliked. So we open the interaction dialog of the image (right click) and add the an interaction with the trigger “double clicks/taps” and the reaction “change layer visibility” for the layer “Image left – Like” with the visibility set to “Toggle”. This will make the heart with the red fill appear, but we also need to hide the empty heart, so we add a second “change layer visibility” reaction with visibility set to “Toggle”, but this time for the layer “Image left – Unlike”. Voilà – done.

Using double-tap actions to favorite the images

Repeat this step for all the other images that you want to add to the app.

 

4. Use case: Auto overlay

Goal: An overlay pops up after the page has been opened and disappears after 5 seconds.
Ingredients: Here only 1 layer and one page are necessary.

Once more, we need a new layer which contains the overlay that shows up for 5 seconds after the page “Favorites” has been loaded. Here: I added a grey rectangle and some red text. To make the overlay appear on page load, right click on the page to open the page context menu and in the “Interactions” tab add the following interaction: When the user “loads the page” then “change layer visibility”. To make the layer disappear automatically, we add add a second “change layer visibility” reaction, set the visibility to “hide” and specify a delay of 5 seconds.

Building an overlay and make it automatically disappear

 

5. Use case: Swipeable favorite list

Goal: With a swipe gesture, previously liked images can be removed from the favorites list.
Ingredients: In total, 4 layers and one page are needed – one to display all liked images, one to show a text when there are no favorites yet, one layer for one and another layer representing two favorite images on the list.

We start off creating the layer that contains the list with all possible entries of the “Favorites” list. Here I added a heart at the beginning of the row, an image and some explanatory text. The entries can be removed from the top to the bottom with only one swipe gesture. For that swipe gesture we add an action area covering the area in which the swiping is intended (e.g. the space at the right side between the image and the frame). Then we add a “swipes” interaction to the action area with the direction “left” and a “change layer visibility” reaction for the current layer with the visibility set to “hide”. But we need another reaction, because the next layer that contains 3 instead of 2 favorites needs to be displayed at the same time. So we add another “change layer visibility” reaction, select the layer with 2 items and set the visibility to “show”.

Adding a swipe gesture for removing an element from the favorites list

Repeat that step for each entry of your favorites list.

 

That’s it! You just finished the last part of the mobile app.

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… work with multiple reactions. Part 1: Online store

Sometimes, we need to simulate use cases where one single action by the user triggers multiple reactions. For instance, a click on the “Play” button of a song within a music application on your computer or mobile device not only plays the music but also gives a visual feedback by displaying e.g. the album cover. This can easily be modelled in Pidoco using the “Extended Interactions” feature.

 

1. The basics

In Pidoco interactions consist of one user action (the trigger) and one or several system reactions. Interactions can be attached to pages, stencils and of course to layers and can vary depending on where you use them.

To add interactions, just open the context menu of an element, select the “Interactions” tab and click “New interaction”. Now you can start defining how the system should react to specific user inputs.

Adding interactions to a page: define a user action and one or more system reactions

Hint: When working with interactions, it is helpful to structure the project first, i.e. create pages and layers upfront, and then come back to add interactions. This makes linking content much easier.

 

2. The project setup

So much for the theory. Now let’s have a look at an example: the online shop and to give you a little inspiration in advance, here’s what my finished project of the online store looks like. It also includes a complete checkout process for the purchase of article 1 as well as for the purchase of two articles and includes a “Success” page, too. All those pages, especially the redirections, contain multiple reactions and are based on the below mentioned interaction pairings.

And here is how it goes …

To visualize the following two use cases, I prototyped a simple online shop that includes a carousel showcasing several products, as well as a selection of articles that can be added to the shopping cart. Both are displayed on the start page (titled “Online store”), the cart being accessible via the header. Below is a map of the prototype:

Screenflow of the final version of my online shop.

 

3. Use Case “Carousel”

Goal: The carousel automatically starts after accessing the page for the first time, then runs through several product slides. The slides change every 2 seconds.

Ingredients: The carousel consists of three layers, each representing one product slide on the main page.

 

Step 1: Building the first slide

The first page in our project serves as the basis of our store. We now create the first of our three slides by clicking on “+ New layer” in the interaction panel. Then we add the content, in this case an image placeholder and some text. Now that we’ve finished the first slide of the carousel, just copy the content of slide 1, create a new layer and paste it there to create slide 2. Repeat for slide 3. (Hint: If you want to you can also add two arrows to go back and forth. If you decide to do so, don’t forget to make them interactive like the carousel.)

Adding the content of the carousel

Step 2: Making the carousel interactive

Since the carousel behavior is tied to the page being loaded, we attach the interaction to that page with a right click on the page to open the context menu and add an interaction. Select “When the user loads the page” as the trigger and “then change layer visibility” as the reaction, choose the layer with the first slide and set the visibility of slide 1 to “show”. To make the carousel cycle through several slides one after another, we need to add additional reactions and use delays (2 seconds) to space them out over time. So we click on “Add reaction” at the bottom of the Interaction dialog. We change the visibility of the layer again, but this time we select “Hide” and add a delay of 2 seconds. At the same, slide 2 needs to be displayed. So we add another reaction and set the visibility to “show” and add the delay of 2 seconds. Repeat for slide 3.

Adding multiple system reactions to create an automatically starting carousel.

That’s it! The first part of our web store is already built!

 

4. Use case “Cart”

Goal: Adjust the status of the shopping cart independently of the current page (e.g. to continue shopping after adding an article to the cart).

Ingredients: Based on the main page, the online shop consists of one page per product, one page for each completed purchase and one layer to depict each shopping cart status. In my project I used:

    – 3 pages, one for each article and its description,
    – 2 pages, one for each completed purchase, and
    – 3 layers for the cart icon on the top right of the page including the different cart states (empty cart or 1 article, 2 articles).

Adding content to the first product page.


 

Step 1: Making the “Buy” button interactive

Let’s assume we have designed a product page (called “Article 1”) with a “Buy” button that, when clicked, should bring up a confirmation page and change the state of the shopping cart. To model this behavior, we can add the following interaction to the button: For the trigger, select “When the user clicks/taps” and add the following three reactions:

  • “then show page” to display the confirmation page informing the user that the article has been added to the cart
  • “then change layer visibility” with visibility set to “hide” to let the layer with the status “empty cart” disappear
  • “then change layer visibility” with visibility set to “show” in order to make the layer with the new cart status “cart – 1 article” appear.

Making the “Buy” button interactive and adjusting the quantity of the cart.

 

Step 2: Adding the “Continue purchase” link

Now let’s jump to the confirmation page, which should offer an option to return to the article overview to continue shopping. To model this behavior, we can use a similar reaction: a click/tap trigger should be combined with a show page reaction to display the start page as well as two change layer visibility reactions to display the correct cart status (1 or 2 articles) and hide any other cart status layers.

Making the “Continue purchase” link interactive to display the product overview with the correct amount of products in your cart


 

That’s it! You just finished the last part of your online store.

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 … work with pre-designed components

Recently, we added a lot of new elements to the stencil palette, which can save you precious time: The new elements are pre-designed arrangements of existing stencils that serve as building blocks for your prototypes and are ready to use out-of-the-box. Instead of starting from scratch, you can build your screens from those components to jump-start your project. The new components range from simple navigation patterns such as toolbars, navigation bars or menus to full screen templates, e.g. for login or profile pages.

Templates are now part of the stencil palette.

New pre-designed components help jump-start your project

 

1. Adding components

The new elements work just like normal stencils and can be found in a new section of the stencil palette: Just drag them onto the canvas to start designing. Looking for a special element? Just type a keyword to filter the list. You can also navigate the library using the arrow keys and add components by hitting “Enter”.

Quickly find and add templates to the screen

Quickly find and add components to the canvas

 

2. Customizing components

The components consist of several stencils each, but are not grouped, so you can edit them right away after positioning them on the canvas.

Modify every template by editing the single elements

All components can be easily modified after positioning

 

3. Reusing components

Hint: You can turn any component into a masters to save it for later use. This is particularly useful when you have customized a component and want to re-use it in the same or a different project. To do so, simply open the context menu and click on “Convert elements to master”.

 

That’s it! You have successfully used your first pre-designed components! Do you need help or are missing some “templates” in the list? Then drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

New Release: Speeding Up Your Prototyping

Brand new elements

Hooray! We’ve been thinking about adding this feature for a while now – and here it finally is: With our December release we are adding a new section to the stencil palette which will contain a large selection of new elements to give you a head start on your projects.

Instead of beginning your projects from scratch, you can browse the new palette section to find exactly the right building blocks you need to get your prototype off the ground in no time. The building blocks consist of groups of stencils that can serve as a starting point for your designs, ranging from simple navigation patterns (e.g. toolbars, tab bars, menus) and various types of forms to full screen templates (e.g. login page, search results page, profile page).

New: Add pre-designed templates to your project

New: Use our pre-designed building blocks to jump-start your project

You can’t find what you are looking for? No problem! Send an email to support@pidoco.com and we will try to add it.

 

Custom Stencils now are Masters

Did you know that you can turn any stencil or group of stencils into a re-usable asset that can be managed and edited in one location? Imagine you have just built the perfect login form and want to re-use this form across various screens in your project. You could copy and paste it every time, but if the form changes, you would have to touch every screen again. Why not create a master form that you can re-use on various screens, and any change you make to the master will update all the screens automatically? This feature – thus far known as “Custom stencils” to Pidoco users – will be renamed to “Masters” and be available for the new templates as well. So you can pick any template, edit it to suit your specific needs, then turn it into a master that you can update across the entire project with one simple action. Learn more about masters…

Renamed: Custom stencils are now Masters

 

New toolbar design – more canvas space

While we were at it, we also redesigned an important part of Pidoco – the toolbar. We took out some fluff, made it simpler, and in the process freed up a lot of space for you to work more efficiently. With the gain in canvas space, you can expect to be even faster with your prototyping! Try it out…

Re-designed: the new slim and simple toolbar

Re-designed: More space for your designs with the new toolbar

 

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