a blog on prototyping by pidoco°

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.

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.

 

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”).

 

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.

 

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”.

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”)

 

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”).

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!