Top 4 Basic Mobile UX Interactions
And how to create them using ProtoPie
Modern mobile apps are highly interactive digital experiences. When we design mobile apps, we no longer can rely on static mockups merely because they won’t convey the essential part of the mobile experience — interactions.
Interactions help bring our prototypes to life in a way that comes very close to the actual end product that we design for.
ProtoPie is a tool that allows designers to create complex animated effects without a single line of code. The beauty of ProtoPie is that it’s totally up to you how sophisticated your interactions should be.
Here are four basic interactions that you can create with ProtoPie:
1. Hamburger Menu
Hamburger menu is one of the most frequently used patterns in mobile apps. While UX experts still arguing whether the hamburger menu is good or bad in terms of user experience, mobile designers rely on this pattern when they have to provide more than five navigation options.
Let’s create the hamburger menu using ProtoPie. Download the assets for Hamburger menu from this page and open them in ProtoPie.
First, we need to add a trigger Tap for hamburger_btn. When users tap on the button they should see a navigation drawer. We can create this effect using Move.
It’s vital to make the interaction feel smooth for users. That’s why we need to play with easing. Let’s change the duration to 0.3.
We also need to specify opacity so the layer underneath the navigation drawer (it should be evident for users that it is inactive).
Now let’s preview our work. Tap the Preview button at the top right corner of ProtoPie to see the interaction.
While the interaction works fine, it’s evident that we’ve missed one important part — the user cannot go back to the home screen. Let’s fix this problem. We need to specify another trigger Tap. When the user sees a navigation drawer and taps on area next to it, the menu should be hidden. In term of our prototype, the menu should be moved to its initial position. Let’s use Position Move To with X equal to ‘-260.’
We also should change the opacity back to 0 for the rectangle.
Let’s recheck our interaction by tapping Preview.
2. Scrolling
Scrolling is a basic gesture for mobile users. It’s hard to imagine any mobile app that doesn’t have it. So it’s good to know how to bake this interaction into a prototype.
With ProtoPie, it literally takes less than a minute to create scrolling effect for your content.
Let’s download the ready-made assets and open them in ProtoPie.
ProtoPie has a special container for scrolling which is called Scrolling Container. Let’s add one to our prototype.
Resize the container so it will take all the active part of the viewport.
Now we need to select the elements that will belong to container. In our case, all list elements from our list should be in the container.
That’s it. We’ve created the scrolling effect. Let’s see how the interaction looks.
3. Input Real Data
The better you prototype resembles a real product, the more realistic feedback you’ll get during usability testing sessions. All too often mobile prototypes contain generic content and pre-defined user input. When users see dummy text and predetermined data, it becomes evident for them that they’re dealing with a prototype, not a real product. But with ProtoPie it’s easy to change the user expectations.
ProtoPie has an element called Input layer that allows you to input real data using a device keyboard. Using this feature, you can give the users an opportunity to add real data in the prototype.
Let’s assume that we have a simple input form that asks users to enter their name and when the user fills in her name using a native keyboard and taps ‘Submit,’ the app shows a personalized greeting (i.e. “Hi, John”)
ProtoPie has a special type of element — Input — which triggers the native keyboard.
Here is how it works
So basically, all we need to do is to take the value of this input and use it as a variable for our next screen. We will use the text field name to display the user name. As you can see on the image below, this element is in the container that has opacity set to 0 (it’s will stay invisible until the user fills in her name and press Submit)
We need to add a trigger Return with the Text element. We will select Formula option in the Content section for the Text element. For this formula, we will use a text property of the input field (we need to get the name from the input1).
Finally, we need to hide the input container and show the result container instead. It’s easy to achieve that by using Opacity. Actually, we will need two effects — one Opacity for the input container and another one for result container.
Let’s see how our interaction works. When we fill in the name and press the Return key, we will have the following greeting screen.
4. Visual Feedback on User Actions
If you want to create a great user experience for your mobile users, it’s vital to make interactions with UI elements predictable for them. For instance, if we design a button, we should make it look like a button even though it’s just a layer of pixels behind the layer of glass. The visual feedback plays a crucial role in human-computer interaction. Without clear visual feedback, users can wonder whether the system receives their requests in the first place.
Using ProtoPie, it becomes much easier to utilize the properties of physical objects. For example, we can introduce a ripple effect for buttons to give the user a better sense of the tapping.
Let’s download and open the assets required for creating a ripple effect.
First, we need to select and make it as small as possible (let’s set the size equal to 0).
Now we need to specify a Tap trigger for the button container. We will add Scale effect for the tap trigger and connect it with the ripple object.
Here is what we’ve got so far.
Now we need to add another Scale effect to return to the original place. Let’s also set a duration — for the first Scale effect, we need set duration to 1 second, while for the second we need to set duration to 0.
We also need two Opacity responses — first opacity should be set to 50 while the second should be set to 0. Notice the timings for each effect that we’ve used.
Let’s see how our effect looks like in Preview mode.
Finally, let’s change the color of our ripple layer to white.
And here is what will happen when the user taps on the button.
Test your interactions directly on a mobile device
It’s one thing when you see the interactions on a large desktop screen and another when you see it on a tiny mobile screen. Testing on mobile devices allows designers to track many things that can go unnoticed when you work solely on a desktop.
ProtoPie Player allows designers to run and test their prototypes made in ProtoPie on iOS and Android devices. And it’s fairly easy to transfer the prototype to mobile. All you need to do to connect your smart device is to scan the QR code using your ProtoPie mobile app.
When you click Play in ProtoPie Studio, the prototype will be transmitted to ProtoPie Player.
Conclusion
Motion and animation play a vital role in the visual language that mobile apps use to communicate with users. This language should be evident for anyone who is involved in the product design process. And it’s impossible to speak this language without using interactive prototypes. The process of creating interactive prototypes should be highly efficient. That’s why it’s vital to select the tools that allow you to piece interactions together to create realistic prototypes for any digital product in no time.
